feat: Publish in Microsoft Edge Add-ons.

.github/CONTRIBUTING.md

@@ -39,11 +39,14 @@ suivantes :
 
 - `npm run start:chromium` : déployer l'extension dans Chromium.
 - `npm run start:firefox` : déployer l'extension dans Firefox.
+<!-- Le déploiement ne fonctionne pas avec la version Snap de Firefox.
+     https://github.com/mozilla/web-ext/issues/1696 -->
 
 Vous pouvez aussi installer manuellement l'extension :
 
-- [_Temporary installation in Firefox_](https://extensionworkshop.com/documentation/develop/temporary-installation-in-firefox/).
 - [_Load an unpacked extension_ in Chrome](https://developer.chrome.com/docs/extensions/get-started/tutorial/hello-world#load-unpacked).
+- [_Sideload an extension to install and test it locally_ in Edge](https://learn.microsoft.com/en-us/microsoft-edge/extensions-chromium/getting-started/extension-sideloading)
+- [_Temporary installation in Firefox_](https://extensionworkshop.com/documentation/develop/temporary-installation-in-firefox/).
 
 ## Qualité
 
@@ -80,3 +83,8 @@ d'intégration.
 
 Le message de commit doit suivre la spécification des
 [Commits Conventionnels](https://www.conventionalcommits.org/en/v1.0.0/).
+
+## Traduction
+
+Les traductions dans les différentes langues se font avec
+[Weblate](https://hosted.weblate.org/engage/castkodi/).

.script/build.js

@@ -20,10 +20,11 @@ const BUILD_DIR = "build";
 /**
  * Extrait le texte d'un document HTML.
  *
- * @param {string} html Le document HTML.
+ * @param {string} html  Le document HTML.
+ * @param {string} store Le nom de la boutique (`"chrome"` ou `"edge"`).
  * @returns {string} Le texte extrait.
  */
-const plain = function (html) {
+const plain = function (html, store) {
     let enabled = true;
 
     /**
@@ -37,7 +38,7 @@ const plain = function (html) {
             case "#comment":
                 switch (node.nodeValue?.trim()) {
                     case "disable chrome":
-                        enabled = false;
+                        enabled = "chrome" !== store;
                         break;
                     case "enable chrome":
                         enabled = true;
@@ -46,6 +47,14 @@ const plain = function (html) {
                     // Ignorer les autres commentaires.
                 }
                 return "";
+            case "LI":
+                return enabled
+                    ? "- " +
+                          Array.from(node.childNodes)
+                              .map(extract)
+                              .join("")
+                              .trim()
+                    : "";
             case "#text":
                 return enabled ? (node?.nodeValue ?? "") : "";
             default:
@@ -61,27 +70,31 @@ const plain = function (html) {
 // Supprimer l'éventuel répertoire de la précédente construction.
 await fs.rm(BUILD_DIR, { force: true, recursive: true });
 
-// Créer l'archive zippée de l'extension.
+// Créer l'archive zippée de l'extension. Pour la boutique de Edge, il faut
+// modifier le manifeste, car la boutique ne supporte pas les propriétés
+// `background.script` et `key`.
+// https://github.com/microsoft/MicrosoftEdge-Extensions/issues/136
 await webExt.cmd.build({
     sourceDir: SOURCE_DIR,
     artifactsDir: BUILD_DIR,
     overwriteDest: true,
 });
 
 // Déplacer et générer les fichiers pour les textes dans les boutiques.
-for (const store of ["chrome", "firefox"]) {
+for (const store of ["chrome", "edge", "firefox"]) {
     const buildStoreDir = path.join(BUILD_DIR, store);
     await fs.mkdir(buildStoreDir, { recursive: true });
 
     for (const lang of await fs.readdir(LOCALES_DIR)) {
-        if ("chrome" === store) {
+        if ("chrome" === store || "edge" === store) {
             await fs.writeFile(
                 path.join(buildStoreDir, `description-${lang}.txt`),
                 plain(
                     await fs.readFile(
                         path.join(LOCALES_DIR, lang, "description.tpl"),
                         "utf8",
                     ),
+                    store,
                 ),
             );
         } else if ("firefox" === store) {

README.md

@@ -5,14 +5,17 @@
 <!-- markdownlint-disable-next-line no-inline-html-->
 <img src="src/img/icon.svg" align="right" alt="">
 
+<!-- Ne pas afficher de badge pour le Microsoft Edge Add-ons, car Shields.io ne
+     le supporte pas. https://github.com/badges/shields/issues/4690 -->
+
 [![chrome][img-chrome]][link-chrome] [![firefox][img-firefox]][link-firefox]
 [![build][img-build]][link-build] [![coverage][img-coverage]][link-coverage]
 
 > WebExtension pour diffuser des vidéos et des musiques sur Kodi.
 
 ## Description
 
-Cast Kodi est une extension pour les navigateurs Chromium (Chrome, Edge) et
+Cast Kodi est une extension pour les navigateurs Chrome, Chromium, Edge et
 Firefox. Elle permet de diffuser des vidéos et des musiques sur **Kodi** :
 
 - liens directs : _avi_, _mkv_, _mp3_, _flac_… et torrent / magnet ;
@@ -51,8 +54,8 @@ lecture…
 
 ## Installation
 
-L'extension est disponible sur [**Chrome Web Store**][link-chrome] (pour
-Chromium, Chrome et Edge) ainsi que sur [**Firefox Browser
+L'extension est disponible sur le [**Chrome Web Store**][link-chrome], le
+[**Microsoft Edge Add-ons**][link-edge] et le [**Firefox Browser
 Add-ons**][link-firefox].
 
 Pour connecter l'extension à Kodi, vous devez _Autoriser le contrôle à distance
@@ -77,23 +80,10 @@ Pour certains sites Internet, les add-ons suivants sont nécessaires dans Kodi :
 [VTM GO](https://kodi.tv/addons/omega/plugin.video.vtm.go/),
 [YouTube](https://kodi.tv/addons/omega/plugin.video.youtube/).
 
-## Contribuer
-
-[Node.js et npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)
-sont nécessaires pour contribuer au projet. Après avoir
-[forké et cloné](https://docs.github.com/pull-requests/collaborating-with-pull-requests/working-with-forks/fork-a-repo)
-Cast Kodi, exécutez `npm ci` pour télécharger les dépendances. Voici d'autres
-commandes utiles :
-
-- `npm run lint` : faire une analyse statique des fichiers ;
-- `npm test` : lancer les tests (avec [Mocha](https://mochajs.org/)) ;
-- `npm run start:chromium` : déployer l'extension dans Chromium ;
-- `npm run start:firefox` : déployer l'extension dans Firefox.
-<!-- Le déploiement ne fonctionne pas avec la version Snap de Firefox.
-     https://github.com/mozilla/web-ext/issues/1696 -->
+## Contribution
 
-Les traductions dans les différentes langues se font avec
-[Weblate](https://hosted.weblate.org/engage/castkodi/).
+Si vous souhaitez contribuer à Cast Kodi, consultez le fichier
+[CONTRIBUTING.md](.github/CONTRIBUTING.md) pour avoir plus d'informations.
 
 [img-chrome]:
   https://img.shields.io/chrome-web-store/stars/gojlijimdlgjlliggedhakpefimkedmb?label=chrome&logo=googlechrome&logoColor=whitesmoke
@@ -105,6 +95,8 @@ Les traductions dans les différentes langues se font avec
   https://img.shields.io/endpoint?label=coverage&url=https%3A%2F%2Fbadge-api.stryker-mutator.io%2Fgithub.jparrowsec.cn%2Fregseb%2Fcastkodi%2Fmain
 [link-chrome]:
   https://chromewebstore.google.com/detail/cast-kodi/gojlijimdlgjlliggedhakpefimkedmb
+[link-edge]:
+  https://microsoftedge.microsoft.com/addons/detail/cast-kodi/jaodccnfhodnbdibkmlhogdephdlkkgh
 [link-firefox]: https://addons.mozilla.org/addon/castkodi/
 [link-build]:
   https://github.com/regseb/castkodi/actions/workflows/ci.yml?query=branch%3Amain

src/core/storage.js

@@ -5,24 +5,34 @@
  */
 
 /**
- * La liste des contextes par défaut pour chaque navigateur. Sous Chromium, les
- * contextes `bookmark` et `tab` n'existent pas. Et dans Firefox le contexte
- * `bookmark` n'est pas activé par défaut, car il nécessite la permission
- * `bookmarks`. https://issues.chromium.org/41378677
- * https://issues.chromium.org/40246822
+ * La liste des contextes par défaut. Le contexte `"bookmark"` n'est pas activé
+ * par défaut, car il nécessite la permission `"bookmarks"`.
  *
- * @type {Object<string, string[]>}
+ * @type {string[]}
+ * @see https://developer.mozilla.org/Add-ons/WebExtensions/API/menus/ContextType
  */
-const DEFAULT_MENU_CONTEXTS = {
-    Chromium: ["audio", "frame", "link", "page", "selection", "video"],
-    Firefox: ["audio", "frame", "link", "page", "selection", "tab", "video"],
-};
+const DEFAULT_MENU_CONTEXTS = [
+    "audio",
+    "frame",
+    "link",
+    "page",
+    "selection",
+    "tab",
+    "video",
+];
 
 /**
  * Initialise la configuration.
  */
 export const initialize = async function () {
-    const { name } = await browser.runtime.getBrowserInfo();
+    // Enlever les contextes non-disponibles dans certains navigateurs ("tab"
+    // dans Chromium). https://issues.chromium.org/40246822
+    const contextTypes = new Set(
+        Object.values(browser.contextMenus.ContextType),
+    );
+    const menuContexts = DEFAULT_MENU_CONTEXTS.filter((c) =>
+        contextTypes.has(c),
+    );
 
     await browser.storage.local.set({
         "config-version": 6,
@@ -33,7 +43,7 @@ export const initialize = async function () {
         "popup-clipboard": false,
         "popup-wheel": "normal",
         "menu-actions": ["send", "insert", "add"],
-        "menu-contexts": DEFAULT_MENU_CONTEXTS[name],
+        "menu-contexts": menuContexts,
         "youtube-playlist": "playlist",
         "youtube-order": "default",
     });
@@ -128,9 +138,9 @@ export const remove = async function (permissions) {
 
     if (permissions.includes("bookmarks")) {
         const config = await browser.storage.local.get(["menu-contexts"]);
-        const contexts = config["menu-contexts"];
+        const menuContexts = config["menu-contexts"];
         await browser.storage.local.set({
-            "menu-contexts": contexts.filter((c) => "bookmark" !== c),
+            "menu-contexts": menuContexts.filter((c) => "bookmark" !== c),
         });
     }
 };

src/design/style.css

@@ -156,23 +156,10 @@ input[type="range"] {
     background-color: transparent;
     border: 0;
     cursor: pointer;
-    margin: 0;
-}
-input[type="range"]:not([orient="vertical"]) {
     height: 32px;
+    margin: 0;
     padding: 5px 0;
 }
-.Firefox input[type="range"][orient="vertical"] {
-    padding: 0 5px;
-    width: 32px;
-}
-.Chromium input[type="range"][orient="vertical"] {
-    height: 32px;
-    /* Les sliders verticaux ne peuvent pas être stylisés dans Chromium, il faut
-       donc les faire pivoter manuellement pour ensuite pouvoir les styliser.
-       https://issues.chromium.org/41088035 */
-    transform: rotate(270deg);
-}
 input[type="range"]:focus:not(:disabled) {
     outline: none;
 }
@@ -183,9 +170,15 @@ input[type="range"]::-webkit-slider-thumb {
     border-radius: 50%;
     filter: drop-shadow(0 0 2px rgba(0 0 0 / 65%));
     height: 12px;
+    width: 12px;
+}
+input[type="range"]:not(.vertical)::-webkit-slider-thumb {
     /* Remonter le curseur pour qu'il soit centré. */
     margin-top: -3.5px;
-    width: 12px;
+}
+input[type="range"].vertical::-webkit-slider-thumb {
+    /* Décaler à gauche le curseur pour qu'il soit centré. */
+    margin-left: -3px;
 }
 input[type="range"]::-moz-range-thumb {
     background-color: var(--range-thumb-background-color);
@@ -194,44 +187,46 @@ input[type="range"]::-moz-range-thumb {
     height: 12px;
     width: 12px;
 }
-
 input[type="range"]:hover:not(:disabled)::-webkit-slider-thumb {
     outline: 6px solid var(--button-hover-background-color);
 }
 input[type="range"]:hover:not(:disabled)::-moz-range-thumb {
     outline: 6px solid var(--button-hover-background-color);
 }
+
 input[type="range"]::-moz-range-progress {
     background-color: var(--range-progress-background-color);
-    border-radius: 2.5px;
+    border-radius: 5px;
 }
 input[type="range"].primary::-moz-range-progress {
     background-color: var(--range-primary-progress-background-color);
 }
 input[type="range"]::-webkit-slider-runnable-track {
     background-color: var(--range-track-background-color);
-    border-radius: 2.5px;
+    border-radius: 5px;
 }
 input[type="range"]::-moz-range-track {
     background-color: var(--range-track-background-color);
-    border-radius: 2.5px;
+    border-radius: 5px;
 }
 input[type="range"]:hover:not(:disabled)::-webkit-slider-runnable-track {
     background-color: var(--range-hover-track-background-color);
 }
 input[type="range"]:hover:not(:disabled)::-moz-range-track {
     background-color: var(--range-hover-track-background-color);
 }
-input[type="range"]:not([orient="vertical"])::-webkit-slider-runnable-track,
-input[type="range"][orient="vertical"]::-webkit-slider-runnable-track {
+input[type="range"]:not(.vertical)::-webkit-slider-runnable-track {
     height: 5px;
 }
-input[type="range"]:not([orient="vertical"])::-moz-range-progress,
-input[type="range"]:not([orient="vertical"])::-moz-range-track {
+input[type="range"].vertical::-webkit-slider-runnable-track {
+    width: 5px;
+}
+input[type="range"]:not(.vertical)::-moz-range-progress,
+input[type="range"]:not(.vertical)::-moz-range-track {
     height: 5px;
 }
-input[type="range"][orient="vertical"]::-moz-range-progress,
-input[type="range"][orient="vertical"]::-moz-range-track {
+input[type="range"].vertical::-moz-range-progress,
+input[type="range"].vertical::-moz-range-track {
     width: 5px;
 }
 input[type="range"]:disabled {

src/options/index.html

@@ -190,10 +190,7 @@ <h3 data-l10n-textcontent="menu-title"></h3>
         <label data-l10n-textcontent="menu-contexts-audio">
           <input name="audio" type="checkbox" /> {}
         </label>
-        <label
-          data-l10n-textcontent="menu-contexts-bookmark"
-          data-supported-browser="Firefox"
-        >
+        <label data-l10n-textcontent="menu-contexts-bookmark">
           <input name="bookmark" type="checkbox" data-permissions="bookmarks" />
           {}
         </label>
@@ -209,10 +206,7 @@ <h3 data-l10n-textcontent="menu-title"></h3>
         <label data-l10n-textcontent="menu-contexts-selection">
           <input name="selection" type="checkbox" /> {}
         </label>
-        <label
-          data-l10n-textcontent="menu-contexts-tab"
-          data-supported-browser="Firefox"
-        >
+        <label data-l10n-textcontent="menu-contexts-tab">
           <input name="tab" type="checkbox" /> {}
         </label>
         <label data-l10n-textcontent="menu-contexts-video">