From 39f2114f9797eb51994966c6bb8ff1814c9a4da8 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:36:08 +0100 Subject: unslug fr: move --- .../implement_a_settings_page/index.html | 219 +++++++++++++++++++++ 1 file changed, 219 insertions(+) create mode 100644 files/fr/mozilla/add-ons/webextensions/implement_a_settings_page/index.html (limited to 'files/fr/mozilla/add-ons/webextensions/implement_a_settings_page/index.html') diff --git a/files/fr/mozilla/add-ons/webextensions/implement_a_settings_page/index.html b/files/fr/mozilla/add-ons/webextensions/implement_a_settings_page/index.html new file mode 100644 index 0000000000..9635785e5d --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/implement_a_settings_page/index.html @@ -0,0 +1,219 @@ +--- +title: Ajouter une page de paramètres +slug: Mozilla/Add-ons/WebExtensions/Ajouter_une_page_de_paramètres +tags: + - Paramètres + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Implement_a_settings_page +--- +
{{AddonSidebar}}
+ +

Une page de paramètres donne aux utilisateurs la possiblité de voir et de changer les paramètres (parfois aussi appelée "préférences" ou "options") de l'extension.

+ +

Avec les WebExtensions, les paramètres sont généralement stockés en utilisant l'API storage. L'ajout d'une page de paramètres se fait en trois étapes :

+ + + +
+

Vous pouvez aussi ouvrir cette page automatiquement en utilisant la fonction runtime.openOptionsPage().

+
+ +

Une WebExtension simple

+ +

Tout d'abord, nous allons écrire une extension qui ajoute une bordure bleue à chaque page visitée par l'utilisateur.

+ +

Créez un nouveau dossier nommé "settings", dans lequel vous créez un fichier appelé "manifest.json" ayant pour contenu :

+ +
{
+
+  "manifest_version": 2,
+  "name": "Settings example",
+  "version": "1.0",
+
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["borderify.js"]
+    }
+  ]
+
+}
+ +

Les instructions de l'extension charge au navigateur un script de contenu nommé "borderify.js" dans chaque page que l'utilisateur visite.

+ +

Ensuite, créez un fichier nomé "borderify.js" dans le dossier "paramètres", et remplissez le comme suit :

+ +
document.body.style.border = "10px solid blue";
+ +

Ça ajoute une bordure bleue à la page.

+ +

Maintenant, installez la WebExtension et testez la — ouvrez la page que vous voulez :

+ +

{{EmbedYouTube("E-WUhihF8fw")}}

+ +

Ajouter des paramètres

+ +

Maintenant, créez une page de paramètres pour autoriser l'utilisateur à définire la couleur de la bordure.

+ +

D'abord, mettez à jour le contenu de "manifest.json" avec ceci :

+ +
{
+
+  "manifest_version": 2,
+  "name": "Settings example",
+  "version": "1.0",
+
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["borderify.js"]
+    }
+  ],
+
+  "options_ui": {
+    "page": "options.html"
+  },
+
+  "permissions": ["storage"],
+
+  "applications": {
+    "gecko": {
+      "id": "addon@example.com",
+    }
+  }
+
+}
+
+ +

Vous avez ajoutez trois nouvelles clés :

+ + + +

Ensuite, puisque vous avez promis de fournir "options.html", créons-le. Créez un fichier avec ce nom dans le répertoire "settings", et donnez-lui le contenu suivant :

+ +
<!DOCTYPE html>
+
+<html>
+  <head>
+    <meta charset="utf-8">
+  </head>
+
+  <body>
+
+    <form>
+        <label>Border color<input type="text" id="color" ></label>
+        <button type="submit">Save</button>
+    </form>
+
+    <script src="options.js"></script>
+
+  </body>
+
+</html>
+
+ +

Cela définit un {{htmlelement("form")}} avec un label de texte {{htmlelement("input")}} et un {{htmlelement("button")}} de type "submit". Ça inclus également un script appelé "options.js".

+ +

Créez "options.js", lui-aussi dans le dossier "settings", et remplissez le comme ceci :

+ +
function saveOptions(e) {
+  e.preventDefault();
+  browser.storage.sync.set({
+    color: document.querySelector("#color").value
+  });
+}
+
+function restoreOptions() {
+
+  function setCurrentChoice(result) {
+    document.querySelector("#color").value = result.color || "blue";
+  }
+
+  function onError(error) {
+    console.log(`Error: ${error}`);
+  }
+
+  var getting = browser.storage.sync.get("color");
+  getting.then(setCurrentChoice, onError);
+}
+
+document.addEventListener("DOMContentLoaded", restoreOptions);
+document.querySelector("form").addEventListener("submit", saveOptions);
+
+ +

Cela fait deux choses :

+ + + +

Vous pouvez stocker les valeurs des paramètres dans le stockage local à la place si vous pensez que le stockage local est préférable pour votre extension.

+ +
+

Notez que l'implémentation de storage.sync dans Firefox repose sur l'ID du module complémentaire. Si vous utilisez storage.sync,  vous devez définir un ID pour votre extension à l'aide de la clé manifest.json des applications  comme indiqué dans l'exemple de manifeste ci-dessus.

+
+ +

Finalement, mettez à jour "borderify.js" pour lire la couleur de la bordure depuis le stockage :

+ +
+

A cause d'un bug dans browser.storage.local.get() dans Firefox pour les versions précédant la 52, le code qui suit ne fonctionnera pas. Pour le faire fonctionner pour les versions de Firefox avant la 52, les deux occurrences d'item.color dans onGot() doivent être changer pour item[0].color.

+
+ +
 function onError(error) {
+  console.log(`Error: ${error}`);
+}
+
+function onGot(item) {
+  var color = "blue";
+  if (item.color) {
+    color = item.color;
+  }
+  document.body.style.border = "10px solid " + color;
+}
+
+var getting = browser.storage.sync.get("color");
+getting.then(onGot, onError);
+
+ +

A ce moment, l'extension complète devrait ressembler à ceci :

+ +
settings/
+    borderify.js
+    manifest.json
+    options.html
+    options.js
+ +

Maintenant :

+ + + +

Dans Firefox vous pouvez accéder à la page des paramètres en visitant about:addons et en cliquant le bouton "Preferences" situé à coté de l'extension.

+ +

{{EmbedYouTube("ECt9cbWh1qs")}}

+ +

Pour aller plus loin

+ + -- cgit v1.2.3-54-g00ecf