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 --- .../add_a_button_to_the_toolbar/index.html | 224 +++++++ .../index.html | 224 ------- .../index.html" | 219 ------ .../add-ons_for_desktop_apps/index.html | 30 - .../add-ons_in_the_enterprise/index.html | 166 ----- .../alternative_distribution_options/index.html | 68 -- .../sideloading_add-ons/index.html | 134 ---- .../api/browsersettings/proxyconfig/index.html | 73 -- .../api/devtools.inspectedwindow/eval/index.html | 219 ------ .../api/devtools.inspectedwindow/index.html | 82 --- .../api/devtools.inspectedwindow/reload/index.html | 100 --- .../api/devtools.inspectedwindow/tabid/index.html | 85 --- .../api/devtools.network/gethar/index.html | 88 --- .../webextensions/api/devtools.network/index.html | 75 --- .../api/devtools.network/onnavigated/index.html | 103 --- .../devtools.network/onrequestfinished/index.html | 112 ---- .../api/devtools.panels/create/index.html | 110 --- .../api/devtools.panels/elements/index.html | 29 - .../elementspanel/createsidebarpane/index.html | 107 --- .../api/devtools.panels/elementspanel/index.html | 73 -- .../elementspanel/onselectionchanged/index.html | 74 -- .../api/devtools.panels/extensionpanel/index.html | 93 --- .../extensionsidebarpane/index.html | 89 --- .../extensionsidebarpane/onhidden/index.html | 80 --- .../extensionsidebarpane/onshown/index.html | 78 --- .../extensionsidebarpane/setexpression/index.html | 106 --- .../extensionsidebarpane/setobject/index.html | 104 --- .../extensionsidebarpane/setpage/index.html | 89 --- .../webextensions/api/devtools.panels/index.html | 103 --- .../api/devtools.panels/onthemechanged/index.html | 72 -- .../api/devtools.panels/themename/index.html | 39 -- .../api/devtools/inspectedwindow/eval/index.html | 219 ++++++ .../api/devtools/inspectedwindow/index.html | 82 +++ .../api/devtools/inspectedwindow/reload/index.html | 100 +++ .../api/devtools/inspectedwindow/tabid/index.html | 85 +++ .../api/devtools/network/gethar/index.html | 88 +++ .../webextensions/api/devtools/network/index.html | 75 +++ .../api/devtools/network/onnavigated/index.html | 103 +++ .../devtools/network/onrequestfinished/index.html | 112 ++++ .../api/devtools/panels/create/index.html | 110 +++ .../api/devtools/panels/elements/index.html | 29 + .../elementspanel/createsidebarpane/index.html | 107 +++ .../api/devtools/panels/elementspanel/index.html | 73 ++ .../elementspanel/onselectionchanged/index.html | 74 ++ .../api/devtools/panels/extensionpanel/index.html | 93 +++ .../panels/extensionsidebarpane/index.html | 89 +++ .../extensionsidebarpane/onhidden/index.html | 80 +++ .../panels/extensionsidebarpane/onshown/index.html | 78 +++ .../extensionsidebarpane/setexpression/index.html | 106 +++ .../extensionsidebarpane/setobject/index.html | 104 +++ .../panels/extensionsidebarpane/setpage/index.html | 89 +++ .../webextensions/api/devtools/panels/index.html | 103 +++ .../api/devtools/panels/onthemechanged/index.html | 72 ++ .../api/devtools/panels/themename/index.html | 39 ++ .../api/menus/menus.overridecontext()/index.html | 62 -- .../webextensions/api/proxy/onerror/index.html | 60 ++ .../api/proxy/onproxyerror/index.html | 60 -- .../webextensions/api/proxy/settings/index.html | 73 ++ .../api/userscripts/apiscript/index.html | 43 -- .../registereduserscript.unregister()/index.html | 49 -- .../travailler_avec_userscripts/index.html | 115 ---- .../working_with_userscripts/index.html | 115 ++++ .../index.html | 31 - .../browser_support_for_javascript_apis/index.html | 24 + .../build_a_cross_browser_extension/index.html | 252 +++++++ .../index.html | 218 ------ .../chrome_incompatibilities/index.html | 179 +++++ .../comparaison_avec_le_sdk_add-on/index.html | 746 --------------------- .../index.html" | 24 - .../webextensions/compte_developpeurs/index.html | 26 - .../index.html | 252 ------- .../debogage_(avant_firefox_50)/index.html | 236 ------- .../debugging_(before_firefox_50)/index.html | 236 +++++++ .../demander_les_bonnes_permissions/index.html | 367 ---------- .../demandes_de_permission/index.html | 134 ---- .../index.html | 77 +++ .../index.html | 77 --- .../add-ons/webextensions/examples/index.html | 33 + .../add-ons/webextensions/exemples/index.html | 33 - .../index.html | 190 ------ .../extending_the_developer_tools/index.html | 166 +++++ .../index.html | 166 ----- .../implement_a_settings_page/index.html | 219 ++++++ .../incompatibilit\303\251s_chrome/index.html" | 179 ----- .../index.html | 103 --- .../index.html | 56 -- .../interact_with_the_clipboard/index.html | 189 ++++++ .../interagir_avec_le_presse_papier/index.html | 189 ------ .../intercept_http_requests/index.html | 160 +++++ .../intercepter_requ\303\252tes_http/index.html" | 160 ----- .../manifest.json/arriere-plan/index.html | 93 --- .../webextensions/manifest.json/auteur/index.html | 44 -- .../webextensions/manifest.json/author/index.html | 44 ++ .../manifest.json/background/index.html | 93 +++ .../manifest.json/theme_experiment/index.html | 194 ++++++ .../manifest.json/theme_experimentation/index.html | 194 ------ .../webextensions/manifests_native/index.html | 309 --------- .../webextensions/native_manifests/index.html | 309 +++++++++ .../index.html | 258 ------- .../index.html | 85 --- .../publishing_your_webextension/index.html | 58 -- .../webextensions/que_faire_ensuite/index.html | 72 -- .../index.html | 44 -- .../index.html | 103 +++ .../securite_bonne_pratique/index.html | 63 -- .../sharing_objects_with_page_scripts/index.html | 258 +++++++ .../index.html | 124 ---- .../index.html | 169 ----- .../travailler_avec_l_api_cookies/index.html | 254 ------- .../travailler_avec_l_api_tabs/index.html | 628 ----------------- .../user_interface/barres_laterales/index.html | 61 -- .../user_interface/context_menu_items/index.html | 59 ++ .../user_interface/devtools_panels/index.html | 74 ++ .../elements_menu_contextuel/index.html | 59 -- .../user_interface/extension_pages/index.html | 77 +++ .../index.html | 153 ----- .../user_interface/pages_web_incluses/index.html | 77 --- .../user_interface/panneaux_devtools/index.html | 74 -- .../user_interface/sidebars/index.html | 61 ++ .../add-ons/webextensions/what_next_/index.html | 72 ++ .../work_with_contextual_identities/index.html | 169 +++++ .../work_with_the_cookies_api/index.html | 254 +++++++ .../working_with_the_tabs_api/index.html | 628 +++++++++++++++++ 123 files changed, 6512 insertions(+), 9359 deletions(-) create mode 100644 files/fr/mozilla/add-ons/webextensions/add_a_button_to_the_toolbar/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/ajouter_un_bouton_a_la_barre_d_outils/index.html delete mode 100644 "files/fr/mozilla/add-ons/webextensions/ajouter_une_page_de_param\303\250tres/index.html" delete mode 100644 files/fr/mozilla/add-ons/webextensions/alternative_distribution_options/add-ons_for_desktop_apps/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/alternative_distribution_options/add-ons_in_the_enterprise/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/alternative_distribution_options/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/alternative_distribution_options/sideloading_add-ons/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/browsersettings/proxyconfig/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/eval/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/reload/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/tabid/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.network/gethar/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.network/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.network/onnavigated/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.network/onrequestfinished/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.panels/create/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.panels/elements/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.panels/elementspanel/createsidebarpane/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.panels/elementspanel/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.panels/elementspanel/onselectionchanged/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionpanel/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/onhidden/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/onshown/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/setexpression/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/setobject/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/setpage/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.panels/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.panels/onthemechanged/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.panels/themename/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/eval/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/reload/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/tabid/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/network/gethar/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/network/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/network/onnavigated/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/network/onrequestfinished/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/panels/create/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/panels/elements/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/panels/elementspanel/createsidebarpane/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/panels/elementspanel/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/panels/elementspanel/onselectionchanged/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionpanel/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionsidebarpane/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionsidebarpane/onhidden/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionsidebarpane/onshown/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionsidebarpane/setexpression/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionsidebarpane/setobject/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionsidebarpane/setpage/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/panels/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/panels/onthemechanged/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/panels/themename/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/menus/menus.overridecontext()/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/proxy/onerror/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/proxy/onproxyerror/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/proxy/settings/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/userscripts/apiscript/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/userscripts/registereduserscript/registereduserscript.unregister()/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/userscripts/travailler_avec_userscripts/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/userscripts/working_with_userscripts/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/bonnes_pratiques_pour_la_mise_a_jour_de_votre_extension/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/build_a_cross_browser_extension/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/choisissez_une_version_firefox_pour_le_developpement_extensions_web/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/chrome_incompatibilities/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/comparaison_avec_le_sdk_add-on/index.html delete mode 100644 "files/fr/mozilla/add-ons/webextensions/compatibilit\303\251_navigateurs_api_javascript/index.html" delete mode 100644 files/fr/mozilla/add-ons/webextensions/compte_developpeurs/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/construction_extension_cross_browser/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/debogage_(avant_firefox_50)/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/debugging_(before_firefox_50)/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/demander_les_bonnes_permissions/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/demandes_de_permission/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/differences_between_api_implementations/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/differences_entre_les_implementations_api/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/examples/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/exemples/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/experience_utilisateur_bonnes_pratiques/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/extending_the_developer_tools/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/extension_des_outils_de_developpement/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/implement_a_settings_page/index.html delete mode 100644 "files/fr/mozilla/add-ons/webextensions/incompatibilit\303\251s_chrome/index.html" delete mode 100644 files/fr/mozilla/add-ons/webextensions/inserer_en_toute_securite_du_contenu_externe_dans_une_page/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/installation_temporaire_dans_firefox/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/interact_with_the_clipboard/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/interagir_avec_le_presse_papier/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/intercept_http_requests/index.html delete mode 100644 "files/fr/mozilla/add-ons/webextensions/intercepter_requ\303\252tes_http/index.html" delete mode 100644 files/fr/mozilla/add-ons/webextensions/manifest.json/arriere-plan/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/manifest.json/auteur/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/manifest.json/author/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/manifest.json/background/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/manifest.json/theme_experiment/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/manifest.json/theme_experimentation/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/manifests_native/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/native_manifests/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/partage_d_objets_avec_des_scripts_de_page/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/portage_d_une_extension_firefox_heritee/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/publishing_your_webextension/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/que_faire_ensuite/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/que_signifie_le_rejet_d_une_revision_pour_les_utilisateurs/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/safely_inserting_external_content_into_a_page/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/securite_bonne_pratique/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/sharing_objects_with_page_scripts/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/test_des_fonctionnalites_persistantes_et_de_redemarrage/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/travailler_avec_des_identites_contextuelles/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/travailler_avec_l_api_cookies/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/travailler_avec_l_api_tabs/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/user_interface/barres_laterales/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/user_interface/context_menu_items/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/user_interface/devtools_panels/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/user_interface/elements_menu_contextuel/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/user_interface/extension_pages/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/user_interface/lignes_directrices_en_matiere_accessibilite/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/user_interface/pages_web_incluses/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/user_interface/panneaux_devtools/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/user_interface/sidebars/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/what_next_/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/work_with_contextual_identities/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/work_with_the_cookies_api/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/working_with_the_tabs_api/index.html (limited to 'files/fr/mozilla/add-ons') diff --git a/files/fr/mozilla/add-ons/webextensions/add_a_button_to_the_toolbar/index.html b/files/fr/mozilla/add-ons/webextensions/add_a_button_to_the_toolbar/index.html new file mode 100644 index 0000000000..5472013ca7 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/add_a_button_to_the_toolbar/index.html @@ -0,0 +1,224 @@ +--- +title: Ajouter un bouton à la barre d'outils +slug: Mozilla/Add-ons/WebExtensions/Ajouter_un_bouton_a_la_barre_d_outils +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar +--- +
{{AddonSidebar}}
+ +

Les boutons de la barre d’outils sont l’un des principaux composants UI disponibles aux WebExtensions. Les boutons de la barre d’outils sont présents dans la barre d’outils principale du navigateur et contiennent une icône. Lorsque l’utilisateur clique sur l’icône, une des deux choses peut arriver :

+ + + +

Dans WebExtensions, ces types de boutons s’appellent « actions du navigateur » et sont configurés de la manière suivante :

+ + + +

Un bouton simple

+ +

Dans cette section, nous créerons une WebExtension qui ajoute un bouton à la barre d’outils. Lorsque l’utilisateur clique sur le bouton, nous ouvrirons https ://developer.mozilla.org dans un nouveau onglet.

+ +

Tout d’abord, créez un nouveau dossier, « bouton », et créez un fichier appelé « manifest.json » à l’intérieur avec le contenu suivant :

+ +
{
+
+  "description": "Demonstrating toolbar buttons",
+  "manifest_version": 2,
+  "name": "button-demo",
+  "version": "1.0",
+
+  "background": {
+    "scripts": ["background.js"]
+  },
+
+  "browser_action": {
+    "default_icon": {
+      "16": "icons/page-16.png",
+      "32": "icons/page-32.png"
+    }
+  }
+
+}
+ +

Cela spécifie que nous aurons un script en arrière‐plan nommé « background.js », et une action du navigateur (bouton) et une action du navigateur (bouton) dont les icônes vont vivre dans le répertoire « icônes ».

+ +
+
Ces icônes proviennent des bits ! icônes créées parRecep Kütük.
+
+ +

Ensuite, créez un dossier « icons » dans le dossier « buttons » et enregistrez les deux icônes ci‐dessous :

+ + + +
+ +

Nous avons deux icônes que nous pouvons utiliser, la plus grande dans les écrans haute densité. Le navigateur prend en charge la sélection de la meilleure icône pour l’affichage courrant.

+ +

Ensuite, créez « background.js » dans le répertoire racine de l’add‐on, et donnez‐lui le contenu suivant :

+ +
function openPage() {
+  browser.tabs.create({
+    url: "https://developer.mozilla.org"
+  });
+}
+
+browser.browserAction.onClicked.addListener(openPage);
+ +

Cela écoute l’événement de clic de l’action du navigateur ; Lorsque l’événement se déclenche, la fonction openPage() est exécuté, ce qui ouvre la page spécifiée à l’aide de l’API des onglets.

+ +

A ce point, l’extension complète devrait ressembler à ceci :

+ +
button/
+    icons/
+        page-16.png
+        page-32.png
+    background.js
+    manifest.json
+ +

Maintenant installer la WebExtension et cliquez sur le bouton :

+ +

{{EmbedYouTube("kwwTowgT‐Ys")}}

+ +

Ajout d’une fenêtre contextuelle

+ +

Essayons d’ajouter une fenêtre contextuelle au bouton. Remplacez manifest.json par ceci :

+ +
{
+
+  "description": "Demonstrating toolbar buttons",
+  "manifest_version": 2,
+  "name": "button-demo",
+  "version": "1.0",
+
+  "browser_action": {
+    "browser_style": true,
+    "default_popup": "popup/choose_page.html",
+    "default_icon": {
+      "16": "icons/page-16.png",
+      "32": "icons/page-32.png"
+    }
+  }
+
+}
+ +

Nous avons fait trois changements par rapport à l’original :

+ + + +

Donc maintenant nous devons créer cette fenêtre contextuelle. Créez un répertoire appelé « popup » puis créez un fichier appelé « choose_page.html » à l’intérieur. Donnez‐lui les contenus suivants :

+ +
<!DOCTYPE html>
+
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="choose_page.css"/>
+  </head>
+
+<body>
+  <div class="page-choice">developer.mozilla.org</div>
+  <div class="page-choice">support.mozilla.org</div>
+  <div class="page-choice">addons.mozilla.org</div>
+  <script src="choose_page.js"></script>
+</body>
+
+</html>
+ +

Vous pouvez voir qu’il s’agit d’une page HTML normale contenant trois éléments {{htmlelement ("div")}}, chacun avec le nom d’un site Mozilla à l’intérieur. Il comprend également un fichier CSS et un fichier JavaScript, que nous ajouterons ensuite.

+ +

Créez un fichier appelé « choose_page.css » dans le répertoire « popup » et donnez‐lui ce contenu :

+ +
html, body {
+  width: 300px;
+}
+
+.page-choice {
+  width: 100%;
+  padding: 4px;
+  font-size: 1.5em;
+  text-align: center;
+  cursor: pointer;
+}
+
+.page-choice:hover {
+  background-color: #CFF2F2;
+}
+ +

C'est juste un peu d’habillage pour notre popup.

+ +

Ensuite, créez un fichier « choose_page.js » dans le répertoire « popup » et donnez‐le à ces contenus :

+ +
document.addEventListener("click", function(e) {
+  if (!e.target.classList.contains("page-choice")) {
+    return;
+  }
+
+  var chosenPage = "https://" + e.target.textContent;
+  browser.tabs.create({
+    url: chosenPage
+  });
+
+});
+ +

Dans notre JavaScript, nous écoutons les clics sur les choix contextuels. Nous vérifions d’abord si le clic a atterri sur l’un des choix de la page ; Sinon, nous ne faisons rien d’autre. Si le clic atterrit sur un choix de page, nous construisons une URL à partir de celui‐ci, et ouvrons un nouvel onglet contenant la page correspondante. Notez que nous pouvons utiliser les API WebExtension dans les scripts contextuels, tout comme nous le pouvons dans les scripts en arrière‐plan.

+ +

La structure finale de l’add‐on devrait ressembler à ceci :

+ +
button/
+    icons/
+        page-16.png
+        page-32.png
+    popup/
+        choose_page.css
+        choose_page.html
+        choose_page.js
+    manifest.json
+ +

Maintenant, rechargez l’extension, cliquez de nouveau sur le bouton et essayez de cliquer sur les choix dans la fenêtre contextuelle :

+ +

{{EmbedYouTube("QPEh1L1xq0Y")}}

+ +

Actions de page

+ +

Les actions de page sont comme les actions du navigateur, mais qui ne sont pertinentes que pour les pages particulières, plutôt que sur le navigateur dans son ensemble.

+ +

Alors que les actions du navigateur sont toujours affichées, les actions de la page ne sont affichées que dans les onglets où elles sont pertinentes. Les boutons d’action de la page sont affichés dans la barre d’URL, plutôt que dans la barre d’outils du navigateur.

+ +

Pour en savoir plus

+ + diff --git a/files/fr/mozilla/add-ons/webextensions/ajouter_un_bouton_a_la_barre_d_outils/index.html b/files/fr/mozilla/add-ons/webextensions/ajouter_un_bouton_a_la_barre_d_outils/index.html deleted file mode 100644 index 5472013ca7..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/ajouter_un_bouton_a_la_barre_d_outils/index.html +++ /dev/null @@ -1,224 +0,0 @@ ---- -title: Ajouter un bouton à la barre d'outils -slug: Mozilla/Add-ons/WebExtensions/Ajouter_un_bouton_a_la_barre_d_outils -tags: - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar ---- -
{{AddonSidebar}}
- -

Les boutons de la barre d’outils sont l’un des principaux composants UI disponibles aux WebExtensions. Les boutons de la barre d’outils sont présents dans la barre d’outils principale du navigateur et contiennent une icône. Lorsque l’utilisateur clique sur l’icône, une des deux choses peut arriver :

- - - -

Dans WebExtensions, ces types de boutons s’appellent « actions du navigateur » et sont configurés de la manière suivante :

- - - -

Un bouton simple

- -

Dans cette section, nous créerons une WebExtension qui ajoute un bouton à la barre d’outils. Lorsque l’utilisateur clique sur le bouton, nous ouvrirons https ://developer.mozilla.org dans un nouveau onglet.

- -

Tout d’abord, créez un nouveau dossier, « bouton », et créez un fichier appelé « manifest.json » à l’intérieur avec le contenu suivant :

- -
{
-
-  "description": "Demonstrating toolbar buttons",
-  "manifest_version": 2,
-  "name": "button-demo",
-  "version": "1.0",
-
-  "background": {
-    "scripts": ["background.js"]
-  },
-
-  "browser_action": {
-    "default_icon": {
-      "16": "icons/page-16.png",
-      "32": "icons/page-32.png"
-    }
-  }
-
-}
- -

Cela spécifie que nous aurons un script en arrière‐plan nommé « background.js », et une action du navigateur (bouton) et une action du navigateur (bouton) dont les icônes vont vivre dans le répertoire « icônes ».

- -
-
Ces icônes proviennent des bits ! icônes créées parRecep Kütük.
-
- -

Ensuite, créez un dossier « icons » dans le dossier « buttons » et enregistrez les deux icônes ci‐dessous :

- - - -
- -

Nous avons deux icônes que nous pouvons utiliser, la plus grande dans les écrans haute densité. Le navigateur prend en charge la sélection de la meilleure icône pour l’affichage courrant.

- -

Ensuite, créez « background.js » dans le répertoire racine de l’add‐on, et donnez‐lui le contenu suivant :

- -
function openPage() {
-  browser.tabs.create({
-    url: "https://developer.mozilla.org"
-  });
-}
-
-browser.browserAction.onClicked.addListener(openPage);
- -

Cela écoute l’événement de clic de l’action du navigateur ; Lorsque l’événement se déclenche, la fonction openPage() est exécuté, ce qui ouvre la page spécifiée à l’aide de l’API des onglets.

- -

A ce point, l’extension complète devrait ressembler à ceci :

- -
button/
-    icons/
-        page-16.png
-        page-32.png
-    background.js
-    manifest.json
- -

Maintenant installer la WebExtension et cliquez sur le bouton :

- -

{{EmbedYouTube("kwwTowgT‐Ys")}}

- -

Ajout d’une fenêtre contextuelle

- -

Essayons d’ajouter une fenêtre contextuelle au bouton. Remplacez manifest.json par ceci :

- -
{
-
-  "description": "Demonstrating toolbar buttons",
-  "manifest_version": 2,
-  "name": "button-demo",
-  "version": "1.0",
-
-  "browser_action": {
-    "browser_style": true,
-    "default_popup": "popup/choose_page.html",
-    "default_icon": {
-      "16": "icons/page-16.png",
-      "32": "icons/page-32.png"
-    }
-  }
-
-}
- -

Nous avons fait trois changements par rapport à l’original :

- - - -

Donc maintenant nous devons créer cette fenêtre contextuelle. Créez un répertoire appelé « popup » puis créez un fichier appelé « choose_page.html » à l’intérieur. Donnez‐lui les contenus suivants :

- -
<!DOCTYPE html>
-
-<html>
-  <head>
-    <meta charset="utf-8">
-    <link rel="stylesheet" href="choose_page.css"/>
-  </head>
-
-<body>
-  <div class="page-choice">developer.mozilla.org</div>
-  <div class="page-choice">support.mozilla.org</div>
-  <div class="page-choice">addons.mozilla.org</div>
-  <script src="choose_page.js"></script>
-</body>
-
-</html>
- -

Vous pouvez voir qu’il s’agit d’une page HTML normale contenant trois éléments {{htmlelement ("div")}}, chacun avec le nom d’un site Mozilla à l’intérieur. Il comprend également un fichier CSS et un fichier JavaScript, que nous ajouterons ensuite.

- -

Créez un fichier appelé « choose_page.css » dans le répertoire « popup » et donnez‐lui ce contenu :

- -
html, body {
-  width: 300px;
-}
-
-.page-choice {
-  width: 100%;
-  padding: 4px;
-  font-size: 1.5em;
-  text-align: center;
-  cursor: pointer;
-}
-
-.page-choice:hover {
-  background-color: #CFF2F2;
-}
- -

C'est juste un peu d’habillage pour notre popup.

- -

Ensuite, créez un fichier « choose_page.js » dans le répertoire « popup » et donnez‐le à ces contenus :

- -
document.addEventListener("click", function(e) {
-  if (!e.target.classList.contains("page-choice")) {
-    return;
-  }
-
-  var chosenPage = "https://" + e.target.textContent;
-  browser.tabs.create({
-    url: chosenPage
-  });
-
-});
- -

Dans notre JavaScript, nous écoutons les clics sur les choix contextuels. Nous vérifions d’abord si le clic a atterri sur l’un des choix de la page ; Sinon, nous ne faisons rien d’autre. Si le clic atterrit sur un choix de page, nous construisons une URL à partir de celui‐ci, et ouvrons un nouvel onglet contenant la page correspondante. Notez que nous pouvons utiliser les API WebExtension dans les scripts contextuels, tout comme nous le pouvons dans les scripts en arrière‐plan.

- -

La structure finale de l’add‐on devrait ressembler à ceci :

- -
button/
-    icons/
-        page-16.png
-        page-32.png
-    popup/
-        choose_page.css
-        choose_page.html
-        choose_page.js
-    manifest.json
- -

Maintenant, rechargez l’extension, cliquez de nouveau sur le bouton et essayez de cliquer sur les choix dans la fenêtre contextuelle :

- -

{{EmbedYouTube("QPEh1L1xq0Y")}}

- -

Actions de page

- -

Les actions de page sont comme les actions du navigateur, mais qui ne sont pertinentes que pour les pages particulières, plutôt que sur le navigateur dans son ensemble.

- -

Alors que les actions du navigateur sont toujours affichées, les actions de la page ne sont affichées que dans les onglets où elles sont pertinentes. Les boutons d’action de la page sont affichés dans la barre d’URL, plutôt que dans la barre d’outils du navigateur.

- -

Pour en savoir plus

- - diff --git "a/files/fr/mozilla/add-ons/webextensions/ajouter_une_page_de_param\303\250tres/index.html" "b/files/fr/mozilla/add-ons/webextensions/ajouter_une_page_de_param\303\250tres/index.html" deleted file mode 100644 index 9635785e5d..0000000000 --- "a/files/fr/mozilla/add-ons/webextensions/ajouter_une_page_de_param\303\250tres/index.html" +++ /dev/null @@ -1,219 +0,0 @@ ---- -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

- - diff --git a/files/fr/mozilla/add-ons/webextensions/alternative_distribution_options/add-ons_for_desktop_apps/index.html b/files/fr/mozilla/add-ons/webextensions/alternative_distribution_options/add-ons_for_desktop_apps/index.html deleted file mode 100644 index 270308150e..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/alternative_distribution_options/add-ons_for_desktop_apps/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: Extensions pour applications de bureau -slug: >- - Mozilla/Add-ons/WebExtensions/Alternative_distribution_options/Add-ons_for_desktop_apps -tags: - - Add-ons - - Desktop - - Guide - - Installation - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/Distribution_options/Add-ons_for_desktop_apps ---- -
{{AddonSidebar()}}
- -

Si vous avez développé un module complémentaire à une application de bureau, vous pouvez installer le module complémentaire de plusieurs façons :

- - - -

Parmi ces options, il est recommandé d'indiquer à l'utilisateur d'installer à partir d'AMO en proposant un lien. Les raisons de recommander cette option sont les suivantes :

- - - -

En revanche, le chargement de fichiers à l'aide des dossiers d'extension standard ou du registre Windows nécessite que votre application de bureau installe toute mise à jour du module complémentaire. En outre, en fonction des paramètres par défaut de Firefox, le processus d'installation présentera des avertissements à l'utilisateur (message interstitiel) ou installera le module en mode silencieux, mais le désactivera. Le pire des cas est que l'installation échouera silencieusement si Firefox est configuré pour désactiver l'installation automatique. Vous pouvez mettre à jour la configuration de Firefox pour éviter ces problèmes, mais ce n'est pas recommandé.

diff --git a/files/fr/mozilla/add-ons/webextensions/alternative_distribution_options/add-ons_in_the_enterprise/index.html b/files/fr/mozilla/add-ons/webextensions/alternative_distribution_options/add-ons_in_the_enterprise/index.html deleted file mode 100644 index 4e5d88d0d7..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/alternative_distribution_options/add-ons_in_the_enterprise/index.html +++ /dev/null @@ -1,166 +0,0 @@ ---- -title: Les Add-ons en entreprise -slug: >- - Mozilla/Add-ons/WebExtensions/Alternative_distribution_options/Add-ons_in_the_enterprise -tags: - - Add-ons - - Guide - - Installation -translation_of: Mozilla/Add-ons/WebExtensions/Distribution_options/Add-ons_in_the_enterprise ---- -
{{AddonSidebar()}}
- -

En tant qu'administrateur informatique d'entreprise, vous souhaiterez peut-être installer des modules complémentaires automatiquement pour vos utilisateurs. Cette page présente les options.

- -

Extensions signées et non signées

- -

Depuis Firefox 43, tous les modules complémentaires doivent être signés avant de pouvoir être installés dans les versions standard ou bêta de Firefox. Les modules non signés peuvent être installés dans les versions Developer Edition, Nightly, et ESR de firefox, après avoir basculé la préférence xpinstall.signatures.required dans about:config.

- -

Si vous souhaitez installer des modules complémentaires non signés, le déploiement d'une version ESR de Firefox est l'approche recommandée. Une fois cela fait, les add-ons non signés peuvent être installés en utilisant n'importe quelle méthode, y compris l'ouverture du fichier add-on à partir d'une page Web.

- -

L'approche alternative et recommandée, est d'utiliser l'option pour les add-ons non listés sur addons.mozilla.org (AMO). Cette option signifie que vous pouvez obtenir un module complémentaire signé sans qu'il soit répertorié dans le répertoire des modules complémentaires publics. Cette fonctionnalité fournit un module signé immédiatement. Ce module signé peut ensuite être installé à partir d'une page Web derrière le pare-feu, ou installé en utilisant l'une des options décrites ici.

- -

Chargement latéral

- -

Vous pouvez charger un module complémentaire à l'aide de l'un des dossiers d'extension standard, comme décrit dans Installation à l'aide de dossiers d'extension standard.

- -

Installation à l'aide du registre Windows

- -

Cette section explique comment installer des modules complémentaires dans Firefox en utilisant le registre Windows.

- -
Avant Firefox 62, il était possible de charger des extensions décompressées en faisant pointer la clé de registre Windows sur un répertoire contenant une extension non empaquetée. -

À partir de Firefox 62, cela n'est plus possible et la clé doit pointer vers un fichier XPI empaqueté, comme décrit dans cette section.

-
- -
-

Il est prudent de modifier les clés de registre pendant que Firefox est en cours d'exécution.

-
- -
    -
  1. Assurez-vous que le module complémentaire possède un ID complémentaire, en incluant ce qui suit dans son fichier manifest.json, en remplaçant your-add-on-name@your-domain.com with par un ID approprié pour votre module complémentaire : - - 
    "applications": {
-   "gecko": {
-     "id": "your-add-on-name@your-domain.com"
-   }
-  }
    - Un identifiant de style d'adresse e-mail est recommandé.
    2. -
  2. Signez votre module dans AMO en utilisant l'option non listée. Pour plus de détails, voir Signature et distribution de votre module complémentaire.
    3. -
  3. Téléchargez le fichier XPI signé et assurez-vous que le nom de fichier est l'ID du module plus l'extension .xpi.  Par exemple, c:/webext/borderify@example.com.xpi
    4. -
  4. Ouvrez Regedit et ajoutez les clés comme suit : -
      -
    • Ajoutez à tous les utilisateurs de l'ordinateur les clés de registre suivantes : - 
      HKEY_LOCAL_MACHINE\Software\Mozilla\Firefox\Extensions
      - -

      ou

      - - 
      HKEY_LOCAL_MACHINE\Software\Wow6432Node\Mozilla\Firefox\Extensions
      - -
      -

      HKEY_LOCAL_MACHINE\Software\Mozilla\Firefox\Extensions n'est pas disponible lors de l'exécution de Firefox 32 bits sur une machine 64 bits, vous ne pouvez installer que pour tous les utilisateurs utilisant la clé  Wow6432Node.

      -
      -
      • -
    • Pour l'utilisateur actuel, ajoutez à la clé de registre suivante : - 
      HKEY_CURRENT_USER\Software\Mozilla\Firefox\Extensions
      -
      • -
    -
    5. -
  5. Créez une nouvelle valeur de chaîne. Entrée de Registre dont le nom est identique à l'ID du module complémentaire, par exemple, borderify@example.com,et une valeur égale à l'emplacement où le module complémentaire est stocké, par exemple, c:/webext/borderify@example.com.xpi.
    6. -
  6. Redémarrez Firefox. Le module complémentaire est détecté, mais l'utilisateur peut se voir présenter un interstitiel ou doit activer le module complémentaire dans le module complémentaire avant de pouvoir l'utiliser. Voir les paramètres de Firefox.)
    7. -
- -

Si le même add-on apparaît sous HKEY_CURRENT_USER et HKEY_LOCAL_MACHINE, l'instance sous HKEY_CURRENT_USER sera utilisée. Si le même module complémentaire apparaît dans le répertoire de profil de l'utilisateur (par exemple, s'il l'a déjà installé manuellement), cette version aura la priorité sur toutes les instances trouvées dans le Registre.

- -

Pour supprimer un module installé à l'aide du registre Windows, supprimez simplement l'entrée du Registre. Après la suppression de l'entrée du registre, Firefox détectera le changement la prochaine fois qu'il sera lancé. Il est prudent de modifier les clés de registre pendant que Firefox est en cours d'exécution.

- -

Si vous installez en utilisant le registre de Windows, Firefox ne mettra pas automatiquement à jour votre module complémentaire. Vous devrez mettre au point le module complémentaire en utilisant n'importe quel processus d'installation externe à Firefox.

- -

Les paramètres de Firefox

- -

Deux paramètres affectent l'utilisation d'options d'installation alternatives. La préférence extensions.autoDisableScopes détermine si les modules complémentaires sont installés automatiquement ou après confirmation de l'utilisateur. La préférence extensions.enabledScopes est utilisée pour désactiver l'installation de la plupart des emplacements. En plus de ces options, la méthode de définition de ces préférences par programme est discutée.

- -

Contrôler l'installation automatique

- -

Les téléchargements standards de Firefox sont configurés pour que les sideloads utilisant le dossier extensions standard ou le registre Windows, ne s'installent pas automatiquement. Selon la version de Firefox :

- - - -

L'utilisation des installations désactivées interstitielles et silencieuses varie selon les versions de Firefox, par exemple, la version 54 utilise le message interstitiel..

- -

La disponibilité de l'installation automatique est contrôlée par la préférence et le comportement extensions.autoDisableScopes définis par les valeurs suivantes :

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ValeurInstallation du champ
1 (or '0b0001')Le profil de l'utilisateur actuel.
2 (or '0b0010')Tous les profils de l'utilisateur connecté
4 (or '0b0100')Installé et détenu par Firefox.
8 (or '0b1000')Installé pour tous les utilisateurs de l'ordinateur.
15 (or '0b1111')La combinaison de tous les champs d'application.
-
- -

Par défaut, extensions.autoDisableScopes est défini sur 15 afin que les installations automatiques soient désactivées à partir de tous les emplacements. Pour désactiver uniquement un sous-ensemble d'emplacements, définissez la préférence sur la somme des valeurs des emplacements que vous souhaitez désactiver. Par exemple, 3 désactive "Profil de l'utilisateur actuel" et "Tous les profils de l'utilisateur connecté".  La définition de la valeur sur 0 désactive cette fonctionnalité et signifie que tous les modules complémentaires seront installés sans confirmation de l'utilisateur.

- -

Désactivation des emplacements d'installation

- -

Dans certaines circonstances, vous pouvez souhaiter que Firefox ignore tout ou partie des emplacements d'installation supplémentaires répertoriés ci-dessus. Dans ce cas, utilisez la préférence extensions.enabledScopes. Par défaut, cette préférence n'est pas incluse dans les téléchargements standard de Firefox, il faudra donc l'ajouter. vous pouvez ajouter la préférence manuellement ou la faire par programmation en suivant les instructions de la section suivante.

- -
-

Il est impossible de désactiver le chargement de modules complémentaires à partir du répertoire de profil.

-
- -

Définir les préférences d'étendue par programme

- -

Utilisez la logique suivante pour définir les valeurs de extensions.autoDisableScopes et extensions.enabledScopes par programme pour vous assurer que les modules complémentaires sont installés automatiquement :

- -
    -
  1. Editez le fichier de configuration administratif.
    2. -
  2. Vérifiez la présence de lignes définissant les préférences  extensions.autoDisableScopes et/ou extensions.enabledScopes et remplacez-les / ajoutez-les si nécessaire.
    3. -
  3. Ces lignes de préférence doivent être utilisées comme ci-dessous, avec les valeurs de votre choix comme expliqué dans le haut de cette section : - 
    defaultPref("extensions.autoDisableScopes", 0);
-defaultPref("extensions.enabledScopes", 15);
-// Or use binary value like this
-defaultPref("extensions.enabledScopes", 0b1111);
    -
    4. -
- -
-

Selon cette page : (en date du 28 septembre 2012)
- “Vous ne pouvez pas définir cette préférence à distance en utilisant les fichiers autoconfig.”
- Ce qui vous recommande de définir uniquement ces préférences dans un fichier autoconfig local.
- Si cette information est erronée, ajustez ou supprimez cette note.

-
- -

Regroupement de modules complémentaires avec un Firefox personnalisé

- -

Vous pouvez regrouper des modules complémentaires dans un Firefox personnalisé, et ils seront installés automatiquement lorsque l'utilisateur démarre l'application pour la première fois. Voir Personnalisation de Firefox pour plus de détails.

diff --git a/files/fr/mozilla/add-ons/webextensions/alternative_distribution_options/index.html b/files/fr/mozilla/add-ons/webextensions/alternative_distribution_options/index.html deleted file mode 100644 index 1b45607060..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/alternative_distribution_options/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: Options de distribution -slug: Mozilla/Add-ons/WebExtensions/Alternative_distribution_options -tags: - - Add-ons - - Installation - - Landing - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/Distribution_options ---- -
{{AddonSidebar()}}
- -

Le processus standard de distribution et d'installation des extensions de navigateur se fait via Firefox en utilisant un fichier XPI signé obtenu à partir de addons.mozilla.org (AMO) (pour les add-ons listés) ou un téléchargement configuré par un développeur (pour les add-ons non listés).

- -

Nous examinons ici les exigences en matière de signature et les commentaires connexes, avant de discuter de la façon de choisir entre la distribution sur AMO ou la distribution d'une extension de navigateur vous-même. Nous examinons également les canaux disponibles sur AMO et répondons aux questions sur la propriété du code et les litiges.

- -

Signature de votre extension

- -

Les extensions de navigateur doivent être signées par Mozilla avant de pouvoir être installées dans les versions release et beta de Firefox. Les thèmes, et d'autres types d'ajouts tels que les dictionnaires d'orthographe, n'ont pas besoin d'être signés.

- -

Ce processus de signature se fait via addons.mozilla.org (AMO), que vous choisissiez de distribuer votre add-on via AMO ou de le faire vous-même.

- -

Les extensions non signées peuvent être installées dans les versions Developer Edition, Nightly, et ESR de Firefox, après avoir activé la préférence xpinstall.signatures.required dans  about:config.

- -

Mozilla signe les extensions de navigateur via le site Web de AMO. Il y a trois façons de soumettre votre extension pour signature :

- -
    -
  1. téléchargez votre add-on via le Developer Hub sur AMO.
    2. -
  2. utilisez l' API de signature addons.mozilla.org.
    3. -
  3. utilisez le signé web-ext.
    4. -
- -

Toutes les options de signature sont soumises à l'accord de distribution du module complémentaire Firefox.

- -

Si vous téléchargez votre extension via le centre de développement AMO, vous avez le choix entre l'inscription sur AMO ou l'auto-distribution. Si vous choisissez l'auto-distribution, à la fin du processus, vous téléchargez des copies signées de votre add-on.

- -

L'utilisation de l'API de signature ou du web-ext renvoie vos add-ons signés, sans qu'aucune liste de distribution ne soit créée sur AMO.

- -

Quelle que soit la méthode utilisée, tous les add-ons doivent passer une validation automatisée avant d'être signés. Ils peuvent également faire l'objet d'un examen manuel du code. Les critères d'examen appliqués aux prorogations se trouvent dans la polique complémentaire.

- -

Distribuer votre extension

- -

Vous n'êtes pas tenu d'inscrire ou de distribuer votre poste par l'entremise de l'AMO. Vous devrez décider si vous voulez distribuer et inscrire votre extension par l'entremise de l'AMO ou si vous voulez la distribuer vous-même. Voici quelques points à prendre en considération :

- - - -

Pour plus d'informations sur la façon de soumettre un add-on pour distribution sur AMO ou auto-distribution, voir Soumettre une extension.

- -

Autres options de distribution

- -

Ces méthodes peuvent ne pas convenir à tout le monde, par exemple, lorsqu'une extension de navigateur est fournie avec une application native ou lorsqu'une entreprise souhaite installer une extension pour toutes ses instances de Firefox. Cette section décrit les solutions de rechange.

- - diff --git a/files/fr/mozilla/add-ons/webextensions/alternative_distribution_options/sideloading_add-ons/index.html b/files/fr/mozilla/add-ons/webextensions/alternative_distribution_options/sideloading_add-ons/index.html deleted file mode 100644 index 2271640415..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/alternative_distribution_options/sideloading_add-ons/index.html +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: Sideloading add-ons -slug: >- - Mozilla/Add-ons/WebExtensions/Alternative_distribution_options/Sideloading_add-ons -tags: - - Guide - - Installation - - Sideloading - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/Distribution_options/Sideloading_add-ons ---- -
{{AddonSidebar()}}
- -

Vous souhaiterez peut-être envoyer un fichier XPI à votre utilisateur par un moyen autre qu'un téléchargement sur le Web, par exemple une distribution par e-mail d'une version bêta pour les tests utilisateur. Dans ce cas, il existe deux options pratiques pour installer le module complémentaire :

- - - -
Aucune mise à jour automatique ne sera effectuée pour les modules complémentaires installés à l'aide de ces méthodes. Vous devrez fournir un nouveau fichier XPI à votre utilisateur pour chaque mise à jour. Cependant, des vérifications de compatibilité automatiques sont toujours effectuées.
- -

Preparation de votre extension

- -

Indépendamment de la méthode de chargement latéral utilisée, vous devez préparer l'extension comme suit :

- -
    -
  1. Assurez-vous que le module complémentaire inclut un ID, en ajoutant ce qui suit à son fichier manifest.json, en remplaçant votre your-add-on-name@your-domain.com par un ID  approprié dans vote mode complémentaire : - - 
    "applications": {
-  "gecko": {
-    "id": "your-add-on-name@your-domain.com"
-  }
-}
-
    - Un identifiant de style d'adresse e-mail est recommandé.
    2. -
  2. Signez le module complémentaire dans addons.mozilla.org (AMO).  Selon la manière dont vous souhaitez rendre votre module complémentaire disponible, vous pouvez utiliser les options non répertoriées (si vous distribuez le module complémentaire uniquement) ou répertoriées. Pour plus de détails, voir Signature et distribution de votre module complémentaire.
    3. -
- -

Utilisation de l'option Installer le module à partir d'un fichier

- -

Pour utiliser Installer le module complémentaire à partir d'un fichier dans le gestionnaire de modules complémentaire, send the user the signed add-on with the following instructions:

- -
    -
  1. Enregistrez le fichier complémentaire à un emplacement approprié sur votre ordinateur.
    2. -
  2. Dans Firefox, ouvrir le menu Firefox Firefox browser menu button et cliquez sur Add-ons.
    3. -
  3. Dans les paramètres de cog, ouvrez Installer le module complémentaire à partir du fichier :
    - Add-on Manager utilities cog
    4. -
  4. Recherchez et ouvrez le fichier à partir de l'emplacement où il a été enregistré.
    5. -
  5. Lorsque vous y êtes invité, cliquez sur Ajouter :
    - Message asking user to confirm the installation of the add-on
    6. -
  6. Le module complémentaire apparaîtra désormais dans la liste des modules complémentaires installés du gestionnaire de modules complémentaires et sera prêt à être utilisé :
    - After installation the add-on is listed in the add-on manager
    7. -
- -

Installation à l'aide des dossiers d'extension standard

- -

Cette méthode d'installation complémentaire consiste à copier le module complémentaire dans l'un des dossiers d'extension standard sur l'ordinateur de l'utilisateur. Une fois copié, la prochaine fois que Firefox sera lancé le module complémentaire sera installé. Par défaut, l'utilisateur sera invité à approuver l'installation et, si l'utilisateur l'approuve, le module complémentaire sera installé et chargé automatiquement pour les lancements ultérieurs. Si l'utilisateur possède plusieurs profils Firefox, l'approbation et l'installation auront lieu au prochain lancement de chaque profil.  Pour plus d'informations sur le contrôle de l'utilisateur à approuver l'installation, voir  Contrôle de l'installation automatique.

- -

Renommez votre fichier XPI

- -

Pour utiliser cette méthode, votre fichier XPI doit être nommé à l'aide de l'ID d'extension ou d'application, comme indiqué dans la section Préparation de votre module complémentaire. Le fichier complémentaire signé que vous avez téléchargé à partir d'AMO s'appellera quelque chose comme borderify-1.0-an+fx.xpi (voir Signature et distribution de votre module complémetaire pour plus de détails), modifiez-le par exemple borderify@example.com.xpi.

- -
-

Si vous développez un module complémentaire pour Firefox vous pouvez utiliser un fichier proxy d'extensions pour installer un module complémentaire sans copier les fichiers dans les dossiers d'extension standard.

-
- -

Ajoutez le fichier d'extension XPI dans un dossier d'extensions commun.

- -

Dans ce qui suit {ec8030f7-c20a-464f-9b0e-13a3a9e97384} est l'identifiant de l'application de Firefox.  

- -

L'installation standard de Firefox désactive l'installation automatique de modules complémentaires à partir de ces emplacements (voir Contrôle de l'installation automatique). Par conséquent, le processus pour chacune des méthodes décrites ci-dessous est le suivant :

- - - -

Pour plus de détails sur les installations interstitielles et silencieuses, voir Contrôle de l'installation automatique.

- -
-

Pour désinstaller le module complémentaire, fermez Firefox et supprimez le module complémentaire de l'emplacement où il a été ajouté.

-
- -

Windows

- -

Pour installer le module complémentaire pour un utilisateur de l'ordinateur, copiez le fichier XPI dans :

- -
C:\Users\<user name>\AppData\Roaming\mozilla\Extensions\\{ec8030f7-c20a-464f-9b0e-13a3a9e97384}\
- -

Si ce dossier n'existe pas, créez-le. Vous pouvez également identifier le chemin de l'utilisateur actuel avec la variable %appdata% du système.

- -
-

Remarque : Pour installer un module complémentaire pour tous les utilisateurs d'un ordinateur Windows, voir Installation à l'aide du registre Windows.

-
- -

OSX

- -

Pour installer un module complémentaire à utiliser par tous les profils Firefox et tous les utilisateurs, copiez le fichier XPI dans le dossier d'extension globale situé dans la bibliothèque. Si ce dossier n'existe pas, vous devrez le créer.

- -
/Library/Application Support/mozilla/Extensions/{ec8030f7-c20a-464f-9b0e-13a3a9e97384}/
- -

Pour installer un module complémentaire pour un utilisateur spécifique, copiez le fichier XPI dans la bibliothèque locale de l'utilisateur :

- -
~/Library/Application Support/mozilla/Extensions/{ec8030f7-c20a-464f-9b0e-13a3a9e97384}/
- -

Linux

- -

Pour installer un module complémentaire utilisé par tous les utilisateurs, copiez le fichier XPI dans :

- -
/usr/lib/mozilla/extensions/{ec8030f7-c20a-464f-9b0e-13a3a9e97384}/
- -

Ou...

- -
/usr/lib64/mozilla/extensions/{ec8030f7-c20a-464f-9b0e-13a3a9e97384}/
- -

Ou...

- -
/usr/share/mozilla/extensions/{ec8030f7-c20a-464f-9b0e-13a3a9e97384}/
- -

Pour installer un module complémentaire pour un utilisateur spécifique, copiez le fichier XPI dans :

- -
~/.mozilla/extensions/{ec8030f7-c20a-464f-9b0e-13a3a9e97384}/
diff --git a/files/fr/mozilla/add-ons/webextensions/api/browsersettings/proxyconfig/index.html b/files/fr/mozilla/add-ons/webextensions/api/browsersettings/proxyconfig/index.html deleted file mode 100644 index 8ebc5822c2..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/browsersettings/proxyconfig/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: browserSettings.proxyConfig -slug: Mozilla/Add-ons/WebExtensions/API/browserSettings/proxyConfig -tags: - - API - - Add-ons - - Extensions - - Property - - Reference - - WebExtensions - - browserSettings - - proxyConfig -translation_of: Mozilla/Add-ons/WebExtensions/API/proxy/settings ---- -
{{AddonSidebar()}}
- -

Un objet {{WebExtAPIRef("types.BrowserSetting", "BrowserSetting")}} qui peut être utilisé pour modifier les paramètres de proxy du navigateur.

- -
-

Note: La possibilité de modifier les paramètres de proxy nécessite un accès à une fenêtre privée car les paramètres de proxy affectent à la fois les fenêtres privées et non privées. Par conséquent, si une extension n'a pas reçu l'autorisation de fenêtre privée, les appels à  proxy.settings.set() lanceront une exception.

-
- -

La valeur sous-jacente est un objet avec les propriétés énumérées ci-dessous.

- -

Lors de la définition de cet objet, toutes les propriétés sont facultatives. Notez que les propriétés omises seront réinitialisées à leur valeur par défaut.

- -
-
autoConfigUrl{{optional_inline}}
-
string. Une URL à utiliser pour configurer le proxy.
-
autoLogin{{optional_inline}}
-
boolean. Ne pas demander l'authentification si le mot de passe est enregistré. Par défaut à false.
-
ftp{{optional_inline}}
-
string. L'adresse du proxy FTP. Peut inclure un port.
-
http{{optional_inline}}
-
string. L'adresse du proxy HTTP. Peut inclure un port.
-
httpProxyAll{{optional_inline}}
-
boolean. Utilisez le serveur proxy HTTP pour tous les protocoles. Par défaut à false.
-
passthrough{{optional_inline}}
-
string. Une liste d'hôtes séparés par des virgules qui ne doivent pas être mandatés. La valeur par défaut est "localhost, 127.0.0.1".
-
proxyDNS{{optional_inline}}
-
boolean. DNS proxy lors de l'utilisation de SOCKS5. Par défaut à false.
-
proxyType{{optional_inline}}
-
string. Le type de proxy à utiliser. Cela peut prendre l'une des valeurs suivantes : "none", "autoDetect", "system", "manual", "autoConfig". Par défaut à "system".
-
socks{{optional_inline}}
-
string. L'adresse du proxy SOCKS. Peut inclure un port.
-
socksVersion{{optional_inline}}
-
integer. La version du proxy SOCKS. Peut être 4 ou 5. Par défaut à 5.
-
ssl{{optional_inline}}
-
string. L'adresse du proxy SSL. Peut inclure un port.
-
- -

 

- -

Exemples

- -
let proxySettings = {
-  proxyType: "manual",
-  http: "http://proxy.org:8080",
-  socksVersion: 4,
-  passthrough: ".example.org"
-};
-
-browser.proxy.settings.set({value: proxySettings});
- -

{{WebExtExamples}}

- -

 

- -

Compatibilité du navigateur

- - - -

{{Compat("webextensions.api.proxy.settings", 10)}}

diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/eval/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/eval/index.html deleted file mode 100644 index f6cf7e86bb..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/eval/index.html +++ /dev/null @@ -1,219 +0,0 @@ ---- -title: devtools.inspectedWindow.eval() -slug: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/eval -tags: - - API - - Add-ons - - Devtools.inspectedWindows - - Extensions - - Reference - - WebExtensions - - eval -translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/eval ---- -
{{AddonSidebar()}}
- -

Exécute JavaScript dans la fenêtre à laquelle les devtools sont attachés.

- -

C'est un peu comme utiliser {{WebExtAPIRef("tabs.executeScript()")}} pour joindre un script de contenu, mais avec deux différences principales:

- -

Tout d'abord, le JavaScript peut utiliser un ensemble de commandes spéciales que les navigateurs fournissent généralement dans leur implémentation de console devtools : par exemple, en utilisant "$0" pour designer l'élément actuellement sélectionné dans l'inspecteur.

- -

Deuxièmement, le JavaScript que vous exécutez peut voir les modifications apportées à la page par des scripts que la page a chargés. Cela contraste avec les scripts de contenu, qui voient la page telle qu'elle existerait si aucun script de page n'était pas chargé. Cependant, notez que l'isolement fourni par les scripts de contenu est une fonction de sécurité délibérée, destinée à rendre plus difficile la confusion ou la subversion des WebExtensions par des pages web malveillantes ou simplement non coopératives en redéfinissant les fonctions et les propriétés du DOM. Cela signifie que vous devez être très prudent si vous renoncez à cette protection en utilisant eval(), et devrait utiliser les scripts de contenu, sauf si vous devez utiliser eval().

- -

Le script est évalué par défaut dans le cadre principal de la page. Le script doit évaluer une valeur qui peut être représentée comme JSON (ce qui signifie que, par exemple, il peut ne pas évaluer une fonction ou un objet contenant des fonctions). Par défaut, le script ne voit pas les scripts de contenu attachés à la page.

- -

Vous ne pouvez pas appeler eval() sur les fenêtres de navigateur privilégiées telles que "about: addons".

- -

Vous pouvez éventuellement fournir un paramètre d'options, qui comprend des options pour évaluer le script dans une image différente ou dans le contexte des scripts de contenu attachés. Notez que Firefox ne supporte pas encore le paramètre d'options.

- -

La fonction eval() renvoie une Promise qui résout le résultat évalué du script ou une erreur.

- -

Aides

- -

Le script accède à un certain nombre d'objets qui aident le script injecté à interagir avec les outils du développeur. Les assistants suivants sont actuellement pris en charge:

- -
-
$0
-
Contient une référence à l'élément actuellement sélectionné dans l'inspecteur Devtools.
-
inspect()
-
Etant donné un objet, s'il s'agit d'un élément DOM dans la page, sélectionnez-le dans l'inspecteur devtools, sinon il crée un aperçu de l'objet dans la webconsole.
-
- -

Voir quelques exemples.

- -

Syntaxe

- -
var evaluating = browser.devtools.inspectedWindow.eval(
-  expression,       // string
-  options           // object
-)
-
- -

Paramètres

- -
-
expression
-
string. L'expression JavaScript à évaluer. La chaîne doit évaluer un objet qui peut être représenté comme JSON, ou une exception sera lancée. Par exemple, l'expression ne doit pas évaluer une fonction.
-
options{{optional_inline}}
-
object. Options pour la fonction  (Notez que Firefox ne supporte pas encore cette option), comme suit :
-
-
-
frameURL{{optional_inline}}
-
string. L'URL du cadre dans lequel à évaluer l'expression. Si cela est supprimé, l'expression est évaluée dans la trame principale de la fenêtre.
-
useContentScriptContext{{optional_inline}}
-
boolean. Si c'est vrai, évaluez l'expression dans le contexte des scripts de contenu que cette extension a attachée à la page. Si vous définissez cette option, vous devez d'abord attacher certains scripts de contenu à la page ou une erreur Devtools sera lancée.
-
contextSecurityOrigin {{optional_inline}}
-
string. Evaluez l'expression dans le contexte d'un script de contenu attaché par une extension différente, dont l'origine correspond à la valeur donnée ici. Ces remplacements sont useContentScriptContext.
-
-
-
- -

Valeur retournée

- -

Une Promise qui sera remplie avec un tableau contenant deux éléments.

- -

Si aucune erreur n'est survenue, l'élément 0 contiendra le résultat de l'évaluation de l'expression et l'élément 1 sera indéfini.

- -

Si une erreur s'est produite, l'élément 0 sera indéfini et l'élément 1 contiendra un objet donnant des détails sur l'erreur. Deux types différents d'erreurs sont distingués :

- - - -

Compatibilité des navigateurs

- -

{{Compat("webextensions.api.devtools.inspectedWindow.eval")}}

- - - -

Exemples

- -

Ceci teste si jQuery est défini dans la fenêtre inspectée et enregistre le résultat. Notez que cela ne fonctionnerait pas dans un script de contenu, car même si jQuery était défini, le script de contenu ne le verrait pas.

- -
function handleError(error) {
-  if (error.isError) {
-    console.log(`Devtools error: ${error.code}`);
-  } else {
-    console.log(`JavaScript error: ${error.value}`);
-  }
-}
-
-function handleResult(result) {
-  console.log(result);
-  if (result[0] !== undefined) {
-    console.log(`jQuery: ${result[0]}`);
-  } else if (result[1]) {
-    handleError(result[1]);
-  }
-}
-
-const checkjQuery = "typeof jQuery != 'undefined'";
-
-evalButton.addEventListener("click", () => {
-  browser.devtools.inspectedWindow.eval(checkjQuery)
-    .then(handleResult);
-});
- -

Exemples d'aide

- -

Cela utilise l'aide de $0 pour définir la couleur d'arrière-plan de l'élément, actuellement sélectionné dans l'inspecteur :

- -
const evalButton = document.querySelector("#reddinate");
-const evalString = "$0.style.backgroundColor = 'red'";
-
-function handleError(error) {
-  if (error.isError) {
-    console.log(`Devtools error: ${error.code}`);
-  } else {
-    console.log(`JavaScript error: ${error.value}`);
-  }
-}
-
-function handleResult(result) {
-  if (result[1]) {
-    handleError(result[1]);
-  }
-}
-
-evalButton.addEventListener("click", () => {
-  browser.devtools.inspectedWindow.eval(evalString)
-    .then(handleResult);
-});
-
- -

Cela utilise l'assistant l'inspection() pour sélectionner le premier élément <h1> dans la page:

- -
const inspectButton = document.querySelector("#inspect");
-const inspectString = "inspect(document.querySelector('h1'))";
-
-function handleError(error) {
-  if (error.isError) {
-    console.log(`Devtools error: ${error.code}`);
-  } else {
-    console.log(`JavaScript error: ${error.value}`);
-  }
-}
-
-function handleResult(result) {
-  if (result[1]) {
-    handleError(result[1]);
-  }
-}
-
-inspectButton.addEventListener("click", () => {
-  browser.devtools.inspectedWindow.eval(inspectString)
-    .then(handleResult);
-});
-
- -

{{WebExtExamples}}

- -
Remerciements - -

Cette API est basée sur l'API Chromium chrome.devtools.

- -

Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis.

-
- - diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/index.html deleted file mode 100644 index 2f077b4e9d..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: devtools.inspectedWindow -slug: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow -tags: - - API - - Add-ons - - Devtools.inspectedWindows - - Extensions - - Reference - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow ---- -
{{AddonSidebar}}
- -
-

Cette page décrit les API de développement de WebExtensions telles qu'elles existent dans Firefox 54. Bien que les API soient basées sur les APIs de devtools de Chrome, il existe encore de nombreuses fonctionnalités qui ne sont pas encore implémentées dans Firefox et ne sont donc pas documentées ici. Pour voir les fonctionnalités actuellement manquantes, regarder  Limitations des APIs devtools.

-
- -

L'API devtools.inspectedWindow permet à un extension de devtools d'interagir avec la fenêtre sur laquelle les outils de développement sont attachés.

- -

Comme toutes les APIs de devtools, cette API n'est disponible que pour exécuter le code dans le document défini dans la clé devtools_page du manifest.json, où dans d'autres documents devtools créés par l'extension (tels que le document hébergé par un panneau, l'extension créée). Voir Extension des outils de développement  pour plus d'informations.

- -

Propriétés

- -
-
devtools.inspectedWindow.tabId
-
L'ID de la fenêtre sur laquelle sont attachés les outils du développeur.
-
- -

Fonctions

- -
-
devtools.inspectedWindow.eval()
-
Evaluez certains JavaScript dans la fenêtre de destination.
-
devtools.inspectedWindow.reload()
-
Rechargez le document de la fenêtre destination.
-
- -

Comptatibilité navigateur

- -

{{Compat("webextensions.api.devtools.inspectedWindow")}}

- -

{{WebExtExamples("h2")}}

- - - -
Remerciements - -

Cette API est basée sur l'API Chromium chrome.devtools.inspectedWindow.

- -

Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis.

-
- - diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/reload/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/reload/index.html deleted file mode 100644 index f2f7b8cdc8..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/reload/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: devtools.inspectedWindow.reload() -slug: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/reload -tags: - - API - - Add-ons - - Extensions - - Reference - - WebExtensions - - devtools.inspectedWindow - - reload -translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/reload ---- -
{{AddonSidebar()}}
- -

Recharge la fenêtre à laquelle les devtools sont attachés.

- -

Syntaxe

- -
browser.devtools.inspectedWindow.reload(
-  reloadOptions       // object
-)
-
- -

Paramètres

- -
-
reloadOptions{{optional_inline}}
-
object. Options pour la fonction, comme suit
-
-
-
ignoreCache{{optional_inline}}
-
boolean. S'il est vrai, cela fait que le rechargement ignore le cache du navigateur (comme si l'utilisateur avait appuyé sur Shift+Ctrl+R).
-
userAgent{{optional_inline}}
-
string. Définissez un agent utilisateur personnalisé pour la page. Ici, la chaîne fournie sera envoyée dans l'en-tête de l'Agent utilisateur, et sera renvoyée par les appels à navigator.userAgent réalisé par des scripts s'exécutant sur la page.
-
injectedScript {{optional_inline}}
-
string. Injectez l'expression JavaScript donnée dans toutes les images de la page, avant tout autre script.
-
-
-
- -

Compatibilité du navigateur

- -

{{Compat("webextensions.api.devtools.inspectedWindow.reload")}}

- - - -

Exemples

- -

Rechargez la fenêtre inspectée, définissez l'agent utilisateur et injectez un script

- -
const reloadButton = document.querySelector("#reload-button");
-
-reloadButton.addEventListener("click", () => {
-  browser.devtools.inspectedWindow.reload({
-    injectedScript:"alert(navigator.userAgent);",
-    userAgent: "Not a real UA"
-  });
-});
-
- -

{{WebExtExamples}}

- -
Remerciements - -

Cette API est basée sur l'API Chromium chrome.devtools.

- -

Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis.

-
- - diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/tabid/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/tabid/index.html deleted file mode 100644 index b5b3d3b0b2..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/tabid/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: devtools.inspectedWindow.tabId -slug: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/tabId -tags: - - API - - Add-ons - - Extensions - - Reference - - WebExtensions - - devtools.inpectedWindow - - tabId -translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/tabId ---- -
{{AddonSidebar()}}
- -

L'ID de {{WebExtAPIRef("tabs.Tab", "tab")}} est que cette instance des devtools est jointe, représenté comme un nombre.

- -

Cela peut être envoyé à la page de fond de l'extension, de sorte que la page d'arrière plan peut utiliser l'API {{WebExtAPIRef("tabs")}} pour interargir avec l'onglet :

- -
// devtools-panel.js
-
-const scriptToAttach = "document.body.innerHTML = 'Hi from the devtools';";
-
-attachContentScriptButton.addEventListener("click", () => {
-  browser.runtime.sendMessage({
-    tabId: browser.devtools.inspectedWindow.tabId,
-    script: scriptToAttach
-  });
-});
- -
// background.js
-
-function handleMessage(request, sender, sendResponse) {
-  browser.tabs.executeScript(request.tabId, {
-    code: request.script
-  });
-}
-
-browser.runtime.onMessage.addListener(handleMessage);
- -

Compatibilité du navigateur

- -

{{Compat("webextensions.api.devtools.inspectedWindow.tabId")}}

- - - -

{{WebExtExamples}}

- -
Remerciements - -

Cette API est basée sur l'API Chromium chrome.devtools.

- -

Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis.

-
- - diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools.network/gethar/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools.network/gethar/index.html deleted file mode 100644 index abcdf667e6..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.network/gethar/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: devtools.network.getHAR() -slug: Mozilla/Add-ons/WebExtensions/API/devtools.network/getHAR -tags: - - Add-ons - - Extensions - - WebExtensions - - devtools.network - - getHAR -translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.network/getHAR ---- -
{{AddonSidebar()}}
- -

Obtenez un journal HAR pour la page chargée dans l'onglet en cours.

- -

C'est une fonction asynchrone qui renvoie une Promise.

- -

Syntaxe

- -
var getting = browser.devtools.network.getHAR()
-
- -

Paramètres

- -

None.

- -

Valeur retournée

- -

Une Promise qui sera remplie avec un objet contenant le journal HAR pour l'onglet en cours. Pour plus de détails sur ce que contient l'objet journal, reportez-vous à la spécification HAR.

- -

Compatibilité du navigateur

- - - -

{{Compat("webextensions.api.devtools.network.getHAR")}}

- -

Exemples

- -

Consignez les URL des demandes contenues dans le journal HAR :

- -
async function logRequests() {
-  let harLog = await browser.devtools.network.getHAR();
-  console.log(`HAR version: ${harLog.version}`);
-  for (let entry of harLog.entries) {
-    console.log(entry.request.url);
-  }
-}
-
-logRequestsButton.addEventListener("click", logRequests);
-
- -

{{WebExtExamples}}

- -
Remerciements : - -

Cette API est basée sur l'API Chromium chrome.devtools.network.

-
- - diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools.network/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools.network/index.html deleted file mode 100644 index 580a823371..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.network/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: devtools.network -slug: Mozilla/Add-ons/WebExtensions/API/devtools.network -tags: - - API - - Add-ons - - Extensions - - Reference - - WebExtensions - - devtools.network -translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.network ---- -
{{AddonSidebar}}
- -

L'API devtools.network permet à une extension devtools d'obtenir des informations sur les demandes de réseau associées à la fenêtre à laquelle les devtools sont attachés (la fenêtre inspectée).

- -

Comme toutes les APIs de devtools, cette API est uniquement disponible pour le code exécuté dans le document défini dans la clé devtools_page du manifest.json, ou dans d'autres documents de devtools créés par l'extension (tel que le document du panneau). Voir Extension des outils de développement pour plus d'informations.

- -

Fonctions

- -
-
devtools.network.getHAR()
-
Obtenez le  journal HAR pour la page chargée dans l'onglet en cours..
-
- -

Evénements

- -
-
devtools.network.onNavigated
-
Attiré lorsque l'utilisateur navigue dans la fenêtre inspectée vers une nouvelle page.
-
devtools.network.onRequestFinished
-
Lancé lorsque la demande réseau est terminée et que ses détails sont disponibles pour l'extension.
-
- -

Compatibilité du navigateur

- -

{{Compat("webextensions.api.devtools.network")}}

- -

{{WebExtExamples("h2")}}

- -
Remerciements : - -

Cette API est basée sur l'API Chromium chrome.devtools.network.

-
- - diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools.network/onnavigated/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools.network/onnavigated/index.html deleted file mode 100644 index b7f0d0af31..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.network/onnavigated/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: devtools.network.onNavigated -slug: Mozilla/Add-ons/WebExtensions/API/devtools.network/onNavigated -tags: - - API - - Add-ons - - Extensions - - Reference - - WebExtensions - - devtools.network -translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.network/onNavigated ---- -
{{AddonSidebar()}}
- -

Mise en place lorsque l'utilisateur navigue dans la fenêtre inspectée vers une nouvelle page

- -

Syntaxe

- -
browser.devtools.network.onNavigated.addListener(listener)
-browser.devtools.network.onNavigated.removeListener(listener)
-browser.devtools.network.onNavigated.hasListener(listener)
-
- -

Les événements ont trois fonctions :

- -
-
addListener(listener)
-
Ajouter un auditeur à cet événement.
-
removeListener(listener)
-
Arrêter d'écouter un événement. L'argument de l'auditeur est l'auditeur à supprimer.
-
hasListener(listener)
-
Vérifiez si l'auditeur est enregistré pour cet événement. Renvoie vrai si elle écoute, sinon faux.
-
- -

Syntaxe addListener

- -

Paramètres

- -
-
callback
-
-

Fonction qui sera appelée lors de l'événement. La fonction passera les arguments suivants :

- -
-
url
-
string. La nouvelle URL pour la fenêtre.
-
-
-
- -

Compatibilité du navigateur

- -

{{Compat("webextensions.api.devtools.network.onNavigated")}}

- - - -

Exemples

- -
function handleNavigated(url) {
-  console.log(url);
-}
-
-browser.devtools.network.onNavigated.addListener(handleNavigated);
- -

{{WebExtExamples}}

- -
Remerciements - -

Cette API est basée sur l'API chrome.devtools de Chromium.

- -

Les données de compatibilité de  Microsoft Edge sont fournies par Microsoft Corporation et sont incluses ici sous la licence Creative Commons Attribution 3.0 United States.

-
- - diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools.network/onrequestfinished/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools.network/onrequestfinished/index.html deleted file mode 100644 index e2b4d930fc..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.network/onrequestfinished/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: devtools.network.onRequestFinished -slug: Mozilla/Add-ons/WebExtensions/API/devtools.network/onRequestFinished -tags: - - API - - Add-ons - - Event - - Extensions - - Reference - - WebExtensions - - devtools.network - - onRequestFinished -translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.network/onRequestFinished ---- -
{{AddonSidebar()}}
- -

Lancé lorsqu'une requête réseau est terminée et que ses détails sont disponibles pour l'extension.

- -

La requête est donnée en tant qu'objet d'entrée HAR, qui est également doté d'une méthode getContent() asynchrone qui récupère le contenu du corps de la réponse.

- -

Notez que bien que votre extension puisse ajouter un écouteur à tout moment,elle commencera seulement à se déclencher après que l'utilisateur a activé le moniteur réseau du navigateur au moins une fois.

- -

Syntaxe

- -
browser.devtools.network.onRequestFinished.addListener(listener)
-browser.devtools.network.onRequestFinished.removeListener(listener)
-browser.devtools.network.onRequestFinished.hasListener(listener)
-
- -

Les événements ont trois fonctions

- -
-
addListener(listener)
-
Ajoute un écouteur à cet événement.
-
removeListener(listener)
-
Arrêtez d'écouter cet événement. L'argument de listener  est l'écouteur à supprimer.
-
hasListener(listener)
-
Vérifiez si listener est enregistré pour cet événement. Renvoie trues'il écoute, sinon false.
-
- -

Syntaxe addListener

- -

Paramètres

- -
-
callback
-
-

Fonction qui sera appelée lorsque cet événement se produit. La fonction recevra les arguments suivants :

- -
-
request
-
object. Un objet représentant la requête. Cet objet est un seul objet d'entrée HAR. Il définit également une méthode getContent() asynchrone, qui renvoie une Promise qui se résout avec le corps de la réponse.
-
-
-
- -

Compatibilité du navigateur

- -

{{Compat("webextensions.api.devtools.network.onRequestFinished")}}

- - - -

Examples

- -

Ajoutez un écouteur qui consigne l'adresse IP du serveur et le corps de la réponse pour chaque requête réseau.

- -
function handleRequestFinished(request) {
-  console.log("Server IP: ", request.serverIPAddress);
-  request.getContent().then(content => {
-    console.log("Content: ", content);
-  });
-}
-
-browser.devtools.network.onRequestFinished.addListener(handleRequestFinished);
- -

{{WebExtExamples}}

- -
Remerciements - -

Cette API est basée sur l'API chrome.devtools de Chromium.

-
- - diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/create/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/create/index.html deleted file mode 100644 index 60de8f3871..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/create/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: devtools.panels.create() -slug: Mozilla/Add-ons/WebExtensions/API/devtools.panels/create -tags: - - API - - Add-ons - - Create - - Extensions - - Reference - - WebExtensions - - devtools.panels -translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.panels/create ---- -
{{AddonSidebar()}}
- -

Ajoute un nouveau panneau aux devtools.

- -

Cette fonction prend : un titre, une URL vers un fichier d'icône et une URL vers un fichier HTML. Il crée un nouveau panneau dans les devtools, dont le contenu est spécifié par le fichier HTML. Il renvoie une Promise qui résout un objet ExtensionPanel représentant le nouveau panneau.

- -

Syntaxe

- -
var creating = browser.devtools.panels.create(
-  title,       // string
-  iconPath,    // string
-  pagePath     // string
-)
-
- -

Parametères

- -
-
title
-
string. Le titre du panneau. Cela apparaitra dans la rangée des onglets le long du haut de la fenêtre des devtools, et c'est la principale façon dont l'utilisateur pourra identifier votre panneau.
-
iconPath
-
string. Spécifie une icône qui sera affichée à côté du titre. Il est fourni sous forme d'URL vers un fichier image qui a été fourni avec votre extension. L'URL est résolue par rapport à la page d'extension courante (sauf si elle est exprimée en url absolue, par exemple "/icons/panel.png").
-
pagePath
-
string. Spécifie un fichier HTML qui définit le contenu réel du panneau. Il est fourni sous la forme d'une URL d'un fichier HTML qui a été regroupé avec votre extension. L'URL est résolue par rapport à la page d'extension courante (sauf si elle est exprimée en url absolue, par exemple "/devtools/panel.html"). Le fichier HTML peut include des fichiers CSS et JavaScript, juste comme une page web normale. Le JavaScript en cours d'éxécution dans le panneau pourra utiliser les API devtools. Voir Extention des outils de développement.
-
- -

Valeur retournée

- -

Une Promise qui sera remplie avec un objet ExtensionPanel représentant le nouveau panneau.

- -

Compatibilité du navigateur

- -

{{Compat("webextensions.api.devtools.panels.create")}}

- - - -

Exemples

- -

Créer un nouveau panneau, et ajoute des auditeurs à ces événements onShown et  onHidden :

- -
function handleShown() {
-  console.log("panel is being shown");
-}
-
-function handleHidden() {
-  console.log("panel is being hidden");
-}
-
-browser.devtools.panels.create(
-  "My Panel",                 // title
-  "/icons/star.png",           // icon
-  "/devtools/panel/panel.html" // content
-).then((newPanel) => {
-  newPanel.onShown.addListener(handleShown);
-  newPanel.onHidden.addListener(handleHidden);
-});
-
- -

{{WebExtExamples}}

- -
Remerciements - -

Cette API est basée sur l'API Chromium chrome.devtools.panels.

- -

Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis.

-
- - diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/elements/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/elements/index.html deleted file mode 100644 index 18223b2718..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/elements/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: devtools.panels.elements -slug: Mozilla/Add-ons/WebExtensions/API/devtools.panels/elements -tags: - - API - - Add-ons - - Elements - - Extensions - - Reference - - WebExtensions - - devtools.panels -translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.panels/elements ---- -
{{AddonSidebar()}}
- -

Un objet ElementsPanel qui représente l'inspecteur HTML/CSS du navigateur

- -

Compatibilité du navigateur

- - - -

{{Compat("webextensions.api.devtools.panels.elements", 10)}}

- -

{{WebExtExamples}}

- -
Remerciements - -

Cette API est basée sur l'API Chromium chrome.devtools.panels.

-
diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/elementspanel/createsidebarpane/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/elementspanel/createsidebarpane/index.html deleted file mode 100644 index 7eee52fff5..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/elementspanel/createsidebarpane/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: devtools.panels.ElementsPanel.createSidebarPane() -slug: >- - Mozilla/Add-ons/WebExtensions/API/devtools.panels/ElementsPanel/createSidebarPane -tags: - - API - - Add-ons - - DevTools - - Extensions - - Reference - - WebExtensions - - createSidebarPane - - devtools.panels -translation_of: >- - Mozilla/Add-ons/WebExtensions/API/devtools.panels/ElementsPanel/createSidebarPane ---- -
{{AddonSidebar()}}
- -

Ajoute un nouveau volet à la barre latérale dans l'inspecteur HTML / CSS.

- -

L'inspecteur HTML / CSS, appelé l'inspecteur de page dans Firefox et le panneau éléments dans Chrome, affiche la page DOM dans la partie principale de sa fenêtre et possède une barre latérale qui affiche divers autres aspects de la page HTML / CSS dans une interface à onglets. Par exemple, dans Firefox, la barre latérale peut afficher les règles CSS pour l'élément sélectionné, ou ses polices, ou son modèle de boîte.

- -

La fonction createSidebarPane() ajoute un nouveau volet à la barre latérale. ar exemple, la capture d'écran ci-dessous montre un nouveau volet intitulé "My pane", qui affiche un objet JSON :

- -

- -

Cette fonction prend un argument, qui est une chaîne représentant le titre du volet. Il renvoie une Promise qui se résout en un objet ExtensionSidebarPane représentant le nouveau volet. Vous pouvez utiliser cet objet pour définir le contenu et le comportement du volet.

- -

Syntaxe

- -
var creating = browser.devtools.panels.elements.createSidebarPane(
-  title       // string
-)
-
- -

Paramètres

- -
-
title
-
string. Cela apparaîtra dans la rangée d'onglets en haut de la barre latérale, et c'est la principale façon pour l'utilisateur d'identifier votre panneau.
-
- -

Valeur retournée

- -

Une Promise qui sera remplie avec un objet ExtensionSidebarPane représentant le nouveau volet.

- -

Compatibilité du navigateur

- -

{{Compat("webextensions.api.devtools.panels.ElementsPanel.createSidebarPane", 10)}}

- - - -

Exemples

- -

Créez un nouveau volet et remplissez-le avec un objet JSON. Vous pouvez exécuter ce code dans un script chargé par la page devtools.

- -
function onCreated(sidebarPane) {
-  sidebarPane.setObject({
-    someBool: true,
-    someString: "hello there",
-    someObject: {
-      someNumber: 42,
-      someOtherString: "this is my pane's content"
-    }
-  });
-}
-
-browser.devtools.panels.elements.createSidebarPane("My pane").then(onCreated);
-
- -

{{WebExtExamples}}

- -
Remerciements - -

Cette API est basée sur l'API Chromium chrome.devtools.panels.

-
- - diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/elementspanel/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/elementspanel/index.html deleted file mode 100644 index 5c2a0413c7..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/elementspanel/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: devtools.panels.ElementsPanel -slug: Mozilla/Add-ons/WebExtensions/API/devtools.panels/ElementsPanel -tags: - - API - - Add-ons - - DevTools - - Extensions - - Reference - - WebExtensions - - devtools.panels - - devtools.panelsElementsPanel -translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.panels/ElementsPanel ---- -
{{AddonSidebar()}}
- -

Un ElementsPanel représente l'inspecteur HTML/CSS dans la devtools du navigateur. C'est ce qu'on appelle l'inspecteur de page dans Firefox et le panneau Éléments de Chrome.

- -

Fonctions

- -
-
devtools.panels.ElementsPanel.createSidebarPane()
-
Crée un volet dans la barre latérale de l'inspecteur.
-
-

Evénements

-
-
devtools.panels.ElementsPanel.onSelectionChanged
-
Appèle lorsque l'utilisateur sélectionne un élément différent dans la page, par exemple en utilisant l'élément de menu contextuel "inspect élément".
-
- -

Compatibilité du navigateur

- - - -

{{Compat("webextensions.api.devtools.panels.ElementsPanel", 10)}}

- -

{{WebExtExamples}}

- -
Remerciements - -

Cette API est basée sur l'API Chromium chrome.devtools.panels.

-
- - diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/elementspanel/onselectionchanged/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/elementspanel/onselectionchanged/index.html deleted file mode 100644 index e753d5aba1..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/elementspanel/onselectionchanged/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: onSelectionChanged -slug: >- - Mozilla/Add-ons/WebExtensions/API/devtools.panels/ElementsPanel/onSelectionChanged -tags: - - API - - Add-ons - - DevTools - - Extensions - - Reference - - WebExtensions - - devtools.panels - - devtools.panelsElementsPanel -translation_of: >- - Mozilla/Add-ons/WebExtensions/API/devtools.panels/ElementsPanel/onSelectionChanged ---- -
{{AddonSidebar()}}
- -

Appelles lorsque l'utilisateur sélectionne un élément de page différent pour l'inspection avec les outils de développement du navigateur, par exemple en sélectionnant l'élément de menu contextuel "Inspect Element" dans Firefox.

- -

Syntaxe

- -
browser.devtools.panels.elements.onSelectionChanged.addListener(listener)
-browser.devtools.panels.elements.onSelectionChanged.removeListener(listener)
-browser.devtools.panels.elements.onSelectionChanged.hasListener(listener)
-
- -

L'événement a trois fonctions :

- -
-
addListener(listener)
-
Ajoute une écoute à cet événement.
-
removeListener(listener)
-
Arrête une écoute à l'événement. L'argument de l'auditeur est un auditeur supprimer.
-
hasListener(listener)
-
Vérifiez si l'auditeur est enregistré pour cet événement. Renvoie la valeur Vrai si elle l'écoute, sinon Faux.
-
- -

Syntaxe addListener

- -

Paramètres

- -
-
callback
-
-

Fonction qui sera appelée lors de l'événement. La fonction ne passera pas d'arguments.

-
-
- -

Compatibilité du navigateur

- - - -

{{Compat("webextensions.api.devtools.panels.ElementsPanel.onSelectionChanged", 10)}}

- -

Exemples

- -

Ecoutez la sélection des événements modifiés, et enregistrez le contenu du texte de l'élément nouvellement sélectionné :

- -
function handleSelectedElement() {
-  browser.devtools.inspectedWindow.eval("$0.textContent")
-    .then((result) => {
-      console.log(result[0]);
-    });
-}
-
-browser.devtools.panels.elements.onSelectionChanged.addListener(handleSelectedElement);
- -

{{WebExtExamples}}

- -
Remerciements - -

Cette API est basée sur l'API Chromium chrome.devtools.

-
diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionpanel/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionpanel/index.html deleted file mode 100644 index e083ff02b3..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionpanel/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: devtools.panels.ExtensionPanel -slug: Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionPanel -tags: - - API - - Add-ons - - Extensions - - Reference - - WebExtensions - - devtools.panels -translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionPanel ---- -
{{AddonSidebar()}}
- -

Une ExtensionPanel représente un panneau ajouté aux devtools. C'est la résolution de la Promise renvoyé par browser.devtools.panels.create().

- -

Type

- -

Les valeurs de ce type sont des objets. Définissez deux événements, onShown et onHidden.

- - - -

Compatibilité du navigateur

- -

{{Compat("webextensions.api.devtools.panels.ExtensionPanel")}}

- - - -

Exemples

- -

Ce code crée un nouveau panneau, puis ajoute des gestionnaires pour ces événements onShown et onHidden.

- -
function handleShown(e) {
-  console.log(e);
-  console.log("panel is being shown");
-}
-
-function handleHidden(e) {
-  console.log(e);
-  console.log("panel is being hidden");
-}
-
-browser.devtools.panels.create(
-  "My Panel",                 // title
-  "icons/star.png",           // icon
-  "devtools/panel/panel.html" // content
-).then((newPanel) => {
-  newPanel.onShown.addListener(handleShown);
-  newPanel.onHidden.addListener(handleHidden);
-});
- -

{{WebExtExamples}}

- -
Remerciements - -

Cette API est basée sur l'API Chromium chrome.devtools.panels.

- -

Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis.

-
- - diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/index.html deleted file mode 100644 index 02ee0a2073..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: devtools.panels.ExtensionSidebarPane -slug: Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane -tags: - - API - - Add-ons - - DevTools - - Extensions - - Reference - - WebExtensions - - devtools.panels - - devtools.panels.ExtensionSidebarPane -translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane ---- -
{{AddonSidebar}}
- -

L'objet ExtensionSidebarPane représente un volet qu'une extension a ajouté à la barre latérale dans l'inspecteur HTML/CSS du navigateur.

- -

- -

Pour créer un ExtensionSidebarPane, appelez la fonction browser.devtools.panels.elements.createSidebarane().

- -

Fonctions

- -
-
devtools.panels.ExtensionSidebarPane.setExpression()
-
-

Évaluer une expression JavaScript dans la page Web inspectée par l'inspecteur. Le résultat est affiché dans le volet de la barre latérale.

-
-
devtools.panels.ExtensionSidebarPane.setObject()
-
-

Définit un objet JSON qui sera affiché dans le volet de la barre latérale.

-
-
devtools.panels.ExtensionSidebarPane.setPage()
-
-

Charge la page pointée par l'URL fournie.

-
-
- -

Evénements

- -
-
devtools.panels.ExtensionSidebarPane.onShown
-
Lancé lorsque le volet latéral est affiché.
-
devtools.panels.ExtensionSidebarPane.onHidden
-
Lancé lorsque le volet de la barre latérale est masqué.
-
- -

Compatibilité du navigateur

- -

{{Compat("webextensions.api.devtools.panels.ExtensionSidebarPane", 10)}}

- -

{{WebExtExamples("h2")}}

- -
Remerciements - -

Cette API est basée sur l'API Chromium chrome.devtools.panels.

-
- - diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/onhidden/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/onhidden/index.html deleted file mode 100644 index a1a18463e5..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/onhidden/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: devtools.panels.ExtensionSidebarPane.onHidden -slug: >- - Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane/onHidden -tags: - - API - - Add-ons - - ExtensionSidebarPane - - Extensions - - Reference - - WebExtensions - - devtools.panels - - onHidden -translation_of: >- - Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane/onHidden ---- -
{{AddonSidebar()}}
- -

Appelé lorsque le volet de la barre latérale est masqué, suite à l'abandon de l'utilisateur.

- -

Syntaxe

- -
browser.devtools.panels.onHidden.addListener(listener)
-browser.devtools.panels.onHidden.removeListener(listener)
-browser.devtools.panels.onHidden.hasListener(listener)
-
- -

Les événements ont trois fonctions:

- -
-
addListener(callback)
-
Ajoute un écouteur à cet événement.
-
removeListener(listener)
-
Arrête d'écouter cet événement. L'argument listener est l'écouteur à supprimer.
-
hasListener(listener)
-
Vérifie si listener est enregistré pour cet événement. Renvoie true s'il écoute,  sinon false.
-
- -

Syntaxe addListener

- -

Paramètres

- -
-
callback
-
-

Fonction appelée lorsque cet événement se produit. Cette fonction sera passée sans arguments.

-
-
- -

Compatibilité du navigateur

- - - -

{{Compat("webextensions.api.devtools.panels.ExtensionSidebarPane.onHidden", 10)}}

- -

Exemples

- -

Créez un volet de barre latérale et journal afficher et masquer les événements.

- -
function onCreated(sidebarPane) {
-
-  sidebarPane.onShown.addListener(() => {
-    console.log("Shown");
-  });
-
-  sidebarPane.onHidden.addListener(() => {
-    console.log("Hidden");
-  });
-
-}
-
-browser.devtools.panels.elements.createSidebarPane("My pane").then(onCreated);
-
- -

{{WebExtExamples}}

- -
Remerciements - -

Cette API est basée sur l'API Chromium chrome.devtools.panels.

-
diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/onshown/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/onshown/index.html deleted file mode 100644 index 3ca3412af2..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/onshown/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: devtools.panels.ExtensionSidebarPane.onShown -slug: Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane/onShown -tags: - - API - - Add-ons - - Extensions - - ExtesionsSidebarPane - - Reference - - WebExtensions - - devtools.panels - - onShown -translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane/onShown ---- -
{{AddonSidebar()}}
- -

Lancé lorsque le volet latéral devient visible suite à un changement d'utilisateur.

- -

Syntaxe

- -
browser.devtools.panels.onShown.addListener(listener)
-browser.devtools.panels.onShown.removeListener(listener)
-browser.devtools.panels.onShown.hasListener(listener)
-
- -

Les événements ont trois fonctions :

- -
-
addListener(callback)
-
Ajoute un écouteur à cet événement.
-
removeListener(listener)
-
Arrêtez d'écouter cet événement. L'argument de listener est l'écouteur à supprimer.
-
hasListener(listener)
-
Vérifiez si listener est enregistré pour cet événement. Renvoie true s'il écoute, sinon false.
-
- -

Syntaxe addListener

- -

Paramètres

- -
-
callback
-
-

Fonction qui sera appelée lorsque cet événement se produit. La fonction sera passée sans arguments.

-
-
- -

Compatibilité du navigateur

- - - -

{{Compat("webextensions.api.devtools.panels.ExtensionSidebarPane.onShown", 10)}}

- -

Exemples

- -

Créez un volet de barre latérale et journal afficher et masquer les événements.

- -
function onCreated(sidebarPane) {
-
-  sidebarPane.onShown.addListener(() => {
-    console.log("Shown");
-  });
-
-  sidebarPane.onHidden.addListener(() => {
-    console.log("Hidden");
-  });
-
-}
-
-browser.devtools.panels.elements.createSidebarPane("My pane").then(onCreated);
-
- -

{{WebExtExamples}}

- -
Remerciements - -

Cette API est basée sur l'API Chromium chrome.devtools.panels.

-
diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/setexpression/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/setexpression/index.html deleted file mode 100644 index d2c97c5f82..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/setexpression/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: devtools.panels.ElementsPanel.setExpression() -slug: >- - Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane/setExpression -tags: - - API - - Add-ons - - Extensions - - Reference - - WebExtensions - - devtools.panels - - setExpression -translation_of: >- - Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane/setExpression ---- -
{{AddonSidebar()}}
- -

Evalue une expression dans le contexte de la page inspectée et affiche le résultat dans le volet de la barre latérale d'extension.

- -

Le contexte d'exécution de l'expression est le même que celui de inspectedWindow.eval().

- -

 Les objets JSON et les noeuds DOM sont affichés en tant qu'arborescence extensible, comme dans la visionneuse jSON dans Firefox. Vous pouvez éventuellement spécifier une chaîne rootTitle : elle sera affichée comme le titre de la racine de l'arbre.

- -

C'est une fonction asynchrone qui renvoie une Promise.

- -

Syntaxe

- -
var evaluating = browser.devtools.panels.setExpression(
-  expression,       // string
-  rootTitle         // string
-)
-
- -

Paramètres

- -
-
expression
-
string. L'expression à évaluer.
-
rootTitle {{optional_inline}}
-
string. Le titre de la racine de l'arbre dans lequel les résultats sont affichés.
-
- -

Valeur retournée

- -

Une Promise sera remplie sans arguments, une fois l'expression évaluée.

- -

Compatibilité du navigateur

- -

{{Compat("webextensions.api.devtools.panels.ExtensionSidebarPane.setExpression", 10)}}

- - - -

Exemples

- -

Ce code crée un volet de barre latérale qui affiche le tagName de l'élément actuellement sélectionné :

- -
function onCreated(sidebarPane) {
-
-  browser.devtools.panels.elements.onSelectionChanged.addListener(() => {
-    const exp = "$0 && $0.tagName";
-    const title = "Selected Element tagName";
-    sidebarPane.setExpression(exp, title);
-  });
-
-}
-
-browser.devtools.panels.elements.createSidebarPane("My pane").then(onCreated);
-
- -

{{WebExtExamples}}

- -
Remerciements - -

Cette API est basée sur l'API Chromium chrome.devtools.panels.

-
- - diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/setobject/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/setobject/index.html deleted file mode 100644 index 90252a0c2f..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/setobject/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: devtools.panels.ExtensionSidebarPane.setObject() -slug: >- - Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane/setObject -tags: - - API - - Add-ons - - Extensions - - Reference - - WebExtensions - - devtools.panels - - setObject -translation_of: >- - Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane/setObject ---- -
{{AddonSidebar()}}
- -

Affiche un objet JSON dans le volet de la barre latérale de l'extension.

- -

L'objet est affiché en tant qu'arborescence extensible, comme dans le JSON viewer dans Firefox. Vous pouvez éventuellement spécifier une chaîne rootTitle : elle sera affichée comme le titre de la racine de l'arbre.

- -

C'est une fonction asynchrone qui renvoie une Promise.

- -

Syntaxe

- -
var setting = browser.devtools.panels.setObject(
-  jsonObject,       // string, array, or JSON object
-  rootTitle         // string
-)
-
- -

Paramètres

- -
-
jsonObject
-
String ou Array ou Object. L'objet à afficher. S'il s'agit d'un objet JSON-serialized, donc les propriétés comme les fonctions seront omises.
-
rootTitle {{optional_inline}}
-
String. Le titre de la racine de l'arbre dans lequel l'objet est affiché.
-
- -

Valeur retournée

- -

Une Promise qui sera accomplie sans arguments, une fois l'objet défini.

- -

Compatibilité du navigateur

- -

{{Compat("webextensions.api.devtools.panels.ExtensionSidebarPane.setObject", 10)}}

- - - -

Exemples

- -

Créez un nouveau volet et remplissez-le avec un objet JSON. Vous pouvez exécuter ce code dans un script chargé par la page devtools. de votre extension

- -
function onCreated(sidebarPane) {
-  sidebarPane.setObject({
-    someBool: true,
-    someString: "hello there",
-    someObject: {
-      someNumber: 42,
-      someOtherString: "this is my pane's content"
-    }
-  });
-}
-
-browser.devtools.panels.elements.createSidebarPane("My pane").then(onCreated);
- -

{{WebExtExamples}}

- -
Remerciements - -

Cette API est basée sur l'API Chromium chrome.devtools.panels.

-
- - diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/setpage/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/setpage/index.html deleted file mode 100644 index e4f98e3ff3..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/setpage/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: devtools.panels.ExtensionSidebarPane.setPage() -slug: Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane/setPage -tags: - - API - - Add-ons - - Extensions - - Reference - - WebExtensions - - setPage -translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane/setPage ---- -

Définit une page HTML à afficher dans le volet latéral.

- -

C'est une fonction asynchrone qui renvoie une Promise.

- -

Syntaxe

- -
browser.devtools.panels.setPage(
-  path // string containing relative path to page
-)
-
- -

Paramètres

- -
-
extensionPageURL
-
string. Le chemin relatif d'une page HTML à afficher dans la barre latérale.
-
- -

Valeur retournée

- -

Une Promise qui sera tenue sans arguments, une fois l'URL définie.

- -

La page sélectionnée ne sera pas chargée tant que l'utilisateur n'aura pas sélectionné la barre latérale devtools.

- -

Exemples

- -

Créez un nouveau volet et remplissez-le d'une page HTML. Vous pouvez exécuter ce code dans un script chargé par la page devtools de votre extension.

- -
function onCreated(sidebarPane) {
-  sidebarPane.setPage('sidebar/sidebar.html');
-}
-
- -

{{WebExtExamples}}

- -

Compatibilité du navigateur

- -

{{Compat("webextensions.api.devtools.panels.ExtensionSidebarPane.setPage", 10)}}

- - - - - -
Remerciements - -

Cette API est basée sur l'API Chromium chrome.devtools.panels.

-
- - diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/index.html deleted file mode 100644 index 9f2c06e2a0..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: devtools.panels -slug: Mozilla/Add-ons/WebExtensions/API/devtools.panels -tags: - - API - - Add-ons - - Extensions - - Reference - - WebExtensions - - devtools.panels -translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.panels ---- -
{{AddonSidebar}}
- -
-

Bien que les API soient basées sur les APIs de devtools de Chrome, il existe encore de nombreuses fonctionnalités qui ne sont pas encore implémentées dans Firefox et ne sont donc pas documentées ici. Pour voir les fonctionnalités actuellement manquantes, regarder  Limitations des APIs devtools.

-
- -

L'API devtools.panels permet à une extension devtools de définir son interface utilisateur à l'intérieur de la fenêtre devtools.

- -

La fenêtre devtools héberge un certain nombre d'outils distincts - le débogueur JavaScript, le moniteur réseau, etc. Une rangée d'onglets sur le haut permet à l'utilisateur de basculer entre les différents outils. La fenêtre hébergeant l'interface utilisateur de chaque outil s'appelle un "panneau".

- -

Avec l'API devtools.panels, vous pouvez créer de nouveaux panneaux dans la fenêtre des devtools.

- -

Comme toutes les API de devtools, cette API est uniquement disponible pour le code exécuté dans le document défini dans la clé devtools_page du manifest.json, ou dans d'autres documents de déploiement créés par une extension (tel que le document du panneau). Voir Extension des outils de développement pour plus for d'informations.

- -

Types

- -
-
devtools.panels.ElementsPanel
-
Représente l'inspecteur HTML/CSS dans le devtools du navigateur
-
devtools.panels.ExtensionPanel
-
Représente un panneau de déploiement créé par l'extension.
-
devtools.panels.ExtensionSidebarPane
-
Représente un volet ajouté par une extension à l'inspecteur HTML/CC dans les devtools du navigateur.
-
- -

Propriétés

- -
-
devtools.panels.elements
-
Une référence à un objet ElementsPanel.
-
devtools.panels.themeName
-
Le nom du thème actuel des devtools.
-
- -

Fonctions

- -
-
devtools.panels.create()
-
Créé un nouveau panneau de développement
-
- -

Evénements

- -
-
devtools.panels.onThemeChanged
-
Mise en place lorsque le thème Devtools change.
-
- -

Compatibilité du navigateur

- -

{{Compat("webextensions.api.devtools.panels", 2)}}

- -

{{WebExtExamples("h2")}}

- -
Remerciements - -

Cette API est basée sur l'API Chromium chrome.devtools.panels.

- -

Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis.

-
- - diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/onthemechanged/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/onthemechanged/index.html deleted file mode 100644 index 75c9b94ccc..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/onthemechanged/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: devtools.panels.onThemeChanged -slug: Mozilla/Add-ons/WebExtensions/API/devtools.panels/onThemeChanged -tags: - - API - - Add-ons - - DevTools - - Reference - - WebExtensions - - devtools.panels - - onThemeChanged -translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.panels/onThemeChanged ---- -
{{AddonSidebar()}}
- -

Remplacement quand le thème de devtools change

- -

Syntaxe

- -
browser.devtools.panels.onThemeChanged.addListener(listener)
-browser.devtools.panels.onThemeChanged.removeListener(listener)
-browser.devtools.panels.onThemeChanged.hasListener(listener)
-
- -

Les événements ont trois fonctions :

- -
-
addListener(callback)
-
Ajoute un auditeur à cet événement
-
removeListener(listener)
-
Arrêtez d'écouter cet événement. L'argument de l'auditeur est l'auditeur à supprimer.
-
hasListener(listener)
-
Vérifiez si l'auditeur est enregistré pour cet événement. Renvoie Vrai si elle écoute, sinon Faux.
-
- -

Syntaxe addListener

- -

Paramètres

- -
-
callback
-
-

Function qui sera appelée lors de l'événement. La fonction passera les arguments suivants :

- -
-
themeName
-
string. Nom du nouveau thème : ce sera l'une des valeurs autorisées pour  devtools.panels.themeName.
-
-
-
- -

Compatibilité du navigateur

- - - -

{{Compat("webextensions.api.devtools.panels.onThemeChanged")}}

- -

Exemples

- -
browser.devtools.panels.onThemeChanged.addListener((newThemeName) => {
-  console.log(`New theme: ${newThemeName}`);
-});
-
- -

{{WebExtExamples}}

- -
Remerciements - -

Cette API est basée sur l'API Chromium chrome.devtools.panels.

- -

Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis.

-
diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/themename/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/themename/index.html deleted file mode 100644 index abddedc962..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/themename/index.html +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: devtools.panels.themeName -slug: Mozilla/Add-ons/WebExtensions/API/devtools.panels/themeName -tags: - - API - - Add-ons - - DevTools - - Reference - - WebExtensions - - devtools.panels - - themeName -translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.panels/themeName ---- -
{{AddonSidebar()}}
- -

Le nom du thème de devtools actuellement sélectionné.

- -

Il s'agit d'une chaîne dont les valeurs possibles sont :

- - - -

Compatibilité du navigateur

- - - -

{{Compat("webextensions.api.devtools.panels.themeName")}}

- -

{{WebExtExamples}}

- -
Remerciements - -

Cette API est basée sur l'API Chromium chrome.devtools.panels.

- -

Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis.

-
diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/eval/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/eval/index.html new file mode 100644 index 0000000000..f6cf7e86bb --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/eval/index.html @@ -0,0 +1,219 @@ +--- +title: devtools.inspectedWindow.eval() +slug: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/eval +tags: + - API + - Add-ons + - Devtools.inspectedWindows + - Extensions + - Reference + - WebExtensions + - eval +translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/eval +--- +
{{AddonSidebar()}}
+ +

Exécute JavaScript dans la fenêtre à laquelle les devtools sont attachés.

+ +

C'est un peu comme utiliser {{WebExtAPIRef("tabs.executeScript()")}} pour joindre un script de contenu, mais avec deux différences principales:

+ +

Tout d'abord, le JavaScript peut utiliser un ensemble de commandes spéciales que les navigateurs fournissent généralement dans leur implémentation de console devtools : par exemple, en utilisant "$0" pour designer l'élément actuellement sélectionné dans l'inspecteur.

+ +

Deuxièmement, le JavaScript que vous exécutez peut voir les modifications apportées à la page par des scripts que la page a chargés. Cela contraste avec les scripts de contenu, qui voient la page telle qu'elle existerait si aucun script de page n'était pas chargé. Cependant, notez que l'isolement fourni par les scripts de contenu est une fonction de sécurité délibérée, destinée à rendre plus difficile la confusion ou la subversion des WebExtensions par des pages web malveillantes ou simplement non coopératives en redéfinissant les fonctions et les propriétés du DOM. Cela signifie que vous devez être très prudent si vous renoncez à cette protection en utilisant eval(), et devrait utiliser les scripts de contenu, sauf si vous devez utiliser eval().

+ +

Le script est évalué par défaut dans le cadre principal de la page. Le script doit évaluer une valeur qui peut être représentée comme JSON (ce qui signifie que, par exemple, il peut ne pas évaluer une fonction ou un objet contenant des fonctions). Par défaut, le script ne voit pas les scripts de contenu attachés à la page.

+ +

Vous ne pouvez pas appeler eval() sur les fenêtres de navigateur privilégiées telles que "about: addons".

+ +

Vous pouvez éventuellement fournir un paramètre d'options, qui comprend des options pour évaluer le script dans une image différente ou dans le contexte des scripts de contenu attachés. Notez que Firefox ne supporte pas encore le paramètre d'options.

+ +

La fonction eval() renvoie une Promise qui résout le résultat évalué du script ou une erreur.

+ +

Aides

+ +

Le script accède à un certain nombre d'objets qui aident le script injecté à interagir avec les outils du développeur. Les assistants suivants sont actuellement pris en charge:

+ +
+
$0
+
Contient une référence à l'élément actuellement sélectionné dans l'inspecteur Devtools.
+
inspect()
+
Etant donné un objet, s'il s'agit d'un élément DOM dans la page, sélectionnez-le dans l'inspecteur devtools, sinon il crée un aperçu de l'objet dans la webconsole.
+
+ +

Voir quelques exemples.

+ +

Syntaxe

+ +
var evaluating = browser.devtools.inspectedWindow.eval(
+  expression,       // string
+  options           // object
+)
+
+ +

Paramètres

+ +
+
expression
+
string. L'expression JavaScript à évaluer. La chaîne doit évaluer un objet qui peut être représenté comme JSON, ou une exception sera lancée. Par exemple, l'expression ne doit pas évaluer une fonction.
+
options{{optional_inline}}
+
object. Options pour la fonction  (Notez que Firefox ne supporte pas encore cette option), comme suit :
+
+
+
frameURL{{optional_inline}}
+
string. L'URL du cadre dans lequel à évaluer l'expression. Si cela est supprimé, l'expression est évaluée dans la trame principale de la fenêtre.
+
useContentScriptContext{{optional_inline}}
+
boolean. Si c'est vrai, évaluez l'expression dans le contexte des scripts de contenu que cette extension a attachée à la page. Si vous définissez cette option, vous devez d'abord attacher certains scripts de contenu à la page ou une erreur Devtools sera lancée.
+
contextSecurityOrigin {{optional_inline}}
+
string. Evaluez l'expression dans le contexte d'un script de contenu attaché par une extension différente, dont l'origine correspond à la valeur donnée ici. Ces remplacements sont useContentScriptContext.
+
+
+
+ +

Valeur retournée

+ +

Une Promise qui sera remplie avec un tableau contenant deux éléments.

+ +

Si aucune erreur n'est survenue, l'élément 0 contiendra le résultat de l'évaluation de l'expression et l'élément 1 sera indéfini.

+ +

Si une erreur s'est produite, l'élément 0 sera indéfini et l'élément 1 contiendra un objet donnant des détails sur l'erreur. Deux types différents d'erreurs sont distingués :

+ + + +

Compatibilité des navigateurs

+ +

{{Compat("webextensions.api.devtools.inspectedWindow.eval")}}

+ + + +

Exemples

+ +

Ceci teste si jQuery est défini dans la fenêtre inspectée et enregistre le résultat. Notez que cela ne fonctionnerait pas dans un script de contenu, car même si jQuery était défini, le script de contenu ne le verrait pas.

+ +
function handleError(error) {
+  if (error.isError) {
+    console.log(`Devtools error: ${error.code}`);
+  } else {
+    console.log(`JavaScript error: ${error.value}`);
+  }
+}
+
+function handleResult(result) {
+  console.log(result);
+  if (result[0] !== undefined) {
+    console.log(`jQuery: ${result[0]}`);
+  } else if (result[1]) {
+    handleError(result[1]);
+  }
+}
+
+const checkjQuery = "typeof jQuery != 'undefined'";
+
+evalButton.addEventListener("click", () => {
+  browser.devtools.inspectedWindow.eval(checkjQuery)
+    .then(handleResult);
+});
+ +

Exemples d'aide

+ +

Cela utilise l'aide de $0 pour définir la couleur d'arrière-plan de l'élément, actuellement sélectionné dans l'inspecteur :

+ +
const evalButton = document.querySelector("#reddinate");
+const evalString = "$0.style.backgroundColor = 'red'";
+
+function handleError(error) {
+  if (error.isError) {
+    console.log(`Devtools error: ${error.code}`);
+  } else {
+    console.log(`JavaScript error: ${error.value}`);
+  }
+}
+
+function handleResult(result) {
+  if (result[1]) {
+    handleError(result[1]);
+  }
+}
+
+evalButton.addEventListener("click", () => {
+  browser.devtools.inspectedWindow.eval(evalString)
+    .then(handleResult);
+});
+
+ +

Cela utilise l'assistant l'inspection() pour sélectionner le premier élément <h1> dans la page:

+ +
const inspectButton = document.querySelector("#inspect");
+const inspectString = "inspect(document.querySelector('h1'))";
+
+function handleError(error) {
+  if (error.isError) {
+    console.log(`Devtools error: ${error.code}`);
+  } else {
+    console.log(`JavaScript error: ${error.value}`);
+  }
+}
+
+function handleResult(result) {
+  if (result[1]) {
+    handleError(result[1]);
+  }
+}
+
+inspectButton.addEventListener("click", () => {
+  browser.devtools.inspectedWindow.eval(inspectString)
+    .then(handleResult);
+});
+
+ +

{{WebExtExamples}}

+ +
Remerciements + +

Cette API est basée sur l'API Chromium chrome.devtools.

+ +

Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis.

+
+ + diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/index.html new file mode 100644 index 0000000000..2f077b4e9d --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/index.html @@ -0,0 +1,82 @@ +--- +title: devtools.inspectedWindow +slug: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow +tags: + - API + - Add-ons + - Devtools.inspectedWindows + - Extensions + - Reference + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow +--- +
{{AddonSidebar}}
+ +
+

Cette page décrit les API de développement de WebExtensions telles qu'elles existent dans Firefox 54. Bien que les API soient basées sur les APIs de devtools de Chrome, il existe encore de nombreuses fonctionnalités qui ne sont pas encore implémentées dans Firefox et ne sont donc pas documentées ici. Pour voir les fonctionnalités actuellement manquantes, regarder  Limitations des APIs devtools.

+
+ +

L'API devtools.inspectedWindow permet à un extension de devtools d'interagir avec la fenêtre sur laquelle les outils de développement sont attachés.

+ +

Comme toutes les APIs de devtools, cette API n'est disponible que pour exécuter le code dans le document défini dans la clé devtools_page du manifest.json, où dans d'autres documents devtools créés par l'extension (tels que le document hébergé par un panneau, l'extension créée). Voir Extension des outils de développement  pour plus d'informations.

+ +

Propriétés

+ +
+
devtools.inspectedWindow.tabId
+
L'ID de la fenêtre sur laquelle sont attachés les outils du développeur.
+
+ +

Fonctions

+ +
+
devtools.inspectedWindow.eval()
+
Evaluez certains JavaScript dans la fenêtre de destination.
+
devtools.inspectedWindow.reload()
+
Rechargez le document de la fenêtre destination.
+
+ +

Comptatibilité navigateur

+ +

{{Compat("webextensions.api.devtools.inspectedWindow")}}

+ +

{{WebExtExamples("h2")}}

+ + + +
Remerciements + +

Cette API est basée sur l'API Chromium chrome.devtools.inspectedWindow.

+ +

Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis.

+
+ + diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/reload/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/reload/index.html new file mode 100644 index 0000000000..f2f7b8cdc8 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/reload/index.html @@ -0,0 +1,100 @@ +--- +title: devtools.inspectedWindow.reload() +slug: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/reload +tags: + - API + - Add-ons + - Extensions + - Reference + - WebExtensions + - devtools.inspectedWindow + - reload +translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/reload +--- +
{{AddonSidebar()}}
+ +

Recharge la fenêtre à laquelle les devtools sont attachés.

+ +

Syntaxe

+ +
browser.devtools.inspectedWindow.reload(
+  reloadOptions       // object
+)
+
+ +

Paramètres

+ +
+
reloadOptions{{optional_inline}}
+
object. Options pour la fonction, comme suit
+
+
+
ignoreCache{{optional_inline}}
+
boolean. S'il est vrai, cela fait que le rechargement ignore le cache du navigateur (comme si l'utilisateur avait appuyé sur Shift+Ctrl+R).
+
userAgent{{optional_inline}}
+
string. Définissez un agent utilisateur personnalisé pour la page. Ici, la chaîne fournie sera envoyée dans l'en-tête de l'Agent utilisateur, et sera renvoyée par les appels à navigator.userAgent réalisé par des scripts s'exécutant sur la page.
+
injectedScript {{optional_inline}}
+
string. Injectez l'expression JavaScript donnée dans toutes les images de la page, avant tout autre script.
+
+
+
+ +

Compatibilité du navigateur

+ +

{{Compat("webextensions.api.devtools.inspectedWindow.reload")}}

+ + + +

Exemples

+ +

Rechargez la fenêtre inspectée, définissez l'agent utilisateur et injectez un script

+ +
const reloadButton = document.querySelector("#reload-button");
+
+reloadButton.addEventListener("click", () => {
+  browser.devtools.inspectedWindow.reload({
+    injectedScript:"alert(navigator.userAgent);",
+    userAgent: "Not a real UA"
+  });
+});
+
+ +

{{WebExtExamples}}

+ +
Remerciements + +

Cette API est basée sur l'API Chromium chrome.devtools.

+ +

Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis.

+
+ + diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/tabid/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/tabid/index.html new file mode 100644 index 0000000000..b5b3d3b0b2 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/tabid/index.html @@ -0,0 +1,85 @@ +--- +title: devtools.inspectedWindow.tabId +slug: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/tabId +tags: + - API + - Add-ons + - Extensions + - Reference + - WebExtensions + - devtools.inpectedWindow + - tabId +translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/tabId +--- +
{{AddonSidebar()}}
+ +

L'ID de {{WebExtAPIRef("tabs.Tab", "tab")}} est que cette instance des devtools est jointe, représenté comme un nombre.

+ +

Cela peut être envoyé à la page de fond de l'extension, de sorte que la page d'arrière plan peut utiliser l'API {{WebExtAPIRef("tabs")}} pour interargir avec l'onglet :

+ +
// devtools-panel.js
+
+const scriptToAttach = "document.body.innerHTML = 'Hi from the devtools';";
+
+attachContentScriptButton.addEventListener("click", () => {
+  browser.runtime.sendMessage({
+    tabId: browser.devtools.inspectedWindow.tabId,
+    script: scriptToAttach
+  });
+});
+ +
// background.js
+
+function handleMessage(request, sender, sendResponse) {
+  browser.tabs.executeScript(request.tabId, {
+    code: request.script
+  });
+}
+
+browser.runtime.onMessage.addListener(handleMessage);
+ +

Compatibilité du navigateur

+ +

{{Compat("webextensions.api.devtools.inspectedWindow.tabId")}}

+ + + +

{{WebExtExamples}}

+ +
Remerciements + +

Cette API est basée sur l'API Chromium chrome.devtools.

+ +

Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis.

+
+ + diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/network/gethar/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools/network/gethar/index.html new file mode 100644 index 0000000000..abcdf667e6 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/network/gethar/index.html @@ -0,0 +1,88 @@ +--- +title: devtools.network.getHAR() +slug: Mozilla/Add-ons/WebExtensions/API/devtools.network/getHAR +tags: + - Add-ons + - Extensions + - WebExtensions + - devtools.network + - getHAR +translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.network/getHAR +--- +
{{AddonSidebar()}}
+ +

Obtenez un journal HAR pour la page chargée dans l'onglet en cours.

+ +

C'est une fonction asynchrone qui renvoie une Promise.

+ +

Syntaxe

+ +
var getting = browser.devtools.network.getHAR()
+
+ +

Paramètres

+ +

None.

+ +

Valeur retournée

+ +

Une Promise qui sera remplie avec un objet contenant le journal HAR pour l'onglet en cours. Pour plus de détails sur ce que contient l'objet journal, reportez-vous à la spécification HAR.

+ +

Compatibilité du navigateur

+ + + +

{{Compat("webextensions.api.devtools.network.getHAR")}}

+ +

Exemples

+ +

Consignez les URL des demandes contenues dans le journal HAR :

+ +
async function logRequests() {
+  let harLog = await browser.devtools.network.getHAR();
+  console.log(`HAR version: ${harLog.version}`);
+  for (let entry of harLog.entries) {
+    console.log(entry.request.url);
+  }
+}
+
+logRequestsButton.addEventListener("click", logRequests);
+
+ +

{{WebExtExamples}}

+ +
Remerciements : + +

Cette API est basée sur l'API Chromium chrome.devtools.network.

+
+ + diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/network/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools/network/index.html new file mode 100644 index 0000000000..580a823371 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/network/index.html @@ -0,0 +1,75 @@ +--- +title: devtools.network +slug: Mozilla/Add-ons/WebExtensions/API/devtools.network +tags: + - API + - Add-ons + - Extensions + - Reference + - WebExtensions + - devtools.network +translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.network +--- +
{{AddonSidebar}}
+ +

L'API devtools.network permet à une extension devtools d'obtenir des informations sur les demandes de réseau associées à la fenêtre à laquelle les devtools sont attachés (la fenêtre inspectée).

+ +

Comme toutes les APIs de devtools, cette API est uniquement disponible pour le code exécuté dans le document défini dans la clé devtools_page du manifest.json, ou dans d'autres documents de devtools créés par l'extension (tel que le document du panneau). Voir Extension des outils de développement pour plus d'informations.

+ +

Fonctions

+ +
+
devtools.network.getHAR()
+
Obtenez le  journal HAR pour la page chargée dans l'onglet en cours..
+
+ +

Evénements

+ +
+
devtools.network.onNavigated
+
Attiré lorsque l'utilisateur navigue dans la fenêtre inspectée vers une nouvelle page.
+
devtools.network.onRequestFinished
+
Lancé lorsque la demande réseau est terminée et que ses détails sont disponibles pour l'extension.
+
+ +

Compatibilité du navigateur

+ +

{{Compat("webextensions.api.devtools.network")}}

+ +

{{WebExtExamples("h2")}}

+ +
Remerciements : + +

Cette API est basée sur l'API Chromium chrome.devtools.network.

+
+ + diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/network/onnavigated/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools/network/onnavigated/index.html new file mode 100644 index 0000000000..b7f0d0af31 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/network/onnavigated/index.html @@ -0,0 +1,103 @@ +--- +title: devtools.network.onNavigated +slug: Mozilla/Add-ons/WebExtensions/API/devtools.network/onNavigated +tags: + - API + - Add-ons + - Extensions + - Reference + - WebExtensions + - devtools.network +translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.network/onNavigated +--- +
{{AddonSidebar()}}
+ +

Mise en place lorsque l'utilisateur navigue dans la fenêtre inspectée vers une nouvelle page

+ +

Syntaxe

+ +
browser.devtools.network.onNavigated.addListener(listener)
+browser.devtools.network.onNavigated.removeListener(listener)
+browser.devtools.network.onNavigated.hasListener(listener)
+
+ +

Les événements ont trois fonctions :

+ +
+
addListener(listener)
+
Ajouter un auditeur à cet événement.
+
removeListener(listener)
+
Arrêter d'écouter un événement. L'argument de l'auditeur est l'auditeur à supprimer.
+
hasListener(listener)
+
Vérifiez si l'auditeur est enregistré pour cet événement. Renvoie vrai si elle écoute, sinon faux.
+
+ +

Syntaxe addListener

+ +

Paramètres

+ +
+
callback
+
+

Fonction qui sera appelée lors de l'événement. La fonction passera les arguments suivants :

+ +
+
url
+
string. La nouvelle URL pour la fenêtre.
+
+
+
+ +

Compatibilité du navigateur

+ +

{{Compat("webextensions.api.devtools.network.onNavigated")}}

+ + + +

Exemples

+ +
function handleNavigated(url) {
+  console.log(url);
+}
+
+browser.devtools.network.onNavigated.addListener(handleNavigated);
+ +

{{WebExtExamples}}

+ +
Remerciements + +

Cette API est basée sur l'API chrome.devtools de Chromium.

+ +

Les données de compatibilité de  Microsoft Edge sont fournies par Microsoft Corporation et sont incluses ici sous la licence Creative Commons Attribution 3.0 United States.

+
+ + diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/network/onrequestfinished/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools/network/onrequestfinished/index.html new file mode 100644 index 0000000000..e2b4d930fc --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/network/onrequestfinished/index.html @@ -0,0 +1,112 @@ +--- +title: devtools.network.onRequestFinished +slug: Mozilla/Add-ons/WebExtensions/API/devtools.network/onRequestFinished +tags: + - API + - Add-ons + - Event + - Extensions + - Reference + - WebExtensions + - devtools.network + - onRequestFinished +translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.network/onRequestFinished +--- +
{{AddonSidebar()}}
+ +

Lancé lorsqu'une requête réseau est terminée et que ses détails sont disponibles pour l'extension.

+ +

La requête est donnée en tant qu'objet d'entrée HAR, qui est également doté d'une méthode getContent() asynchrone qui récupère le contenu du corps de la réponse.

+ +

Notez que bien que votre extension puisse ajouter un écouteur à tout moment,elle commencera seulement à se déclencher après que l'utilisateur a activé le moniteur réseau du navigateur au moins une fois.

+ +

Syntaxe

+ +
browser.devtools.network.onRequestFinished.addListener(listener)
+browser.devtools.network.onRequestFinished.removeListener(listener)
+browser.devtools.network.onRequestFinished.hasListener(listener)
+
+ +

Les événements ont trois fonctions

+ +
+
addListener(listener)
+
Ajoute un écouteur à cet événement.
+
removeListener(listener)
+
Arrêtez d'écouter cet événement. L'argument de listener  est l'écouteur à supprimer.
+
hasListener(listener)
+
Vérifiez si listener est enregistré pour cet événement. Renvoie trues'il écoute, sinon false.
+
+ +

Syntaxe addListener

+ +

Paramètres

+ +
+
callback
+
+

Fonction qui sera appelée lorsque cet événement se produit. La fonction recevra les arguments suivants :

+ +
+
request
+
object. Un objet représentant la requête. Cet objet est un seul objet d'entrée HAR. Il définit également une méthode getContent() asynchrone, qui renvoie une Promise qui se résout avec le corps de la réponse.
+
+
+
+ +

Compatibilité du navigateur

+ +

{{Compat("webextensions.api.devtools.network.onRequestFinished")}}

+ + + +

Examples

+ +

Ajoutez un écouteur qui consigne l'adresse IP du serveur et le corps de la réponse pour chaque requête réseau.

+ +
function handleRequestFinished(request) {
+  console.log("Server IP: ", request.serverIPAddress);
+  request.getContent().then(content => {
+    console.log("Content: ", content);
+  });
+}
+
+browser.devtools.network.onRequestFinished.addListener(handleRequestFinished);
+ +

{{WebExtExamples}}

+ +
Remerciements + +

Cette API est basée sur l'API chrome.devtools de Chromium.

+
+ + diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/create/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/create/index.html new file mode 100644 index 0000000000..60de8f3871 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/create/index.html @@ -0,0 +1,110 @@ +--- +title: devtools.panels.create() +slug: Mozilla/Add-ons/WebExtensions/API/devtools.panels/create +tags: + - API + - Add-ons + - Create + - Extensions + - Reference + - WebExtensions + - devtools.panels +translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.panels/create +--- +
{{AddonSidebar()}}
+ +

Ajoute un nouveau panneau aux devtools.

+ +

Cette fonction prend : un titre, une URL vers un fichier d'icône et une URL vers un fichier HTML. Il crée un nouveau panneau dans les devtools, dont le contenu est spécifié par le fichier HTML. Il renvoie une Promise qui résout un objet ExtensionPanel représentant le nouveau panneau.

+ +

Syntaxe

+ +
var creating = browser.devtools.panels.create(
+  title,       // string
+  iconPath,    // string
+  pagePath     // string
+)
+
+ +

Parametères

+ +
+
title
+
string. Le titre du panneau. Cela apparaitra dans la rangée des onglets le long du haut de la fenêtre des devtools, et c'est la principale façon dont l'utilisateur pourra identifier votre panneau.
+
iconPath
+
string. Spécifie une icône qui sera affichée à côté du titre. Il est fourni sous forme d'URL vers un fichier image qui a été fourni avec votre extension. L'URL est résolue par rapport à la page d'extension courante (sauf si elle est exprimée en url absolue, par exemple "/icons/panel.png").
+
pagePath
+
string. Spécifie un fichier HTML qui définit le contenu réel du panneau. Il est fourni sous la forme d'une URL d'un fichier HTML qui a été regroupé avec votre extension. L'URL est résolue par rapport à la page d'extension courante (sauf si elle est exprimée en url absolue, par exemple "/devtools/panel.html"). Le fichier HTML peut include des fichiers CSS et JavaScript, juste comme une page web normale. Le JavaScript en cours d'éxécution dans le panneau pourra utiliser les API devtools. Voir Extention des outils de développement.
+
+ +

Valeur retournée

+ +

Une Promise qui sera remplie avec un objet ExtensionPanel représentant le nouveau panneau.

+ +

Compatibilité du navigateur

+ +

{{Compat("webextensions.api.devtools.panels.create")}}

+ + + +

Exemples

+ +

Créer un nouveau panneau, et ajoute des auditeurs à ces événements onShown et  onHidden :

+ +
function handleShown() {
+  console.log("panel is being shown");
+}
+
+function handleHidden() {
+  console.log("panel is being hidden");
+}
+
+browser.devtools.panels.create(
+  "My Panel",                 // title
+  "/icons/star.png",           // icon
+  "/devtools/panel/panel.html" // content
+).then((newPanel) => {
+  newPanel.onShown.addListener(handleShown);
+  newPanel.onHidden.addListener(handleHidden);
+});
+
+ +

{{WebExtExamples}}

+ +
Remerciements + +

Cette API est basée sur l'API Chromium chrome.devtools.panels.

+ +

Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis.

+
+ + diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/elements/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/elements/index.html new file mode 100644 index 0000000000..18223b2718 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/elements/index.html @@ -0,0 +1,29 @@ +--- +title: devtools.panels.elements +slug: Mozilla/Add-ons/WebExtensions/API/devtools.panels/elements +tags: + - API + - Add-ons + - Elements + - Extensions + - Reference + - WebExtensions + - devtools.panels +translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.panels/elements +--- +
{{AddonSidebar()}}
+ +

Un objet ElementsPanel qui représente l'inspecteur HTML/CSS du navigateur

+ +

Compatibilité du navigateur

+ + + +

{{Compat("webextensions.api.devtools.panels.elements", 10)}}

+ +

{{WebExtExamples}}

+ +
Remerciements + +

Cette API est basée sur l'API Chromium chrome.devtools.panels.

+
diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/elementspanel/createsidebarpane/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/elementspanel/createsidebarpane/index.html new file mode 100644 index 0000000000..7eee52fff5 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/elementspanel/createsidebarpane/index.html @@ -0,0 +1,107 @@ +--- +title: devtools.panels.ElementsPanel.createSidebarPane() +slug: >- + Mozilla/Add-ons/WebExtensions/API/devtools.panels/ElementsPanel/createSidebarPane +tags: + - API + - Add-ons + - DevTools + - Extensions + - Reference + - WebExtensions + - createSidebarPane + - devtools.panels +translation_of: >- + Mozilla/Add-ons/WebExtensions/API/devtools.panels/ElementsPanel/createSidebarPane +--- +
{{AddonSidebar()}}
+ +

Ajoute un nouveau volet à la barre latérale dans l'inspecteur HTML / CSS.

+ +

L'inspecteur HTML / CSS, appelé l'inspecteur de page dans Firefox et le panneau éléments dans Chrome, affiche la page DOM dans la partie principale de sa fenêtre et possède une barre latérale qui affiche divers autres aspects de la page HTML / CSS dans une interface à onglets. Par exemple, dans Firefox, la barre latérale peut afficher les règles CSS pour l'élément sélectionné, ou ses polices, ou son modèle de boîte.

+ +

La fonction createSidebarPane() ajoute un nouveau volet à la barre latérale. ar exemple, la capture d'écran ci-dessous montre un nouveau volet intitulé "My pane", qui affiche un objet JSON :

+ +

+ +

Cette fonction prend un argument, qui est une chaîne représentant le titre du volet. Il renvoie une Promise qui se résout en un objet ExtensionSidebarPane représentant le nouveau volet. Vous pouvez utiliser cet objet pour définir le contenu et le comportement du volet.

+ +

Syntaxe

+ +
var creating = browser.devtools.panels.elements.createSidebarPane(
+  title       // string
+)
+
+ +

Paramètres

+ +
+
title
+
string. Cela apparaîtra dans la rangée d'onglets en haut de la barre latérale, et c'est la principale façon pour l'utilisateur d'identifier votre panneau.
+
+ +

Valeur retournée

+ +

Une Promise qui sera remplie avec un objet ExtensionSidebarPane représentant le nouveau volet.

+ +

Compatibilité du navigateur

+ +

{{Compat("webextensions.api.devtools.panels.ElementsPanel.createSidebarPane", 10)}}

+ + + +

Exemples

+ +

Créez un nouveau volet et remplissez-le avec un objet JSON. Vous pouvez exécuter ce code dans un script chargé par la page devtools.

+ +
function onCreated(sidebarPane) {
+  sidebarPane.setObject({
+    someBool: true,
+    someString: "hello there",
+    someObject: {
+      someNumber: 42,
+      someOtherString: "this is my pane's content"
+    }
+  });
+}
+
+browser.devtools.panels.elements.createSidebarPane("My pane").then(onCreated);
+
+ +

{{WebExtExamples}}

+ +
Remerciements + +

Cette API est basée sur l'API Chromium chrome.devtools.panels.

+
+ + diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/elementspanel/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/elementspanel/index.html new file mode 100644 index 0000000000..5c2a0413c7 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/elementspanel/index.html @@ -0,0 +1,73 @@ +--- +title: devtools.panels.ElementsPanel +slug: Mozilla/Add-ons/WebExtensions/API/devtools.panels/ElementsPanel +tags: + - API + - Add-ons + - DevTools + - Extensions + - Reference + - WebExtensions + - devtools.panels + - devtools.panelsElementsPanel +translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.panels/ElementsPanel +--- +
{{AddonSidebar()}}
+ +

Un ElementsPanel représente l'inspecteur HTML/CSS dans la devtools du navigateur. C'est ce qu'on appelle l'inspecteur de page dans Firefox et le panneau Éléments de Chrome.

+ +

Fonctions

+ +
+
devtools.panels.ElementsPanel.createSidebarPane()
+
Crée un volet dans la barre latérale de l'inspecteur.
+
+

Evénements

+
+
devtools.panels.ElementsPanel.onSelectionChanged
+
Appèle lorsque l'utilisateur sélectionne un élément différent dans la page, par exemple en utilisant l'élément de menu contextuel "inspect élément".
+
+ +

Compatibilité du navigateur

+ + + +

{{Compat("webextensions.api.devtools.panels.ElementsPanel", 10)}}

+ +

{{WebExtExamples}}

+ +
Remerciements + +

Cette API est basée sur l'API Chromium chrome.devtools.panels.

+
+ + diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/elementspanel/onselectionchanged/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/elementspanel/onselectionchanged/index.html new file mode 100644 index 0000000000..e753d5aba1 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/elementspanel/onselectionchanged/index.html @@ -0,0 +1,74 @@ +--- +title: onSelectionChanged +slug: >- + Mozilla/Add-ons/WebExtensions/API/devtools.panels/ElementsPanel/onSelectionChanged +tags: + - API + - Add-ons + - DevTools + - Extensions + - Reference + - WebExtensions + - devtools.panels + - devtools.panelsElementsPanel +translation_of: >- + Mozilla/Add-ons/WebExtensions/API/devtools.panels/ElementsPanel/onSelectionChanged +--- +
{{AddonSidebar()}}
+ +

Appelles lorsque l'utilisateur sélectionne un élément de page différent pour l'inspection avec les outils de développement du navigateur, par exemple en sélectionnant l'élément de menu contextuel "Inspect Element" dans Firefox.

+ +

Syntaxe

+ +
browser.devtools.panels.elements.onSelectionChanged.addListener(listener)
+browser.devtools.panels.elements.onSelectionChanged.removeListener(listener)
+browser.devtools.panels.elements.onSelectionChanged.hasListener(listener)
+
+ +

L'événement a trois fonctions :

+ +
+
addListener(listener)
+
Ajoute une écoute à cet événement.
+
removeListener(listener)
+
Arrête une écoute à l'événement. L'argument de l'auditeur est un auditeur supprimer.
+
hasListener(listener)
+
Vérifiez si l'auditeur est enregistré pour cet événement. Renvoie la valeur Vrai si elle l'écoute, sinon Faux.
+
+ +

Syntaxe addListener

+ +

Paramètres

+ +
+
callback
+
+

Fonction qui sera appelée lors de l'événement. La fonction ne passera pas d'arguments.

+
+
+ +

Compatibilité du navigateur

+ + + +

{{Compat("webextensions.api.devtools.panels.ElementsPanel.onSelectionChanged", 10)}}

+ +

Exemples

+ +

Ecoutez la sélection des événements modifiés, et enregistrez le contenu du texte de l'élément nouvellement sélectionné :

+ +
function handleSelectedElement() {
+  browser.devtools.inspectedWindow.eval("$0.textContent")
+    .then((result) => {
+      console.log(result[0]);
+    });
+}
+
+browser.devtools.panels.elements.onSelectionChanged.addListener(handleSelectedElement);
+ +

{{WebExtExamples}}

+ +
Remerciements + +

Cette API est basée sur l'API Chromium chrome.devtools.

+
diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionpanel/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionpanel/index.html new file mode 100644 index 0000000000..e083ff02b3 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionpanel/index.html @@ -0,0 +1,93 @@ +--- +title: devtools.panels.ExtensionPanel +slug: Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionPanel +tags: + - API + - Add-ons + - Extensions + - Reference + - WebExtensions + - devtools.panels +translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionPanel +--- +
{{AddonSidebar()}}
+ +

Une ExtensionPanel représente un panneau ajouté aux devtools. C'est la résolution de la Promise renvoyé par browser.devtools.panels.create().

+ +

Type

+ +

Les valeurs de ce type sont des objets. Définissez deux événements, onShown et onHidden.

+ + + +

Compatibilité du navigateur

+ +

{{Compat("webextensions.api.devtools.panels.ExtensionPanel")}}

+ + + +

Exemples

+ +

Ce code crée un nouveau panneau, puis ajoute des gestionnaires pour ces événements onShown et onHidden.

+ +
function handleShown(e) {
+  console.log(e);
+  console.log("panel is being shown");
+}
+
+function handleHidden(e) {
+  console.log(e);
+  console.log("panel is being hidden");
+}
+
+browser.devtools.panels.create(
+  "My Panel",                 // title
+  "icons/star.png",           // icon
+  "devtools/panel/panel.html" // content
+).then((newPanel) => {
+  newPanel.onShown.addListener(handleShown);
+  newPanel.onHidden.addListener(handleHidden);
+});
+ +

{{WebExtExamples}}

+ +
Remerciements + +

Cette API est basée sur l'API Chromium chrome.devtools.panels.

+ +

Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis.

+
+ + diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionsidebarpane/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionsidebarpane/index.html new file mode 100644 index 0000000000..02ee0a2073 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionsidebarpane/index.html @@ -0,0 +1,89 @@ +--- +title: devtools.panels.ExtensionSidebarPane +slug: Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane +tags: + - API + - Add-ons + - DevTools + - Extensions + - Reference + - WebExtensions + - devtools.panels + - devtools.panels.ExtensionSidebarPane +translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane +--- +
{{AddonSidebar}}
+ +

L'objet ExtensionSidebarPane représente un volet qu'une extension a ajouté à la barre latérale dans l'inspecteur HTML/CSS du navigateur.

+ +

+ +

Pour créer un ExtensionSidebarPane, appelez la fonction browser.devtools.panels.elements.createSidebarane().

+ +

Fonctions

+ +
+
devtools.panels.ExtensionSidebarPane.setExpression()
+
+

Évaluer une expression JavaScript dans la page Web inspectée par l'inspecteur. Le résultat est affiché dans le volet de la barre latérale.

+
+
devtools.panels.ExtensionSidebarPane.setObject()
+
+

Définit un objet JSON qui sera affiché dans le volet de la barre latérale.

+
+
devtools.panels.ExtensionSidebarPane.setPage()
+
+

Charge la page pointée par l'URL fournie.

+
+
+ +

Evénements

+ +
+
devtools.panels.ExtensionSidebarPane.onShown
+
Lancé lorsque le volet latéral est affiché.
+
devtools.panels.ExtensionSidebarPane.onHidden
+
Lancé lorsque le volet de la barre latérale est masqué.
+
+ +

Compatibilité du navigateur

+ +

{{Compat("webextensions.api.devtools.panels.ExtensionSidebarPane", 10)}}

+ +

{{WebExtExamples("h2")}}

+ +
Remerciements + +

Cette API est basée sur l'API Chromium chrome.devtools.panels.

+
+ + diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionsidebarpane/onhidden/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionsidebarpane/onhidden/index.html new file mode 100644 index 0000000000..a1a18463e5 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionsidebarpane/onhidden/index.html @@ -0,0 +1,80 @@ +--- +title: devtools.panels.ExtensionSidebarPane.onHidden +slug: >- + Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane/onHidden +tags: + - API + - Add-ons + - ExtensionSidebarPane + - Extensions + - Reference + - WebExtensions + - devtools.panels + - onHidden +translation_of: >- + Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane/onHidden +--- +
{{AddonSidebar()}}
+ +

Appelé lorsque le volet de la barre latérale est masqué, suite à l'abandon de l'utilisateur.

+ +

Syntaxe

+ +
browser.devtools.panels.onHidden.addListener(listener)
+browser.devtools.panels.onHidden.removeListener(listener)
+browser.devtools.panels.onHidden.hasListener(listener)
+
+ +

Les événements ont trois fonctions:

+ +
+
addListener(callback)
+
Ajoute un écouteur à cet événement.
+
removeListener(listener)
+
Arrête d'écouter cet événement. L'argument listener est l'écouteur à supprimer.
+
hasListener(listener)
+
Vérifie si listener est enregistré pour cet événement. Renvoie true s'il écoute,  sinon false.
+
+ +

Syntaxe addListener

+ +

Paramètres

+ +
+
callback
+
+

Fonction appelée lorsque cet événement se produit. Cette fonction sera passée sans arguments.

+
+
+ +

Compatibilité du navigateur

+ + + +

{{Compat("webextensions.api.devtools.panels.ExtensionSidebarPane.onHidden", 10)}}

+ +

Exemples

+ +

Créez un volet de barre latérale et journal afficher et masquer les événements.

+ +
function onCreated(sidebarPane) {
+
+  sidebarPane.onShown.addListener(() => {
+    console.log("Shown");
+  });
+
+  sidebarPane.onHidden.addListener(() => {
+    console.log("Hidden");
+  });
+
+}
+
+browser.devtools.panels.elements.createSidebarPane("My pane").then(onCreated);
+
+ +

{{WebExtExamples}}

+ +
Remerciements + +

Cette API est basée sur l'API Chromium chrome.devtools.panels.

+
diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionsidebarpane/onshown/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionsidebarpane/onshown/index.html new file mode 100644 index 0000000000..3ca3412af2 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionsidebarpane/onshown/index.html @@ -0,0 +1,78 @@ +--- +title: devtools.panels.ExtensionSidebarPane.onShown +slug: Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane/onShown +tags: + - API + - Add-ons + - Extensions + - ExtesionsSidebarPane + - Reference + - WebExtensions + - devtools.panels + - onShown +translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane/onShown +--- +
{{AddonSidebar()}}
+ +

Lancé lorsque le volet latéral devient visible suite à un changement d'utilisateur.

+ +

Syntaxe

+ +
browser.devtools.panels.onShown.addListener(listener)
+browser.devtools.panels.onShown.removeListener(listener)
+browser.devtools.panels.onShown.hasListener(listener)
+
+ +

Les événements ont trois fonctions :

+ +
+
addListener(callback)
+
Ajoute un écouteur à cet événement.
+
removeListener(listener)
+
Arrêtez d'écouter cet événement. L'argument de listener est l'écouteur à supprimer.
+
hasListener(listener)
+
Vérifiez si listener est enregistré pour cet événement. Renvoie true s'il écoute, sinon false.
+
+ +

Syntaxe addListener

+ +

Paramètres

+ +
+
callback
+
+

Fonction qui sera appelée lorsque cet événement se produit. La fonction sera passée sans arguments.

+
+
+ +

Compatibilité du navigateur

+ + + +

{{Compat("webextensions.api.devtools.panels.ExtensionSidebarPane.onShown", 10)}}

+ +

Exemples

+ +

Créez un volet de barre latérale et journal afficher et masquer les événements.

+ +
function onCreated(sidebarPane) {
+
+  sidebarPane.onShown.addListener(() => {
+    console.log("Shown");
+  });
+
+  sidebarPane.onHidden.addListener(() => {
+    console.log("Hidden");
+  });
+
+}
+
+browser.devtools.panels.elements.createSidebarPane("My pane").then(onCreated);
+
+ +

{{WebExtExamples}}

+ +
Remerciements + +

Cette API est basée sur l'API Chromium chrome.devtools.panels.

+
diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionsidebarpane/setexpression/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionsidebarpane/setexpression/index.html new file mode 100644 index 0000000000..d2c97c5f82 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionsidebarpane/setexpression/index.html @@ -0,0 +1,106 @@ +--- +title: devtools.panels.ElementsPanel.setExpression() +slug: >- + Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane/setExpression +tags: + - API + - Add-ons + - Extensions + - Reference + - WebExtensions + - devtools.panels + - setExpression +translation_of: >- + Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane/setExpression +--- +
{{AddonSidebar()}}
+ +

Evalue une expression dans le contexte de la page inspectée et affiche le résultat dans le volet de la barre latérale d'extension.

+ +

Le contexte d'exécution de l'expression est le même que celui de inspectedWindow.eval().

+ +

 Les objets JSON et les noeuds DOM sont affichés en tant qu'arborescence extensible, comme dans la visionneuse jSON dans Firefox. Vous pouvez éventuellement spécifier une chaîne rootTitle : elle sera affichée comme le titre de la racine de l'arbre.

+ +

C'est une fonction asynchrone qui renvoie une Promise.

+ +

Syntaxe

+ +
var evaluating = browser.devtools.panels.setExpression(
+  expression,       // string
+  rootTitle         // string
+)
+
+ +

Paramètres

+ +
+
expression
+
string. L'expression à évaluer.
+
rootTitle {{optional_inline}}
+
string. Le titre de la racine de l'arbre dans lequel les résultats sont affichés.
+
+ +

Valeur retournée

+ +

Une Promise sera remplie sans arguments, une fois l'expression évaluée.

+ +

Compatibilité du navigateur

+ +

{{Compat("webextensions.api.devtools.panels.ExtensionSidebarPane.setExpression", 10)}}

+ + + +

Exemples

+ +

Ce code crée un volet de barre latérale qui affiche le tagName de l'élément actuellement sélectionné :

+ +
function onCreated(sidebarPane) {
+
+  browser.devtools.panels.elements.onSelectionChanged.addListener(() => {
+    const exp = "$0 && $0.tagName";
+    const title = "Selected Element tagName";
+    sidebarPane.setExpression(exp, title);
+  });
+
+}
+
+browser.devtools.panels.elements.createSidebarPane("My pane").then(onCreated);
+
+ +

{{WebExtExamples}}

+ +
Remerciements + +

Cette API est basée sur l'API Chromium chrome.devtools.panels.

+
+ + diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionsidebarpane/setobject/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionsidebarpane/setobject/index.html new file mode 100644 index 0000000000..90252a0c2f --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionsidebarpane/setobject/index.html @@ -0,0 +1,104 @@ +--- +title: devtools.panels.ExtensionSidebarPane.setObject() +slug: >- + Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane/setObject +tags: + - API + - Add-ons + - Extensions + - Reference + - WebExtensions + - devtools.panels + - setObject +translation_of: >- + Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane/setObject +--- +
{{AddonSidebar()}}
+ +

Affiche un objet JSON dans le volet de la barre latérale de l'extension.

+ +

L'objet est affiché en tant qu'arborescence extensible, comme dans le JSON viewer dans Firefox. Vous pouvez éventuellement spécifier une chaîne rootTitle : elle sera affichée comme le titre de la racine de l'arbre.

+ +

C'est une fonction asynchrone qui renvoie une Promise.

+ +

Syntaxe

+ +
var setting = browser.devtools.panels.setObject(
+  jsonObject,       // string, array, or JSON object
+  rootTitle         // string
+)
+
+ +

Paramètres

+ +
+
jsonObject
+
String ou Array ou Object. L'objet à afficher. S'il s'agit d'un objet JSON-serialized, donc les propriétés comme les fonctions seront omises.
+
rootTitle {{optional_inline}}
+
String. Le titre de la racine de l'arbre dans lequel l'objet est affiché.
+
+ +

Valeur retournée

+ +

Une Promise qui sera accomplie sans arguments, une fois l'objet défini.

+ +

Compatibilité du navigateur

+ +

{{Compat("webextensions.api.devtools.panels.ExtensionSidebarPane.setObject", 10)}}

+ + + +

Exemples

+ +

Créez un nouveau volet et remplissez-le avec un objet JSON. Vous pouvez exécuter ce code dans un script chargé par la page devtools. de votre extension

+ +
function onCreated(sidebarPane) {
+  sidebarPane.setObject({
+    someBool: true,
+    someString: "hello there",
+    someObject: {
+      someNumber: 42,
+      someOtherString: "this is my pane's content"
+    }
+  });
+}
+
+browser.devtools.panels.elements.createSidebarPane("My pane").then(onCreated);
+ +

{{WebExtExamples}}

+ +
Remerciements + +

Cette API est basée sur l'API Chromium chrome.devtools.panels.

+
+ + diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionsidebarpane/setpage/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionsidebarpane/setpage/index.html new file mode 100644 index 0000000000..e4f98e3ff3 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionsidebarpane/setpage/index.html @@ -0,0 +1,89 @@ +--- +title: devtools.panels.ExtensionSidebarPane.setPage() +slug: Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane/setPage +tags: + - API + - Add-ons + - Extensions + - Reference + - WebExtensions + - setPage +translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane/setPage +--- +

Définit une page HTML à afficher dans le volet latéral.

+ +

C'est une fonction asynchrone qui renvoie une Promise.

+ +

Syntaxe

+ +
browser.devtools.panels.setPage(
+  path // string containing relative path to page
+)
+
+ +

Paramètres

+ +
+
extensionPageURL
+
string. Le chemin relatif d'une page HTML à afficher dans la barre latérale.
+
+ +

Valeur retournée

+ +

Une Promise qui sera tenue sans arguments, une fois l'URL définie.

+ +

La page sélectionnée ne sera pas chargée tant que l'utilisateur n'aura pas sélectionné la barre latérale devtools.

+ +

Exemples

+ +

Créez un nouveau volet et remplissez-le d'une page HTML. Vous pouvez exécuter ce code dans un script chargé par la page devtools de votre extension.

+ +
function onCreated(sidebarPane) {
+  sidebarPane.setPage('sidebar/sidebar.html');
+}
+
+ +

{{WebExtExamples}}

+ +

Compatibilité du navigateur

+ +

{{Compat("webextensions.api.devtools.panels.ExtensionSidebarPane.setPage", 10)}}

+ + + + + +
Remerciements + +

Cette API est basée sur l'API Chromium chrome.devtools.panels.

+
+ + diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/index.html new file mode 100644 index 0000000000..9f2c06e2a0 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/index.html @@ -0,0 +1,103 @@ +--- +title: devtools.panels +slug: Mozilla/Add-ons/WebExtensions/API/devtools.panels +tags: + - API + - Add-ons + - Extensions + - Reference + - WebExtensions + - devtools.panels +translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.panels +--- +
{{AddonSidebar}}
+ +
+

Bien que les API soient basées sur les APIs de devtools de Chrome, il existe encore de nombreuses fonctionnalités qui ne sont pas encore implémentées dans Firefox et ne sont donc pas documentées ici. Pour voir les fonctionnalités actuellement manquantes, regarder  Limitations des APIs devtools.

+
+ +

L'API devtools.panels permet à une extension devtools de définir son interface utilisateur à l'intérieur de la fenêtre devtools.

+ +

La fenêtre devtools héberge un certain nombre d'outils distincts - le débogueur JavaScript, le moniteur réseau, etc. Une rangée d'onglets sur le haut permet à l'utilisateur de basculer entre les différents outils. La fenêtre hébergeant l'interface utilisateur de chaque outil s'appelle un "panneau".

+ +

Avec l'API devtools.panels, vous pouvez créer de nouveaux panneaux dans la fenêtre des devtools.

+ +

Comme toutes les API de devtools, cette API est uniquement disponible pour le code exécuté dans le document défini dans la clé devtools_page du manifest.json, ou dans d'autres documents de déploiement créés par une extension (tel que le document du panneau). Voir Extension des outils de développement pour plus for d'informations.

+ +

Types

+ +
+
devtools.panels.ElementsPanel
+
Représente l'inspecteur HTML/CSS dans le devtools du navigateur
+
devtools.panels.ExtensionPanel
+
Représente un panneau de déploiement créé par l'extension.
+
devtools.panels.ExtensionSidebarPane
+
Représente un volet ajouté par une extension à l'inspecteur HTML/CC dans les devtools du navigateur.
+
+ +

Propriétés

+ +
+
devtools.panels.elements
+
Une référence à un objet ElementsPanel.
+
devtools.panels.themeName
+
Le nom du thème actuel des devtools.
+
+ +

Fonctions

+ +
+
devtools.panels.create()
+
Créé un nouveau panneau de développement
+
+ +

Evénements

+ +
+
devtools.panels.onThemeChanged
+
Mise en place lorsque le thème Devtools change.
+
+ +

Compatibilité du navigateur

+ +

{{Compat("webextensions.api.devtools.panels", 2)}}

+ +

{{WebExtExamples("h2")}}

+ +
Remerciements + +

Cette API est basée sur l'API Chromium chrome.devtools.panels.

+ +

Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis.

+
+ + diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/onthemechanged/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/onthemechanged/index.html new file mode 100644 index 0000000000..75c9b94ccc --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/onthemechanged/index.html @@ -0,0 +1,72 @@ +--- +title: devtools.panels.onThemeChanged +slug: Mozilla/Add-ons/WebExtensions/API/devtools.panels/onThemeChanged +tags: + - API + - Add-ons + - DevTools + - Reference + - WebExtensions + - devtools.panels + - onThemeChanged +translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.panels/onThemeChanged +--- +
{{AddonSidebar()}}
+ +

Remplacement quand le thème de devtools change

+ +

Syntaxe

+ +
browser.devtools.panels.onThemeChanged.addListener(listener)
+browser.devtools.panels.onThemeChanged.removeListener(listener)
+browser.devtools.panels.onThemeChanged.hasListener(listener)
+
+ +

Les événements ont trois fonctions :

+ +
+
addListener(callback)
+
Ajoute un auditeur à cet événement
+
removeListener(listener)
+
Arrêtez d'écouter cet événement. L'argument de l'auditeur est l'auditeur à supprimer.
+
hasListener(listener)
+
Vérifiez si l'auditeur est enregistré pour cet événement. Renvoie Vrai si elle écoute, sinon Faux.
+
+ +

Syntaxe addListener

+ +

Paramètres

+ +
+
callback
+
+

Function qui sera appelée lors de l'événement. La fonction passera les arguments suivants :

+ +
+
themeName
+
string. Nom du nouveau thème : ce sera l'une des valeurs autorisées pour  devtools.panels.themeName.
+
+
+
+ +

Compatibilité du navigateur

+ + + +

{{Compat("webextensions.api.devtools.panels.onThemeChanged")}}

+ +

Exemples

+ +
browser.devtools.panels.onThemeChanged.addListener((newThemeName) => {
+  console.log(`New theme: ${newThemeName}`);
+});
+
+ +

{{WebExtExamples}}

+ +
Remerciements + +

Cette API est basée sur l'API Chromium chrome.devtools.panels.

+ +

Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis.

+
diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/themename/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/themename/index.html new file mode 100644 index 0000000000..abddedc962 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/themename/index.html @@ -0,0 +1,39 @@ +--- +title: devtools.panels.themeName +slug: Mozilla/Add-ons/WebExtensions/API/devtools.panels/themeName +tags: + - API + - Add-ons + - DevTools + - Reference + - WebExtensions + - devtools.panels + - themeName +translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.panels/themeName +--- +
{{AddonSidebar()}}
+ +

Le nom du thème de devtools actuellement sélectionné.

+ +

Il s'agit d'une chaîne dont les valeurs possibles sont :

+ + + +

Compatibilité du navigateur

+ + + +

{{Compat("webextensions.api.devtools.panels.themeName")}}

+ +

{{WebExtExamples}}

+ +
Remerciements + +

Cette API est basée sur l'API Chromium chrome.devtools.panels.

+ +

Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis.

+
diff --git a/files/fr/mozilla/add-ons/webextensions/api/menus/menus.overridecontext()/index.html b/files/fr/mozilla/add-ons/webextensions/api/menus/menus.overridecontext()/index.html deleted file mode 100644 index 8d8463f069..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/menus/menus.overridecontext()/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: menus.overrideContext() -slug: Mozilla/Add-ons/WebExtensions/API/menus/menus.overrideContext() -tags: - - API - - Add-ons - - Extensions - - Méthode - - WebExtensions - - contextMenus -translation_of: Mozilla/Add-ons/WebExtensions/API/menus/menus.overrideContext() ---- -
{{AddonSidebar()}}
- -

Cette API permet aux extensions de masquer tous les éléments de menu par défaut de Firefox afin de fournir une interface utilisateur de menu contextuel personnalisée. Ce menu contextuel peut comprendre plusieurs éléments de menu de niveau supérieur de l'extension et éventuellement inclure des éléments de menu contextuel d'onglet ou de signet provenant d'autres extensions. Cela doit être appelé lors d'un gestionnaire d'événements DOM du menu contextmenu, et s'applique uniquement au menu qui s'ouvre après cet événement.

- -

Cette API ne peut être appelée que si l'addon dispose de la permission "menus.overrideContext".

- -

Syntaxe

- -
browser.menus.overrideContext(
-  contextOptions // object
-)
-
- -

Paramètres

- -
-
contextOptions
-
object.Propriétés qui définissent le contexte du menu contextuel.
-
-
-
bookmarkId {{optional_inline}}
-
string Requis lorsque le contexte est un signet. Nécessite la permission  "bookmark" .
-
context {{optional_inline}}
-
string. pour passer outre, pour autoriser les éléments de menu d'autres extensions dans le menu. Actuellement, seuls "bookmark" et "tab" sont supportés. showDefaults ne peut pas être utilisé avec cette option.
-
showDefaults {{optional_inline}}
-
boolean. S'il faut également inclure des éléments de menu par défaut dans le menu.
-
tabId {{optional_inline}}
-
string Requis lorsque le contexte est "tab". Nécessite la permission "tabs" .
-
-
-
- -

Exemples

- -

Ouvrez le menu contextuel de l'onglet de votre interface utilisateur personnalisée, dans ce cas :

- -
document.addEventListener('contextmenu', event => {
-  const foo = event.target.closest('.foo');
-  if (foo) {
-    // When the context menu is opened on an element with the foo class
-    // set the context to "opening a tab context menu".
-    browser.menus.overrideContext({
-      context: 'tab',
-      tabId: parseInt(foo.dataset.tabId)
-    });
-  }
-}, { capture: true });
-
- -

Voir ce billet de blog pour plus de détails.

diff --git a/files/fr/mozilla/add-ons/webextensions/api/proxy/onerror/index.html b/files/fr/mozilla/add-ons/webextensions/api/proxy/onerror/index.html new file mode 100644 index 0000000000..fb5e7df4e5 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/proxy/onerror/index.html @@ -0,0 +1,60 @@ +--- +title: proxy.onProxyError +slug: Mozilla/Add-ons/WebExtensions/API/proxy/onProxyError +tags: + - API + - Add-ons + - Event + - Proxy + - Reference + - WebExtensions + - onProxyError +translation_of: Mozilla/Add-ons/WebExtensions/API/proxy/onError +--- +
{{AddonSidebar()}}
+ +

Lancé en cas d'erreur lors de l'évaluation du fichier PAC ou l'écouteur onRequest.

+ +

L'erreur peut être déclenchée en lançant ou renvoyant une valeur invalide dans le gestionnaire d'événements proxy.onRequest.

+ +

Syntaxe

+ +
browser.proxy.onError.addListener(listener)
+browser.proxy.onError.removeListener(listener)
+browser.proxy.onError.hasListener(listener)
+
+ +

Les événements ont trois fonctions :

+ +
+
addListener(listener)
+
Ajoute un écouteur à cet événement.
+
removeListener(listener)
+
Arrêtez d'écouter cet événement. L'argument listener est l'écouteur à supprimer.
+
hasListener(listener)
+
Vérifiez si l'écouteur est enregistré pour cet événement. Renvoie true s'il écoute, sinon false.
+
+ +

Syntaxe addListener

+ +

Paramètres

+ +
+
callback
+
+

Fonction qui sera appelée lorsque cet événement se produit. La fonction recevra les arguments suivants :

+ +
+
newState
+
Object. Un objet Error représentant l'erreur.
+
+
+
+ +

{{WebExtExamples}}

+ +

Compatibilité du navigateur

+ +

{{Compat("webextensions.api.proxy.onError")}}

+ + diff --git a/files/fr/mozilla/add-ons/webextensions/api/proxy/onproxyerror/index.html b/files/fr/mozilla/add-ons/webextensions/api/proxy/onproxyerror/index.html deleted file mode 100644 index fb5e7df4e5..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/proxy/onproxyerror/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: proxy.onProxyError -slug: Mozilla/Add-ons/WebExtensions/API/proxy/onProxyError -tags: - - API - - Add-ons - - Event - - Proxy - - Reference - - WebExtensions - - onProxyError -translation_of: Mozilla/Add-ons/WebExtensions/API/proxy/onError ---- -
{{AddonSidebar()}}
- -

Lancé en cas d'erreur lors de l'évaluation du fichier PAC ou l'écouteur onRequest.

- -

L'erreur peut être déclenchée en lançant ou renvoyant une valeur invalide dans le gestionnaire d'événements proxy.onRequest.

- -

Syntaxe

- -
browser.proxy.onError.addListener(listener)
-browser.proxy.onError.removeListener(listener)
-browser.proxy.onError.hasListener(listener)
-
- -

Les événements ont trois fonctions :

- -
-
addListener(listener)
-
Ajoute un écouteur à cet événement.
-
removeListener(listener)
-
Arrêtez d'écouter cet événement. L'argument listener est l'écouteur à supprimer.
-
hasListener(listener)
-
Vérifiez si l'écouteur est enregistré pour cet événement. Renvoie true s'il écoute, sinon false.
-
- -

Syntaxe addListener

- -

Paramètres

- -
-
callback
-
-

Fonction qui sera appelée lorsque cet événement se produit. La fonction recevra les arguments suivants :

- -
-
newState
-
Object. Un objet Error représentant l'erreur.
-
-
-
- -

{{WebExtExamples}}

- -

Compatibilité du navigateur

- -

{{Compat("webextensions.api.proxy.onError")}}

- - diff --git a/files/fr/mozilla/add-ons/webextensions/api/proxy/settings/index.html b/files/fr/mozilla/add-ons/webextensions/api/proxy/settings/index.html new file mode 100644 index 0000000000..8ebc5822c2 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/proxy/settings/index.html @@ -0,0 +1,73 @@ +--- +title: browserSettings.proxyConfig +slug: Mozilla/Add-ons/WebExtensions/API/browserSettings/proxyConfig +tags: + - API + - Add-ons + - Extensions + - Property + - Reference + - WebExtensions + - browserSettings + - proxyConfig +translation_of: Mozilla/Add-ons/WebExtensions/API/proxy/settings +--- +
{{AddonSidebar()}}
+ +

Un objet {{WebExtAPIRef("types.BrowserSetting", "BrowserSetting")}} qui peut être utilisé pour modifier les paramètres de proxy du navigateur.

+ +
+

Note: La possibilité de modifier les paramètres de proxy nécessite un accès à une fenêtre privée car les paramètres de proxy affectent à la fois les fenêtres privées et non privées. Par conséquent, si une extension n'a pas reçu l'autorisation de fenêtre privée, les appels à  proxy.settings.set() lanceront une exception.

+
+ +

La valeur sous-jacente est un objet avec les propriétés énumérées ci-dessous.

+ +

Lors de la définition de cet objet, toutes les propriétés sont facultatives. Notez que les propriétés omises seront réinitialisées à leur valeur par défaut.

+ +
+
autoConfigUrl{{optional_inline}}
+
string. Une URL à utiliser pour configurer le proxy.
+
autoLogin{{optional_inline}}
+
boolean. Ne pas demander l'authentification si le mot de passe est enregistré. Par défaut à false.
+
ftp{{optional_inline}}
+
string. L'adresse du proxy FTP. Peut inclure un port.
+
http{{optional_inline}}
+
string. L'adresse du proxy HTTP. Peut inclure un port.
+
httpProxyAll{{optional_inline}}
+
boolean. Utilisez le serveur proxy HTTP pour tous les protocoles. Par défaut à false.
+
passthrough{{optional_inline}}
+
string. Une liste d'hôtes séparés par des virgules qui ne doivent pas être mandatés. La valeur par défaut est "localhost, 127.0.0.1".
+
proxyDNS{{optional_inline}}
+
boolean. DNS proxy lors de l'utilisation de SOCKS5. Par défaut à false.
+
proxyType{{optional_inline}}
+
string. Le type de proxy à utiliser. Cela peut prendre l'une des valeurs suivantes : "none", "autoDetect", "system", "manual", "autoConfig". Par défaut à "system".
+
socks{{optional_inline}}
+
string. L'adresse du proxy SOCKS. Peut inclure un port.
+
socksVersion{{optional_inline}}
+
integer. La version du proxy SOCKS. Peut être 4 ou 5. Par défaut à 5.
+
ssl{{optional_inline}}
+
string. L'adresse du proxy SSL. Peut inclure un port.
+
+ +

 

+ +

Exemples

+ +
let proxySettings = {
+  proxyType: "manual",
+  http: "http://proxy.org:8080",
+  socksVersion: 4,
+  passthrough: ".example.org"
+};
+
+browser.proxy.settings.set({value: proxySettings});
+ +

{{WebExtExamples}}

+ +

 

+ +

Compatibilité du navigateur

+ + + +

{{Compat("webextensions.api.proxy.settings", 10)}}

diff --git a/files/fr/mozilla/add-ons/webextensions/api/userscripts/apiscript/index.html b/files/fr/mozilla/add-ons/webextensions/api/userscripts/apiscript/index.html deleted file mode 100644 index 1af1fed65e..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/userscripts/apiscript/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: APIScript -slug: Mozilla/Add-ons/WebExtensions/API/userScripts/APIScript -tags: - - APIScript - - Add-ons - - Custimisation - - Extensions - - Firefox - - Reference - - WebExtensions - - userScripts -translation_of: Mozilla/Add-ons/WebExtensions/API/userScripts/APIScript ---- -

{{AddOnSidebar}}

- -

L'APIScript userScripts est un type spécial d'extension Content Script.

- -

Comme un script de contenu d'extension régulier :

- - - -

Contrairement à une extension régulière Content Script :

- - - -
manifest.json
-{
-  ...
-  "user_scripts": {
-     "api_script": "apiscript.js"
-  }
-}
- -

Il est exécuté automatiquement sur n'importe quelle page Web correspondant à userScript enregistrée par la même extension, avant qu'un userScript correspondant ne soit exécuté.

- -

Il a accès à l'API Event browser.userScripts.onBeforeScript que l'APIScript peut utiliser pour inscrire un auditeur à appeler juste avant qu'un userScript correspondant soit exécuté, ce qui permet à l'APIScript d'exporter un ensemble de méthodes API personnalisées pour le rendre disponible à l'userScript.

diff --git a/files/fr/mozilla/add-ons/webextensions/api/userscripts/registereduserscript/registereduserscript.unregister()/index.html b/files/fr/mozilla/add-ons/webextensions/api/userscripts/registereduserscript/registereduserscript.unregister()/index.html deleted file mode 100644 index 0a71ce921b..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/userscripts/registereduserscript/registereduserscript.unregister()/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: unregister -slug: >- - Mozilla/Add-ons/WebExtensions/API/userScripts/RegisteredUserScript/RegisteredUserScript.unregister() -tags: - - API - - Extensions - - Reference - - RegisteredUserScript - - Type - - unregister - - userScripts -translation_of: >- - Mozilla/Add-ons/WebExtensions/API/userScripts/RegisteredUserScript/RegisteredUserScript.unregister() ---- -

{{AddonSidebar}}

- -

La méhode unregister() de l'interface  {{WebExtAPIRef("userScripts.RegisteredUserScript","RegisteredUserScript")}}désenregistre le script utilisateur représenté par cette instance d'interface et précédemment enregistré via {{WebExtAPIRef("userScripts.register","userScripts.register()")}}.

- -
-

Note: Les scripts utilisateur sont automatiquement désenregistrés lorsque la page d'extension correspondante (à partir de laquelle les scripts utilisateur ont été enregistrés) est déchargée, vous devez donc enregistrer un script utilisateur depuis une page d'extension qui persiste au moins aussi longtemps que vous voulez que les scripts utilisateur restent enregistrés..

-
- -

Syntaxe

- -
const registeredUserScript = await browser.userScripts.register(
-  userScriptOptions       // object
-);
-…
-await registeredUserScript.unregister()
- -

Paramètres

- -

Aucun.

- -

Valeur retournée

- -

Une {{JSxRef("Promise")}} qui sera résolu une fois le script utilisateur désenregistré. La promesse ne rapporte rien.

- -

Compatibilité du navigateur

- -

{{Compat("webextensions.api.userScripts.RegisteredUserScript.unregister")}}

- -

Voir aussi

- - diff --git a/files/fr/mozilla/add-ons/webextensions/api/userscripts/travailler_avec_userscripts/index.html b/files/fr/mozilla/add-ons/webextensions/api/userscripts/travailler_avec_userscripts/index.html deleted file mode 100644 index 8cf9fcc2b2..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/userscripts/travailler_avec_userscripts/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: Travailler avec userScripts -slug: Mozilla/Add-ons/WebExtensions/API/userScripts/travailler_avec_userScripts -tags: - - API - - Extensions - - How-to - - Tutorial - - userScripts -translation_of: Mozilla/Add-ons/WebExtensions/API/userScripts/Working_with_userScripts ---- -

{{draft}}

- -

{{AddonSidebar}}

- -

En implémentant userScripts, les développeurs d'extension peuvent modifier l'apparence et/ou le fonctionnement des sites pour mieux répondre aux besoins des utilisateurs.

- -

Implémentez userScripts dans votre extension en suivant les étapes suivantes :

- -
    -
  1. Définissez le script dans le manifeste de l'extension à l'aide de la clé "user_scripts".
    2. -
  2. Enregistrer le userScript
    3. -
  3. Implémenter les fonctions userScript
    4. -
- -

Passons en revue les processus à l'aide d'un petit exemple d'extension Web qui illustre le processus. L'exemple est disponible dans le dépôt webextensions-examples sur GitHub.

- -

Manifest userScripts

- -

Un script utilisateur est identifié par le contenu de la clé user_scripts du manifeste des extensions. L'information minimale pour la clé user_scripts serait :

- -
  "user_scripts": {
-    "api_script": "customUserScriptAPIs.js"
-  }
- -

La propriété "api_script" indique le chemin d'accès au fichier JavaScript qui contient le code du userScript.

- -

Charge l'extension d'exemple

- -

Une fois que vous avez téléchargé l'exemple  :

- -

Naviguez jusqu'à about:debugging, cliquez sur Charger temporairement une extension... et double-cliquez sur le manifest des extensions.

- -

/Le code par défaut inclus dans l'exemple vous permet de charger un userScript qui va "manger" le contenu des pages correspondant à l'entrée Hosts. Effectuez tous les changements que vous voulez faire avant de cliquer sur le bouton Enregistrer le script au bas du panneau.

- -

Dans l'image suivante, l'extension va "manger" le contenu des pages dont le nom de domaine se termine par.org. C'est le comportement par défaut pour cette extension.

- -

- -

Rien ne se passera tant que vous n'aurez pas cliqué sur le bouton Enregistrer le script. Le bouton implémente le script utilisateur en fonction des paramètres de cette boîte de dialogue. Cela signifie que vous pouvez expérimenter le comportement du script sans avoir à implémenter une extension vous-même.

- -

Register the userScript

- -

Avant qu'un userScript puisse être exécuté, il doit être enregistré en utilisant la méthode  userScripts.register(). Voici le code pour enregistrer l'extension d'exemple :

- -
async function registerScript() {
-  const params = {
-    hosts: stringToArray(hostsInput.value),
-    code: codeInput.value,
-    excludeMatches: stringToArray(excludeMatchesInput.value),
-    includeGlobs: stringToArray(includeGlobsInput.value),
-    excludeGlobs: stringToArray(excludeGlobsInput.value),
-    runAt: runAtInput.value,
-    matchAboutBlank: stringToBool(matchAboutBlankInput.value),
-    allFrames: stringToBool(allFramesInput.value),
-    scriptMetadata: {name: scriptNameInput.value || null},
-  };
-
-  // Store the last submitted values to the extension storage
-  // (so that they can be restored when the popup is opened
-  // the next time).
-  await browser.storage.local.set({
-    lastSetValues: params,
-  });
-
-  try {
-    // Clear the last userScripts.register result.
-    lastResultEl.textContent = "";
-
-    await browser.runtime.sendMessage(params);
-    lastResultEl.textContent = "UserScript successfully registered";
-    // Clear the last userScripts.register error.
-    lastErrorEl.textContent = "";
-
-    // Clear the last error stored.
-    await browser.storage.local.remove("lastError");
-  } catch (e) {
-    // There was an error on registering the userScript,
-    // let's show the error message in the popup and store
-    // the last error into the extension storage.
-
-    const lastError = `${e}`;
-    // Show the last userScripts.register error.
-    lastErrorEl.textContent = lastError;
-
-    // Store the last error.
-    await browser.storage.local.set({lastError});
-  }
-}
- -

Ce code initialise d'abord l'objet params pour passer les valeurs à la méthode  userScripts.register.

- -

Implementer les fonctions userScript

- -

Une fois le script enregistré, naviguez vers une page dont le nom de domaine se termine par .org, et vous verrez quelque chose comme ceci :

- -

- -

Voir aussi

- - diff --git a/files/fr/mozilla/add-ons/webextensions/api/userscripts/working_with_userscripts/index.html b/files/fr/mozilla/add-ons/webextensions/api/userscripts/working_with_userscripts/index.html new file mode 100644 index 0000000000..8cf9fcc2b2 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/userscripts/working_with_userscripts/index.html @@ -0,0 +1,115 @@ +--- +title: Travailler avec userScripts +slug: Mozilla/Add-ons/WebExtensions/API/userScripts/travailler_avec_userScripts +tags: + - API + - Extensions + - How-to + - Tutorial + - userScripts +translation_of: Mozilla/Add-ons/WebExtensions/API/userScripts/Working_with_userScripts +--- +

{{draft}}

+ +

{{AddonSidebar}}

+ +

En implémentant userScripts, les développeurs d'extension peuvent modifier l'apparence et/ou le fonctionnement des sites pour mieux répondre aux besoins des utilisateurs.

+ +

Implémentez userScripts dans votre extension en suivant les étapes suivantes :

+ +
    +
  1. Définissez le script dans le manifeste de l'extension à l'aide de la clé "user_scripts".
    2. +
  2. Enregistrer le userScript
    3. +
  3. Implémenter les fonctions userScript
    4. +
+ +

Passons en revue les processus à l'aide d'un petit exemple d'extension Web qui illustre le processus. L'exemple est disponible dans le dépôt webextensions-examples sur GitHub.

+ +

Manifest userScripts

+ +

Un script utilisateur est identifié par le contenu de la clé user_scripts du manifeste des extensions. L'information minimale pour la clé user_scripts serait :

+ +
  "user_scripts": {
+    "api_script": "customUserScriptAPIs.js"
+  }
+ +

La propriété "api_script" indique le chemin d'accès au fichier JavaScript qui contient le code du userScript.

+ +

Charge l'extension d'exemple

+ +

Une fois que vous avez téléchargé l'exemple  :

+ +

Naviguez jusqu'à about:debugging, cliquez sur Charger temporairement une extension... et double-cliquez sur le manifest des extensions.

+ +

/Le code par défaut inclus dans l'exemple vous permet de charger un userScript qui va "manger" le contenu des pages correspondant à l'entrée Hosts. Effectuez tous les changements que vous voulez faire avant de cliquer sur le bouton Enregistrer le script au bas du panneau.

+ +

Dans l'image suivante, l'extension va "manger" le contenu des pages dont le nom de domaine se termine par.org. C'est le comportement par défaut pour cette extension.

+ +

+ +

Rien ne se passera tant que vous n'aurez pas cliqué sur le bouton Enregistrer le script. Le bouton implémente le script utilisateur en fonction des paramètres de cette boîte de dialogue. Cela signifie que vous pouvez expérimenter le comportement du script sans avoir à implémenter une extension vous-même.

+ +

Register the userScript

+ +

Avant qu'un userScript puisse être exécuté, il doit être enregistré en utilisant la méthode  userScripts.register(). Voici le code pour enregistrer l'extension d'exemple :

+ +
async function registerScript() {
+  const params = {
+    hosts: stringToArray(hostsInput.value),
+    code: codeInput.value,
+    excludeMatches: stringToArray(excludeMatchesInput.value),
+    includeGlobs: stringToArray(includeGlobsInput.value),
+    excludeGlobs: stringToArray(excludeGlobsInput.value),
+    runAt: runAtInput.value,
+    matchAboutBlank: stringToBool(matchAboutBlankInput.value),
+    allFrames: stringToBool(allFramesInput.value),
+    scriptMetadata: {name: scriptNameInput.value || null},
+  };
+
+  // Store the last submitted values to the extension storage
+  // (so that they can be restored when the popup is opened
+  // the next time).
+  await browser.storage.local.set({
+    lastSetValues: params,
+  });
+
+  try {
+    // Clear the last userScripts.register result.
+    lastResultEl.textContent = "";
+
+    await browser.runtime.sendMessage(params);
+    lastResultEl.textContent = "UserScript successfully registered";
+    // Clear the last userScripts.register error.
+    lastErrorEl.textContent = "";
+
+    // Clear the last error stored.
+    await browser.storage.local.remove("lastError");
+  } catch (e) {
+    // There was an error on registering the userScript,
+    // let's show the error message in the popup and store
+    // the last error into the extension storage.
+
+    const lastError = `${e}`;
+    // Show the last userScripts.register error.
+    lastErrorEl.textContent = lastError;
+
+    // Store the last error.
+    await browser.storage.local.set({lastError});
+  }
+}
+ +

Ce code initialise d'abord l'objet params pour passer les valeurs à la méthode  userScripts.register.

+ +

Implementer les fonctions userScript

+ +

Une fois le script enregistré, naviguez vers une page dont le nom de domaine se termine par .org, et vous verrez quelque chose comme ceci :

+ +

+ +

Voir aussi

+ + diff --git a/files/fr/mozilla/add-ons/webextensions/bonnes_pratiques_pour_la_mise_a_jour_de_votre_extension/index.html b/files/fr/mozilla/add-ons/webextensions/bonnes_pratiques_pour_la_mise_a_jour_de_votre_extension/index.html deleted file mode 100644 index d8bff8eccc..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/bonnes_pratiques_pour_la_mise_a_jour_de_votre_extension/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: Bonnes pratiques pour la mise à jour de votre extension -slug: >- - Mozilla/Add-ons/WebExtensions/bonnes_pratiques_pour_la_mise_a_jour_de_votre_extension -tags: - - Add-ons - - Extensions - - Guide - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/Best_practices_for_updating_your_extension ---- -

{{AddonSidebar}}

- -

Presque toutes les extensions doivent être mises à jour de temps en temps, que ce soit pour corriger des bugs ou ajouter de nouvelles fonctionnalités. La mise à jour de votre extension vaut la peine d'être planifiée méthodiquement, non seulement pour assurer la qualité des changements, mais aussi pour maximiser les possibilités d'engagement ou de réengagement avec votre public.

- -

Pour vous aider à fournir les mises à jour les plus productives, voici quelques conseils de la communauté des développeurs d'extensions Firefox :

- - diff --git a/files/fr/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.html b/files/fr/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.html new file mode 100644 index 0000000000..d7d80b6988 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.html @@ -0,0 +1,24 @@ +--- +title: Compatibilité des navigateurs avec les API JavaScript WebExtensions +slug: Mozilla/Add-ons/WebExtensions/Compatibilité_navigateurs_API_JavaScript +tags: + - Reference + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs +--- +
{{AddonSidebar}}
+ + + +

{{WebExtAllCompatTables}}

+ +
Remerciements + +

Les données de compatibilité Microsoft Edge sont fournies par Microsoft Corporation et sont incluses ici sous la licence Creative Commons Attribution 3.0 United States.

+
+ +

Voir aussi

+ + diff --git a/files/fr/mozilla/add-ons/webextensions/build_a_cross_browser_extension/index.html b/files/fr/mozilla/add-ons/webextensions/build_a_cross_browser_extension/index.html new file mode 100644 index 0000000000..506822110d --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/build_a_cross_browser_extension/index.html @@ -0,0 +1,252 @@ +--- +title: Construction d'une extension cross-browser +slug: Mozilla/Add-ons/WebExtensions/construction_extension_cross_browser +tags: + - Add-ons + - Extensions + - Guide + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Build_a_cross_browser_extension +--- +

{{AddonSidebar()}}

+ +

L'introduction de l'API d'extension de navigateur a créé un paysage plus uniforme pour le développement d'extensions des navigateurs. Cependant, parmi les navigateurs qui utilisent les API d'extensions (les principales étant Chrome, Firefox, Opera et Edge), vous verrez des différences à la fois dans l'implémentation de l'API et dans la portée de la couverture. Et puis, Safari utilise ses propres extensions Safari Extensions JS.

+ +

Maximiser la portée de votre extension de navigateur signifie la développer pour au moins deux navigateurs différents, voire plus. Cet article examine six des principaux défis rencontrés lors de la création d'une extension multi-navigateurs, et dans chaque cas, suggère comment relever ce défi.

+ +

Cet article ne traite pas de la création d'extensions de navigateur pour Safari. Il est possible de partager certaines ressources avec une extension Safari, comme des images et du contenu HTML. Cependant, le codage JavaScript doit être entrepris comme un projet de développement séparé, à moins que vous ne souhaitiez créer votre propre polyfill.

+ +

Obstacles lors du codage d'extension multiplateforme

+ +

Il y a six domaines que vous devez aborder lorsque vous vous attaquez à une extension multiplateforme :

+ + + +

Espace de nommage de l'API

+ +

Deux espaces de noms API sont utilisés parmi les quatre principaux navigateurs :

+ + + +

Firefox prend également en charge l'espace de noms chrome.* pour les API compatibles avec Chrome, principalement pour faciliter le portage. Cependant, il est préférable d'utiliser l'espace de nommage browser.*. En plus d'être la norme proposée, browser.* utilise des promesses — un mécanisme moderne et pratique pour gérer les événements asynchrones.

+ +

Ce n'est que dans les extensions les plus triviales que l'espace de nommage sera probablement le seul problème multiplateforme qui devra être traité. Il est donc rarement, voire jamais, utile d'essayer d'aborder cette question seul. La meilleure approche consiste à traiter ce problème avec une gestion asynchrone des événements.

+ +

Gestion asynchrone des événements API

+ +

Il existe deux approches pour gérer les événements asynchrones utilisées par les quatre principaux navigateurs :

+ + + +

Firefox prend également en charge les rappels pour les API qui prennent en charge l'espace de noms chrome.*. Cependant, il est recommandé d'utiliser des promesses (et l'espace de noms browser.* du navigateur). Des promesses ont été adoptées dans le cadre de la norme proposée. Il simplifie grandement la gestion asynchrone des événements, en particulier lorsque vous devez enchaîner des événements.

+ +

Si vous n'êtes pas familier avec les différences entre ces deux méthodes, jetez un coup d'oeil à Apprendre à connaître le Javascript asynchrone : Rappels, promesses et synchronisation/attente ou la page des promesses d'utilisation de MDN.

+ +

Alors, comment tirer profit des promesses facilement, alors que Firefox est le seul navigateur qui les supporte ? La solution est de coder pour Firefox en utilisant des promesses et d'utiliser le navigateur WebExtension API Polyfill. Cette polyfill prend en compte l'espace de nommage de l'API et la gestion asynchrone des événements dans Firefox, Chrome et Opera. Au moment de la rédaction du présent document (novembre 2018), le soutien pour Edge était en cours d'élaboration.

+ +

Vous installez le navigateur WebExtension API Polyfill dans votre environnement de développement à l'aide de npm ou vous le téléchargez directement depuis les versions de GitHub. Vous référencerez alors browser-polyfill.js dans :

+ + + +

Ainsi, par exemple, ce code manifest.json rend le polyfill disponible pour vos scripts d'arrière-plan :

+ +
{
+ // ...
+ "background": {
+   "scripts": [
+     "browser-polyfill.js",
+     "background.js"
+   ]
+ }
+}
+ +

Votre but est de vous assurer que le polyfill s'exécute dans votre extension avant tout autre script qui attend le browser.* API namespace s'exécute.

+ +

Pour plus de détails et d'informations sur l'utilisation du polyfill avec un module bundler, voir le readme du projet sur GitHub.

+ +

Il existe d'autres options de polyfill mais, au moment d'écrire ces lignes, aucune ne fournit la couverture de l'API Polyfill du navigateur WebExtension. Ainsi, lorsque vous n'avez pas choisi Firefox comme premier choix, vos options sont d'accepter les limitations des polyfills alternatifs, de porter sur Firefox et d'ajouter la prise en charge du cross-browser, ou de développer votre propre polyfill.

+ +

Couverture des fonctions API

+ +

Les différences dans les fonctions API offertes dans chacun des quatre principaux navigateurs se répartissent en trois grandes catégories :

+ + + +

You can find details about the support for the extension APIs among the four main browsers and Firefox for Android on the Mozilla Developer Network Browser support for JavaScript APIs page. Browser compatibility information is also included with each function and its methods, types, and events in the Mozilla Developer Network JavaScript APIs reference pages.

+ +

A simple approach to addressing these differences is to limit the functions used in your extension to functions that offer the same functionality across your range of targeted browsers. In practice, for most extensions, this approach is likely to be too restrictive.

+ +

The approach you should take where there are differences among the APIs, is to offer either alternative implementations or fallback functionality. Remember that you may also need to do this to allow for differences in API support between versions of the same browser.

+ +

The use of runtime checks on the availability of a function’s features is the recommended approach to implementing alternative or fallback functionality. The benefit of performing a runtime check is that if the function becomes available you don’t need to update and redistribute the extension to take advantage of it.

+ +

The following code enables you to perform a runtime check:

+ +
if (typeof <function> === "function") {
+   // safe to use the function
+}
+ +

Manifest keys

+ +

The differences in the manifest.json file keys supported by the four main browsers fall broadly into three categories:

+ + + +

Browser compatibility information is included with each key in the Mozilla Developer Network manifest.json key reference pages.

+ +

As manifest.json files tend to change little—except for release numbers, which may be different between the various browsers—creating and editing a static version for each browser is usually the simplest approach.

+ +

Extension packaging

+ +

Packaging an extension for distribution through the browser extension stores is relatively straightforward. Firefox, Chrome, and Opera all use a simple zip format that requires the manifest.json file to be at the root of the zip package. However, submitting to the Microsoft store requires additional packaging of the extension file.

+ +

For details on packaging, refer to the guidance on the respective extension’s developer portals.

+ +

Publishing

+ +

Each of the four major browsers maintains browser extension stores. As a consequence, you need to approach adding and updating your extension in each separately. In some cases you can upload your extension using a utility. Each of the stores also performs a review of your extension to check for security vulnerabilities. The table below summarizes the approach and features of each store:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

Registration fee

+ 		+

Upload utility

+ 		+

Pre-publication review process

+ 		+

Account two factor authentication

+
+

Firefox

+ 		+

No

+ 		+

web-ext

+ 		+

Automatic, a few seconds1

+ 		+

No

+
+

Chrome

+ 		+

Yes

+ 		+

Yes

+ 		+

Automatic, less than an hour

+ 		+

Yes

+
+

Opera

+ 		+

No

+ 		+

No

+ 		+

Manual, no SLA provided

+ 		+

No

+
+

Edge

+ 		+

Yes

+ 		+

No

+ 		+

Manual, up to 72 hours2

+ 		+

Yes

+
+ +

1) A manual review of the extension takes place after publication, which may result in the extension being suspended where issues that need fixing are found.

+ +

2) At the time of writing, Microsoft was only allowing publication of preapproved extensions.

+ +

Other considerations

+ +

Extension naming

+ +

Microsoft requires that extensions have unique names and provides a process for claiming one or more names for your extension through the Windows Dev Center. It may therefore be prudent to reserve an extension name with Microsoft, even if you’re not intending to support Edge immediately. None of the other stores apply name restrictions.

+ +

Version numbering

+ +

The Firefox and Chrome stores require that each uploaded version has a separate version number. This means that you cannot revert to an earlier version number, if you come across issues in a release.

+ +

Share content

+ +

Even when you include developing extensions for Safari, there are a number of assets you can potentially share across all of your implementations. These include:

+ + + +

Conclusion

+ +

When approaching a cross-platform extension development, addressing the fundamental differences between extension API implementations can be addressed by targeting Firefox and using the WebExtension browser API Polyfill. Following this approach you benefit from using API features that are closely aligned with the proposed extensions API standard and offer you the simplicity of promises for asynchronous event handling.

+ +

The bulk of your cross-platform work is likely to focus on handling variations among the API features supported by the main browsers. Creating your manifest.json files should be relatively straightforward and something you can do manually. You will then need to account for the variations in extension packaging and the processes for submitting to each of the extension stores.

+ +

Following the advice in this article, you should be able to create an extension that works well on all of the four main browsers, enabling you to deliver your extension features to more people.

diff --git a/files/fr/mozilla/add-ons/webextensions/choisissez_une_version_firefox_pour_le_developpement_extensions_web/index.html b/files/fr/mozilla/add-ons/webextensions/choisissez_une_version_firefox_pour_le_developpement_extensions_web/index.html deleted file mode 100644 index 69d23ee3ba..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/choisissez_une_version_firefox_pour_le_developpement_extensions_web/index.html +++ /dev/null @@ -1,218 +0,0 @@ ---- -title: Choisissez une version Firefox pour le développement d'extensions web -slug: >- - Mozilla/Add-ons/WebExtensions/choisissez_une_version_firefox_pour_le_developpement_extensions_web -tags: - - Add-ons - - Développement - - Extensions - - Guide - - Outils - - Tools -translation_of: >- - Mozilla/Add-ons/WebExtensions/Choose_a_Firefox_version_for_web_extension_develop ---- -

{{AddonSidebar}}

- -

Firefox propose plusieurs versions qui offrent différentes capacités pour le développement d'extensions web. Cet article donne un aperçu des différences entre ces versions de Firefox et recommande comment les utiliser dans le cycle de développement.

- -

Ce tableau résume les informations sur les éditions, les fonctionnalités de développement d'extension et fournit une recommandation pour chaque édition utilisée dans le développement d'extension.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

Edition

- 		-

Version

- 		-

Stable

- 		-

Outils pour le développement de l'extension

- 		-

Installe les extensions non signées

- 		-

Utilisation recommandée pour le développement de l'extension

-
-

Release

- 		-

Courant

- 		-

Oui

- 		-

Oui

- 		-

Non

- 		-

Tests de régression

- -

Tests alpha et bêta par l'utilisateur

-
-

Beta

- 		-

Courant+1

- 		-

Oui

- 		-

Oui

- 		-

Non

- 		-

Tests de régression

- -

Tests alpha et bêta par l'utilisateur

-
-

Developer Edition

- 		-

Courant +1

- 		-

Oui

- 		-

Oui

- 		-

Oui

- 		-

Développement de l'extension

-
-

Nightly

- 		-

Courant +2

- 		-

Non

- 		-

Oui

- 		-

Oui

- 		-

Accès anticipé à la dernière API WebExtension

-
-

ESR

- 		-

Courant - >1

- 		-

Oui

- 		-

Oui

- 		-

Oui

- 		-

Développement de la vulgarisation au sein des entreprises

-
- -

Firefox version and their web extension development capabilities

- -

Finale

- -

C'est la version de Firefox que la plupart des gens utilisent, c'est la version offerte quand quelqu'un visite la page principale de téléchargement Firefox.

- -

Vous chargez les extensions en cours de développement dans cette version de Firefox en utilisant about:debugging ou web-ext et avez accès à la fenêtre de débogage de l'addon.  Cependant, vous ne pouvez pas installer des extensions non signées, ce qui limite votre capacité à tester des fonctionnalités telles que le comportement de redémarrage, les invites d'autorisation et les mises à niveau.

- -

Le développement d'extensions pour Firefox pour Android est entièrement supporté.

- -

Utilisation suggérée pour le développement : Vous pouvez installer et tester une copie signée de votre extension dans la version de publication pour effectuer un test de régression final. Vous pouvez également distribuer des copies signées de votre extension à d'autres personnes pour les aider à effectuer des tests alpha ou bêta.

- -

Téléchargement

- -

Béta

- -

Cette version de Firefox est généralement utilisée par les personnes intéressées à profiter des fonctionnalités de la prochaine version de Firefox.

- -

Vous chargez les extensions en cours de développement dans cette version de Firefox en utilisant about:debugging ou web-ext et avez accès à la fenêtre de débogage de l'addon.  Cependant, vous ne pouvez pas installer des extensions non signées, ce qui limite votre capacité à tester des fonctionnalités telles que le comportement de redémarrage, les invites d'autorisation et les mises à niveau.

- -

Le développement d'extensions pour Firefox pour Android est entièrement supporté.

- -

Utilisation suggérée pour le développement : Vous pouvez installer et tester une copie signée de votre extension dans Beta pour effectuer un test de régression. De tels tests vous donneront une certaine certitude que votre extension continuera à fonctionner correctement dans la prochaine version de Firefox. Vous pouvez également distribuer des copies signées de votre extension à d'autres personnes pour les aider à effectuer des tests alpha ou bêta.

- -

Téléchargement

- -

Edition développeur

- -

Cette version de Firefox est basée sur la version bêta de Firefox avec des fonctionnalités supplémentaires conçues pour aider au développement du Web et des extensions Web.

- -

Vous chargez les extensions en cours de développement dans cette version de Firefox en utilisant about:debugging ou web-ext et avez accès à la fenêtre de débogage de l'addon. Vous pouvez également installer des extensions non signées, après avoir ajusté ou paramétré certaines propriétés de about:config (généralement moins de changements que nécessaire pour réaliser les mêmes tâches dans Nightly). Cela vous permet de tester des fonctionnalités telles que le comportement de redémarrage, les invites d'autorisation et les mises à niveau.

- -

Le développement d'extensions pour Firefox pour Android est entièrement supporté.

- -

Utilisation suggérée pour le développement : Utilisez Developer Edition comme votre principale plate-forme de développement et de test d'extensions web.

- -

Téléchargement

- -

Nightly

- -

Cette version de Firefox fournit une version qui est mise à jour tous les soirs avec les dernières fonctionnalités de développement pour la future version de Firefox. Il est généralement utilisé par les personnes intéressées à découvrir les toutes dernières fonctionnalités et à donner leur avis lorsqu'elles rencontrent des problèmes.

- -

Vous chargez les extensions en cours de développement dans cette version de Firefox en utilisant about:debugging our web-ext et avez accès à la fenêtre de débogage de l'addon. Vous pouvez également installer des extensions non signées, après avoir ajusté ou configuré certaines propriétés de about:config. Cela vous permet de tester des fonctionnalités telles que le comportement de redémarrage, les invites d'autorisation et les mises à niveau.

- -

Le développement d'extensions pour Firefox pour Android est entièrement supporté.

- -

Utilisation suggérée pour le développement : Nightly fournit un aperçu des futures fonctionnalités de Firefox, y compris les API WebExtension, qui sont en cours de développement. La stabilité des fonctionnalités n'est pas garantie, par conséquent, Nightly n'est pas recommandé comme plateforme de développement d'extension web principale. Vous pouvez, cependant, utiliser Nightly là où vous voulez profiter des fonctionnalités à venir ou tester pour vous donner la plus longue vue d'ensemble de la compatibilité de votre extension avec Firefox.

- -

Download

- -

ESR

- -

La version ESR (Extended Support Release) de Firefox offre des fonctionnalités permettant aux professionnels informatiques de configurer et de déployer Firefox dans leur organisation. Il fournit également aux entreprises une version de Firefox stable du point de vue des fonctionnalités pour une durée plus longue que celle du cycle de version normal. Ainsi, au moment d'écrire ces lignes, la version de sortie de Firefox était de 65 (avec Beta sur 66 et Nightly sur 67) la version ESR était de 60.

- -

Vous chargez les extensions en cours de développement dans cette version de Firefox en utilisant about:debugging ou web-ext et avez accès à la fenêtre de débogage de l'addon. Vous pouvez également installer des extensions non signées, après avoir ajusté ou défini certaines propriétés de about:config (cette fonctionnalité est fournie pour que les entreprises puissent installer des extensions qu'elles veulent garder privées et ne veulent pas soumettre à add-ons.mozilla.org pour signature).

- -

Le développement d'extensions pour Firefox pour Android est entièrement supporté.

- -

Utilisation suggérée pour le développement : Utilisez ESR comme principale plate-forme de développement et de test d'extensions Web lors du développement d'extensions pour une entreprise et vous souhaitez confirmer que l'ensemble des fonctionnalités de votre extension est compatible avec la version ESR.

- -

Téléchargement

- - diff --git a/files/fr/mozilla/add-ons/webextensions/chrome_incompatibilities/index.html b/files/fr/mozilla/add-ons/webextensions/chrome_incompatibilities/index.html new file mode 100644 index 0000000000..71d20cc62b --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/chrome_incompatibilities/index.html @@ -0,0 +1,179 @@ +--- +title: Incompatibilités avec Chrome +slug: Mozilla/Add-ons/WebExtensions/Incompatibilités_Chrome +tags: + - Guide + - WebExtensions + - google chrome +translation_of: Mozilla/Add-ons/WebExtensions/Chrome_incompatibilities +--- +

{{AddonSidebar}}

+ +

Les extensions construites à l'aide des API WebExtension sont conçues afin d'être compatibles avec les extensions Chrome et Opera. Les extensions écrites dans ces navigateurs devraient fonctionner, autant que possible, avec très peu de changement dans Firefox.

+ +

Toutefois, il existe certaines différences significatives entre Chrome, Firefox et Edge et notamment :

+ + + +

La suite de cette page détaille ces problèmes ainsi que d'autres points d'incompatibilité.

+ +

Les API JavaScript

+ +

Les callbacks et l'espace de noms chrome.*

+ +

Dans Chrome, les extensions peuvent accéder aux API JavaScript privilégiées à l'aide de l'espace de noms chrome :

+ +
chrome.browserAction.setIcon({path: "path/to/icon.png"});
+ +

Les WebExtensions accèdent aux API équivalentes à l'aide de l'espace de noms browser :

+ +
browser.browserAction.setIcon({path: "path/to/icon.png"});
+
+ +

Beaucoup d'API sont asynchrones. Dans Chrome, les API asynchrones utilisent des fonctions de rappel (callback) pour renvoyer des valeurs et {{WebExtAPIRef("runtime.lastError")}} pour communiquer les erreurs :

+ +
function logCookie(c) {
+  if (chrome.extension.lastError) {
+    console.error(chrome.extension.lastError);
+  } else {
+    console.log(c);
+  }
+}
+
+chrome.cookies.set(
+  {url: "https://developer.mozilla.org/"},
+  logCookie
+);
+ +

Les API WebExtensions équivalentes utilisent plutôt les promesses :

+ +
function logCookie(c) {
+  console.log(c);
+}
+
+function logError(e) {
+  console.error(e);
+}
+
+var setCookie = browser.cookies.set(
+  {url: "https://developer.mozilla.org/"}
+);
+setCookie.then(logCookie, logError);
+
+ +

Firefox : les espaces de noms chrome et browser

+ +

Afin d'aider au portage, l'implémentation de Firefox des WebExtensions prend en charge l'espace de noms chrome, l'utilisation des callbacks, l'espace de noms browser et l'utilisation des promesses. Cela signifie que de nombreuses extensions Chrome fonctionneront simplement dans Firefox sans aucune modification. Cependant, cela ne fait pas partie de la norme WebExtension et peut ne pas être pris en charge par l'ensemble des navigateurs compatibles.

+ +

Si vous écrivez votre extension en utilisant browser et les promesses, l'équipe de Firefox a également développé une prothèse (polyfill) qui lui permettra de fonctionner sur Chrome : https://github.com/mozilla/webextension-polyfill.

+ +

Les API partiellement prises en charge

+ +

La page sur la compatibilité des navigateurs pour les API JavaScript WebExtension inclut l'ensemble des tableaux de compatibilité. Lorsqu'il existe des réserves autour du support d'un élément d'API donné, ceci est indiqué dans ces tableaux avec un astérisque "*". Ces réserves sont détaillées la page de documentation respective de l'API.

+ +

Ces tableaux sont générés à partir des données de compatibilité stockées en tant que  fichiers JSON dans GitHub.

+ +

Le reste de cette section décrit les problèmes de compatibilité qui ne sont pas encore pris en compte dans ces tableaux.

+ +

notifications

+ + + +

proxy

+ + + +

tabs

+ + + +

webRequest

+ + + +

windows

+ + + +

API non prises en charge

+ +

declarativeContent

+ +

l'API declarativeContent de Chrome n'a pas encore été implémentée in Firefox.

+ +

Firefox ne supportera pas l'API declarativeContent.RequestContentScript, qui est rarement utilisée et n'est pas disponible dans les versions stables de Chrome.

+ +

Incompatibilités diverses

+ +

Gestion des URL dans CSS

+ +

Firefox résout les URL dans les fichiers CSS injectés par rapport au fichier CSS lui-même, plutôt que dans la page dans laquelle il est injecté.

+ +

Incompatibilités supplémentaires

+ +

Firefox ne prend pas en charge alert(), confirm() ou prompt() à partir des pages d'arrière-plan.

+ +

web_accessible_resources

+ +

Dans Chrome, lorsqu'une ressource est répertoriée dans web_accessible_resources, elle est accessible via chrome-extension://<id-de-l-extension>/<chemin/vers/la/ressource>. L'identifiant de l'extension est fixé pour une extension donnée.

+ +

Firefox l'implémente différemment en utilisant un UUID aléatoire qui change pour chaque instance de Firefox : moz-extension://<UUID-aleatoire>/<chemin/vers/la/ressource>. Cette façon aléatoire peut empêcher certaines choses, comme ajouter l'URL de votre extension spécifique à la politique CSP d'un autre domaine.

+ +

La propriété key du manifeste

+ +

Lorsque vous travaillez avec une extension décompressée, Chrome permet d'ajouter une propriété key au manifeste afin de fixer l'identifiant de l'extension sur différentes machines. Ceci s'avère notamment utile lorsqu'on travaille avec web_accessible_resources. Puisque Firefox utilise des UUID aléatoires pour les web_accessible_resources, cette propriété n'est pas prise en charge.

+ +

Les requêtes sont relatives au contexte de l'extension et pas à celui du contenu de la page

+ +

Dans Chrome, lorsque la requête est appelée (par exemple, en utilisant fetch()) pour une URL relative comme /api du script de contenu, elle sera envoyée à https://example.com/api. Dans Firefox, vous devez fournir des URL absolues.

+ +

Les clés de manifest.json

+ +

La page relative à manifest.json contient un tableau décrivant la compatibilité des navigateurs pour les différentes clés du fichier. Lorsqu'il y a des mises en garde concernant le support d'une clé donnée, ceci est indiqué dans le tableau avec un astérisque "*" et de plus amples informations sont fournies dans la page décrivant la clé.

+ +

Ces tables sont générées à partir des données de compatibilité stockées en tant que fichiers JSON dans GitHub.

+ +

Communication avec le système natif

+ +

Arguments de messagerie basée sur la connexion

+ +

Sur Linux et Mac, Chrome passe un argument sur l'application natif, qui est l'origine de l'extension qui l'a lancée, sous la forme : chrome-extension://[extensionID]. Cela permet à l'application d'identifier l'extension.

+ +

Sur Windows, Chrome passe deux arguments: le premier est l'origine de l'extension, et le second est un handle de la fenêtre native de Chrome qui a démarré l'application.

+ +

allowed_extensions

+ +

Dans Chrome, la clé de manifeste allowed_extensions s'appelle allowed_origins.

+ +

Emplacement du fichier de manifeste d'application

+ +

Chrome s'attend à trouver le manifeste de l'application dans un autre endroit. Se référer à la documentation Chrome pour l'emplacement de l'hôte de messagerie natif.

diff --git a/files/fr/mozilla/add-ons/webextensions/comparaison_avec_le_sdk_add-on/index.html b/files/fr/mozilla/add-ons/webextensions/comparaison_avec_le_sdk_add-on/index.html deleted file mode 100644 index 52ec132d64..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/comparaison_avec_le_sdk_add-on/index.html +++ /dev/null @@ -1,746 +0,0 @@ ---- -title: Comparaison avec le SDK Add-on -slug: Mozilla/Add-ons/WebExtensions/Comparaison_avec_le_SDK_Add-on -tags: - - Addon SDK - - AddonSDK - - SDK - - WebExtensions - - porting -translation_of: Mozilla/Add-ons/WebExtensions/Comparison_with_the_Add-on_SDK ---- -
{{AddonSidebar}}
- -

Cet article est une comparaison technique entre les add-ons construits avec le SDK et ceux construits avec la technologie WebExtensions. Il est destiné à aider les personnes maintenant un add-on SDK à le porter vers une WebExtension.

- -
-

La prise en charge des extensions utilisant XUL/XPCOM ou le SDK Add-on a été supprimée dans Firefox 57, publié en novembre 2017. Comme il n'y a pas de version supportée de Firefox permettant ces technologies, cette page sera supprimée d'ici décembre 2020.

-
- -

Si vous souhaitez porter une extension de surcouche ou une extension bootstrappée, consultez la page de comparaison des extensions XUL/XPCOM.

- -

Les WebExtensions et add-ons SDK partagent les mêmes concepts et structures de base. Ces deux technologies utilisent :

- - - -

Au-delà de ces ressemblances, il existe de nombreuses différences énumérées ci-après.

- -

Les fichiers de manifeste

- -

Pour ces deux technologies, on dispose d'un fichier manifeste en JSON situé dans le répertoire racine de l'extension. Dans le SDK, ce fichier est appelé package.json ; pour les WebExtensions, ce fichier s'intitule manifest.json. Les deux fichiers contiennent des métadonnées de base telles que le nom, la description et les icônes de l'extension.

- -

Cependant, manifest.json contient de nombreuses clés qui définissent certaines capacités et certains comportements de l'extension. Pour le SDK, certaines sont définies dans le code :

- - - - - - - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéSDKWebExtensions
Scripts de contenu correspondant aux modèles d'URLAPI page-modClé de manifeste content_scripts
Boutons de la barre d'outilsAPI ui/button/actionClé de manifeste browser_action
Accéder aux API privilégiéesFonction require()Clé de manifeste permissions
- -

Les WebExtensions sont donc plus déclaratives et moins programmables que les add-ons construits avec le SDK.

- -

Pour le  SDK, on utilisera généralement jpm init afin de créer un nouveau package.json. La technologie WebExtensions n'a pas d'équivalent de jpm init, le fichier de manifeste sera probablement écrit à partir de zéro ou adapté d'un fichier existant.

- -

En savoir plus

- - - -

Scripts persistants

- -

Les deux technologies utilisent des scripts persistants qui restent chargés pendant que l'extension est active. Ces scripts accèdent à des API privilégiées et peuvent communiquer avec d'autres parties de l'extension telles que les scripts de contenu.

- -

Dans le SDK, par défaut, ce script est appelé index.js et il peut charger d'autres scripts à l'aide du chargeur de module.

- -

Avec les WebExtensions, ces scripts sont appelés scripts d'arrière-plan. Vous pouvez définir un ensemble de scripts listés via la clé de manifeste background et tous seront chargés dans le même document (une page HTML vierge cachée et générée automatiquement). Vous pouvez également définir votre propre document personnalisé à l'aide de la clé background.

- -

Une différence importante est que les scripts d'arrière-plan ont accès à la variable globale  window globale qui permet d'utiliser l'ensemble des objets DOM habituellement présents dans une fenêtre. De cette façon, l'écriture des extensions se rapproche de l'écriture de pages web avec un accès direct à l'ensemble des API Web classiques (par exemple XMLHttpRequest ou IndexedDB).

- -

On notera également que, par défaut, les extensions ont une politique de sécurité de contenu (CSP) qui leur est appliquée. Vous pouvez spécifier votre propre politique, mais la politique par défaut, entre autres, interdit les pratiques potentiellement dangereuses telles que l'utilisation d'eval().

- -

En savoir plus

- - - -

Scripts de contenus

- -

Pour les extensions SDK et les WebExtensions, les scripts persistants ne peuvent pas accéder directement au contenu des pages web. Au lieu de cela, les extensions peuvent ajouter des scripts de contenu aux pages web. Ces scripts :

- - - -

Pour  les deux technologies, on dispose de deux façons pour ajouter des scripts de contenu : on peut rattacher un ensemble de scripts aux pages dont l'URL contient un motif donné ou on peut, via le code, ajouter un script à une page d'un onglet donné. Si ces mécanismes existent dans les deux technologies, ils sont exécutés différemment :

- - - - - - - - - - - - - - - - - - - - - -
OpérationSDKWebExtensions
Attacher des scripts à des pages dont l'URL correspond à un motifAPI page-modClé de manifeste content_scripts
Attacher des scripts à des pages hébergées dans un onglettab.attach()tabs.executeScript()
- -

Les motifs de correspondance utilisés pour les URL sont différentes :

- - - -

Dans les deux technologies, on peut passer des options pour contrôler lorsque le script s'exécute et s'il sera attaché aux sous-trames. Les  WebExtensions n'ont pas d'équivalent pour contentScriptOptions et, si on veut transmettre les options de configuration à un script de contenu, il faudra les envoyer via un message ou les stocker dans storage.local.

- -

Dans les deux technologies, les scripts de contenu peuvent communiquer avec des scripts persistants grâce à une API de communication asynchrone :

- - - - - - - - - - - - - - - - - - - - - -
OpérationSDKWebExtensions
Envoi de  messageport.emit()runtime.sendMessage() / tabs.sendMessage()
Réception de  messageport.on()runtime.onMessage
- - - -

Dans les deux cas, les scripts de contenus peuvent communiquer avec les scripts chargés par la page à l'aide de window.postMessage et window.addEventListener.

- -

Dans les deux cas, les scripts accèdent à une vue « propre » du DOM : cela signifie qu'ils ne voient pas les modifications apportées au DOM par les scripts chargés par la page.

- -

Dans le SDK, les scripts de contenu peuvent partager des objets avec des scripts de page, en utilisant des techniques comme unsafeWindow et createObjectIn. Avec les WebExtensions, la unsafeWindow est disponible par l'intermédiaire de wrappedJSObject. Toutes les fonctions d'aide à l'exportation sont également disponibles.

- -

En savoir plus

- - - -

Les éléments d'interface utilisateur (UI)

- -

Les deux technologies fournissent des API pour créer une interface utilisateur pour l'extension. Les options d'interface utilisateur pour les WebExtensions sont plus limitées.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Elément d'interfaceSDKWebExtensions
Boutonui/button/actionbrowser_action / page_action
Interrupteur / Bouton à basculeui/button/togglebrowser_action / page_action
Barre d'outilsui/toolbarAucun
Barre latéraleui/sidebarsidebar_action
Panneaupanelbrowser_action / page_action popup
Menu contextuelcontext-menucontextMenus
- -

Panneaux et fenêtres contextuelles

- -

Les panneaux et les fenêtres contextuelles sont des boites de dialogue transitoires définies à l'aide de HTML, CSS et JavaScript.

- -

Contrairement aux panneaux, les fenêtres contextuelles sont toujours attachées à un bouton (une action de navigateur ou une action de page) et ne peuvent pas être affichés par programmation : ils ne s'affichent que lorsque l'utilisateur clique sur le bouton.

- -

Aussi, contrairement aux panneaux, les scripts des fenêtres contextuelles ont accès aux mêmes API que les scripts d'arrière-plan. Ils peuvent même accéder directement à la page d'arrière-plan, via  runtime.getBackgroundPage().

- -

Paramètres

- -

Les extensions SDK et les WebExtensions permettent toutes les deux de gérer des paramètres (aussi appelées options ou préférences).

- -

Avec le fichier SDK, il est possible d'indiquer des paramètres via la clé preferences dans le fichier package.json. L'utilisateur peut voir et modifier ces préférences via l'entrée du Gestionnaire de modules de l'extension. À l'inverse, l'extension peut écouter les changements de paramètres à l'aide de l'API simple-prefs.

- -

Dans les WebExtensions, vous devrez implémenter votre propre interface utilisateur afin de présenter les paramètres et votre propre code pour les garder en mémoire pour votre extension. Pour cela, on écrira un fichier HTML qui présente les paramètres et qui peut inclure un script permettant de les sauvegarder. Le script a accès à toutes les API des WebExtensions et on utilisera généralement l'API storage pour la mémorisation.

- -

L'URL du fichier HTML pour l'écran des paramètres doit être indiqué avec la clé options_ui du fichier manifest.json. La page de paramètres apparaît alors dans l'entrée de l'extension sous le Gestionnaire de modules des extensions. La page d'options peut également être ouverte via le code grâce à un appel à browser.runtime.openOptionsPage.

- -

On notera que les WebExtensions ne permettent pas d'accéder aux préférences du navigateur (c'est-à-dire les préférences exposées dans le SDK par preferences/service). Toutefois, il est possible de modifier certains paramètres du navigateur grâce aux API privacy et browserSettings.

- -

En apprendre plus

- - - -

Internationalisation

- -

Le SDK et les WebExtensions contiennent tous les deux des outils de localisation pour traduire le texte qui sera visible par l'utilisateur. Ces deux outils offrent des fonctionnalités similaires :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FonctionnalitésSDKWebExtensions
Chaînes dans les scripts d'arrière-planOuiOui
Chaînes dans les scripts de contenuNonOui
Chaînes dans les fichiers HTMLOuiNon
Chaînes dans les fichiers CSSNonOui
Titre et descriptionsOuiOui
Gestion des formes pluriellesOuiNon
Textes de substitution (placeholders)OuiOui
- -

Dans les deux systèmes, les chaînes traduites sont fournies via un ensemble de fichier : un pour chaque locale.

- -

Pour récupérer les chaînes localisées dans le code de l'extension, on peut utiliser l'API JavaScript l10n dans le SDK et l'API i18n pour les WebExtensions.

- -

Les WebExtensions ne gèrent pas nativement la localisation des chaînes présentes dans les fichiers HTML : il faut le faire soi-même en utilisant JavaScript pour récupérer des chaînes localisées et pour remplacer dynamiquement le contenu HTML par la version localisée.

- -

En savoir plus

- - - -

Outil en ligne de commande

- -

Le SDK livré avec un outil en ligne de commande : jpm qu'on peut utiliser pour tester et empaqueter les extensions. Il existe un outil équivalent pour les WebExtensions : web-ext. Web-ext ne prend pas en charge les mêmes commandes que jpm, mais gère run, build et sign.

- -

Il est maintenant possible d'installer (et de recharger) des extensions SDK et les extensions construites avec les API WebExtension dans Firefox à partir de leur répertoire source, sans avoir besoin de les empaqueter dans un fichier XPI. Voir l'installation temporaire dans Firefox.

- -

En savoir plus

- - - -

Les API JavaScript

- -

Que ce soit pour le SDK et les WebExtensions, la puissance des extensions provient d'un ensemble d'API JavaScript dédiées. Pour la plupart des API SDK de haut niveau, il existe un équivalent WebExtensions.

- -

Une grande limitation de WebExtensions par rapport au SDK est que les modules complémentaires SDK peuvent utiliser require("chrome") pour accéder à la gamme complète des API XPCOM dans Firefox. Ceci n'est pas possible avec WebExtensions.

- -

Pour accéder aux API privilégiées dans le SDK, on utilise require() :

- -
var tabs = require("sdk/tabs");
-tabs.open("https://developer.mozilla.org/");
- -

Avec WebExtensions, la plupart des API sont déjà disponibles, sans avoir besoin de les importer :

- -
browser.tabs.create({
-  "url": "/"
-});
- -

Pour certaines API WebExtension, vous devez d'abord demander la permission, en utilisant la clé des permissions de manifest.json. Dans l'exemple ci-dessous, l'extension doit demander l'autorisation "tabs" si elle souhaite accéder à l'URL de l'onglet :

- -

manifest.json

- -
...
-
-"permissions": [
-    "tabs"
-  ]
-
-...
- -

Script d'arrière-plan

- -
function logUrl(tabs) {
-  console.log(tabs[0].url);
-}
-
-var querying = browser.tabs.query(
-  {active: true, currentWindow: true}
-);
-
-querying.then(logUrl);
-
- -

Comparaison des API SDK / WebExtension

- -

Les tableaux de cette section répertorient chaque API du SDK et indiquent l'API WebExtension équivalente si elle existe.

- -

Le premier tableau couvre les API SDK de haut niveau, le second couvre les API bas niveau.

- -

API haut niveau

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SDKWebExtensions
addon-pagetabs.create() peut être utilisé pour charger des pages packagées avec l'add-on dans des onglets de navigateur.
base64window.atob() et btoa()
clipboarddocument.execCommand sans select() sur la page d'arrière-plan.
context-menucontextMenus
hotkeyscommands
indexed-dbwindow.indexedDB
l10ni18n
notificationsnotifications
page-modcontent_scripts
page-worker -

Le portage n'est pas terminé et est décrit dans le bug 1318532

- -

Les méthodes de contournement (qui peuvent avoir besoin de webrequestBlocking pour accéder à l'ensemble des  pages [exemple]) :

- -
    -
  • Utiliser la page d'arrière-plan
    • -
  • Charger des iframes distantes dans la page d'arrière-plan
    • -
  • Effectuer un appel XHR pour obtenir les informations statiques de la page.
    • -
-
panelVoir la section sur les interfaces utilisateur.
passwordsL'API expérimentale logins
private-browsingTab.incognito et Window.incognito.
querystringwindow.URLSearchParams
requestwindow.fetch ou window.XMLHttpRequest
selectionUtiliser un script de contenu qui envoie la donnée sélectionnée l'add-on. Sinon, si on peut utiliser un menu contextuel sur une sélection, celle-ci sera contenue dans selectionText (contextMenus.OnClickData).
selfruntime.getManifest() et extension.getURL() pour data.url()
simple-prefsstorage et options_ui
simple-storagestorage
systemPartiellement couvert par runtime.
tabstabs
timersalarms
uiVoir la section sur les éléments d'interface.
urlwindow.URL
widgetAucun
windowswindows
- -

API bas niveau

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SDKWebExtensions
loaderAucun
chromeAucun
console/plain-textAucun
console/tracebackAucun
content/contentAucun
content/loaderAucun
content/modAucun
content/symbiontAucun
content/workerAucun
core/heritageAucun
core/namespaceAucun
core/promisePromise
dev/paneldevtools.panels
event/coreAucun
event/targetAucun
frame/hidden-frameAucun
frame/utilsAucun
fs/pathAucun
io/byte-streamsAucun
io/fileAucun
io/text-streamsAucun
lang/functionalAucun
lang/typeAucun
loader/cuddlefishAucun
loader/sandboxAucun
net/urlAucun
net/xhrwindow.fetch ou window.XMLHttpRequest
places/bookmarksbookmarks
places/faviconAucun
places/historyhistory
platform/xpcomAucun
preferences/event-targetAucun
preferences/servicePrise en charge partielle via les API privacy et browserSettings
remote/childAucun
remote/parentAucun
stylesheet/styleAucun
stylesheet/utilsAucun
system/child_processruntime.connectNative
system/environmentAucun
system/eventsAucun
system/runtimePrise en charge partielle via runtime.getPlatformInfo
system/xul-appPrise en charge partielle via runtime.getBrowserInfo
tabs/utilsAucun
ui/button/actionbrowser_action / page_action
ui/button/togglebrowser_action / page_action
ui/frameAucun
ui/idAucun
ui/sidebarsidebarAction
ui/toolbarAucun
util/arrayAucun
util/collectionAucun
util/deprecateAucun
util/listAucun
util/match-patternAucun
util/objectAucun
util/uuidAucun
window/utilsAucun
diff --git "a/files/fr/mozilla/add-ons/webextensions/compatibilit\303\251_navigateurs_api_javascript/index.html" "b/files/fr/mozilla/add-ons/webextensions/compatibilit\303\251_navigateurs_api_javascript/index.html" deleted file mode 100644 index d7d80b6988..0000000000 --- "a/files/fr/mozilla/add-ons/webextensions/compatibilit\303\251_navigateurs_api_javascript/index.html" +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Compatibilité des navigateurs avec les API JavaScript WebExtensions -slug: Mozilla/Add-ons/WebExtensions/Compatibilité_navigateurs_API_JavaScript -tags: - - Reference - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs ---- -
{{AddonSidebar}}
- - - -

{{WebExtAllCompatTables}}

- -
Remerciements - -

Les données de compatibilité Microsoft Edge sont fournies par Microsoft Corporation et sont incluses ici sous la licence Creative Commons Attribution 3.0 United States.

-
- -

Voir aussi

- - diff --git a/files/fr/mozilla/add-ons/webextensions/compte_developpeurs/index.html b/files/fr/mozilla/add-ons/webextensions/compte_developpeurs/index.html deleted file mode 100644 index 7cd2470cf8..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/compte_developpeurs/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: Comptes développeurs -slug: Mozilla/Add-ons/WebExtensions/Compte_developpeurs -tags: - - Développement - - Extensions - - publications -translation_of: Mozilla/Add-ons/WebExtensions/Developer_accounts ---- -

{{AddonSidebar}}

- -

Les comptes développeurs pour addons.mozilla.org sont intégrés aux comptes Firefox, ce qui vous permet d'accéder et de gérer plusieurs services Mozilla depuis un seul compte. Vous pouvez gérer votre compte Firefox à partir de accounts.firefox.com/settings.

- -

Définition d'un nom d'affichage

- -

Il est important de définir un nom d'affichage sur votre profil sur addons.mozilla.org pour augmenter la transparence avec les utilisateurs, les évaluateurs et la communauté.

- -
-

Le nom d'affichage de votre compte Firefox ne sera pas synchronisé avec votre profil sur addons.mozilla.org. Vous devrez définir le nom d'affichage de votre compte développeur à partir de votre profil sur addons.mozilla.org

-
- -

Comptes bloqués

- -

Afin d'empêcher les acteurs malveillants de soumettre des spams à addons.mozilla.org, nous n'accepterons pas les soumissions provenant de comptes qui utilisent une adresse e-mail temporaire jetable, ou qui ont soumis plusieurs add-ons qui violent nos Politiques de add-on.

- -

Si vous pensez que votre compte a été bloqué par erreur, veuillez envoyer un email à amo-admins [at] mozilla [dot] com et inclure un lien vers votre profil développeur.

diff --git a/files/fr/mozilla/add-ons/webextensions/construction_extension_cross_browser/index.html b/files/fr/mozilla/add-ons/webextensions/construction_extension_cross_browser/index.html deleted file mode 100644 index 506822110d..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/construction_extension_cross_browser/index.html +++ /dev/null @@ -1,252 +0,0 @@ ---- -title: Construction d'une extension cross-browser -slug: Mozilla/Add-ons/WebExtensions/construction_extension_cross_browser -tags: - - Add-ons - - Extensions - - Guide - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/Build_a_cross_browser_extension ---- -

{{AddonSidebar()}}

- -

L'introduction de l'API d'extension de navigateur a créé un paysage plus uniforme pour le développement d'extensions des navigateurs. Cependant, parmi les navigateurs qui utilisent les API d'extensions (les principales étant Chrome, Firefox, Opera et Edge), vous verrez des différences à la fois dans l'implémentation de l'API et dans la portée de la couverture. Et puis, Safari utilise ses propres extensions Safari Extensions JS.

- -

Maximiser la portée de votre extension de navigateur signifie la développer pour au moins deux navigateurs différents, voire plus. Cet article examine six des principaux défis rencontrés lors de la création d'une extension multi-navigateurs, et dans chaque cas, suggère comment relever ce défi.

- -

Cet article ne traite pas de la création d'extensions de navigateur pour Safari. Il est possible de partager certaines ressources avec une extension Safari, comme des images et du contenu HTML. Cependant, le codage JavaScript doit être entrepris comme un projet de développement séparé, à moins que vous ne souhaitiez créer votre propre polyfill.

- -

Obstacles lors du codage d'extension multiplateforme

- -

Il y a six domaines que vous devez aborder lorsque vous vous attaquez à une extension multiplateforme :

- - - -

Espace de nommage de l'API

- -

Deux espaces de noms API sont utilisés parmi les quatre principaux navigateurs :

- - - -

Firefox prend également en charge l'espace de noms chrome.* pour les API compatibles avec Chrome, principalement pour faciliter le portage. Cependant, il est préférable d'utiliser l'espace de nommage browser.*. En plus d'être la norme proposée, browser.* utilise des promesses — un mécanisme moderne et pratique pour gérer les événements asynchrones.

- -

Ce n'est que dans les extensions les plus triviales que l'espace de nommage sera probablement le seul problème multiplateforme qui devra être traité. Il est donc rarement, voire jamais, utile d'essayer d'aborder cette question seul. La meilleure approche consiste à traiter ce problème avec une gestion asynchrone des événements.

- -

Gestion asynchrone des événements API

- -

Il existe deux approches pour gérer les événements asynchrones utilisées par les quatre principaux navigateurs :

- - - -

Firefox prend également en charge les rappels pour les API qui prennent en charge l'espace de noms chrome.*. Cependant, il est recommandé d'utiliser des promesses (et l'espace de noms browser.* du navigateur). Des promesses ont été adoptées dans le cadre de la norme proposée. Il simplifie grandement la gestion asynchrone des événements, en particulier lorsque vous devez enchaîner des événements.

- -

Si vous n'êtes pas familier avec les différences entre ces deux méthodes, jetez un coup d'oeil à Apprendre à connaître le Javascript asynchrone : Rappels, promesses et synchronisation/attente ou la page des promesses d'utilisation de MDN.

- -

Alors, comment tirer profit des promesses facilement, alors que Firefox est le seul navigateur qui les supporte ? La solution est de coder pour Firefox en utilisant des promesses et d'utiliser le navigateur WebExtension API Polyfill. Cette polyfill prend en compte l'espace de nommage de l'API et la gestion asynchrone des événements dans Firefox, Chrome et Opera. Au moment de la rédaction du présent document (novembre 2018), le soutien pour Edge était en cours d'élaboration.

- -

Vous installez le navigateur WebExtension API Polyfill dans votre environnement de développement à l'aide de npm ou vous le téléchargez directement depuis les versions de GitHub. Vous référencerez alors browser-polyfill.js dans :

- - - -

Ainsi, par exemple, ce code manifest.json rend le polyfill disponible pour vos scripts d'arrière-plan :

- -
{
- // ...
- "background": {
-   "scripts": [
-     "browser-polyfill.js",
-     "background.js"
-   ]
- }
-}
- -

Votre but est de vous assurer que le polyfill s'exécute dans votre extension avant tout autre script qui attend le browser.* API namespace s'exécute.

- -

Pour plus de détails et d'informations sur l'utilisation du polyfill avec un module bundler, voir le readme du projet sur GitHub.

- -

Il existe d'autres options de polyfill mais, au moment d'écrire ces lignes, aucune ne fournit la couverture de l'API Polyfill du navigateur WebExtension. Ainsi, lorsque vous n'avez pas choisi Firefox comme premier choix, vos options sont d'accepter les limitations des polyfills alternatifs, de porter sur Firefox et d'ajouter la prise en charge du cross-browser, ou de développer votre propre polyfill.

- -

Couverture des fonctions API

- -

Les différences dans les fonctions API offertes dans chacun des quatre principaux navigateurs se répartissent en trois grandes catégories :

- - - -

You can find details about the support for the extension APIs among the four main browsers and Firefox for Android on the Mozilla Developer Network Browser support for JavaScript APIs page. Browser compatibility information is also included with each function and its methods, types, and events in the Mozilla Developer Network JavaScript APIs reference pages.

- -

A simple approach to addressing these differences is to limit the functions used in your extension to functions that offer the same functionality across your range of targeted browsers. In practice, for most extensions, this approach is likely to be too restrictive.

- -

The approach you should take where there are differences among the APIs, is to offer either alternative implementations or fallback functionality. Remember that you may also need to do this to allow for differences in API support between versions of the same browser.

- -

The use of runtime checks on the availability of a function’s features is the recommended approach to implementing alternative or fallback functionality. The benefit of performing a runtime check is that if the function becomes available you don’t need to update and redistribute the extension to take advantage of it.

- -

The following code enables you to perform a runtime check:

- -
if (typeof <function> === "function") {
-   // safe to use the function
-}
- -

Manifest keys

- -

The differences in the manifest.json file keys supported by the four main browsers fall broadly into three categories:

- - - -

Browser compatibility information is included with each key in the Mozilla Developer Network manifest.json key reference pages.

- -

As manifest.json files tend to change little—except for release numbers, which may be different between the various browsers—creating and editing a static version for each browser is usually the simplest approach.

- -

Extension packaging

- -

Packaging an extension for distribution through the browser extension stores is relatively straightforward. Firefox, Chrome, and Opera all use a simple zip format that requires the manifest.json file to be at the root of the zip package. However, submitting to the Microsoft store requires additional packaging of the extension file.

- -

For details on packaging, refer to the guidance on the respective extension’s developer portals.

- -

Publishing

- -

Each of the four major browsers maintains browser extension stores. As a consequence, you need to approach adding and updating your extension in each separately. In some cases you can upload your extension using a utility. Each of the stores also performs a review of your extension to check for security vulnerabilities. The table below summarizes the approach and features of each store:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

Registration fee

- 		-

Upload utility

- 		-

Pre-publication review process

- 		-

Account two factor authentication

-
-

Firefox

- 		-

No

- 		-

web-ext

- 		-

Automatic, a few seconds1

- 		-

No

-
-

Chrome

- 		-

Yes

- 		-

Yes

- 		-

Automatic, less than an hour

- 		-

Yes

-
-

Opera

- 		-

No

- 		-

No

- 		-

Manual, no SLA provided

- 		-

No

-
-

Edge

- 		-

Yes

- 		-

No

- 		-

Manual, up to 72 hours2

- 		-

Yes

-
- -

1) A manual review of the extension takes place after publication, which may result in the extension being suspended where issues that need fixing are found.

- -

2) At the time of writing, Microsoft was only allowing publication of preapproved extensions.

- -

Other considerations

- -

Extension naming

- -

Microsoft requires that extensions have unique names and provides a process for claiming one or more names for your extension through the Windows Dev Center. It may therefore be prudent to reserve an extension name with Microsoft, even if you’re not intending to support Edge immediately. None of the other stores apply name restrictions.

- -

Version numbering

- -

The Firefox and Chrome stores require that each uploaded version has a separate version number. This means that you cannot revert to an earlier version number, if you come across issues in a release.

- -

Share content

- -

Even when you include developing extensions for Safari, there are a number of assets you can potentially share across all of your implementations. These include:

- - - -

Conclusion

- -

When approaching a cross-platform extension development, addressing the fundamental differences between extension API implementations can be addressed by targeting Firefox and using the WebExtension browser API Polyfill. Following this approach you benefit from using API features that are closely aligned with the proposed extensions API standard and offer you the simplicity of promises for asynchronous event handling.

- -

The bulk of your cross-platform work is likely to focus on handling variations among the API features supported by the main browsers. Creating your manifest.json files should be relatively straightforward and something you can do manually. You will then need to account for the variations in extension packaging and the processes for submitting to each of the extension stores.

- -

Following the advice in this article, you should be able to create an extension that works well on all of the four main browsers, enabling you to deliver your extension features to more people.

diff --git a/files/fr/mozilla/add-ons/webextensions/debogage_(avant_firefox_50)/index.html b/files/fr/mozilla/add-ons/webextensions/debogage_(avant_firefox_50)/index.html deleted file mode 100644 index ecdc2a6849..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/debogage_(avant_firefox_50)/index.html +++ /dev/null @@ -1,236 +0,0 @@ ---- -title: Débogage (avant Firefox 50) -slug: Mozilla/Add-ons/WebExtensions/Debogage_(avant_Firefox_50) -tags: - - Debugging - - Firefox - - Guide - - Mozilla - - Obsolete - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/Debugging_(before_Firefox_50) ---- -
{{AddonSidebar}}
- -
-

Cet article explique comment vous pouvez déboguer des extensions à l'aide des API WebExtension sur des versions de Firefox antérieures à la version 50.

- -

Si vous utilisez Firefox 50 ou version ultérieure, consultez l'article principal sur les extensions de débogage.

-
- -

Cet article explique comment utiliser les outils de développement Firefox intégrés pour déboguer les extensions développées avec les API WebExtension. Si vous essayez de déboguer un module développé avec le Kit de développement logiciel complémentaire, consultez le guide du débogueur de module complémentaire.

- - - - - -

Pour montrer comment connecter les outils de débogage, nous utiliserons une simple extension d'exemple appelée "notify-link-clicks-i18n". Le code est dans dépôt d'exemples d'extensions sur GitHub.

- -

L'extension se compose de :

- - - -

Le script de contenu écoute les clics sur les liens dans la page : lorsqu'un clic sur un lien se produit, le script de contenu envoie un message au script d'arrière-plan contenant la référence du lien.

- -

Lorsque le script d'arrière-plan reçoit le message, il affiche une notification contenant la href.

- -

Voici "content-script.js":

- -
/*
-If the click was on a link, send a message to the background page.
-The message contains the link's URL.
-*/
-function notifyExtension(e) {
-  var target = e.target;
-  while ((target.tagName != "A" || !target.href) && target.parentNode) {
-    target = target.parentNode;
-  }
-  if (target.tagName != "A")
-    return;
-
-  console.log("content script sending message");
-  chrome.runtime.sendMessage({"url": target.href});
-}
-
-/*
-Add notifyExtension() as a listener to click events.
-*/
-window.addEventListener("click", notifyExtension);
-
- -

Voici "background-script.js":

- -
/*
-Log that we received the message.
-Then display a notification. The notification contains the URL,
-which we read from the message.
-*/
-function notify(message) {
-  console.log("background script received message");
-  var title = chrome.i18n.getMessage("notificationTitle");
-  var content = chrome.i18n.getMessage("notificationContent", message.url);
-  chrome.notifications.create({
-    "type": "basic",
-    "iconUrl": chrome.extension.getURL("icons/link-48.png"),
-    "title": title,
-    "message": content
-  });
-}
-
-/*
-Assign `notify()` as a listener to messages from the content script.
-*/
-chrome.runtime.onMessage.addListener(notify);
-
- -

Si vous voulez suivre, clonez le référentiel webextensions-examples, puis package et installez "notify-link-clicks-i18n".

- -

La boite à outils du navigateur

- -

Nous utiliserons la boîte à outils du navigateur pour déboguer l'extension.

- -

Conditions préalables

- -

Avant de pouvoir utiliser la boîte à outils du navigateur, vous devez être configuré.

- - - -

{{EmbedYouTube("LJAM2vXJ790")}}

- -

Ouverture de la boîte à outils du navigateur

- -

Ensuite, nous ouvrirons la boîte à outils du navigateur..

- - - -

La boîte à outils du navigateur s'ouvrira alors dans une nouvelle fenêtre. La fenêtre principale de Firefox passera au premier plan, vous devrez donc cliquer sur la boîte à outils du navigateur pour la ramener devant vous :

- -

{{EmbedYouTube("fZ492zAAy3o")}}

- -

Dans Firefox, une "Toolbox" est le nom d'une fenêtre séparée contenant un ensemble d'outils dans une interface à onglets, comme ceci :

- -

La boîte à outils ci-dessus contient cinq outils, que vous pouvez commuter entre les onglets en haut de la fenêtre : "Inspecteur", "Console", "Debugger", "Style Editor" et "Scratchpad". Nous n'utiliserons que deux de ces outils : "Console" et "Debugger".

- -

Affichage de la sortie du journal

- -

Nous pouvons utiliser la console pour voir la sortie des journaux : Cela inclus les messages de :

- - - -

Il inclut les messages de vos journaux de code à l'aide de l'API de console que les messages d'erreur enregistrés par le moteur JavaScript lors de l'exécution de votre code.

- -

Essayons avec l'exemple ci-dessus : sélectionnez l'onglet Console dans la boîte à outils du navigateur, ouvrez une page Web et cliquez sur un lien pour voir les messages enregistrés à partir du script de contenu et du script d'arrière-plan :

- -

{{EmbedYouTube("Qpx0n8gP3Qw")}}

- -

Un problème ici est que la console vous montre les messages de l'ensemble du navigateur, donc il peut y avoir beaucoup de bruit. Lisez  comment filtrer les messages de journal pour obtenir de l'aide à ce sujet.

- -

Débogage JavaScript

- -

Avec la Toolbox du navigateur, vous pouvez utiliser le débogueur JavaScript pour définir des points d'arrêt dans les scripts d'arrière-plan et les scripts s'exécutant dans le navigateur ou les fenêtres contextuelles d'action de page.

- -

Les scripts en arrière-plan sont toujours disponibles dans le débogueur si l'extension est installée et activée. Les scripts popup ne deviennent visibles que lorsque le popup est ouvert. Si vous avez besoin d'accéder aux scripts popup dès qu'ils se chargent, essayez d'ajouter un debogueur ; instruction au début du script.

- -

Pour utiliser le débogueur JavaScript, sélectionnez l'onglet Débogueur dans la boîte à outils du navigateur. Le travail suivant est donc de trouver le code de votre extension  : pour ce faire cliquez dans la boite de recherche et tapez le nom de la source.

- -

Une fois que vous avez trouvé votre source, vous pouvez définir des points d'arrêt, passer en revue le code et  faire tout ce que vous vous attendez à pouvoir faire dans un débogueur.

- -

{{EmbedYouTube("3edeJiG38ZA")}}

- -

Interpréteur en ligne de commande JavaScript

- -

La console comprend un interpréteur de ligne de commande que vous pouvez utiliser pour interroger et manipuler l'état d'un programme en cours d'exécution. Cette fonctionnalité est couramment utilisée lorsque la console est attachée à une page Web, mais elle est généralement difficile à utiliser avec la Toolbox du navigateur, parce que la portée de cette console est le navigateur entier plutôt que l'extension spécifique que vous essayez de déboguer.

- -

Cependant, il y a un truc qui peut vous aider : pendant que le débogueur soit mis en pause à un point d'arrêt, la portée de la Console est la portée au point du programme dans lequel le débogueur est mis en pause. Ainsi, si vous avez atteint un point d'arrêt dans le code de votre extension, vous pouvez interagir directement avec votre extension : vous pouvez appeler des fonctions d'extension, réassigner des valeurs de variables, etc.

- -

Cette fonction est particulièrement utile en combinaison avec une autre fonction : la console split. Cela vous permet de diviser la boîte à outils en deux : une moitié contient la console et l'autre moitié contient un outil différent (dans ce cas, le débogueur JavaScript) :

- -

{{EmbedYouTube("xprf58qOtLY")}}

- -

Débogage des scripts de contenus

- -

Une grande limitation de la Browser Toolbox est la suivante : si vous développez avec firefox multiprocessus, vous ne pouvez pas utiliser la Toolbox du navigateur pour attacher le débogueur JavaScript aux scripts de contenu.

- -

Dans Firefox multiprocessus, le navigateur est divisé en (au moins) deux processus : un pour exécuter l'interface utilisateur et le code système du navigateur, et un (ou plusieurs) processus de contenu, qui exécutent des scripts chargés à partir de pages Web. La ToolBox du navigateur s'attache au premier de ces processus : mais les scripts de contenu s'exécutent dans les processus de contenu, de sorte qu'ils n'apparaissent pas dans la liste des sources de la ToolBox du navigateur.

- -

Pour déboguer les scripts de contenu dans Firefox multiprocessus, vous devrez utiliser le contenu de la boite à outils du navigateur. Le contenu de la boite à outils du navigateur est tout comme la Toolbox de navigateur, sauf qu'elle attache les outils de développement au processus de contenu du navigateur, de sorte que les scripts de contenu sont visibles..

- -

Notez que les scripts de contenu n'apparaîtront pas dans la liste des sources jusqu'à ce qu'ils soient chargés. Si vous avez besoin d'y accéder dès qu'ils se chargent, essayez d'ajouter un debuggueur ; instruction au début de votre script.

- -
-

Note : vous n'avez besoin et ne pouvez accéder à la Browser Content Toolbox que si vous développez contre Firefox multiprocessus.

-
- -
-

L'activation du débogage des travailleurs dans les Options de la boîte à outils désactivera le débogage de la boîte à outils du contenu du navigateur, le Bug 1236892 devrait régler ce problème..

-
- -

{{EmbedYouTube("xAt3Q0PgJP4")}}

- -

Débogage des fenêtres contextuelles

- -
Nouveau dans Firefox 47
- -

A partir de Firefox 47, vous pouvez utiliser la Browser Toolbox pour déboguer le contenu des popups. Il s'agit d'un processus en trois étapes :

- - - -

{{EmbedYouTube("EEU4NeAS1s4")}}

- -

Désactiver l'autohide

- -

Le problème avec les panneaux de débogage en général est qu'ils sont cachés lorsque vous cliquez en dehors d'eux. La première étape consiste donc à désactiver ce comportement. Dans la boîte à outils du navigateur, cliquez sur l'icône qui ressemble à quatre petits carrés :

- -

Maintenant, lorsque vous ouvrez un panneau dans Firefox, il restera ouvert jusqu'à ce que vous appuyiez sur Escape.

- -
-

Notez que ce changement s'applique aux fenêtre contextuelles intégrés au navigateur, cpùùe le menu Hamburger (), ainsi qu'aux fenêtres contextuelles d'extension.

- -

Notez également que le changement est persistant, même si le navigateur redémarre. Nous travaillons à résoudre ce problème dans le bug 1251658, mais d'ici là, vous préférerez peut-être réactiver la fonction Autohide en cliquant à nouveau sur le bouton avant de fermer la boîte à outils du navigateur.

- -

En interne, ce bouton bascule juste la préférence  ui.popup.disable_autohide que vous pouvez basculer manuellement en utilisant using about:config.

-
- -

Ouvrir la fenêtre contextuelle

- -

Ensuite, ouvrez le popup. Vous pouvez ensuite revenir à la boîte à outils du navigateur, et le panneau restera ouvert.

- -

Sélectionner le cadre de la fenêtre popup

- -

Le popup est chargé dans son propre cadre. Ensuite, sélectionnez le document de votre popup à l'aide du bouton sélection de cadre boîte à outils du navigateur :Le document s'appellera quelque chose comme

- -
moz-extension://<some-uuid>/path/to/your-popup.html
- -

{{EmbedYouTube("/9jdHDCKIN-U")}}

- -

Maintenant, le champ d'application de la boîte à outils est le popup. Dans l'Inspecteur, vous pouvez examiner et modifier le HTML et le CSS du popup. Dans le Debugger, vous pouvez rechercher tous les scripts chargés dans le popup et définir des points d'arrêt.

- -

Qu'en est-il de l'Add-on Deboguer ?

- -

Le deboguer des modules complémentaires est destiné à être l'évanir du débogage des add-on dans Firefox.

- -

Son grand avantage par rapport à la Browser Toolbox est qu'il ne montre que les fichiers de votre extension, donc il est beaucoup plus facile de trouver votre code. Cependant, pour le moment, vous ne pouvez pas voir les messages de console de votre extension dans l'Add-on Debugger, donc la Browser Toolbox est plus fonctionnelle.

diff --git a/files/fr/mozilla/add-ons/webextensions/debugging_(before_firefox_50)/index.html b/files/fr/mozilla/add-ons/webextensions/debugging_(before_firefox_50)/index.html new file mode 100644 index 0000000000..ecdc2a6849 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/debugging_(before_firefox_50)/index.html @@ -0,0 +1,236 @@ +--- +title: Débogage (avant Firefox 50) +slug: Mozilla/Add-ons/WebExtensions/Debogage_(avant_Firefox_50) +tags: + - Debugging + - Firefox + - Guide + - Mozilla + - Obsolete + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Debugging_(before_Firefox_50) +--- +
{{AddonSidebar}}
+ +
+

Cet article explique comment vous pouvez déboguer des extensions à l'aide des API WebExtension sur des versions de Firefox antérieures à la version 50.

+ +

Si vous utilisez Firefox 50 ou version ultérieure, consultez l'article principal sur les extensions de débogage.

+
+ +

Cet article explique comment utiliser les outils de développement Firefox intégrés pour déboguer les extensions développées avec les API WebExtension. Si vous essayez de déboguer un module développé avec le Kit de développement logiciel complémentaire, consultez le guide du débogueur de module complémentaire.

+ + + + + +

Pour montrer comment connecter les outils de débogage, nous utiliserons une simple extension d'exemple appelée "notify-link-clicks-i18n". Le code est dans dépôt d'exemples d'extensions sur GitHub.

+ +

L'extension se compose de :

+ + + +

Le script de contenu écoute les clics sur les liens dans la page : lorsqu'un clic sur un lien se produit, le script de contenu envoie un message au script d'arrière-plan contenant la référence du lien.

+ +

Lorsque le script d'arrière-plan reçoit le message, il affiche une notification contenant la href.

+ +

Voici "content-script.js":

+ +
/*
+If the click was on a link, send a message to the background page.
+The message contains the link's URL.
+*/
+function notifyExtension(e) {
+  var target = e.target;
+  while ((target.tagName != "A" || !target.href) && target.parentNode) {
+    target = target.parentNode;
+  }
+  if (target.tagName != "A")
+    return;
+
+  console.log("content script sending message");
+  chrome.runtime.sendMessage({"url": target.href});
+}
+
+/*
+Add notifyExtension() as a listener to click events.
+*/
+window.addEventListener("click", notifyExtension);
+
+ +

Voici "background-script.js":

+ +
/*
+Log that we received the message.
+Then display a notification. The notification contains the URL,
+which we read from the message.
+*/
+function notify(message) {
+  console.log("background script received message");
+  var title = chrome.i18n.getMessage("notificationTitle");
+  var content = chrome.i18n.getMessage("notificationContent", message.url);
+  chrome.notifications.create({
+    "type": "basic",
+    "iconUrl": chrome.extension.getURL("icons/link-48.png"),
+    "title": title,
+    "message": content
+  });
+}
+
+/*
+Assign `notify()` as a listener to messages from the content script.
+*/
+chrome.runtime.onMessage.addListener(notify);
+
+ +

Si vous voulez suivre, clonez le référentiel webextensions-examples, puis package et installez "notify-link-clicks-i18n".

+ +

La boite à outils du navigateur

+ +

Nous utiliserons la boîte à outils du navigateur pour déboguer l'extension.

+ +

Conditions préalables

+ +

Avant de pouvoir utiliser la boîte à outils du navigateur, vous devez être configuré.

+ + + +

{{EmbedYouTube("LJAM2vXJ790")}}

+ +

Ouverture de la boîte à outils du navigateur

+ +

Ensuite, nous ouvrirons la boîte à outils du navigateur..

+ + + +

La boîte à outils du navigateur s'ouvrira alors dans une nouvelle fenêtre. La fenêtre principale de Firefox passera au premier plan, vous devrez donc cliquer sur la boîte à outils du navigateur pour la ramener devant vous :

+ +

{{EmbedYouTube("fZ492zAAy3o")}}

+ +

Dans Firefox, une "Toolbox" est le nom d'une fenêtre séparée contenant un ensemble d'outils dans une interface à onglets, comme ceci :

+ +

La boîte à outils ci-dessus contient cinq outils, que vous pouvez commuter entre les onglets en haut de la fenêtre : "Inspecteur", "Console", "Debugger", "Style Editor" et "Scratchpad". Nous n'utiliserons que deux de ces outils : "Console" et "Debugger".

+ +

Affichage de la sortie du journal

+ +

Nous pouvons utiliser la console pour voir la sortie des journaux : Cela inclus les messages de :

+ + + +

Il inclut les messages de vos journaux de code à l'aide de l'API de console que les messages d'erreur enregistrés par le moteur JavaScript lors de l'exécution de votre code.

+ +

Essayons avec l'exemple ci-dessus : sélectionnez l'onglet Console dans la boîte à outils du navigateur, ouvrez une page Web et cliquez sur un lien pour voir les messages enregistrés à partir du script de contenu et du script d'arrière-plan :

+ +

{{EmbedYouTube("Qpx0n8gP3Qw")}}

+ +

Un problème ici est que la console vous montre les messages de l'ensemble du navigateur, donc il peut y avoir beaucoup de bruit. Lisez  comment filtrer les messages de journal pour obtenir de l'aide à ce sujet.

+ +

Débogage JavaScript

+ +

Avec la Toolbox du navigateur, vous pouvez utiliser le débogueur JavaScript pour définir des points d'arrêt dans les scripts d'arrière-plan et les scripts s'exécutant dans le navigateur ou les fenêtres contextuelles d'action de page.

+ +

Les scripts en arrière-plan sont toujours disponibles dans le débogueur si l'extension est installée et activée. Les scripts popup ne deviennent visibles que lorsque le popup est ouvert. Si vous avez besoin d'accéder aux scripts popup dès qu'ils se chargent, essayez d'ajouter un debogueur ; instruction au début du script.

+ +

Pour utiliser le débogueur JavaScript, sélectionnez l'onglet Débogueur dans la boîte à outils du navigateur. Le travail suivant est donc de trouver le code de votre extension  : pour ce faire cliquez dans la boite de recherche et tapez le nom de la source.

+ +

Une fois que vous avez trouvé votre source, vous pouvez définir des points d'arrêt, passer en revue le code et  faire tout ce que vous vous attendez à pouvoir faire dans un débogueur.

+ +

{{EmbedYouTube("3edeJiG38ZA")}}

+ +

Interpréteur en ligne de commande JavaScript

+ +

La console comprend un interpréteur de ligne de commande que vous pouvez utiliser pour interroger et manipuler l'état d'un programme en cours d'exécution. Cette fonctionnalité est couramment utilisée lorsque la console est attachée à une page Web, mais elle est généralement difficile à utiliser avec la Toolbox du navigateur, parce que la portée de cette console est le navigateur entier plutôt que l'extension spécifique que vous essayez de déboguer.

+ +

Cependant, il y a un truc qui peut vous aider : pendant que le débogueur soit mis en pause à un point d'arrêt, la portée de la Console est la portée au point du programme dans lequel le débogueur est mis en pause. Ainsi, si vous avez atteint un point d'arrêt dans le code de votre extension, vous pouvez interagir directement avec votre extension : vous pouvez appeler des fonctions d'extension, réassigner des valeurs de variables, etc.

+ +

Cette fonction est particulièrement utile en combinaison avec une autre fonction : la console split. Cela vous permet de diviser la boîte à outils en deux : une moitié contient la console et l'autre moitié contient un outil différent (dans ce cas, le débogueur JavaScript) :

+ +

{{EmbedYouTube("xprf58qOtLY")}}

+ +

Débogage des scripts de contenus

+ +

Une grande limitation de la Browser Toolbox est la suivante : si vous développez avec firefox multiprocessus, vous ne pouvez pas utiliser la Toolbox du navigateur pour attacher le débogueur JavaScript aux scripts de contenu.

+ +

Dans Firefox multiprocessus, le navigateur est divisé en (au moins) deux processus : un pour exécuter l'interface utilisateur et le code système du navigateur, et un (ou plusieurs) processus de contenu, qui exécutent des scripts chargés à partir de pages Web. La ToolBox du navigateur s'attache au premier de ces processus : mais les scripts de contenu s'exécutent dans les processus de contenu, de sorte qu'ils n'apparaissent pas dans la liste des sources de la ToolBox du navigateur.

+ +

Pour déboguer les scripts de contenu dans Firefox multiprocessus, vous devrez utiliser le contenu de la boite à outils du navigateur. Le contenu de la boite à outils du navigateur est tout comme la Toolbox de navigateur, sauf qu'elle attache les outils de développement au processus de contenu du navigateur, de sorte que les scripts de contenu sont visibles..

+ +

Notez que les scripts de contenu n'apparaîtront pas dans la liste des sources jusqu'à ce qu'ils soient chargés. Si vous avez besoin d'y accéder dès qu'ils se chargent, essayez d'ajouter un debuggueur ; instruction au début de votre script.

+ +
+

Note : vous n'avez besoin et ne pouvez accéder à la Browser Content Toolbox que si vous développez contre Firefox multiprocessus.

+
+ +
+

L'activation du débogage des travailleurs dans les Options de la boîte à outils désactivera le débogage de la boîte à outils du contenu du navigateur, le Bug 1236892 devrait régler ce problème..

+
+ +

{{EmbedYouTube("xAt3Q0PgJP4")}}

+ +

Débogage des fenêtres contextuelles

+ +
Nouveau dans Firefox 47
+ +

A partir de Firefox 47, vous pouvez utiliser la Browser Toolbox pour déboguer le contenu des popups. Il s'agit d'un processus en trois étapes :

+ + + +

{{EmbedYouTube("EEU4NeAS1s4")}}

+ +

Désactiver l'autohide

+ +

Le problème avec les panneaux de débogage en général est qu'ils sont cachés lorsque vous cliquez en dehors d'eux. La première étape consiste donc à désactiver ce comportement. Dans la boîte à outils du navigateur, cliquez sur l'icône qui ressemble à quatre petits carrés :

+ +

Maintenant, lorsque vous ouvrez un panneau dans Firefox, il restera ouvert jusqu'à ce que vous appuyiez sur Escape.

+ +
+

Notez que ce changement s'applique aux fenêtre contextuelles intégrés au navigateur, cpùùe le menu Hamburger (), ainsi qu'aux fenêtres contextuelles d'extension.

+ +

Notez également que le changement est persistant, même si le navigateur redémarre. Nous travaillons à résoudre ce problème dans le bug 1251658, mais d'ici là, vous préférerez peut-être réactiver la fonction Autohide en cliquant à nouveau sur le bouton avant de fermer la boîte à outils du navigateur.

+ +

En interne, ce bouton bascule juste la préférence  ui.popup.disable_autohide que vous pouvez basculer manuellement en utilisant using about:config.

+
+ +

Ouvrir la fenêtre contextuelle

+ +

Ensuite, ouvrez le popup. Vous pouvez ensuite revenir à la boîte à outils du navigateur, et le panneau restera ouvert.

+ +

Sélectionner le cadre de la fenêtre popup

+ +

Le popup est chargé dans son propre cadre. Ensuite, sélectionnez le document de votre popup à l'aide du bouton sélection de cadre boîte à outils du navigateur :Le document s'appellera quelque chose comme

+ +
moz-extension://<some-uuid>/path/to/your-popup.html
+ +

{{EmbedYouTube("/9jdHDCKIN-U")}}

+ +

Maintenant, le champ d'application de la boîte à outils est le popup. Dans l'Inspecteur, vous pouvez examiner et modifier le HTML et le CSS du popup. Dans le Debugger, vous pouvez rechercher tous les scripts chargés dans le popup et définir des points d'arrêt.

+ +

Qu'en est-il de l'Add-on Deboguer ?

+ +

Le deboguer des modules complémentaires est destiné à être l'évanir du débogage des add-on dans Firefox.

+ +

Son grand avantage par rapport à la Browser Toolbox est qu'il ne montre que les fichiers de votre extension, donc il est beaucoup plus facile de trouver votre code. Cependant, pour le moment, vous ne pouvez pas voir les messages de console de votre extension dans l'Add-on Debugger, donc la Browser Toolbox est plus fonctionnelle.

diff --git a/files/fr/mozilla/add-ons/webextensions/demander_les_bonnes_permissions/index.html b/files/fr/mozilla/add-ons/webextensions/demander_les_bonnes_permissions/index.html deleted file mode 100644 index e0c9a4ef04..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/demander_les_bonnes_permissions/index.html +++ /dev/null @@ -1,367 +0,0 @@ ---- -title: Demander les bonnes permissions -slug: Mozilla/Add-ons/WebExtensions/demander_les_bonnes_permissions -tags: - - Add-ons - - Comment - - Débutant - - Extensions - - Hox-to - - Intermédiaire - - Permissions - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/Request_the_right_permissions ---- -

{{AddonSidebar}}

- -

Ou comment éviter les permissions décourageant les utilisateurs d'installer vos extensions.

- -

Introduction

- -

Avec l'introduction de Firefox Quantum (57), la gestion des permissions lors de l'installation d'une extension a changé. Auparavant, les permissions étaient accordées silencieusement aux extensions. Cependant, les utilisateurs sont maintenant informés des permissions demandées par une extension lors de son installation, avec un message comme celui-ci:

- -

Example of the permissions messages from the Gesturefy extension

- -

En outre, si une mise à jour d'extension nécessite des permissions supplémentaires, l'utilisateur est invité à approuver les permissions avant l'installation de la version mise à jour :

- -

Example of the message displayed when an extension update requests additional permissions

- -

Si l'utilisateur choisit de ne pas approuver les permissions et annule la mise à jour, la version précédente reste installée et disponible.

- -

L'affichage des messages de permission améliore le modèle de sécurité de l'extension en sensibilisant les utilisateurs à l'impact potentiel de l'installation d'une extension. Il met également Firefox en ligne avec les autres principaux navigateurs, où les utilisateurs ont été informés des demandes de permission des extensions pour un certain temps.

- -

Étant donné que les utilisateurs de Firefox n'ont pas vu les demandes de permissions au cours de l'installation auparavant, cette modification pourrait décourager certains d'entre eux d'installer votre extension, car les messages pourraient suggérer qu'elle fait quelque chose d'effrayant. Nous fournissons aux utilisateurs avec une explication de ces messages de permissions et des conseils sur comment juger s'ils sont appropriés. Cependant, il y a plusieurs choses que vous pouvez faire pour réduire la probabilité que les utilisateurs abandonnent l'installation de votre extension à cause de ces messages :

- - - -

Conseil: Les avertissements d'autorisation ne sont pas émis lorsque vous chargez une extension décompressée. Pour plus d'informations sur l'affichage du flux d'autorisations d'exécution standard, voir Test de demandes de permission.

- -

Permissions conseillées

- -

Toutes les permissions ne donnent pas de conseils à l'utilisateur. Les permissions qui déclenchent l'affichage d'un message et les messages qu'ils déclenchent sont :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PermissionPermissions messages
-

Host permissions

- 		-

Accédez à vos données pour tous les sites Web
- Accédez à vos données pour les sites du domaine[named].
- Accédez à vos données dans # d'autres domaines
- Accédez à vos données pour[site nommé].
- Accédez à vos données sur # autres sites".

-
API permissions:
-
    -
  • bookmarks
    • -
- 		Lire et modifier les marques pages
-
    -
  • browserSettings
    • -
- 		Lire et modifier les paramètres du navigateur
-
    -
  • browsingData
    • -
- 		Effacer l'historique de navigation récent, les cookies et les données associées.
-
    -
  • downloads
    • -
- 		Télécharger des fichiers et lire et modifier l'historique des téléchargements du navigateur.
-
    -
  • downloads.open
    • -
- 		Ouvrir les fichiers téléchargés sur votre ordinateur
-
    -
  • find
    • -
- 		Lire le texte de tous les onglets ouverts
-
    -
  • geolocation
    • -
- 		Accédez à votre localisation
-
    -
  • history
    • -
- 		Historique de navigation
-
    -
  • management
    • -
- 		Surveiller l'utilisation des extensions et gérer les thèmes
-
    -
  • nativeMessaging
    • -
- 		Échanger des messages avec des programmes autres que Firefox
-
    -
  • notifications
    • -
- 		Afficher les notifications qui vous sont destinées
-
    -
  • pkcs11
    • -
- 		Fournir des services d'authentification cryptographique
-
    -
  • privacy
    • -
- 		Lire et modifier les paramètres de confidentialité
-
    -
  • proxy
    • -
- 		Contrôler les paramètres de proxy du navigateur
-
    -
  • sessions
    • -
- 		Accéder aux onglets récemment fermés
-
    -
  • tabs
    • -
- 		Onglets du navigateur d'accès
-
    -
  • topSites
    • -
- 		Historique de navigation
-
    -
  • webNavigation
    • -
- 		Accéder à l'activité du navigateur pendant la navigation
Clipboard access
-
    -
  • clipboardWrite
    • -
- 		Saisie des données dans le presse-papiers
-
    -
  • clipboardRead
    • -
- 		Obtenir les données du presse-papiers
unlimitedStorageStocker un nombre illimité de données côté client
The manifest key "devtools_page"Étendre les outils de développement pour accéder à vos données dans des onglets ouverts.
- -
- - -

Les permissions qui affichent les messages et les messages qu'ils affichent peuvent être différentes dans d'autres navigateurs. Pour plus d'informations sur l'affichage du message d'autorisation dans Chrome, voir Affichage des avertissements.

- - -
- -

Les permissions suivantes ne sont pas alertées aux utilisateurs :

- - - -

Évitez les permissions inutiles

- -

Cette section examine les situations dans lesquelles vous pourriez demander plus de permissions que vos besoins d'extension et ce que vous devez faire à leur sujet.

- -

Ne demandez que les permissions que votre extension utilise

- -

Cela peut sembler évident, mais si vous créez une extension en utilisant un exemple précédent en tant que modèle ou si vous supprimez une fonctionnalité au cours du développement ou du test, vous demandez peut-être des permissions dont votre extension n'a pas besoin. En adressant ceci est un cas de faire une vérification manuelle de votre code contre les permissions ("permissions" et "optional_permissions") que vous demandez dans le manifest.json de l'extension.

- -

Utilisez "activeTab" plutôt que "tabs" et permissions d'hôte

- -

Prenez une extension que vous développez pour aider les utilisateurs mal-voyants. À la demande de l'utilisateur, vous allez rechercher et mettre à jour CSS dans une page Web pour remplacer les couleurs que l'utilisateur peut avoir du mal à distinguer avec des couleurs sûres. Vous avez évidemment besoin d'accéder et de mettre à jour CSS sur chaque page que votre utilisateur visite. Vous pouvez le faire en demandant la permission "tabs" et la permission d'hôte "<all_urls>".

- -
"permissions": [
-  "<all_urls>",
-  "tabs"
-]
- -

Demander ces permissions, permet à l'utilisateur d'obtenir ce conseil :

- -

Example of the "Access your data for all websites" permission message

- -

L'alternative est de demander "activeTab". Cette permission fournit à votre extension les mêmes fonctionnalités mais uniquement pour l'onglet actif et uniquement lorsqu'elle est exécutée à partir de l'interface utilisateur de l'extension (depuis un bouton de barre d'outils, un bouton de barre de navigation, un menu contextuel ou une touche de raccourci).

- -

Fait important, "activeTab" n'entraîne pas l'affichage d'un message de permission lors de l'installation de l'extension.

- -

Evitez la permission d'hôte "<all_urls>" si vous pouvez

- -

Comme indiqué dans l'exemple précédent, demander la permission d'hôte "<all_urls>" entraîne le message de demande d'accès Access à vos données pour tous les sites Webs. Si votre extension est conçue pour fonctionner avec un ou plusieurs sites Web ou domaines, affinez la requête. Lors de l'installation, les utilisateurs recevront des informations sur les quatre premiers sites Web ou les domaines auxquels vous demandez l'accès.

- -

Example of the permissions message when host permission for four websites as requested

- -

Si vous demandez l'accès à plus de quatre sites Web ou domaines, le message liste les trois premiers et indique le nombre d'autres demandes.

- -

Example of the permissions message when hosts permission for 5 or more website is requested

- -

Evitez la permission "unlimitedStorage"

- -

Ne demandez la permission "unlimitedStorage" que si vous estimez que le stockage de données local de votre extension dépasse 5MB s'il ne dépasse pas ce montant, ne le demandez pas.

- -

Example of the permission message when requesting access to unlimited client-side data storage

- -

Remarque: Firefox ne limite pas actuellement la taille du stockage local, bien qu'il demande aux utilisateurs d'approuver cette demande de permission si vous le faites. Firefox peut ajouter une restriction à l'avenir. Si cela se produit, il est peu probable que la limite soit inférieure à la restriction actuelle de 5 Mo de Chrome.

- -

Demander les permissions à éxécuter

- -

Les utilisateurs peuvent ne pas comprendre le contexte des permissions demandées lors de l'installation. L'approche alternative consiste à demander les permissions au besoin, à l'aide de l'API permissions, et à fournir ainsi un contexte à l'utilisateur.

- -

Un scénario typique pour utiliser cette approche est la permission "geoLocation". Supposons que vous avez écrit une extension de prise de notes qui inclut la possibilité d'ajouter une mini-carte de l'emplacement des preneurs de notes. Demander l'accès à l'emplacement pendant l'installation peut laisser l'utilisateur incertain de la raison pour laquelle l'extension doit accéder à l'emplacement, de sorte qu'ils ne l'installeront peut-être pas. Toutefois, si la permission d'utiliser l'emplacement est demandée lorsque l'utilisateur tente d'abord d'ajouter une minicarte, il comprend mieux pourquoi la permission est nécessaire et a plus de chances de l'accorder. Et s'ils choisissent de ne pas accorder la permission, l'extension peut offrir un retour en arrière gracieux — dans cet exemple, sans ajouter la minicarte — mais le résultat important de cette approche est que l'utilisateur a installé et utilisé votre extension.

- -

Example of an additional or runtime permission request message

- -

Faire une demande de permission d'exécution est simple. Incluez les permissions que vous souhaitez demander sous la clé manifest.json "optional_permissions". Passez ensuite les autorisations que vous souhaitez accorder à {{WebExtAPIRef("permissions.request")}}, qui invite l'utilisateur à accorder les permissions. true est renvoyé si l'utilisateur accorde la requête, false si ce n'est pas le cas.

- -

Vous ne pouvez pas demander toutes les permissions disponibles aux "permissions" en utilisant des permissions facultatives. Vous ne pouvez pas demander les permissions d'API suivantes:

- - - -

Il y a un certain nombre de choses à noter :

- - - -

Pour plus d'informations sur les permissions facultatives, consultez optional_permissions et l'exemple permissions.

- -

Ajouter des informations sur les permissions à vos extensions page AMO

- -

Les messages de permissions sont plus susceptibles d'empêcher un utilisateur d'installer votre extension, car ils ne comprennent pas pourquoi les permissions sont demandées. Bien que l'utilisateur puisse obtenir des conseils généraux sur l'impact d'une permission, il peut ne pas être suffisant pour lui de comprendre pourquoi une permission est demandée dans votre extension.

- -

Pour résoudre ce problème, fournissez des informations dans la description AMO de votre extension qui explique les permissions demandées par votre extension et pourquoi.

- -

Un bon exemple de cette approche est Gesturefy, qui offre aux utilisateurs les conseils suivants :

- -

Extract from Gesturefy's AMO description providing information on thepermissions requested by this extension

diff --git a/files/fr/mozilla/add-ons/webextensions/demandes_de_permission/index.html b/files/fr/mozilla/add-ons/webextensions/demandes_de_permission/index.html deleted file mode 100644 index 815653592d..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/demandes_de_permission/index.html +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: Demandes de permission -slug: Mozilla/Add-ons/WebExtensions/demandes_de_permission -tags: - - Add-ons - - Extensions - - Guide - - Permissions - - Testing - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/Test_permission_requests ---- -

{{AddonSidebar}}

- -

Votre extension peut contenir deux types de demandes de permission : les demandes de temps d'installation et les demandes de permission d'exécution. Cette page explique comment vous pouvez tester la façon dont vos utilisateurs verront les demandes de ces permissions.

- -

Comportement de l'octroi de la permission pendant le test

- -

Lorsque vous testez avec une extension non compressée utilisant about:debugging ou web-ext et les permissions d'installation et d'exécution sont traitées comme suit :

- - - -

Observeer ou vérifier des demandes de permissions lors de l'installation

- -

Vous suivez différents processus selon que vous souhaitez observer les demandes de permissions associées à une installation ou à une mise à niveau.

- -

Demandes de permission pour l'installation d'extensions

- -

Pour afficher les avertissements de permission de temps d'installation que les utilisateurs voient lors de l'installation de votre extension et retester les demandes d'autorisation d'exécution, installez l'extension depuis son fichier *.xpi ou *.zip.

- -

Pour ce faire, vous devez utiliser un fichier *.xpi ou *.zip non signé :

- - - -

Installez ensuite l'extension à l'aide de l'option Installer Add-on à partir du fichier dans le gestionnaire de modules complémentaires (about:addons). Au fur et à mesure que l'extension s'installe, la demande d'octroi des permissions s'affiche lors de l'installation, comme ceci :

- -

Example of the doorhanger displayed when installing an extension through about:addons

- -

Notez que le message d'avertissement concerne une extension non signée ; ce message ne s'affiche pas pendant l'installation depuis addons.mozilla.org.

- -

Demande de permission  pour la mise à niveau de l'extension

- -
-

Pour plus de détails sur la façon de fournir des mises à jour d'extension Web lorsque vous hébergez vous-même votre extension, voir Mises à jour.

-
- -

Pour afficher les avertissements d'autorisation de temps d'installation que les utilisateurs voient lorsque votre extension est mise à niveau par Firefox et retester les demandes d'autorisation d'exécution, vous installez l'extension depuis son fichier.xpi posté sur un serveur HTTP ou HTTPS.

- -

Vous pouvez utiliser un serveur HTTP (tel qu'un simple serveur localhost python) ou un serveur HTTPS. Cependant, votre serveur HTTPS doit avoir un certificat vérifiable, que Firefox peut accepter automatiquement ; vous ne pouvez pas utiliser un certificat auto-signé. Si vous voulez tester à partir d'un serveur HTTPS mais n'en avez pas, les pages GitHub sont une option que vous pouvez utiliser.

- -

Pour effectuer le test, vous devrez :

- - - - - -
-

Si la mise à niveau n'a pas lieu, recherchez dans les logs addons.update-checker de la console du navigateur. Toute erreur rencontrée au cours du processus de mise à niveau sera signalée dans le journal de logs.

-
- -

Re-tester les permissions d'éxécution octroyées

- -

Pour tester à nouveau les permissions d'exécution de votre extension et son comportement post-installation, vous avez deux choix :

- - - -

Vous pouvez ensuite réexécuter l'extension et toutes les demandes de permissions d'exécution seront affichées comme si l'extension était exécutée pour la première fois.

diff --git a/files/fr/mozilla/add-ons/webextensions/differences_between_api_implementations/index.html b/files/fr/mozilla/add-ons/webextensions/differences_between_api_implementations/index.html new file mode 100644 index 0000000000..60656f891e --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/differences_between_api_implementations/index.html @@ -0,0 +1,77 @@ +--- +title: Différences entre les implémentations d'API +slug: Mozilla/Add-ons/WebExtensions/Differences_entre_les_implementations_api +tags: + - Guide + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Differences_between_API_implementations +--- +
{{AddonSidebar}}
+ +

L'API d'extension de navigateur est encore un standard emergent. Par conséquent, bien qu'il soit pris en charge par la plupart des principaux navigateurs, dont Firefox, Chrome, Edge et Opera, il existe des différences entre les différentes implémentations. Cela signifie que certaines modifications peuvent être nécessaires pour implémenter votre extension pour plusieurs navigateurs

+ +

Parmi les différents navigateurs supportant l'API d'extension, Firefox est le plus conforme à la norme émergente, et est donc votre meilleur point de départ pour développer des extensions de navigateur.

+ +

Les différences entre les implémentations d'API d'extensions de navigateurs se répartissent en quatre domaines : l'espace de noms, la gestion asynchrone des événements, la couverture API et les clés de manifest.

+ +

Espace de nommage

+ +

Vous faites référence à toutes les fonctions de l'API des extensions en utilisant un espace de noms, par exemple, browser.alarms.create({delayInMinutes}); créerait une alarme dans Firefox qui se déclenche après le temps spécifié dans delayInMinutes.

+ +

Deux espaces de noms API sont utilisés :

+ + + +

Traitement asynchrone des événements

+ +

JavaScript fournit plusieurs façons de gérer les événements asynchrones. La norme API d'extensions proposée est d'utiliser des promises. L'approche des promises offre des avantages significatifs lorsqu'il s'agit d'appels d'événements asynchrones en chaîne

+ +

Si vous n'êtes pas familier avec la façon dont JavaScript peut gérer les événements asynchrones ou les promesses, jetez un coup d'oeil sur Apprendre à connaître Javascript Asynchrone : Callbacks, Promises et Async/Await ou la page des promises d'utilisation de MDN.

+ +

Firefox est le seul navigateur majeur à avoir implémenté des promises pour les extensions API. Tous les autres navigateurs utilisent des callbacks.

+ +

Couverture API

+ +

Les différences dans l'implémentation des fonctions de l'API d'extension entre les navigateurs se répartissent en trois grandes catégories :

+ + + +

Touches Manifest

+ +

Les différences entre les clés clés manifest.json prises en charge par les navigateurs se répartissent en deux grandes catégories :

+ + + +

Plus d'information

+ +

Vous trouverez des informations plus détaillées sur les différences entre les extensions de navigateur prises en charge par les fonctionnalités API dans le domaine :

+ + diff --git a/files/fr/mozilla/add-ons/webextensions/differences_entre_les_implementations_api/index.html b/files/fr/mozilla/add-ons/webextensions/differences_entre_les_implementations_api/index.html deleted file mode 100644 index 60656f891e..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/differences_entre_les_implementations_api/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: Différences entre les implémentations d'API -slug: Mozilla/Add-ons/WebExtensions/Differences_entre_les_implementations_api -tags: - - Guide - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/Differences_between_API_implementations ---- -
{{AddonSidebar}}
- -

L'API d'extension de navigateur est encore un standard emergent. Par conséquent, bien qu'il soit pris en charge par la plupart des principaux navigateurs, dont Firefox, Chrome, Edge et Opera, il existe des différences entre les différentes implémentations. Cela signifie que certaines modifications peuvent être nécessaires pour implémenter votre extension pour plusieurs navigateurs

- -

Parmi les différents navigateurs supportant l'API d'extension, Firefox est le plus conforme à la norme émergente, et est donc votre meilleur point de départ pour développer des extensions de navigateur.

- -

Les différences entre les implémentations d'API d'extensions de navigateurs se répartissent en quatre domaines : l'espace de noms, la gestion asynchrone des événements, la couverture API et les clés de manifest.

- -

Espace de nommage

- -

Vous faites référence à toutes les fonctions de l'API des extensions en utilisant un espace de noms, par exemple, browser.alarms.create({delayInMinutes}); créerait une alarme dans Firefox qui se déclenche après le temps spécifié dans delayInMinutes.

- -

Deux espaces de noms API sont utilisés :

- - - -

Traitement asynchrone des événements

- -

JavaScript fournit plusieurs façons de gérer les événements asynchrones. La norme API d'extensions proposée est d'utiliser des promises. L'approche des promises offre des avantages significatifs lorsqu'il s'agit d'appels d'événements asynchrones en chaîne

- -

Si vous n'êtes pas familier avec la façon dont JavaScript peut gérer les événements asynchrones ou les promesses, jetez un coup d'oeil sur Apprendre à connaître Javascript Asynchrone : Callbacks, Promises et Async/Await ou la page des promises d'utilisation de MDN.

- -

Firefox est le seul navigateur majeur à avoir implémenté des promises pour les extensions API. Tous les autres navigateurs utilisent des callbacks.

- -

Couverture API

- -

Les différences dans l'implémentation des fonctions de l'API d'extension entre les navigateurs se répartissent en trois grandes catégories :

- - - -

Touches Manifest

- -

Les différences entre les clés clés manifest.json prises en charge par les navigateurs se répartissent en deux grandes catégories :

- - - -

Plus d'information

- -

Vous trouverez des informations plus détaillées sur les différences entre les extensions de navigateur prises en charge par les fonctionnalités API dans le domaine :

- - diff --git a/files/fr/mozilla/add-ons/webextensions/examples/index.html b/files/fr/mozilla/add-ons/webextensions/examples/index.html new file mode 100644 index 0000000000..7a96c1adae --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/examples/index.html @@ -0,0 +1,33 @@ +--- +title: Exemples de WebExtensions +slug: Mozilla/Add-ons/WebExtensions/Exemples +tags: + - Interface + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Examples +--- +
{{AddonSidebar}}
+ +

Pour illustrer la manière d'utiliser les API WebExtension, nous disposons d'un répertoire d'exemples d'extensions sur le site https://github.com/mdn/webextensions-examples. Cet article décrit comment exécuter ces exemples et énumère les exemples ainsi que les API WebExtension qu'ils illustrent.

+ +

Ces exemples fonctionnent dans Firefox Nightly : la plupart travaillent dans les versions antérieures de Firefox, mais vérifiez la version minimum strict_min_version dans le fichier manifest.json de l'extension pour en être sur.

+ +
+

Certains exemples ne fonctionnent que sur des domaines ou des pages spécifiques. Les détails des restrictions éventuelles sont fournis dans le fichier "readme" de chaque exemple. Aucun des exemples ne fonctionne par défaut dans les fenêtres de navigation privée, voir Extensions dans la navigation privée pour plus de détails.

+
+ +

Pour essayer ces exemples, clonez ensuite le dépôt :

+ +
    +
  1. Charger l'extension à partir de son dossier source en utilisant la fonction Charger temporairement l'extension. L'extension reste chargée jusqu'à ce que vous redémarriez Firefox.
    2. +
  2. Couvrir le dossier source de l'extension en ligne de commande et utiliser le  web-ext pour exécuter l'extension. L'extension reste chargée jusqu'à ce que vous redémarriez Firefox.
    3. +
  3. Dans Firefox utilisez File > Open File et trouvez l'exemple dans le dossier de  build. Le dossier build contient les versions construites et signées de tous les exemples. L'exemple est ainsi installé de façon permanente.
    4. +
+ +
+

Important: Veuillez ne pas soumettre ces exemples de WebExtension à AMO (addons.mozilla.org), vous n'avez pas besoin de signer l'add-on pour exécuter les exemples de WebExtension. Il suffit de suivre les étapes ci-dessus.

+
+ +

Si vous souhaitez contribuer au dépôt, envoyez-nous une demande

+ +

{{WebExtAllExamples}}

diff --git a/files/fr/mozilla/add-ons/webextensions/exemples/index.html b/files/fr/mozilla/add-ons/webextensions/exemples/index.html deleted file mode 100644 index 7a96c1adae..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/exemples/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: Exemples de WebExtensions -slug: Mozilla/Add-ons/WebExtensions/Exemples -tags: - - Interface - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/Examples ---- -
{{AddonSidebar}}
- -

Pour illustrer la manière d'utiliser les API WebExtension, nous disposons d'un répertoire d'exemples d'extensions sur le site https://github.com/mdn/webextensions-examples. Cet article décrit comment exécuter ces exemples et énumère les exemples ainsi que les API WebExtension qu'ils illustrent.

- -

Ces exemples fonctionnent dans Firefox Nightly : la plupart travaillent dans les versions antérieures de Firefox, mais vérifiez la version minimum strict_min_version dans le fichier manifest.json de l'extension pour en être sur.

- -
-

Certains exemples ne fonctionnent que sur des domaines ou des pages spécifiques. Les détails des restrictions éventuelles sont fournis dans le fichier "readme" de chaque exemple. Aucun des exemples ne fonctionne par défaut dans les fenêtres de navigation privée, voir Extensions dans la navigation privée pour plus de détails.

-
- -

Pour essayer ces exemples, clonez ensuite le dépôt :

- -
    -
  1. Charger l'extension à partir de son dossier source en utilisant la fonction Charger temporairement l'extension. L'extension reste chargée jusqu'à ce que vous redémarriez Firefox.
    2. -
  2. Couvrir le dossier source de l'extension en ligne de commande et utiliser le  web-ext pour exécuter l'extension. L'extension reste chargée jusqu'à ce que vous redémarriez Firefox.
    3. -
  3. Dans Firefox utilisez File > Open File et trouvez l'exemple dans le dossier de  build. Le dossier build contient les versions construites et signées de tous les exemples. L'exemple est ainsi installé de façon permanente.
    4. -
- -
-

Important: Veuillez ne pas soumettre ces exemples de WebExtension à AMO (addons.mozilla.org), vous n'avez pas besoin de signer l'add-on pour exécuter les exemples de WebExtension. Il suffit de suivre les étapes ci-dessus.

-
- -

Si vous souhaitez contribuer au dépôt, envoyez-nous une demande

- -

{{WebExtAllExamples}}

diff --git a/files/fr/mozilla/add-ons/webextensions/experience_utilisateur_bonnes_pratiques/index.html b/files/fr/mozilla/add-ons/webextensions/experience_utilisateur_bonnes_pratiques/index.html deleted file mode 100644 index bab0b4a22a..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/experience_utilisateur_bonnes_pratiques/index.html +++ /dev/null @@ -1,190 +0,0 @@ ---- -title: Expérience utilisateur bonnes pratiques -slug: Mozilla/Add-ons/WebExtensions/Experience_utilisateur_bonnes_pratiques -tags: - - Add-ons - - Extensions - - Guide - - UI - - UX -translation_of: Mozilla/Add-ons/WebExtensions/User_experience_best_practices ---- -
{{AddonSidebar()}}
- -

Vous voudrez vous assurer que vos utilisateurs ont une excellente expérience en utilisant votre extension—quand vous le ferez, les bonnes critiques et évaluations suivront sur addons.mozilla.org (AMO).

- -

Si vous êtes nouveau sur le sujet de rendre un logiciel utilisable. un bon point de départ pour démarrer est l'Heuristique d'usabilité de Jakob Nielsen. Nous vous recommandons, que vous soyez nouveau pour le développement d'extension ou pour un professionnel expérimenté, en utilisant les Heuristiques de Nielsen comme une liste de contrôle du test de votre expérience utilisateur (UX).

- -

Nous présentons ici les six étapes à suivre pour créer des fonctionnalités Firefox et UX spécifiques afin que vous puissiez créer une extension qui séduise, informe, enchante et fidélise vos utilisateurs.

- -

En plus des étapes décrites ici, votre extension doit suivre les règles d'Add-on Policies, qui incluent la transparence avec les utilisateurs sur la sécurité, la confidentialité et le contrôle de l'utilisateur.

- -

1. Gardez le cap

- -

Les meilleures extensions Firefox offrent aux utilisateurs une nouvelle fonctionnalité ou capacité qui répond à un besoin, qu'il soit plus intelligent, plus efficace ou plus agréable de navigation. Idéalement, votre extension permet à l'utilisateur d'économiser du temps, de l'argent ou de la frustration.

- -

Une extension est meilleure lorsqu'elle est centrée autour d'un cas d'utilisation principal et qu'elle s'adresse à ce cas d'utilisation aussi bien que possible pour le public cible :

- - - -

2. Donner aux utilisateurs ce dont ils ont besoin, là où ils en ont besoin

- -

Choisir la bonne façon, ou la combinaison de plusieurs façons, de rendre la fonctionnalité de votre extension disponible pour l'utilisateur peut avoir un effet significatif sur la convivialité. Poser quelques questions simples sur les fonctionnalités de votre poste peut vous guider rapidement vers les bons choix :

- -

Est-ce que mon extension fonctionne sur la plupart des sites et pages web ?

- -

Si votre extension fournit à l'utilisateur des fonctionnalités qu'il peut utiliser sur presque tous les sites Web ou pages, donnez-lui accès à partir d'un bouton de la barre d'outils en utilisant l'action du navigateur.

- - - -

- -

Lorsque vous voulez donner l'accès à l'utilisateur à plusieurs fonctions, vous pouvez ajouter  popup au bouton (un popup apparaît comme un crochet de porte qui s'ouvre lorsque l'utilisateur sélectionne le bouton d'action du navigateur).

- -

Est-ce que mon extension ne fonctionne que pour certains sites et pages web ?

- -

 

- -

Si votre extension fournit à l'utilisateur des fonctionnalités qu'il peut utiliser sur presque tous les sites Web ou pages, donnez-lui accès à partir d'un bouton de la barre d'outils en utilisant l'action du navigateur.

- - - -

 

- -

- -

Lorsque vous souhaitez donner accès à plusieurs fonctions à l'utilisateur, vous pouvez ajouter une fenêtre contextuelle au bouton.

- -

Mon extension doit-elle afficher des informations ou proposer des actions en parallèle avec des pages web ?

- -

Si votre extension contient des informations ou des actions auxquelles un utilisateur souhaite accéder immédiatement lorsqu'il consulte une page Web, utilisez une barre latérale.

- - - -

- -

Mon extension offre-t-elle des fonctionnalités spécifiques au contenu de la page ou à d'autres fonctions du navigateur ?

- -

Si votre extension offre des fonctionnalités auxquelles l'utilisateur peut vouloir accéder en contexte, ajoutez-les à un menu contextuel approprié.

- - - -

Example of content menu items added by a WebExtension, from the context-menu-demo example

- -

Est-ce que mon poste possède des paramètres que l'utilisateur peut régler ?

- -

Si votre extension permet à l'utilisateur de modifier et d'enregistrer les paramètres qui affectent le comportement de l'extension, utilisez une page d'options pour fournir un lien Préférences standard vers les paramètres du gestionnaire des extensions

- -

Typical preferences button, to access an extension's settings, from the Add-on Manager

- -
-

Dans le système d'exploitation Windows, le bouton "Préférences" est appelé "Options".

-
- -

Est-ce que mon extension a besoin de collecter beaucoup d'informations ou d'afficher du contenu en plus des onglets actuels ?

- -

Lorsque votre extension a besoin de rassembler ou d'afficher des quantités importantes d'informations (plus qu'il n'est nécessaire pour une alerte ou qu'un formatage supplémentaire serait avantageux) utilisez pages webs groupées pour fournir des formulaires et un contenu similaire.

- -

Example of a simple bundled page displayed as a detached panel.

- -

Est-ce que mon extension essaie d'aider l'utilisateur à trouver des pages web ou du contenu ?

- -

Si votre extension inclut une fonctionnalité permettant de localiser des pages Web ou du contenu, par exemple en proposant une recherche spécifique à un site, utilisez les suggessions de la barre d'adresse pour fournir ces recommandations.

- -

Example showing the result of the firefox_code_search WebExtension's customization of the address bar suggestions.

- -

Mon extension offre-t-elle des outils pour les développeurs ?

- -

Si vous fournissez des outils pour les développeurs, ajoutez-les aux outils de développement Firefox en utilisant les panneaux des outils de développement.

- -

3. Tenir l'utilisateur informé

- -

S'assurer que l'utilisateur sait ce qui va se passer, ce qui se passe et ce qui s'est passé dans votre extension est un élément essentiel pour établir la confiance et assurer un utilisateur heureux.

- -

Dites à l'utilisateur ce qui va se passer, avant qu'il ne se produise.

- -

Les utilisateurs doivent comprendre ce qui se passe lorsqu'ils cliquent sur un bouton :

- - - -

Si quelque chose est vraiment important et que l'utilisateur n'en est pas conscient, informez-le.

- -

Si votre extension a terminé une tâche d'arrière-plan critique et de longue durée, utilisez les  notifications natives du système d'exploitation pour mettre à jour l'utilisateur lorsque la tâche est terminée. Ceci peut être utile lorsque l'utilisateur ne se concentre pas sur l'extension ou le navigateur, une fois la tâche terminée.

- -

Toutefois, utilisez les avis avec parcimonie. S'il suffit que l'utilisateur découvre qu'un processus est terminé lorsqu'il revient au navigateur ou à l'extension, n'utilisez pas de notifications.

- -

- -

Utiliser les badges browserAction avec parcimonie

- -

Pour informer les utilisateurs des événements importants, vous pouvez ajouter un badge au dessus de l'icône de la barre browserAction. Faites-le avec parcimonie - n'utilisez pas de badges pour fournir des mises à jour régulières ou persistantes de l'état.

- -

Lorsqu'il s'agit de coloriser un badge, il est recommandé d'utiliser l'une des quatre couleurs pour les notifications de gravité différente :

- - - -
-

L'utilisation des couleurs Firefox est suggérée, pour plus de détails voir Firefox Colors. Cependant, pour des raisons de compatibilité avec Chrome et Opera, nous prenons en charge toutes les couleurs que vous souhaitez utiliser.

-
- -

4. Soyez Firefoxy dans l'apparence et la convivialité

- -

Vos utilisateurs ont choisi Firefox pour une raison, peut-être pour plusieurs raisons, alors faites correspondre l'apparence de votre extension à celle de Firefox en utilisant le Firefox Photon Design System.

- -

En suivant Photon, vous vous assurerez que votre extension s'intègre à l'expérience Firefox et la rendra plus facile à utiliser pour les utilisateurs.

- -

5. Grande expérience d'intégration

- -

Les premières minutes après l'installation de votre extension peuvent être cruciales pour son succès. Votre nouvel utilisateur doit savoir par où commencer et comment utiliser les fonctions de l'extension de votre navigateur.

- -

Fournir une page d'accueil qui donne aux utilisateurs les informations essentielles dont ils ont besoin pour commencer. Rédigez des informations brèves et précises et proposez des options de configuration simples, le cas échéant. Pour plus d'informations sur la création d'une page d'embarquement, voir Bonnes pratiques pour les utilisateurs d'embarquement, d'embarquement, et de débarquement.

- -

Si l'utilisateur saute la page d'embarquement, assurez-vous que votre poste est prêt à être utilisé immédiatement après l'installation. Il devrait être optimisé pour son cas d'utilisation principal et fonctionner comme prévu pour la plupart des utilisateurs sans avoir besoin de personnalisation.

- -

6. Testez, testez, puis testez à nouveau

- -

Le test est une partie essentielle de la création d'un UX exceptionnel pour votre extension. Il y a deux aspects clés du test de votre UX:

- -
    -
  1. Effectuez des tests sur plusieurs appareils et plates-formes pour vous assurer que votre extension fonctionne et qu'elle fonctionne correctement dans le plus grand nombre d'endroits possible. Cela inclut la prise en compte de facteurs tels que la taille de l'écran et la résolution de l'utilisateur —simplement parce que votre extension est bonne et facile à utiliser sur votre écran de bureau ne signifie pas qu'elle fonctionne aussi bien sur un écran d'ordinateur portable, ou, effectivement, vice et versa.
    2. -
  2. Testez avec autant d'utilisateurs que possible. Ne supposez pas que vous connaissez votre auditoire, car les antécédents et l'expérience des gens peuvent faire une énorme différence dans la façon dont ils interagissent avec votre extension. Ainsi, permettre les tests utilisateur dans le cadre du développement de votre extension.
    3. -
- -

Conseils de test :

- - - -

Créer une grande extension est un processus itératif. Bien que nous ayons décrit les six étapes ici, vous y reviendrez probablement au fur et à mesure que vous apprendrez ce qui fonctionne et ce qui ne fonctionne pas grâce aux commentaires des utilisateurs, aux tests et au temps.

diff --git a/files/fr/mozilla/add-ons/webextensions/extending_the_developer_tools/index.html b/files/fr/mozilla/add-ons/webextensions/extending_the_developer_tools/index.html new file mode 100644 index 0000000000..8b5695b9e3 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/extending_the_developer_tools/index.html @@ -0,0 +1,166 @@ +--- +title: Extension des outils de développement +slug: Mozilla/Add-ons/WebExtensions/extension_des_outils_de_developpement +tags: + - Add-ons + - DevTools + - Extensions + - Guide + - Needs Privileges + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools +--- +
{{AddonSidebar}}
+ +
+

Cette page décrit les API  de devtools telles qu'elles existent dans Firefox 55. Bien que les API soient basées sur les  API devtools de chrome, il existe encore de nombreuses fonctionnalités qui ne sont pas encore implémentées dans Firefox et ne sont donc pas documentées ici. Pour voir quelles fonctionnalités sont actuellement manquantes, voir les Limitations des APIs devtools.

+
+ +

Vous pouvez utiliser les API WebExtensions pour étendre les outils de développement intégrés du navigateur. Pour créer une extension devtools, incluez la clé "devtools_page" dans manifest.json:

+ +
"devtools_page": "devtools/devtools-page.html"
+ +

La valeur de cette clé est une URL indiquant un fichier HTML qui a été regroupé avec votre extension. L'URL doit être relative au fichier manifest.json lui-même.

+ +

Le fichier HTML définit une page spéciale dans l'extension, appelée la page devtools.

+ +

La page devtools

+ +

La page Devtools est chargée lorsque les devtools du navigateur sont ouverts et déchargés lorsqu'ils sont fermés. Notez que, parce que la fenêtre devtools est associée avec un seul onglet, il est possible que plus d'une fenêtre devtools - donc plus d'une page devtools - existe en même temps.

+ +

La page devtools n'a pas de DOM visible, mais peut inclure des sources JavaScript en utilisant les balises <script>. Les sources doivent être regroupées avec l'extension. Les sources ont accès à :

+ + + +

Notez que la page devtools n'accède à aucune autre API WebExtension, et que la page d'arrière-plan n'a pas accès aux API devtools. Au lieu de cela, la page devtools et la page d'arrière-plan doivent communiquer à l'aide des API messageries d'éxécution. Voici un exemple :

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+  </head>
+  <body>
+    <script src="devtools.js"></script>
+  </body>
+</html>
+ +

Le fichier devtools.js contiendra le code réel créant vos extensions d'outils de développement.

+ +

Creations de panneaux

+ +

La fenêtre devtools héberge un certain nombre d'outils distincts: le débogueur JavaScript, le moniteur réseau, etc. Une rangée d'onglets sur le haut permet à l'utilisateur de basculer entre les différents outils. La fenêtre hébergeant l'interface utilisateur de chaque outil s'appelle un "panneau".

+ +

A l'aide de l'API devtools.panel.create(), vous pouvez créer votre propre panneau dans la fenêtre devtools :

+ +
browser.devtools.panels.create(
+  "My Panel",                      // title
+  "icons/star.png",                // icon
+  "devtools/panel/panel.html"      // content
+).then((newPanel) => {
+  newPanel.onShown.addListener(initialisePanel);
+  newPanel.onHidden.addListener(unInitialisePanel);
+});
+ +

Cela nécessite trois arguments obligatoires: le titre, l'icône et le contenu du panneau. Il renvoie une promesse qui résout un objet devtools.panels.ExtensionPanel représentant le nouveau panneau.

+ +

Interaction avec la fenêtre cible

+ +

Les outils de développement sont toujours attachés à un onglet de navigateur particulier. Ceci est appelé "target" pour les outils de développement, ou la "fenêtre inspectée". Vous pouvez interagir avec la fenêtre inspectée en utilisant l'API  devtools.inspectedWindow.

+ +

Code d'exécution dans la fenêtre cible

+ +

la fonction devtools.inspectedWindow.eval() fournit une façon d'exécuter le code dans la fenêtre inspectée.

+ +

C'est un peu comme utiliser {{WebExtAPIRef("tabs.executeScript()")}}  pour injecter un script de contenu, mais avec une différence importante :

+ + + +
+

Notez qu'une vue propre du DOM est une fonction de sécurité destinée à empêcher les pages hostiles de tromper WebExtensions en redéfinissant le comportement des fonctions DOM natives. Cela signifie que vous devez être très prudent en utilisant eval () et utiliser un script de contenu normal si vous le pouvez.

+
+ +

Les scripts chargés à l'aide de devtools.inspectedWindow.eval() ne voient pas non plus de variables JavaScript définies par les scripts de contenu.

+ +

Travailler avec les scripts de contenus

+ +

Un document devtools n'a pas d'accès direct à  {{WebExtAPIRef("tabs.executeScript()")}}, donc, si vous devez injecter un script de contenu, le document devtools doit envoyer un message au script en arrière-plan en lui demandant d'injecter le script. La fonction devtools.inspectedWindow.tabId  fournit l'ID de l'onglet cible: le document devtools peut passer le script en arrière-plan, et le script de fond peut à son tour passer dans {{WebExtAPIRef("tabs.executeScript()")}}:

+ +
// devtools-panel.js
+
+const scriptToAttach = "document.body.innerHTML = 'Hi from the devtools';";
+
+window.addEventListener("click", () => {
+  browser.runtime.sendMessage({
+    tabId: browser.devtools.inspectedWindow.tabId,
+    script: scriptToAttach
+  });
+});
+ +
// background.js
+
+function handleMessage(request, sender, sendResponse) {
+  browser.tabs.executeScript(request.tabId, {
+    code: request.script
+  });
+}
+
+browser.runtime.onMessage.addListener(handleMessage);
+ +

Si vous avez besoin d'échanger des messages entre les scripts de contenu exécutés dans la fenêtre cible et un document de developpement, il est judicieux d'utiliser {{WebExtAPIRef("runtime.connect()")}} et {{WebExtAPIRef("runtime.onConnect")}} pour configurer une connexion entre la page d'arrière-plan et le document devtools. La page d'arrière-plan peut alors maintenir un mappage entre les ID de l'onglet et les objets {{WebExtAPIRef("runtime.Port")}}, et utilisez-le pour acheminer les messages entre les deux champs.

+ +

+ +

Limitations des API des devtools

+ +

Ces API sont basées sur les API devtools de Chrome, mais de nombreuses fonctionnalités sont encore manquantes par rapport à Chrome. Cette section répertorie les fonctionnalités qui ne sont pas encore implémentées, à partir de Firefox 54. Notez que les API de devtools sont en cours de développement et nous espérons ajouter de l'aide pour la plupart d'entre elles dans les versions ultérieures.

+ +

devtools.inspectedWindow

+ +

Les éléments suivants ne sont pas pris en charge :

+ + + +

Aucune des options à inspectedWindow.eval() n'est prise en charge.

+ +

Les scripts injectés à l'aide de inspectedWindow.eval() ne peuvent pas utiliser toutes les fonctions d'assistance en ligne de commande de la console, mais $0 et inspect(...) sont tous deux pris en charge (à partir de Firefox 55).

+ +

devtools.panels

+ +

Les éléments suivants ne sont pas pris en charge :

+ + + +

Examples

+ +

The webextensions-examples repo on GitHub contains several examples of WebExtensions that use devtools panels:

+ + diff --git a/files/fr/mozilla/add-ons/webextensions/extension_des_outils_de_developpement/index.html b/files/fr/mozilla/add-ons/webextensions/extension_des_outils_de_developpement/index.html deleted file mode 100644 index 8b5695b9e3..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/extension_des_outils_de_developpement/index.html +++ /dev/null @@ -1,166 +0,0 @@ ---- -title: Extension des outils de développement -slug: Mozilla/Add-ons/WebExtensions/extension_des_outils_de_developpement -tags: - - Add-ons - - DevTools - - Extensions - - Guide - - Needs Privileges - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools ---- -
{{AddonSidebar}}
- -
-

Cette page décrit les API  de devtools telles qu'elles existent dans Firefox 55. Bien que les API soient basées sur les  API devtools de chrome, il existe encore de nombreuses fonctionnalités qui ne sont pas encore implémentées dans Firefox et ne sont donc pas documentées ici. Pour voir quelles fonctionnalités sont actuellement manquantes, voir les Limitations des APIs devtools.

-
- -

Vous pouvez utiliser les API WebExtensions pour étendre les outils de développement intégrés du navigateur. Pour créer une extension devtools, incluez la clé "devtools_page" dans manifest.json:

- -
"devtools_page": "devtools/devtools-page.html"
- -

La valeur de cette clé est une URL indiquant un fichier HTML qui a été regroupé avec votre extension. L'URL doit être relative au fichier manifest.json lui-même.

- -

Le fichier HTML définit une page spéciale dans l'extension, appelée la page devtools.

- -

La page devtools

- -

La page Devtools est chargée lorsque les devtools du navigateur sont ouverts et déchargés lorsqu'ils sont fermés. Notez que, parce que la fenêtre devtools est associée avec un seul onglet, il est possible que plus d'une fenêtre devtools - donc plus d'une page devtools - existe en même temps.

- -

La page devtools n'a pas de DOM visible, mais peut inclure des sources JavaScript en utilisant les balises <script>. Les sources doivent être regroupées avec l'extension. Les sources ont accès à :

- - - -

Notez que la page devtools n'accède à aucune autre API WebExtension, et que la page d'arrière-plan n'a pas accès aux API devtools. Au lieu de cela, la page devtools et la page d'arrière-plan doivent communiquer à l'aide des API messageries d'éxécution. Voici un exemple :

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-  </head>
-  <body>
-    <script src="devtools.js"></script>
-  </body>
-</html>
- -

Le fichier devtools.js contiendra le code réel créant vos extensions d'outils de développement.

- -

Creations de panneaux

- -

La fenêtre devtools héberge un certain nombre d'outils distincts: le débogueur JavaScript, le moniteur réseau, etc. Une rangée d'onglets sur le haut permet à l'utilisateur de basculer entre les différents outils. La fenêtre hébergeant l'interface utilisateur de chaque outil s'appelle un "panneau".

- -

A l'aide de l'API devtools.panel.create(), vous pouvez créer votre propre panneau dans la fenêtre devtools :

- -
browser.devtools.panels.create(
-  "My Panel",                      // title
-  "icons/star.png",                // icon
-  "devtools/panel/panel.html"      // content
-).then((newPanel) => {
-  newPanel.onShown.addListener(initialisePanel);
-  newPanel.onHidden.addListener(unInitialisePanel);
-});
- -

Cela nécessite trois arguments obligatoires: le titre, l'icône et le contenu du panneau. Il renvoie une promesse qui résout un objet devtools.panels.ExtensionPanel représentant le nouveau panneau.

- -

Interaction avec la fenêtre cible

- -

Les outils de développement sont toujours attachés à un onglet de navigateur particulier. Ceci est appelé "target" pour les outils de développement, ou la "fenêtre inspectée". Vous pouvez interagir avec la fenêtre inspectée en utilisant l'API  devtools.inspectedWindow.

- -

Code d'exécution dans la fenêtre cible

- -

la fonction devtools.inspectedWindow.eval() fournit une façon d'exécuter le code dans la fenêtre inspectée.

- -

C'est un peu comme utiliser {{WebExtAPIRef("tabs.executeScript()")}}  pour injecter un script de contenu, mais avec une différence importante :

- - - -
-

Notez qu'une vue propre du DOM est une fonction de sécurité destinée à empêcher les pages hostiles de tromper WebExtensions en redéfinissant le comportement des fonctions DOM natives. Cela signifie que vous devez être très prudent en utilisant eval () et utiliser un script de contenu normal si vous le pouvez.

-
- -

Les scripts chargés à l'aide de devtools.inspectedWindow.eval() ne voient pas non plus de variables JavaScript définies par les scripts de contenu.

- -

Travailler avec les scripts de contenus

- -

Un document devtools n'a pas d'accès direct à  {{WebExtAPIRef("tabs.executeScript()")}}, donc, si vous devez injecter un script de contenu, le document devtools doit envoyer un message au script en arrière-plan en lui demandant d'injecter le script. La fonction devtools.inspectedWindow.tabId  fournit l'ID de l'onglet cible: le document devtools peut passer le script en arrière-plan, et le script de fond peut à son tour passer dans {{WebExtAPIRef("tabs.executeScript()")}}:

- -
// devtools-panel.js
-
-const scriptToAttach = "document.body.innerHTML = 'Hi from the devtools';";
-
-window.addEventListener("click", () => {
-  browser.runtime.sendMessage({
-    tabId: browser.devtools.inspectedWindow.tabId,
-    script: scriptToAttach
-  });
-});
- -
// background.js
-
-function handleMessage(request, sender, sendResponse) {
-  browser.tabs.executeScript(request.tabId, {
-    code: request.script
-  });
-}
-
-browser.runtime.onMessage.addListener(handleMessage);
- -

Si vous avez besoin d'échanger des messages entre les scripts de contenu exécutés dans la fenêtre cible et un document de developpement, il est judicieux d'utiliser {{WebExtAPIRef("runtime.connect()")}} et {{WebExtAPIRef("runtime.onConnect")}} pour configurer une connexion entre la page d'arrière-plan et le document devtools. La page d'arrière-plan peut alors maintenir un mappage entre les ID de l'onglet et les objets {{WebExtAPIRef("runtime.Port")}}, et utilisez-le pour acheminer les messages entre les deux champs.

- -

- -

Limitations des API des devtools

- -

Ces API sont basées sur les API devtools de Chrome, mais de nombreuses fonctionnalités sont encore manquantes par rapport à Chrome. Cette section répertorie les fonctionnalités qui ne sont pas encore implémentées, à partir de Firefox 54. Notez que les API de devtools sont en cours de développement et nous espérons ajouter de l'aide pour la plupart d'entre elles dans les versions ultérieures.

- -

devtools.inspectedWindow

- -

Les éléments suivants ne sont pas pris en charge :

- - - -

Aucune des options à inspectedWindow.eval() n'est prise en charge.

- -

Les scripts injectés à l'aide de inspectedWindow.eval() ne peuvent pas utiliser toutes les fonctions d'assistance en ligne de commande de la console, mais $0 et inspect(...) sont tous deux pris en charge (à partir de Firefox 55).

- -

devtools.panels

- -

Les éléments suivants ne sont pas pris en charge :

- - - -

Examples

- -

The webextensions-examples repo on GitHub contains several examples of WebExtensions that use devtools panels:

- - 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

+ + diff --git "a/files/fr/mozilla/add-ons/webextensions/incompatibilit\303\251s_chrome/index.html" "b/files/fr/mozilla/add-ons/webextensions/incompatibilit\303\251s_chrome/index.html" deleted file mode 100644 index 71d20cc62b..0000000000 --- "a/files/fr/mozilla/add-ons/webextensions/incompatibilit\303\251s_chrome/index.html" +++ /dev/null @@ -1,179 +0,0 @@ ---- -title: Incompatibilités avec Chrome -slug: Mozilla/Add-ons/WebExtensions/Incompatibilités_Chrome -tags: - - Guide - - WebExtensions - - google chrome -translation_of: Mozilla/Add-ons/WebExtensions/Chrome_incompatibilities ---- -

{{AddonSidebar}}

- -

Les extensions construites à l'aide des API WebExtension sont conçues afin d'être compatibles avec les extensions Chrome et Opera. Les extensions écrites dans ces navigateurs devraient fonctionner, autant que possible, avec très peu de changement dans Firefox.

- -

Toutefois, il existe certaines différences significatives entre Chrome, Firefox et Edge et notamment :

- - - -

La suite de cette page détaille ces problèmes ainsi que d'autres points d'incompatibilité.

- -

Les API JavaScript

- -

Les callbacks et l'espace de noms chrome.*

- -

Dans Chrome, les extensions peuvent accéder aux API JavaScript privilégiées à l'aide de l'espace de noms chrome :

- -
chrome.browserAction.setIcon({path: "path/to/icon.png"});
- -

Les WebExtensions accèdent aux API équivalentes à l'aide de l'espace de noms browser :

- -
browser.browserAction.setIcon({path: "path/to/icon.png"});
-
- -

Beaucoup d'API sont asynchrones. Dans Chrome, les API asynchrones utilisent des fonctions de rappel (callback) pour renvoyer des valeurs et {{WebExtAPIRef("runtime.lastError")}} pour communiquer les erreurs :

- -
function logCookie(c) {
-  if (chrome.extension.lastError) {
-    console.error(chrome.extension.lastError);
-  } else {
-    console.log(c);
-  }
-}
-
-chrome.cookies.set(
-  {url: "https://developer.mozilla.org/"},
-  logCookie
-);
- -

Les API WebExtensions équivalentes utilisent plutôt les promesses :

- -
function logCookie(c) {
-  console.log(c);
-}
-
-function logError(e) {
-  console.error(e);
-}
-
-var setCookie = browser.cookies.set(
-  {url: "https://developer.mozilla.org/"}
-);
-setCookie.then(logCookie, logError);
-
- -

Firefox : les espaces de noms chrome et browser

- -

Afin d'aider au portage, l'implémentation de Firefox des WebExtensions prend en charge l'espace de noms chrome, l'utilisation des callbacks, l'espace de noms browser et l'utilisation des promesses. Cela signifie que de nombreuses extensions Chrome fonctionneront simplement dans Firefox sans aucune modification. Cependant, cela ne fait pas partie de la norme WebExtension et peut ne pas être pris en charge par l'ensemble des navigateurs compatibles.

- -

Si vous écrivez votre extension en utilisant browser et les promesses, l'équipe de Firefox a également développé une prothèse (polyfill) qui lui permettra de fonctionner sur Chrome : https://github.com/mozilla/webextension-polyfill.

- -

Les API partiellement prises en charge

- -

La page sur la compatibilité des navigateurs pour les API JavaScript WebExtension inclut l'ensemble des tableaux de compatibilité. Lorsqu'il existe des réserves autour du support d'un élément d'API donné, ceci est indiqué dans ces tableaux avec un astérisque "*". Ces réserves sont détaillées la page de documentation respective de l'API.

- -

Ces tableaux sont générés à partir des données de compatibilité stockées en tant que  fichiers JSON dans GitHub.

- -

Le reste de cette section décrit les problèmes de compatibilité qui ne sont pas encore pris en compte dans ces tableaux.

- -

notifications

- - - -

proxy

- - - -

tabs

- - - -

webRequest

- - - -

windows

- - - -

API non prises en charge

- -

declarativeContent

- -

l'API declarativeContent de Chrome n'a pas encore été implémentée in Firefox.

- -

Firefox ne supportera pas l'API declarativeContent.RequestContentScript, qui est rarement utilisée et n'est pas disponible dans les versions stables de Chrome.

- -

Incompatibilités diverses

- -

Gestion des URL dans CSS

- -

Firefox résout les URL dans les fichiers CSS injectés par rapport au fichier CSS lui-même, plutôt que dans la page dans laquelle il est injecté.

- -

Incompatibilités supplémentaires

- -

Firefox ne prend pas en charge alert(), confirm() ou prompt() à partir des pages d'arrière-plan.

- -

web_accessible_resources

- -

Dans Chrome, lorsqu'une ressource est répertoriée dans web_accessible_resources, elle est accessible via chrome-extension://<id-de-l-extension>/<chemin/vers/la/ressource>. L'identifiant de l'extension est fixé pour une extension donnée.

- -

Firefox l'implémente différemment en utilisant un UUID aléatoire qui change pour chaque instance de Firefox : moz-extension://<UUID-aleatoire>/<chemin/vers/la/ressource>. Cette façon aléatoire peut empêcher certaines choses, comme ajouter l'URL de votre extension spécifique à la politique CSP d'un autre domaine.

- -

La propriété key du manifeste

- -

Lorsque vous travaillez avec une extension décompressée, Chrome permet d'ajouter une propriété key au manifeste afin de fixer l'identifiant de l'extension sur différentes machines. Ceci s'avère notamment utile lorsqu'on travaille avec web_accessible_resources. Puisque Firefox utilise des UUID aléatoires pour les web_accessible_resources, cette propriété n'est pas prise en charge.

- -

Les requêtes sont relatives au contexte de l'extension et pas à celui du contenu de la page

- -

Dans Chrome, lorsque la requête est appelée (par exemple, en utilisant fetch()) pour une URL relative comme /api du script de contenu, elle sera envoyée à https://example.com/api. Dans Firefox, vous devez fournir des URL absolues.

- -

Les clés de manifest.json

- -

La page relative à manifest.json contient un tableau décrivant la compatibilité des navigateurs pour les différentes clés du fichier. Lorsqu'il y a des mises en garde concernant le support d'une clé donnée, ceci est indiqué dans le tableau avec un astérisque "*" et de plus amples informations sont fournies dans la page décrivant la clé.

- -

Ces tables sont générées à partir des données de compatibilité stockées en tant que fichiers JSON dans GitHub.

- -

Communication avec le système natif

- -

Arguments de messagerie basée sur la connexion

- -

Sur Linux et Mac, Chrome passe un argument sur l'application natif, qui est l'origine de l'extension qui l'a lancée, sous la forme : chrome-extension://[extensionID]. Cela permet à l'application d'identifier l'extension.

- -

Sur Windows, Chrome passe deux arguments: le premier est l'origine de l'extension, et le second est un handle de la fenêtre native de Chrome qui a démarré l'application.

- -

allowed_extensions

- -

Dans Chrome, la clé de manifeste allowed_extensions s'appelle allowed_origins.

- -

Emplacement du fichier de manifeste d'application

- -

Chrome s'attend à trouver le manifeste de l'application dans un autre endroit. Se référer à la documentation Chrome pour l'emplacement de l'hôte de messagerie natif.

diff --git a/files/fr/mozilla/add-ons/webextensions/inserer_en_toute_securite_du_contenu_externe_dans_une_page/index.html b/files/fr/mozilla/add-ons/webextensions/inserer_en_toute_securite_du_contenu_externe_dans_une_page/index.html deleted file mode 100644 index 2365874169..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/inserer_en_toute_securite_du_contenu_externe_dans_une_page/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: Insérer en toute sécurité du contenu externe dans une page -slug: >- - Mozilla/Add-ons/WebExtensions/inserer_en_toute_securite_du_contenu_externe_dans_une_page -tags: - - Add-ons - - Comment - - Débutant - - Extensions - - How-to - - Sécurité - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/Safely_inserting_external_content_into_a_page ---- -

{{AddonSidebar}}

- -

Il y a des moments où vous pourriez vouloir ou devez inclure du contenu d'une source externe dans votre extension. Cependant, il existe un risque que des scripts malveillants soient intégrés à la source, soit par le développeur de la source, soit par une tierce partie malveillante.

- -

Prenez un lecteur RSS à titre d'exemple. Vous ne savez pas quels flux RSS votre extension va ouvrir et n'ont aucun contrôle sur le contenu de ces flux RSS. Ainsi, il est possible que l'utilisateur puisse s'abonner à un flux où, par exemple, le titre d'un élément de fil inclut un script. Cela pourrait être quelque chose d'aussi simple que d'inclure du code JavaScript dans les balises <script></script>. Si vous deviez extraire le titre, supposer qu'il s'agissait d'un texte brut et l'ajouter au DOM d'une page créée par votre extension, votre script a maintenant un script inconnu dans son navigateur. Par conséquent, il faut prendre soin d'éviter d'évaluer du texte arbitraire au format HTML.

- -

Vous devez également vous souvenir que les extensions ont des contextes privilégiés, par exemple dans les scripts d'arrière-plan et les scripts de contenu. Dans le pire des cas, un script incorporé peut s'exécuter dans l'un de ces contextes, une situation connue sous le nom d'escalade de privilèges. Cette situation peut laisser le navigateur d'un utilisateur ouvert à une attaque à distance en permettant au site Web qui a injecté le code d'accéder à des données utilisateur critiques, telles que des mots de passe, l'historique du navigateur ou le comportement de navigation.

- -

Cet article examine comment travailler en toute sécurité avec des données distantes et l'ajouter à un DOM.

- -

Travailler avec des chaînes arbitraires

- -

Lorsque vous travaillez avec des chaînes, il existe quelques options recommandées pour les ajouter en toute sécurité à une page : les méthodes de création de nœuds DOM standard ou jQuery.

- -

Méthodes de création de noeud DOM

- -

Une approche légère pour insérer des chaînes dans une page consiste à utiliser les méthodes de manipulation DOM natives : document.createElement, Element.setAttribute, et Node.textContent. L'approche sécurisée consiste à créer les nœuds séparément et à affecter leur contenu à l'aide de textContent :

- -
var data = JSON.parse(responseText);
-var div = document.createElement("div");
-div.className = data.className;
-div.textContent = "Your favorite color is now " + data.color;
-addonElement.appendChild(div);
- -

Cette approche est sûre car l'utilisation de .textContent échappe automatiquement à tout code HTML distant dans data.color.

- -

Cependant, attention, vous pouvez utiliser des méthodes natives qui ne sont pas sécurisées. Prenez le code suivant :

- -
var data = JSON.parse(responseText);
-addonElement.innerHTML = "<div class='" + data.className + "'>" +
-                         "Your favorite color is now " + data.color +
-                         "</div>";
- -

Ici, le contenu de data.className ou de data.color peut contenir du HTML qui peut fermer le tag plus tôt, insérer du contenu HTML arbitraire, puis ouvrir une autre balise.

- -

jQuery

- -

Lors de l'utilisation de jQuery, des fonctions telles que attr() et text() échappent au contenu lorsqu'il est ajouté à un DOM. Ainsi, l'exemple de "couleur préférée" ci-dessus, implémenté dans jQuery, ressemblerait à ceci:

- -
var node = $("</div>");
-node.addClass(data.className);
-node.text("Your favorite color is now " + data.color);
- -

Travailler avec du contenu HTML

- -

Lorsque vous travaillez avec du contenu de source externe dont vous savez qu'il s'agit du code HTML, il est essentiel de nettoyer le code HTML avant de l'ajouter à une page. La meilleure pratique pour désinfecter le code HTML consiste à utiliser une bibliothèque de nettoyage HTML ou un moteur de modèle avec des fonctionnalités de nettoyage HTML. Dans cette section, nous examinons certains outils appropriés et comment les utiliser.

- -

Désinfection HTML

- -

Une bibliothèque de nettoyage HTML désactive tout ce qui pourrait conduire à l'exécution de scripts à partir du HTML, de sorte que vous pouvez injecter en toute sécurité des ensembles complets de nœuds HTML à partir d'une source distante dans votre DOM. DOMPurify, qui a été examiné par divers experts en sécurité, est une bibliothèque appropriée pour cette tâche dans les extensions.

- -

Pour l'utilisation en production, DOMPurify cest disponible en version minifiée : purify.min.js. Vous pouvez utiliser ce script de la manière qui convient le mieux à votre extension. Par exemple, vous pouvez l'ajouter en tant que script de contenu :

- -
"content_scripts": [
-  {
-    "matches" : ["<all_urls>"],
-    "js": ["purify.min.js", "myinjectionscript.js"]
-  }
-]
- -

Ensuite, dans myinjectionscript.js, vous pouvez lire le code HTML externe, le désinfecter et l'ajouter au DOM d'une page :

- -
var elem = document.createElement("div");
-var cleanHTML = DOMPurify.sanitize(externalHTML);
-elem.innerHTML = cleanHTML;
- -

Vous pouvez utiliser n'importe quelle méthode pour ajouter le HTML aseptisé à votre DOM, par exemple la fonction .html() de jQuery’s. Souvenez-vous cependant que le drapeau SAFE_FOR_JQUERY doit être utilisé dans ce cas :

- -
var elem = $("<div/>");
-var cleanHTML = DOMPurify.sanitize(externalHTML, { SAFE_FOR_JQUERY: true });
-elem.html(cleanHTML);
- -

Moteur de modèle

- -

Un autre modèle courant consiste à créer un modèle HTML local pour une page et à utiliser des valeurs distantes pour remplir les blancs. Bien que cette approche soit généralement acceptable, il faut éviter d'utiliser des constructions qui permettraient l'insertion de code exécutable. Cela peut se produire lorsque le moteur de création de modèles utilise des constructions qui insèrent du code HTML brut dans le document. Si la variable utilisée pour insérer le code HTML brut est une source distante, elle est soumise au même risque de sécurité mentionné dans l'introduction.

- -

Par exemple, lorsque vous utilisez des modèles moustache, vous devez utiliser la double moustache, \{{variable}}, qui échappe à tout code HTML. L'utilisation de la triple moustache, \{\{{variable}}}, doit être évitée car cela injecte une chaîne HTML brute et pourrait ajouter du code exécutable à votre modèle. Handlebars fonctionne d'une manière similaire, avec des variables dans le double guidon, \{{variable}}, étant échappé. Considérant que, les variables dans le guidon triple sont laissées crues et doivent être évitées. De même, si vous créez une aide Handlebars à l'aide de  Handlebars.SafeString utilisez Handlebars.escapeExpression() pour échapper tous les paramètres dynamiques transmis à l'assistant. C'est une exigence car la variable résultante de Handlebars.SafeString est considérée comme sûre et elle n'est pas échappée lorsqu'elle est insérée avec des guidons doubles.

- -

Il existe des concepts similaires dans d'autres systèmes de modélisation qui doivent être abordés avec le même niveau de soin.

- -

Lecture supplémentaire

- -

Pour plus d'informations sur ce sujet, consultez les articles suivants :

- - diff --git a/files/fr/mozilla/add-ons/webextensions/installation_temporaire_dans_firefox/index.html b/files/fr/mozilla/add-ons/webextensions/installation_temporaire_dans_firefox/index.html deleted file mode 100644 index 26f97b3cac..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/installation_temporaire_dans_firefox/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: Installation temporaire dans Firefox -slug: Mozilla/Add-ons/WebExtensions/installation_temporaire_dans_Firefox -tags: - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/Temporary_Installation_in_Firefox ---- -
{{AddonSidebar}}
- -

Cet article décrit comment une extension développée peut être temporairement installée dans Firefox pour la tester et la déboguer. L'extension restera installée jusqu'à ce que vous redémarriez Firefox. Vous pouvez utiliser cette méthode avec tout type d'extension ne nécessitant pas de redémarrage, y compris les extensions bootstrap et les extensions utilisant le SDK des Add-ons.

- -

Notez que les utilisateurs ne devraient pas utiliser cette méthode pour installer des extensions dans Firefox. Les utilisateurs installeront des extensions en téléchargeant et en ouvrant des extensions packagées qui ont été signées par Mozilla. Pour savoir comment un développeur d'extension peut faire packager et signer son extension, consultez Publier votre extension.

- -

Pour installer une extension temporairement :

- - - -

L'extension sera installée et restera installée jusqu'à ce que vous redémarriez Firefox.

- -

{{EmbedYouTube("cer9EUKegG4")}}

- -

Recharger une extension temporaire

- -

À partir de Firefox 48, il y a un nouveau bouton appelé "Recharger" à côté du nom de l'extension dans about:debugging :

- -

Il fait ce qu'il dit :

- - - -

{{EmbedYouTube("NuajE60jfGY")}}

- -
-

Notez que dans Firefox 48 uniquement, "Recharger" ne met pas à jour le nom et la description de l'extension qui sont affichés dans about:debugging et about:addons. Ceci a été corrigé dans Firefox 49.

-
- -

Utilisation de la ligne de commande

- -

Si vous utilisez déjà la ligne de commande pour le développement, consultez l'outil web-ext. Il automatise temporairement l'installation et recharge automatiquement votre extension quand le code source a changé.

- -

Détection d'installation temporaire

- -

Votre extension peut détecter si elle a été installée depuis about:debugging au lieu d'avoir été téléchargée comme une extension packagée et signée depuis addons.mozilla.org. Écoutez l'événement {{WebExtAPIRef("runtime.onInstalled")}} et vérifiez la valeur de details.temporary.

- -

Limitations

- -

L'installation temporaire d'une extension n'imite pas complètement le comportement d'une extension signée. Par exemple, si l'extension fait des demandes d'autorisation de temps d'installation, celles-ci ne sont pas affichées dans le cadre du processus d'installation temporaire. De plus, des fonctions, comme le stockage local, persistent même si l'extension est supprimée et que le navigateur redémarre.

- -

Pour plus d'informations sur la façon de traiter ces situations, voir les demandes de permissions et Test des fonctionnalités persistantes et de redémarrage.

diff --git a/files/fr/mozilla/add-ons/webextensions/interact_with_the_clipboard/index.html b/files/fr/mozilla/add-ons/webextensions/interact_with_the_clipboard/index.html new file mode 100644 index 0000000000..fe7b69e3a3 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/interact_with_the_clipboard/index.html @@ -0,0 +1,189 @@ +--- +title: Interagir avec le presse-papier +slug: Mozilla/Add-ons/WebExtensions/interagir_avec_le_presse_papier +tags: + - Add-ons + - Clip + - Clipboard + - Cut + - Editing + - Extensions + - Text + - WebExtensions + - coller + - copier + - copy + - couper + - paste +translation_of: Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard +--- +
{{AddonSidebar}}
+ +

ll y a deux façons dont les extensions de navigateur peuvent interagir avec le presse-papiers système : la méthode {{domxref("Document.execCommand()")}}  et l'asynchrone moderne de l'API Presse-papiers.

+ +

La méthode {{domxref("Document.execCommand()")}} peut être utilisée, en spécifiant la commande désirée :

+ + + +

L'API Presse-papiers fournit un accès asynchrone pour lire et écrire directement le contenu du presse-papiers. Par exemple, pour lire le texte du presse-papiers :

+ +
navigator.clipboard.readText().then(text => outputElem.innerText = text);
+ +

Ceci demande le contenu du presse-papiers et, lorsque la réponse est reçue, stocke le texte du presse-papiers dans le {{domxref("Node.innerText", "innerText")}} d'un élément.

+ +
+

Note: Les méthodes asynchrones de l'API Clipboard sont un ajout récent à la spécification et peuvent ne pas être entièrement implémentées dans tous les navigateurs. Assurez-vous de passer en revue les tableaux de compatibilité pour chaque méthode avant de les utiliser, afin de vous assurer que le support est suffisamment large pour vos besoins.

+
+ +

Ecrire dans le presse-papiers

+ +

Il y a deux façons d'écrire dans le presse-papiers. Vous pouvez utiliser les actions {{domxref("Document.execCommand", "document.execCommand()")}} pour déclencher les actions "couper" et "copier", qui remplace le contenu actuel du presse-papiers par les données actuellement sélectionnées. L'autre option est d'utiliser la méthode {{domxref("Clipboard.writeText()")}} ou {{domxref("Clipboard.write()")}} de l'API Presse-papiers pour remplacer le contenu du presse-papiers par des données spécifiques.

+ +

Utiliser execCommand()

+ +

Les commandes {{domxref("Document.execCommand", "document.execCommand()")}} de la méthode "couper" et "copier" peuvent être utilisées pour remplacer le contenu actuel du presse-papiers par le matériel sélectionné. Ces commandes peuvent être utilisées sans permission spéciale si vous les utilisez dans un gestionnaire d'événements de courte durée pour une action utilisateur (par exemple, un gestionnaire de clics).

+ +

Par exemple, supposons que vous ayez un popup qui inclut le HTML suivant :

+ +
<input id="input" type="text"/>
+<button id="copy">Copy</button>
+
+ +

Pour que le bouton "copier" copie le contenu de l'élément {{HTMLElement("input")}}, vous pouvez utiliser du code comme ceci :

+ +
function copy() {
+  var copyText = document.querySelector("#input");
+  copyText.select();
+  document.execCommand("copy");
+}
+
+document.querySelector("#copy").addEventListener("click", copy);
+ +

Parce que l'appel execCommand() se trouve à l'intérieur d'un gestionnaire d'événements click, vous n'avez pas besoin de permissions spéciales ici.

+ +

Cependant, disons que vous déclenchez plutôt la copie à partir d'une alarme  :

+ +
function copy() {
+  var copyText = document.querySelector("#input");
+  copyText.select();
+  document.execCommand("copy");
+}
+
+browser.alarms.create({
+  delayInMinutes: 0.1
+});
+
+browser.alarms.onAlarm.addListener(copy);
+ +

Selon le navigateur, cela peut ne pas fonctionner. Sur Firefox, cela ne fonctionnera pas, et vous verrez un message comme celui-ci dans votre console :

+ +
document.execCommand(‘cut’/‘copy’) was denied because it was not called from inside a short running user-generated event handler.
+ +

Pour activer ce cas d'utilisation, vous devez demander permission "clipboardWrite". Alors :  "clipboardWrite" vous permet d'écrire dans le presse-papiers en dehors d'un gestionnaire d'événements de courte durée pour une action utilisateur.

+ +

Utilisation de l'API Presse-papiers

+ +

L'API Presse-papiers ajoute une plus grande flexibilité, en ce sens que vous n'êtes pas limité à copier simplement la sélection courante dans le presse-papiers, mais vous pouvez spécifier directement quelles informations placer dans le presse-papiers.

+ +

L'utilisation de l'API nécessite que vous ayez les permissons de l'API "clipboard-write". Vous pouvez vérifier cette permission en utilisant {{domxref("Permissions.query", "navigator.permissions.query()")}}:

+ +
navigator.permissions.query({name: "clipboard-write"}).then(result => {
+  if (result.state == "granted" || result.state == "prompt") {
+    /* write to the clipboard now */
+  }
+});
+
+ +

Cette fonction prend une chaîne de caractères comme entrée et met à jour le presse-papiers pour contenir cette chaîne :

+ +
function updateClipboard(newClip) {
+  navigator.clipboard.writeText(newClip).then(function() {
+    /* clipboard successfully set */
+  }, function() {
+    /* clipboard write failed */
+  });
+}
+
+ +
+

Note: Le nom de la permission clipboard-write n'est pas supporté actuellement dans Firefox - seulement les navigateurs Chromium.

+
+ +

***Considérations spécifiques du navigateur

+ +

Le presse-papiers et les autres API impliquées ici évoluent rapidement, de sorte qu'il y a des variations entre les navigateurs quant à leur mode de fonctionnement.

+ +

Dans Chrome:

+ + + +

Dans Firefox:

+ + + +
+

L'API execCommand('copy') n'est pas supporté dans Safari

+
+ + + +

Lecture à partir du presse-papiers

+ +

La méthode execCommand() fournit la commande "coller", qui vous permet de coller le contenu actuel du presse-papiers au point d'insertion dans un contrôle modifiable. Vous pouvez gagner en flexibilité en utilisant les méthodes {{domxref("Clipboard.read()")}} et {{domxref("Clipboard.readText()")}}.

+ +

Utilisation de execCommand()

+ +

Tout d'abord, vous devez avoir la permission "clipboardRead" établie pour votre extension. C'est le cas même si vous utilisez la commande "coller" à partir d'un gestionnaire d'événements généré par l'utilisateur tel que {{event("click")}} ou {{event("keypress")}}.

+ +

Considérez le HTML qui inclut quelque chose comme ceci :

+ +
<textarea id="output"></textarea>
+<button id="paste">Paste</button>
+
+ +

Pour définir le contenu de l'élément {{HTMLElement("textarea")}} avec l'ID "output" du presse-papiers lorsque l'utilisateur clique sur le {{HTMLElement("button")}} "coller", vous pouvez utiliser du code comme ceci :

+ +
function paste() {
+  var pasteText = document.querySelector("#output");
+  pasteText.focus();
+  document.execCommand("paste");
+  console.log(pasteText.textContent);
+}
+
+document.querySelector("#paste").addEventListener("click", paste);
+ +

Utilisation de l'API Presse-papiers

+ +

Les méthodes {{domxref("Clipboard.readText", "navigator.clipboard.readText()")}} et {{domxref("Clipboard.read", "navigator.clipboard.read()")}} de l'API Presse-papiers vous permettent de lire du texte arbitraire ou des données binaires à partir du presse-papiers. Cela vous permet d'accéder aux données du presse-papiers sans simplement les coller dans un élément modifiable.

+ +

Une fois que vous avez la permission "clipboard-read" de l'API permissions, vous pouvez lire facilement à partir du presse-papiers :

+ +
navigator.clipboard.readText().then(clipText =>
+  document.getElementById("outbox").innerText = clipText);
+ +

Cet extrait de code récupère le texte du presse-papiers et remplace le contenu actuel de l'élément par l'ID "outbox" avec ce texte.

+ +

Considérations spécifiques au navigateur

+ +

Firefox supporte la permission "clipboardRead" à partir de la version 54, mais ne supporte pas que le collage dans les élements en mode édition de contenu, qui pour les scripts de contenu ne fonctionne qu'avec un {{HTMLElement("textarea")}}. Pour les scripts d'arrière-plan, n'importe quel élément peut être mis en mode contenu modifiable.

+ +

Voir aussi

+ + diff --git a/files/fr/mozilla/add-ons/webextensions/interagir_avec_le_presse_papier/index.html b/files/fr/mozilla/add-ons/webextensions/interagir_avec_le_presse_papier/index.html deleted file mode 100644 index fe7b69e3a3..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/interagir_avec_le_presse_papier/index.html +++ /dev/null @@ -1,189 +0,0 @@ ---- -title: Interagir avec le presse-papier -slug: Mozilla/Add-ons/WebExtensions/interagir_avec_le_presse_papier -tags: - - Add-ons - - Clip - - Clipboard - - Cut - - Editing - - Extensions - - Text - - WebExtensions - - coller - - copier - - copy - - couper - - paste -translation_of: Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard ---- -
{{AddonSidebar}}
- -

ll y a deux façons dont les extensions de navigateur peuvent interagir avec le presse-papiers système : la méthode {{domxref("Document.execCommand()")}}  et l'asynchrone moderne de l'API Presse-papiers.

- -

La méthode {{domxref("Document.execCommand()")}} peut être utilisée, en spécifiant la commande désirée :

- - - -

L'API Presse-papiers fournit un accès asynchrone pour lire et écrire directement le contenu du presse-papiers. Par exemple, pour lire le texte du presse-papiers :

- -
navigator.clipboard.readText().then(text => outputElem.innerText = text);
- -

Ceci demande le contenu du presse-papiers et, lorsque la réponse est reçue, stocke le texte du presse-papiers dans le {{domxref("Node.innerText", "innerText")}} d'un élément.

- -
-

Note: Les méthodes asynchrones de l'API Clipboard sont un ajout récent à la spécification et peuvent ne pas être entièrement implémentées dans tous les navigateurs. Assurez-vous de passer en revue les tableaux de compatibilité pour chaque méthode avant de les utiliser, afin de vous assurer que le support est suffisamment large pour vos besoins.

-
- -

Ecrire dans le presse-papiers

- -

Il y a deux façons d'écrire dans le presse-papiers. Vous pouvez utiliser les actions {{domxref("Document.execCommand", "document.execCommand()")}} pour déclencher les actions "couper" et "copier", qui remplace le contenu actuel du presse-papiers par les données actuellement sélectionnées. L'autre option est d'utiliser la méthode {{domxref("Clipboard.writeText()")}} ou {{domxref("Clipboard.write()")}} de l'API Presse-papiers pour remplacer le contenu du presse-papiers par des données spécifiques.

- -

Utiliser execCommand()

- -

Les commandes {{domxref("Document.execCommand", "document.execCommand()")}} de la méthode "couper" et "copier" peuvent être utilisées pour remplacer le contenu actuel du presse-papiers par le matériel sélectionné. Ces commandes peuvent être utilisées sans permission spéciale si vous les utilisez dans un gestionnaire d'événements de courte durée pour une action utilisateur (par exemple, un gestionnaire de clics).

- -

Par exemple, supposons que vous ayez un popup qui inclut le HTML suivant :

- -
<input id="input" type="text"/>
-<button id="copy">Copy</button>
-
- -

Pour que le bouton "copier" copie le contenu de l'élément {{HTMLElement("input")}}, vous pouvez utiliser du code comme ceci :

- -
function copy() {
-  var copyText = document.querySelector("#input");
-  copyText.select();
-  document.execCommand("copy");
-}
-
-document.querySelector("#copy").addEventListener("click", copy);
- -

Parce que l'appel execCommand() se trouve à l'intérieur d'un gestionnaire d'événements click, vous n'avez pas besoin de permissions spéciales ici.

- -

Cependant, disons que vous déclenchez plutôt la copie à partir d'une alarme  :

- -
function copy() {
-  var copyText = document.querySelector("#input");
-  copyText.select();
-  document.execCommand("copy");
-}
-
-browser.alarms.create({
-  delayInMinutes: 0.1
-});
-
-browser.alarms.onAlarm.addListener(copy);
- -

Selon le navigateur, cela peut ne pas fonctionner. Sur Firefox, cela ne fonctionnera pas, et vous verrez un message comme celui-ci dans votre console :

- -
document.execCommand(‘cut’/‘copy’) was denied because it was not called from inside a short running user-generated event handler.
- -

Pour activer ce cas d'utilisation, vous devez demander permission "clipboardWrite". Alors :  "clipboardWrite" vous permet d'écrire dans le presse-papiers en dehors d'un gestionnaire d'événements de courte durée pour une action utilisateur.

- -

Utilisation de l'API Presse-papiers

- -

L'API Presse-papiers ajoute une plus grande flexibilité, en ce sens que vous n'êtes pas limité à copier simplement la sélection courante dans le presse-papiers, mais vous pouvez spécifier directement quelles informations placer dans le presse-papiers.

- -

L'utilisation de l'API nécessite que vous ayez les permissons de l'API "clipboard-write". Vous pouvez vérifier cette permission en utilisant {{domxref("Permissions.query", "navigator.permissions.query()")}}:

- -
navigator.permissions.query({name: "clipboard-write"}).then(result => {
-  if (result.state == "granted" || result.state == "prompt") {
-    /* write to the clipboard now */
-  }
-});
-
- -

Cette fonction prend une chaîne de caractères comme entrée et met à jour le presse-papiers pour contenir cette chaîne :

- -
function updateClipboard(newClip) {
-  navigator.clipboard.writeText(newClip).then(function() {
-    /* clipboard successfully set */
-  }, function() {
-    /* clipboard write failed */
-  });
-}
-
- -
-

Note: Le nom de la permission clipboard-write n'est pas supporté actuellement dans Firefox - seulement les navigateurs Chromium.

-
- -

***Considérations spécifiques du navigateur

- -

Le presse-papiers et les autres API impliquées ici évoluent rapidement, de sorte qu'il y a des variations entre les navigateurs quant à leur mode de fonctionnement.

- -

Dans Chrome:

- - - -

Dans Firefox:

- - - -
-

L'API execCommand('copy') n'est pas supporté dans Safari

-
- - - -

Lecture à partir du presse-papiers

- -

La méthode execCommand() fournit la commande "coller", qui vous permet de coller le contenu actuel du presse-papiers au point d'insertion dans un contrôle modifiable. Vous pouvez gagner en flexibilité en utilisant les méthodes {{domxref("Clipboard.read()")}} et {{domxref("Clipboard.readText()")}}.

- -

Utilisation de execCommand()

- -

Tout d'abord, vous devez avoir la permission "clipboardRead" établie pour votre extension. C'est le cas même si vous utilisez la commande "coller" à partir d'un gestionnaire d'événements généré par l'utilisateur tel que {{event("click")}} ou {{event("keypress")}}.

- -

Considérez le HTML qui inclut quelque chose comme ceci :

- -
<textarea id="output"></textarea>
-<button id="paste">Paste</button>
-
- -

Pour définir le contenu de l'élément {{HTMLElement("textarea")}} avec l'ID "output" du presse-papiers lorsque l'utilisateur clique sur le {{HTMLElement("button")}} "coller", vous pouvez utiliser du code comme ceci :

- -
function paste() {
-  var pasteText = document.querySelector("#output");
-  pasteText.focus();
-  document.execCommand("paste");
-  console.log(pasteText.textContent);
-}
-
-document.querySelector("#paste").addEventListener("click", paste);
- -

Utilisation de l'API Presse-papiers

- -

Les méthodes {{domxref("Clipboard.readText", "navigator.clipboard.readText()")}} et {{domxref("Clipboard.read", "navigator.clipboard.read()")}} de l'API Presse-papiers vous permettent de lire du texte arbitraire ou des données binaires à partir du presse-papiers. Cela vous permet d'accéder aux données du presse-papiers sans simplement les coller dans un élément modifiable.

- -

Une fois que vous avez la permission "clipboard-read" de l'API permissions, vous pouvez lire facilement à partir du presse-papiers :

- -
navigator.clipboard.readText().then(clipText =>
-  document.getElementById("outbox").innerText = clipText);
- -

Cet extrait de code récupère le texte du presse-papiers et remplace le contenu actuel de l'élément par l'ID "outbox" avec ce texte.

- -

Considérations spécifiques au navigateur

- -

Firefox supporte la permission "clipboardRead" à partir de la version 54, mais ne supporte pas que le collage dans les élements en mode édition de contenu, qui pour les scripts de contenu ne fonctionne qu'avec un {{HTMLElement("textarea")}}. Pour les scripts d'arrière-plan, n'importe quel élément peut être mis en mode contenu modifiable.

- -

Voir aussi

- - diff --git a/files/fr/mozilla/add-ons/webextensions/intercept_http_requests/index.html b/files/fr/mozilla/add-ons/webextensions/intercept_http_requests/index.html new file mode 100644 index 0000000000..f534b57be1 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/intercept_http_requests/index.html @@ -0,0 +1,160 @@ +--- +title: Intercepter les requêtes HTTP +slug: Mozilla/Add-ons/WebExtensions/Intercepter_requêtes_HTTP +tags: + - Extensions + - Modules complémentaires + - Tutoriel + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Intercept_HTTP_requests +--- +
{{AddonSidebar}}
+ +

Utilisez l’API {{WebExtAPIRef("webRequest")}} pour intercepter les requêtes HTTP. Avec cette API, vous pouvez ajouter des écouteurs à différents stades d’exécution d’une requête HTTP. Avec les écouteurs, vous pouvez :

+ + + +

Cet article décrit trois utilisations possibles du module webRequest :

+ + + +

Journalisation des URL de requête

+ +

Créez un nouveau répertoire et nommez-le "requests". Dans ce répertoire, créez le fichier "manifest.json", avec le contenu suivant :

+ +
{
+  "description": "Démonstration du module webRequests",
+  "manifest_version": 2,
+  "name": "webRequest-demo",
+  "version": "1.0",
+
+  "permissions": [
+    "webRequest",
+    "<all_urls>"
+  ],
+
+  "background": {
+    "scripts": ["background.js"]
+  }
+}
+ +

Ensuite, créez un fichier nommé "background.js", avec le contenu suivant :

+ +
function logURL(requestDetails) {
+  console.log("Chargement : " + requestDetails.url);
+}
+
+browser.webRequest.onBeforeRequest.addListener(
+  logURL,
+  {urls: ["<all_urls>"]}
+);
+
+
+ +

Ici, nous utilisons l’écouteur {{WebExtAPIRef("webRequest.onBeforeRequest", "onBeforeRequest")}} pour appeler la fonction logURL() juste avant de démarrer la requête. La fonction logURL() récupère l’URL de la requête dans l’objet d’évènement et la journalise dans la console du navigateur. Le modèle {urls: ["<all_urls>"]} permet d’intercepter les requêtes HTTP vers toutes les URL.

+ +

Pour tester ce module, installez l'extension, ouvrez la console du navigateur et accédez à quelques pages web. Dans la console du navigateur, les URL de toutes les ressources ayant fait l’objet d’une requête de navigateur devraient s’afficher :

+ +

{{EmbedYouTube("X3rMgkRkB1Q")}}

+ +

Redirection des requêtes

+ +

Utilisons maintenant webRequest pour rediriger les requêtes HTTP. Commençons par modifier le fichier manifest.json comme suit :

+ +
{
+
+  "description": "Demonstrating webRequests",
+  "manifest_version": 2,
+  "name": "webRequest-demo",
+  "version": "1.0",
+
+  "permissions": [
+    "webRequest",
+    "webRequestBlocking",
+    "https://developer.mozilla.org/",
+    "https://mdn.mozillademos.org/"
+  ],
+
+  "background": {
+    "scripts": ["background.js"]
+  }
+
+}
+ +

Ici, il s’agit simplement d’ajouter la permission "webRequestBlocking". Cette permission supplémentaire est requise lors de toute modification active d’une requête.

+ +

Modifions ensuite le fichier « background.js » comme suit :

+ +
var pattern = "https://mdn.mozillademos.org/*";
+
+function redirect(requestDetails) {
+  console.log("Redirection : " + requestDetails.url);
+  return {
+    redirectUrl: "https://38.media.tumblr.com/tumblr_ldbj01lZiP1qe0eclo1_500.gif"
+  };
+}
+
+browser.webRequest.onBeforeRequest.addListener(
+  redirect,
+  {urls:[pattern], types:["image"]},
+  ["blocking"]
+);
+ +

Encore une fois, nous utilisons l’écouteur d’évènement {{WebExtAPIRef("webRequest.onBeforeRequest", "onBeforeRequest")}} pour exécuter une fonction juste avant le démarrage de chaque requête. Cette fonction remplace l’URL cible par l’URL de redirection redirectUrl spécifiée dans la fonction.

+ +

Cette fois-ci, toutes les requêtes ne sont pas interceptées. L’option {urls:[pattern], types:["image"]} indique qu’il ne faut intercepter que les requêtes (1) vers des URL résidant sous "https://mdn.mozillademos.org/" (2) pour les ressources d’images. Consultez la documentation {{WebExtAPIRef("webRequest.RequestFilter")}} pour en savoir plus.

+ +

À noter également le passage de l’option "blocking": passez cette option dès que vous souhaitez modifier la requête. La fonction d’écouteur bloque la requête réseau. Le navigateur attend alors que l’écouteur renvoie un résultat avant de continuer. Consultez la documentation {{WebExtAPIRef("webRequest.onBeforeRequest")}} pour en savoir plus sur l’option "blocking".

+ +

Pour tester ce module, ouvrez une page MDN contenant beaucoup d’images (par exemple https://developer.mozilla.org/fr/docs/Tools/Network_Monitor), rechargez l'extension, puis rechargez la page MDN :

+ +

{{EmbedYouTube("ix5RrXGr0wA")}}

+ +

Modification des en-têtes de requête

+ +

Enfin, nous pouvons utiliser le module webRequest pour modifier les en-têtes de requête. Dans cet exemple, nous allons modifier l’en-tête "User-Agent" afin que le navigateur s’identifie lui-même comme Opera 12.16, mais uniquement en cas de consultation des pages sous http://useragentstring.com/".

+ +

Il n’est pas nécessaire de modifier le fichier "manifest.json" par rapport à l’exemple précédent.

+ +

Modifiez le code du fichier "background.js" comme suit :

+ +
var targetPage = "http://useragentstring.com/*";
+
+var ua = "Opera/9.80 (X11; Linux i686; Ubuntu/14.10) Presto/2.12.388 Version/12.16";
+
+function rewriteUserAgentHeader(e) {
+  e.requestHeaders.forEach(function(header){
+    if (header.name.toLowerCase() == "user-agent") {
+      header.value = ua;
+    }
+  });
+  return {requestHeaders: e.requestHeaders};
+}
+
+browser.webRequest.onBeforeSendHeaders.addListener(
+  rewriteUserAgentHeader,
+  {urls: [targetPage]},
+  ["blocking", "requestHeaders"]
+);
+ +

Ici, nous utilisons l’écouteur d’évènement {{WebExtAPIRef("webRequest.onBeforeSendHeaders", "onBeforeSendHeaders")}} pour exécuter une fonction juste avant l’envoi des en-têtes de requête.

+ +

La fonction d’écouteur n’est appelée qu’en cas de requête vers des URL correspondant au modèle targetPage. Notez aussi le nouveau passage de l’option "blocking". Nous avons également passé "requestHeaders", qui indique que l’écouteur reçoit une liste contenant les en-têtes de requête à envoyer. Consultez la documentation {{WebExtAPIRef("webRequest.onBeforeSendHeaders")}} pour en savoir plus sur ces options.

+ +

La fonction d’écouteur recherche l’en-tête "User-Agent" dans la liste, remplace sa valeur par celle de la variable ua et renvoie la liste modifiée. Cette dernière est ensuite envoyée au serveur.

+ +

Pour tester ce module, accédez à useragentstring.com et vérifiez que le navigateur identifié est Firefox. Rechargez ensuite l'extension, rechargez useragentstring.com et vérifiez que Firefox a été remplacé par Opera :

+ +

{{EmbedYouTube("SrSNS1-FIx0")}}

+ +

En savoir plus

+ +

Pour en apprendre davantage sur toutes les possibilités de l’API webRequest, consultez la documentation de référence correspondante.

diff --git "a/files/fr/mozilla/add-ons/webextensions/intercepter_requ\303\252tes_http/index.html" "b/files/fr/mozilla/add-ons/webextensions/intercepter_requ\303\252tes_http/index.html" deleted file mode 100644 index f534b57be1..0000000000 --- "a/files/fr/mozilla/add-ons/webextensions/intercepter_requ\303\252tes_http/index.html" +++ /dev/null @@ -1,160 +0,0 @@ ---- -title: Intercepter les requêtes HTTP -slug: Mozilla/Add-ons/WebExtensions/Intercepter_requêtes_HTTP -tags: - - Extensions - - Modules complémentaires - - Tutoriel - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/Intercept_HTTP_requests ---- -
{{AddonSidebar}}
- -

Utilisez l’API {{WebExtAPIRef("webRequest")}} pour intercepter les requêtes HTTP. Avec cette API, vous pouvez ajouter des écouteurs à différents stades d’exécution d’une requête HTTP. Avec les écouteurs, vous pouvez :

- - - -

Cet article décrit trois utilisations possibles du module webRequest :

- - - -

Journalisation des URL de requête

- -

Créez un nouveau répertoire et nommez-le "requests". Dans ce répertoire, créez le fichier "manifest.json", avec le contenu suivant :

- -
{
-  "description": "Démonstration du module webRequests",
-  "manifest_version": 2,
-  "name": "webRequest-demo",
-  "version": "1.0",
-
-  "permissions": [
-    "webRequest",
-    "<all_urls>"
-  ],
-
-  "background": {
-    "scripts": ["background.js"]
-  }
-}
- -

Ensuite, créez un fichier nommé "background.js", avec le contenu suivant :

- -
function logURL(requestDetails) {
-  console.log("Chargement : " + requestDetails.url);
-}
-
-browser.webRequest.onBeforeRequest.addListener(
-  logURL,
-  {urls: ["<all_urls>"]}
-);
-
-
- -

Ici, nous utilisons l’écouteur {{WebExtAPIRef("webRequest.onBeforeRequest", "onBeforeRequest")}} pour appeler la fonction logURL() juste avant de démarrer la requête. La fonction logURL() récupère l’URL de la requête dans l’objet d’évènement et la journalise dans la console du navigateur. Le modèle {urls: ["<all_urls>"]} permet d’intercepter les requêtes HTTP vers toutes les URL.

- -

Pour tester ce module, installez l'extension, ouvrez la console du navigateur et accédez à quelques pages web. Dans la console du navigateur, les URL de toutes les ressources ayant fait l’objet d’une requête de navigateur devraient s’afficher :

- -

{{EmbedYouTube("X3rMgkRkB1Q")}}

- -

Redirection des requêtes

- -

Utilisons maintenant webRequest pour rediriger les requêtes HTTP. Commençons par modifier le fichier manifest.json comme suit :

- -
{
-
-  "description": "Demonstrating webRequests",
-  "manifest_version": 2,
-  "name": "webRequest-demo",
-  "version": "1.0",
-
-  "permissions": [
-    "webRequest",
-    "webRequestBlocking",
-    "https://developer.mozilla.org/",
-    "https://mdn.mozillademos.org/"
-  ],
-
-  "background": {
-    "scripts": ["background.js"]
-  }
-
-}
- -

Ici, il s’agit simplement d’ajouter la permission "webRequestBlocking". Cette permission supplémentaire est requise lors de toute modification active d’une requête.

- -

Modifions ensuite le fichier « background.js » comme suit :

- -
var pattern = "https://mdn.mozillademos.org/*";
-
-function redirect(requestDetails) {
-  console.log("Redirection : " + requestDetails.url);
-  return {
-    redirectUrl: "https://38.media.tumblr.com/tumblr_ldbj01lZiP1qe0eclo1_500.gif"
-  };
-}
-
-browser.webRequest.onBeforeRequest.addListener(
-  redirect,
-  {urls:[pattern], types:["image"]},
-  ["blocking"]
-);
- -

Encore une fois, nous utilisons l’écouteur d’évènement {{WebExtAPIRef("webRequest.onBeforeRequest", "onBeforeRequest")}} pour exécuter une fonction juste avant le démarrage de chaque requête. Cette fonction remplace l’URL cible par l’URL de redirection redirectUrl spécifiée dans la fonction.

- -

Cette fois-ci, toutes les requêtes ne sont pas interceptées. L’option {urls:[pattern], types:["image"]} indique qu’il ne faut intercepter que les requêtes (1) vers des URL résidant sous "https://mdn.mozillademos.org/" (2) pour les ressources d’images. Consultez la documentation {{WebExtAPIRef("webRequest.RequestFilter")}} pour en savoir plus.

- -

À noter également le passage de l’option "blocking": passez cette option dès que vous souhaitez modifier la requête. La fonction d’écouteur bloque la requête réseau. Le navigateur attend alors que l’écouteur renvoie un résultat avant de continuer. Consultez la documentation {{WebExtAPIRef("webRequest.onBeforeRequest")}} pour en savoir plus sur l’option "blocking".

- -

Pour tester ce module, ouvrez une page MDN contenant beaucoup d’images (par exemple https://developer.mozilla.org/fr/docs/Tools/Network_Monitor), rechargez l'extension, puis rechargez la page MDN :

- -

{{EmbedYouTube("ix5RrXGr0wA")}}

- -

Modification des en-têtes de requête

- -

Enfin, nous pouvons utiliser le module webRequest pour modifier les en-têtes de requête. Dans cet exemple, nous allons modifier l’en-tête "User-Agent" afin que le navigateur s’identifie lui-même comme Opera 12.16, mais uniquement en cas de consultation des pages sous http://useragentstring.com/".

- -

Il n’est pas nécessaire de modifier le fichier "manifest.json" par rapport à l’exemple précédent.

- -

Modifiez le code du fichier "background.js" comme suit :

- -
var targetPage = "http://useragentstring.com/*";
-
-var ua = "Opera/9.80 (X11; Linux i686; Ubuntu/14.10) Presto/2.12.388 Version/12.16";
-
-function rewriteUserAgentHeader(e) {
-  e.requestHeaders.forEach(function(header){
-    if (header.name.toLowerCase() == "user-agent") {
-      header.value = ua;
-    }
-  });
-  return {requestHeaders: e.requestHeaders};
-}
-
-browser.webRequest.onBeforeSendHeaders.addListener(
-  rewriteUserAgentHeader,
-  {urls: [targetPage]},
-  ["blocking", "requestHeaders"]
-);
- -

Ici, nous utilisons l’écouteur d’évènement {{WebExtAPIRef("webRequest.onBeforeSendHeaders", "onBeforeSendHeaders")}} pour exécuter une fonction juste avant l’envoi des en-têtes de requête.

- -

La fonction d’écouteur n’est appelée qu’en cas de requête vers des URL correspondant au modèle targetPage. Notez aussi le nouveau passage de l’option "blocking". Nous avons également passé "requestHeaders", qui indique que l’écouteur reçoit une liste contenant les en-têtes de requête à envoyer. Consultez la documentation {{WebExtAPIRef("webRequest.onBeforeSendHeaders")}} pour en savoir plus sur ces options.

- -

La fonction d’écouteur recherche l’en-tête "User-Agent" dans la liste, remplace sa valeur par celle de la variable ua et renvoie la liste modifiée. Cette dernière est ensuite envoyée au serveur.

- -

Pour tester ce module, accédez à useragentstring.com et vérifiez que le navigateur identifié est Firefox. Rechargez ensuite l'extension, rechargez useragentstring.com et vérifiez que Firefox a été remplacé par Opera :

- -

{{EmbedYouTube("SrSNS1-FIx0")}}

- -

En savoir plus

- -

Pour en apprendre davantage sur toutes les possibilités de l’API webRequest, consultez la documentation de référence correspondante.

diff --git a/files/fr/mozilla/add-ons/webextensions/manifest.json/arriere-plan/index.html b/files/fr/mozilla/add-ons/webextensions/manifest.json/arriere-plan/index.html deleted file mode 100644 index 4181a9e841..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/manifest.json/arriere-plan/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: background -slug: Mozilla/Add-ons/WebExtensions/manifest.json/arriere-plan -tags: - - Add-ons - - Extensions - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/background ---- -
{{AddonSidebar}}
- - - - - - - - - - - - - - - - -
TypeObject
ObligatoireNo
Exemple - 
-"background": {
-  "scripts": ["background.js"]
-}
-
- -

Utilisez la clé background pour inclure un ou plusieurs scripts d'arrière-plan, et éventuellement une page d'arrière-plan dans votre extension.

- -

Les scripts d'arrière-plan sont l'endroit pour placer le code qui doit maintenir l'état à long terme, ou effectuer des opérations à long terme, indépendamment de la durée de vie de toutes les pages Web ou les fenêtres du navigateur.

- -

Les scripts d'arrière-plan sont chargés dès que l'extension est chargée et restent chargés jusqu'à ce que l'extension soit désactivée ou désinstallée. Vous pouvez utiliser n'importe laquelle des WebExtension APIs dans le script, tant que vous avez demandé les permissions nécessaires.

- -

Voir la section "Pages arrière-plan" dans l'anatomie d'une WebExtension pour plus de détails.

- -

La clé background est un objet qui peut avoir l'une des deux propriétés suivantes, toutes deux facultatives :

- - - - - - - - - - - - -
"scripts" -

Un ensemble de chaînes, chacune étant un chemin d'accès à une source JavaScript. Le chemin est relatif au fichier manifest.json lui-même. Ce sont les scripts d'arrière-plan qui seront inclus dans l'extension.

- -

Les scripts partagent la même fenêtre globale.

- -

Les scripts sont chargés dans l'ordre où 'ils apparaissent dans le tableau.

- -

Notez qu'il y a un bug affectant les versions de Firefox antérieures à la version 50 : lorsque le débogueur Firefox est ouvert, les scripts ne sont pas toujours chargés dans l'ordre indiqué dans le tableau. Pour contourner ce bug, vous pouvez utiliser la propriété "page" et inclure des scripts de fond de page en utilisant les balises <script>. Ce bug est résolu dans Firefox 50, et à partir de ce moment, les scripts sont toujours chargés dans l'ordre indiqué dans le tableau.

-
"page" -
-

Note : Si vous souhaitez récupérer un script à partir d'un emplacement distant avec la balise <script> (par exemple : <script src = "https://code.jquery.com/jquery-1.7.1.min.js"> ), vous devrez également modifier la clé content_security_policy dans le fichier manifest.json de votre extension.

-
- -

Si vous spécifiez des "scripts", une page vide sera créée pour que vos scripts s'exécutent.

- -

Si vous avez besoin de contenu particulier dans la page, vous pouvez définir votre propre page en utilisant l'option "page".

- -

Si vous utilisez cette propriété, vous ne pouvez plus spécifier de scripts de fond à l'aide de «scripts», mais vous pouvez inclure vos propres scripts à partir de la page, tout comme dans une page Web normale.

-
- -

Exemple

- -
 "background": {
-    "scripts": ["jquery.js", "my-background.js"]
-  }
- -

Chargez deux scripts de fond.

- -
  "background": {
-    "page": "my-background.html"
-  }
- -

Chargez une page d'arrière-plan personnalisée.

- -

Compatibilité du navigateur

- - - -

{{Compat("webextensions.manifest.background", 10)}}

diff --git a/files/fr/mozilla/add-ons/webextensions/manifest.json/auteur/index.html b/files/fr/mozilla/add-ons/webextensions/manifest.json/auteur/index.html deleted file mode 100644 index a00c7dab33..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/manifest.json/auteur/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: author -slug: Mozilla/Add-ons/WebExtensions/manifest.json/auteur -tags: - - Add-ons - - Extensions - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/author ---- -
{{AddonSidebar}}
- - - - - - - - - - - - - - - - -
Typechaîne de caractères
ObligatoireNon
Exemple - 
-"author": "Walt Whitman"
-
- -

L'auteur de l'extension, destiné à être visualisé dans l'interface utilisateur du navigateur. Si la clé du developpeur est fournie et qu'elle contient la propriété "nom", elle remplacera la clé de l'auteur. Il n'y a aucun moyen de spécifier plusieurs auteurs.

- -

Notez que Firefox ne supporte cette clé qu'à partir de la version 52 et que cette clé est obligatoire dans Microsoft Edge.

- -

Exemple

- -
"author": "Walt Whitman"
- -

Compatibilité des navigateurs

- - - -

{{Compat("webextensions.manifest.author")}}

diff --git a/files/fr/mozilla/add-ons/webextensions/manifest.json/author/index.html b/files/fr/mozilla/add-ons/webextensions/manifest.json/author/index.html new file mode 100644 index 0000000000..a00c7dab33 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/manifest.json/author/index.html @@ -0,0 +1,44 @@ +--- +title: author +slug: Mozilla/Add-ons/WebExtensions/manifest.json/auteur +tags: + - Add-ons + - Extensions + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/author +--- +
{{AddonSidebar}}
+ + + + + + + + + + + + + + + + +
Typechaîne de caractères
ObligatoireNon
Exemple + 
+"author": "Walt Whitman"
+
+ +

L'auteur de l'extension, destiné à être visualisé dans l'interface utilisateur du navigateur. Si la clé du developpeur est fournie et qu'elle contient la propriété "nom", elle remplacera la clé de l'auteur. Il n'y a aucun moyen de spécifier plusieurs auteurs.

+ +

Notez que Firefox ne supporte cette clé qu'à partir de la version 52 et que cette clé est obligatoire dans Microsoft Edge.

+ +

Exemple

+ +
"author": "Walt Whitman"
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("webextensions.manifest.author")}}

diff --git a/files/fr/mozilla/add-ons/webextensions/manifest.json/background/index.html b/files/fr/mozilla/add-ons/webextensions/manifest.json/background/index.html new file mode 100644 index 0000000000..4181a9e841 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/manifest.json/background/index.html @@ -0,0 +1,93 @@ +--- +title: background +slug: Mozilla/Add-ons/WebExtensions/manifest.json/arriere-plan +tags: + - Add-ons + - Extensions + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/background +--- +
{{AddonSidebar}}
+ + + + + + + + + + + + + + + + +
TypeObject
ObligatoireNo
Exemple + 
+"background": {
+  "scripts": ["background.js"]
+}
+
+ +

Utilisez la clé background pour inclure un ou plusieurs scripts d'arrière-plan, et éventuellement une page d'arrière-plan dans votre extension.

+ +

Les scripts d'arrière-plan sont l'endroit pour placer le code qui doit maintenir l'état à long terme, ou effectuer des opérations à long terme, indépendamment de la durée de vie de toutes les pages Web ou les fenêtres du navigateur.

+ +

Les scripts d'arrière-plan sont chargés dès que l'extension est chargée et restent chargés jusqu'à ce que l'extension soit désactivée ou désinstallée. Vous pouvez utiliser n'importe laquelle des WebExtension APIs dans le script, tant que vous avez demandé les permissions nécessaires.

+ +

Voir la section "Pages arrière-plan" dans l'anatomie d'une WebExtension pour plus de détails.

+ +

La clé background est un objet qui peut avoir l'une des deux propriétés suivantes, toutes deux facultatives :

+ + + + + + + + + + + + +
"scripts" +

Un ensemble de chaînes, chacune étant un chemin d'accès à une source JavaScript. Le chemin est relatif au fichier manifest.json lui-même. Ce sont les scripts d'arrière-plan qui seront inclus dans l'extension.

+ +

Les scripts partagent la même fenêtre globale.

+ +

Les scripts sont chargés dans l'ordre où 'ils apparaissent dans le tableau.

+ +

Notez qu'il y a un bug affectant les versions de Firefox antérieures à la version 50 : lorsque le débogueur Firefox est ouvert, les scripts ne sont pas toujours chargés dans l'ordre indiqué dans le tableau. Pour contourner ce bug, vous pouvez utiliser la propriété "page" et inclure des scripts de fond de page en utilisant les balises <script>. Ce bug est résolu dans Firefox 50, et à partir de ce moment, les scripts sont toujours chargés dans l'ordre indiqué dans le tableau.

+
"page" +
+

Note : Si vous souhaitez récupérer un script à partir d'un emplacement distant avec la balise <script> (par exemple : <script src = "https://code.jquery.com/jquery-1.7.1.min.js"> ), vous devrez également modifier la clé content_security_policy dans le fichier manifest.json de votre extension.

+
+ +

Si vous spécifiez des "scripts", une page vide sera créée pour que vos scripts s'exécutent.

+ +

Si vous avez besoin de contenu particulier dans la page, vous pouvez définir votre propre page en utilisant l'option "page".

+ +

Si vous utilisez cette propriété, vous ne pouvez plus spécifier de scripts de fond à l'aide de «scripts», mais vous pouvez inclure vos propres scripts à partir de la page, tout comme dans une page Web normale.

+
+ +

Exemple

+ +
 "background": {
+    "scripts": ["jquery.js", "my-background.js"]
+  }
+ +

Chargez deux scripts de fond.

+ +
  "background": {
+    "page": "my-background.html"
+  }
+ +

Chargez une page d'arrière-plan personnalisée.

+ +

Compatibilité du navigateur

+ + + +

{{Compat("webextensions.manifest.background", 10)}}

diff --git a/files/fr/mozilla/add-ons/webextensions/manifest.json/theme_experiment/index.html b/files/fr/mozilla/add-ons/webextensions/manifest.json/theme_experiment/index.html new file mode 100644 index 0000000000..f33a6478c4 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/manifest.json/theme_experiment/index.html @@ -0,0 +1,194 @@ +--- +title: theme expérimentation +slug: Mozilla/Add-ons/WebExtensions/manifest.json/theme_experimentation +tags: + - Add-ons + - Browser + - Customisation + - Customise + - Design + - Look and Feel + - Themes + - colors + - navigatuer + - theme manifest +translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/theme_experiment +--- +
{{AddonSidebar}}
+ + + + + + + + + + + + + + + + +
TypeObject
ObligatoireNon
Exemple + 
+"theme_experiment": {
+  "stylesheet": "style.css",
+  "colors": {
+    "popup_affordance": "--arrowpanel-dimmed"
+  },
+  "images": {
+    "theme_toolbar": "--toolbar-bgimage"
+  },
+  "properties": {
+    "toolbar_image_alignment":
+    "--toolbar-bgalignment"
+  }
+}
+
+ +
+

Cette clé permet de définir les propriétés de la clé expérimentale de theme pour l'interface Firefox. Ces expériences sont un précurseur pour proposer de nouvelles fonctionnalités thématiques à inclure dans Firefox. L'expérimentation se fait par:

+
+ +
+ +
+ +
+

Pour découvrir les sélecteurs CSS des éléments de l'interface utilisateur Firefox ou des variables CSS internes de Firefox, utilise la boite à outils du navigateur.

+
+ +
+
+

Cette clé est uniquement disponible pour une utilisation dans les canaux Firefox Developer Edition et Firefox Nightly et nécessite l'activation de la préférence extensions.legacy.enabled.

+
+
+ +
+
+

Cette fonctionnalité est expérimentale et peut être sujette à modification.

+
+
+ +

Syntaxe

+ +

La clé theme_experiment est un objet qui prend les propriétés suivantes :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NomTypeDescription
stylesheetString +

Facultatif

+ +

Nom d'une feuille de style fournissant le mappage des sélecteurs CSS des éléments de l'interface Firefox aux variables CSS.

+
imagesObject +

Facultatif

+ +

Mappings des variables CSS (telles que définies dans Firefox ou par la feuille de style définie dans la stylesheet) aux noms de propriétés images à utiliser dans la clé theme.

+
colorsObject +

Facultatif

+ +

Mappings des variables CSS (telles que définies dans Firefox ou par la feuille de style définie dans la stylesheet) aux noms de propriétés colors à utiliser dans la clé theme.

+
propertiesObject +

Facultatif

+ +

Mappings des variables CSS (telles que définies dans Firefox ou par la feuille de style définie dans la stylesheet) aux noms de propriétés properties à utiliser dans la clé theme.

+
+ +

Exemples

+ +
+

Ces exemples utilisent une feuille de style appelée style.css pour permettre de définir une couleur pour le bouton de recharge du navigateur dans la clé theme.

+
+ +
+

La feuille de style définit :

+
+ +
+
#reload-button {
+  fill: var(--reload-button-color);
+}
+
+
+ +
+

où #reload-button est le sélecteur CSS interne de Firefox pour le bouton reload et  --reload-button-color est un nom arbitraire..

+
+ +
+

Dans le fichier manifest.json, --reload-button-color est alors mappé au nom à utiliser dans la propriété theme colors :

+
+ +
+
"theme_experiment": {
+  "stylesheet": "style.css",
+  "colors": {
+    "reload_button": "--reload-button-color"
+  }
+}
+
+
+ +
+

L'argument reload_button est alors utilisé de la même manière que n'importe quelle autre propriété de theme .

+
+ +
+
"theme": {
+  "colors": {
+    "reload_button": "orange"
+  }
+}
+
+
+ +
+

Ceci a pour effet de rendre l'icône de recharge orange.

+
+ +
Outcome of a theme experiment, showing the reload button colored orange.
+ +
+ +
+

Cette propriété peut également être utilisée dans browser.theme.update(). images et  properties travaillent de la même manière que colors.

+
+ +

Compatibilité du navigateur

+ + + +

{{Compat("webextensions.manifest.theme_experiment")}}

diff --git a/files/fr/mozilla/add-ons/webextensions/manifest.json/theme_experimentation/index.html b/files/fr/mozilla/add-ons/webextensions/manifest.json/theme_experimentation/index.html deleted file mode 100644 index f33a6478c4..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/manifest.json/theme_experimentation/index.html +++ /dev/null @@ -1,194 +0,0 @@ ---- -title: theme expérimentation -slug: Mozilla/Add-ons/WebExtensions/manifest.json/theme_experimentation -tags: - - Add-ons - - Browser - - Customisation - - Customise - - Design - - Look and Feel - - Themes - - colors - - navigatuer - - theme manifest -translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/theme_experiment ---- -
{{AddonSidebar}}
- - - - - - - - - - - - - - - - -
TypeObject
ObligatoireNon
Exemple - 
-"theme_experiment": {
-  "stylesheet": "style.css",
-  "colors": {
-    "popup_affordance": "--arrowpanel-dimmed"
-  },
-  "images": {
-    "theme_toolbar": "--toolbar-bgimage"
-  },
-  "properties": {
-    "toolbar_image_alignment":
-    "--toolbar-bgalignment"
-  }
-}
-
- -
-

Cette clé permet de définir les propriétés de la clé expérimentale de theme pour l'interface Firefox. Ces expériences sont un précurseur pour proposer de nouvelles fonctionnalités thématiques à inclure dans Firefox. L'expérimentation se fait par:

-
- -
- -
- -
-

Pour découvrir les sélecteurs CSS des éléments de l'interface utilisateur Firefox ou des variables CSS internes de Firefox, utilise la boite à outils du navigateur.

-
- -
-
-

Cette clé est uniquement disponible pour une utilisation dans les canaux Firefox Developer Edition et Firefox Nightly et nécessite l'activation de la préférence extensions.legacy.enabled.

-
-
- -
-
-

Cette fonctionnalité est expérimentale et peut être sujette à modification.

-
-
- -

Syntaxe

- -

La clé theme_experiment est un objet qui prend les propriétés suivantes :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NomTypeDescription
stylesheetString -

Facultatif

- -

Nom d'une feuille de style fournissant le mappage des sélecteurs CSS des éléments de l'interface Firefox aux variables CSS.

-
imagesObject -

Facultatif

- -

Mappings des variables CSS (telles que définies dans Firefox ou par la feuille de style définie dans la stylesheet) aux noms de propriétés images à utiliser dans la clé theme.

-
colorsObject -

Facultatif

- -

Mappings des variables CSS (telles que définies dans Firefox ou par la feuille de style définie dans la stylesheet) aux noms de propriétés colors à utiliser dans la clé theme.

-
propertiesObject -

Facultatif

- -

Mappings des variables CSS (telles que définies dans Firefox ou par la feuille de style définie dans la stylesheet) aux noms de propriétés properties à utiliser dans la clé theme.

-
- -

Exemples

- -
-

Ces exemples utilisent une feuille de style appelée style.css pour permettre de définir une couleur pour le bouton de recharge du navigateur dans la clé theme.

-
- -
-

La feuille de style définit :

-
- -
-
#reload-button {
-  fill: var(--reload-button-color);
-}
-
-
- -
-

où #reload-button est le sélecteur CSS interne de Firefox pour le bouton reload et  --reload-button-color est un nom arbitraire..

-
- -
-

Dans le fichier manifest.json, --reload-button-color est alors mappé au nom à utiliser dans la propriété theme colors :

-
- -
-
"theme_experiment": {
-  "stylesheet": "style.css",
-  "colors": {
-    "reload_button": "--reload-button-color"
-  }
-}
-
-
- -
-

L'argument reload_button est alors utilisé de la même manière que n'importe quelle autre propriété de theme .

-
- -
-
"theme": {
-  "colors": {
-    "reload_button": "orange"
-  }
-}
-
-
- -
-

Ceci a pour effet de rendre l'icône de recharge orange.

-
- -
Outcome of a theme experiment, showing the reload button colored orange.
- -
- -
-

Cette propriété peut également être utilisée dans browser.theme.update(). images et  properties travaillent de la même manière que colors.

-
- -

Compatibilité du navigateur

- - - -

{{Compat("webextensions.manifest.theme_experiment")}}

diff --git a/files/fr/mozilla/add-ons/webextensions/manifests_native/index.html b/files/fr/mozilla/add-ons/webextensions/manifests_native/index.html deleted file mode 100644 index c9c68b6304..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/manifests_native/index.html +++ /dev/null @@ -1,309 +0,0 @@ ---- -title: manifests Natif -slug: Mozilla/Add-ons/WebExtensions/manifests_native -tags: - - Extensions - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/Native_manifests ---- -
{{AddonSidebar}}
- -

Les manifests natifs sont des fichiers JSON spécialement formatés qui sont provisionnés sur l'ordinateur de l'utilisateur par un autre moyen que le processus d'installation de l'extension. Par exemple, un manifest natif peut être fourni par un administrateur de périphérique ou par un programme d'installation d'application natif.

- -

Il existe trois types différents de manifest natif :

- - - - - - - - - - - - - - - - -
Les manifests de messagerie natifActivez une fonctionnalité appelée native messaging, dans laquelle une extension peut communiquer avec une application native installée sur l'appareil.
Manifest de gestion de stockageDéfinissez les données en lecture seule auxquelles une extension peut accéder à l'aide de l'API {{WebExtAPIRef("storage.managed")}}.
PKCS #11 manifestsActivez une extension pour utiliser l'API  {{WebExtAPIRef("pkcs11")}} afin d'énumérer les modules de sécurité PKCS #11 et installez-les dans Firefox.
- -

Pour tous les manifests natifs, vous devez arranger les choses afin que le navigateur puisse trouver le manifest. La section sur l'emplacement du manifest décrit ces règles.

- -

Les manifests de messagerie natif

- -

Le manifest de messagerie natif contient un seul objet JSON avec les propriétés suivantes :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
nameString -

Nom de l'application native.

- -

Cela doit correspondre au nom passé dans  {{WebExtAPIRef("runtime.connectNative()")}} ou {{WebExtAPIRef("runtime.sendNativeMessage()")}} par l'extension.

- -

Sur OS X et Linux, il doit également correspondre au nom de fichier du manifest de messagerie natif (à l'exclusion de l'extension ".json").

- -

Sous Windows, il doit correspondre au nom de la clé de registre que vous créez, qui contient l'emplacement du manifest de messagerie natif.

- -

Le nom doit correspondre à l'expression régulière suivante : "^\w+(\.\w+)*$". Cela signifie qu'il ne peut contenir que des caractères alphanumériques (minuscules ou majuscules), des traits de soulignement et des points. Il ne peut pas commencer ou se terminer par un point, et un point ne peut pas être suivi d'un autre point.

-
descriptionStringDescription de l'application native.
pathString -

Chemin vers l'application native.

- -

Sous Windows, cela peut être relatif au manifest lui-même. Sur OS X et Linux, il doit être absolu.

-
typeString -

Décrit la méthode utilisée pour connecter l'extension à l'application.

- -

Actuellement, une seule valeur peut être donnée ici, "stdio", qui indique que les messages sont reçus par l'application en utilisant l'entrée standard (stdin) et envoyés en utilisant la sortie standard (stdout).

-
allowed_extensionsArray of String -

Un tableau de valeurs d'ID d'extensions. Chaque valeur représente une extension qui est autorisée à communiquer avec cette application native.

- -

Notez que cela signifie que vous voudrez probablement inclure la clé des browser_specific_settings dans le fichier manifest.json de votre extension, afin de pouvoir définir un identifiant explicite lors du développement..

-
- -

Par exemple, voici un manifest pour l'application native "ping_pong":

- -
{
-  "name": "ping_pong",
-  "description": "Example host for native messaging",
-  "path": "/path/to/native-messaging/app/ping_pong.py",
-  "type": "stdio",
-  "allowed_extensions": [ "ping_pong@example.org" ]
-}
- -

This allows the extension whose ID is "ping_pong@example.org" to connect, by passing the name "ping_pong" into the relevant {{WebExtAPIRef("runtime")}} API function. The application itself is at "/path/to/native-messaging/app/ping_pong.py".

- -

Manifest de gestion de stockage

- -

Le manifest de stockage géré contient un seul objet JSON avec les propriétés suivantes :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
nameString -

ID de l'extension pouvant accéder à ce stockage, donné comme ID que vous avez spécifié dans la clé d'application de l'extension.

-
descriptionStringDescription lisible par l'homme, ignorée par Firefox
typeString -

Cela doit être "storage".

-
dataObject -

Un objet JSON pouvant contenir des valeurs JSON valides, y compris des chaînes, des nombres, des booléens, des tableaux ou des objets. This will become the data in the browser.storage.managed storage area.

-
- -

Par exemple :

- -
{
-  "name": "favourite-colour-examples@mozilla.org",
-  "description": "ignored",
-  "type": "storage",
-  "data":
-  {
-    "colour": "management thinks it should be blue!"
-  }
-}
- -

Etant donné ce manifest JSON, l'extension "favourite-colour-examples@mozilla.org" pourrait accéder aux données en utilisant un code comme celui-ci:

- -
var storageItem = browser.storage.managed.get('colour');
-storageItem.then((res) => {
-  console.log(`Managed colour is: ${res.colour}`);
-});
- -

PKCS #11 manifests

- -

Le manifest PKCS #11 est un fichier contenant un objet JSON avec les propriétés suivantes :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
nameString -

Nom du module PKCS #11.

- -

Cela doit correspondre au nom utilisé dans l'API pkcs11 .

- -

Sur OS X et Linux, il doit également correspondre au nom de fichier du manifest (à l'exclusion de l'extension).

- -

Sous Windows, il doit correspondre au nom de la clé de registre que vous créez, qui contient l'emplacement du manifest.

- -

Le nom doit correspondre à l'expression régulière suivante : "^\w+(\.\w+)*$". Cela signifie qu'il ne peut contenir que des caractères alphanumériques minuscules, des traits de soulignement et des points. Il ne peut pas commencer ou se terminer par un point, et un point ne peut pas être suivi d'un autre point.

-
descriptionString -

Description du module.

- -

Ceci est utilisé pour définir le nom convivial du module dans l'interface utilisateur du navigateur (par exemple, la boîte de dialogue "Security Devices" dans Firefox).

-
pathString -

Chemin d'accès au module.

- -

Sous Windows, cela peut être relatif au manifest lui-même. Sur OS X et Linux, il doit être absolu

-
typeStringCela doit être "pkcs11".
allowed_extensionsArray of String -

Un tableau de valeurs d'ID de l'extension. Chaque valeur représente une extension qui est autorisée à interagir avec le module.

- -

Notez que cela signifie que vous voudrez probablement inclure la clé des applications dans le fichier manifest.json de votre extension, afin de pouvoir définir un identifiant explicite lors du développement.

-
- -

Par exemple :

- -
{
-  "name": "my_module",
-  "description": "My test module",
-  "type": "pkcs11",
-  "path": "/path/to/libpkcs11testmodule.dylib",
-  "allowed_extensions": ["my-extension@mozilla.org"]
-}
- -

Compte tenu de ce manifest JSON, enregistré sous le nom ""my_module.json", l'extension "my-extension@mozilla.org" pourrait installer le module de sécurité dans "/path/to/libpkcs11testmodule.dylib" en utilisant le code suivant :

- -
browser.pkcs11.installModule("my_module");
- -

Emplacement du manifest

- -

Sous Linux et Mac OS X, vous devez stocker le manifest dans un endroit particulier. Sous Windows, vous devez créer une clé de registre qui pointe vers l'emplacement du manifest.

- -

Les règles détaillées sont les mêmes pour tous les types de manifest, sauf que l'avant-dernier composant du chemin identifie le type de manifest. Les exemples ci-dessous montrent la forme pour chacun des trois types différents. Dans tous les exemples, <name> est la valeur de la propriété name dans le manifest.

- -

Windows

- -

Pour une visibilité globale, créez une clé de registre avec le nom suivant :

- -
HKEY_LOCAL_MACHINE\SOFTWARE\Mozilla\NativeMessagingHosts\<name>
-HKEY_LOCAL_MACHINE\SOFTWARE\Mozilla\ManagedStorage\<name>
-HKEY_LOCAL_MACHINE\SOFTWARE\Mozilla\PKCS11Modules\<name>
- -

La clé doit avoir une seule valeur par défaut, qui est le chemin d'accès au manifest.

- -

A partir de Firefox 64, la vue registre 32 bits (Wow6432Node) sera d'abord vérifiée pour ces clés, puis la vue registre "native". Utilisez celui qui convient le mieux à votre application. 

- -

Pour Firefox 63 et les versions antérieures, cette clé ne doit pas être créée sous Wow6432Node, même si l'application est en 32 bits. Les versions précédentes du navigateur chercheront toujours la clé dans la vue "native" du registre, et non dans l'émulation 32 bits. Pour vous assurer que la clé est créée dans la vue "native", vous pouvez passer les indicateurs KEY_WOW64_64KEY ou KEY_WOW64_32KEY dans RegCreateKeyEx. Voir Accès à une autre vue de registre.

- -

Pour une visibilité par utilisateur, créez une clé de registre avec le nom suivant :

- -
HKEY_CURRENT_USER\SOFTWARE\Mozilla\NativeMessagingHosts\<name>
-HKEY_CURRENT_USER\SOFTWARE\Mozilla\ManagedStorage\<name>
-HKEY_CURRENT_USER\SOFTWARE\Mozilla\PKCS11Modules\<name>
- -

La clé doit avoir une seule valeur par défaut, qui est le chemin d'accès au manifest.

- -

Mac OS X

- -

Pour une visibilité globale, stockez le manifest dans :

- -
/Library/Application Support/Mozilla/NativeMessagingHosts/<name>.json
-/Library/Application Support/Mozilla/ManagedStorage/<name>.json
-/Library/Application Support/Mozilla/PKCS11Modules/<name>.json
- -

Pour la visibilité par utilisateur, stockez le manifest dans :

- -
~/Library/Application Support/Mozilla/NativeMessagingHosts/<name>.json
-~/Library/Application Support/Mozilla/ManagedStorage/<name>.json
-~/Library/Application Support/Mozilla/PKCS11Modules/<name>.json
-
- -

Linux

- -

Pour une visibilité globale, stockez le manifest dans :

- -
/usr/lib/mozilla/native-messaging-hosts/<name>.json
-/usr/lib/mozilla/managed-storage/<name>.json
-/usr/lib/mozilla/pkcs11-modules/<name>.json
-
- -

ou :

- -
/usr/lib64/mozilla/native-messaging-hosts/<name>.json
-/usr/lib64/mozilla/managed-storage/<name>.json
-/usr/lib64/mozilla/pkcs11-modules/<name>.json
- -

Pour la visibilité par utilisateur, stockez le manifest dans :

- -
~/.mozilla/native-messaging-hosts/<name>.json
-~/.mozilla/managed-storage/<name>.json
-~/.mozilla/pkcs11-modules/<name>.json
diff --git a/files/fr/mozilla/add-ons/webextensions/native_manifests/index.html b/files/fr/mozilla/add-ons/webextensions/native_manifests/index.html new file mode 100644 index 0000000000..c9c68b6304 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/native_manifests/index.html @@ -0,0 +1,309 @@ +--- +title: manifests Natif +slug: Mozilla/Add-ons/WebExtensions/manifests_native +tags: + - Extensions + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Native_manifests +--- +
{{AddonSidebar}}
+ +

Les manifests natifs sont des fichiers JSON spécialement formatés qui sont provisionnés sur l'ordinateur de l'utilisateur par un autre moyen que le processus d'installation de l'extension. Par exemple, un manifest natif peut être fourni par un administrateur de périphérique ou par un programme d'installation d'application natif.

+ +

Il existe trois types différents de manifest natif :

+ + + + + + + + + + + + + + + + +
Les manifests de messagerie natifActivez une fonctionnalité appelée native messaging, dans laquelle une extension peut communiquer avec une application native installée sur l'appareil.
Manifest de gestion de stockageDéfinissez les données en lecture seule auxquelles une extension peut accéder à l'aide de l'API {{WebExtAPIRef("storage.managed")}}.
PKCS #11 manifestsActivez une extension pour utiliser l'API  {{WebExtAPIRef("pkcs11")}} afin d'énumérer les modules de sécurité PKCS #11 et installez-les dans Firefox.
+ +

Pour tous les manifests natifs, vous devez arranger les choses afin que le navigateur puisse trouver le manifest. La section sur l'emplacement du manifest décrit ces règles.

+ +

Les manifests de messagerie natif

+ +

Le manifest de messagerie natif contient un seul objet JSON avec les propriétés suivantes :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDescription
nameString +

Nom de l'application native.

+ +

Cela doit correspondre au nom passé dans  {{WebExtAPIRef("runtime.connectNative()")}} ou {{WebExtAPIRef("runtime.sendNativeMessage()")}} par l'extension.

+ +

Sur OS X et Linux, il doit également correspondre au nom de fichier du manifest de messagerie natif (à l'exclusion de l'extension ".json").

+ +

Sous Windows, il doit correspondre au nom de la clé de registre que vous créez, qui contient l'emplacement du manifest de messagerie natif.

+ +

Le nom doit correspondre à l'expression régulière suivante : "^\w+(\.\w+)*$". Cela signifie qu'il ne peut contenir que des caractères alphanumériques (minuscules ou majuscules), des traits de soulignement et des points. Il ne peut pas commencer ou se terminer par un point, et un point ne peut pas être suivi d'un autre point.

+
descriptionStringDescription de l'application native.
pathString +

Chemin vers l'application native.

+ +

Sous Windows, cela peut être relatif au manifest lui-même. Sur OS X et Linux, il doit être absolu.

+
typeString +

Décrit la méthode utilisée pour connecter l'extension à l'application.

+ +

Actuellement, une seule valeur peut être donnée ici, "stdio", qui indique que les messages sont reçus par l'application en utilisant l'entrée standard (stdin) et envoyés en utilisant la sortie standard (stdout).

+
allowed_extensionsArray of String +

Un tableau de valeurs d'ID d'extensions. Chaque valeur représente une extension qui est autorisée à communiquer avec cette application native.

+ +

Notez que cela signifie que vous voudrez probablement inclure la clé des browser_specific_settings dans le fichier manifest.json de votre extension, afin de pouvoir définir un identifiant explicite lors du développement..

+
+ +

Par exemple, voici un manifest pour l'application native "ping_pong":

+ +
{
+  "name": "ping_pong",
+  "description": "Example host for native messaging",
+  "path": "/path/to/native-messaging/app/ping_pong.py",
+  "type": "stdio",
+  "allowed_extensions": [ "ping_pong@example.org" ]
+}
+ +

This allows the extension whose ID is "ping_pong@example.org" to connect, by passing the name "ping_pong" into the relevant {{WebExtAPIRef("runtime")}} API function. The application itself is at "/path/to/native-messaging/app/ping_pong.py".

+ +

Manifest de gestion de stockage

+ +

Le manifest de stockage géré contient un seul objet JSON avec les propriétés suivantes :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDescription
nameString +

ID de l'extension pouvant accéder à ce stockage, donné comme ID que vous avez spécifié dans la clé d'application de l'extension.

+
descriptionStringDescription lisible par l'homme, ignorée par Firefox
typeString +

Cela doit être "storage".

+
dataObject +

Un objet JSON pouvant contenir des valeurs JSON valides, y compris des chaînes, des nombres, des booléens, des tableaux ou des objets. This will become the data in the browser.storage.managed storage area.

+
+ +

Par exemple :

+ +
{
+  "name": "favourite-colour-examples@mozilla.org",
+  "description": "ignored",
+  "type": "storage",
+  "data":
+  {
+    "colour": "management thinks it should be blue!"
+  }
+}
+ +

Etant donné ce manifest JSON, l'extension "favourite-colour-examples@mozilla.org" pourrait accéder aux données en utilisant un code comme celui-ci:

+ +
var storageItem = browser.storage.managed.get('colour');
+storageItem.then((res) => {
+  console.log(`Managed colour is: ${res.colour}`);
+});
+ +

PKCS #11 manifests

+ +

Le manifest PKCS #11 est un fichier contenant un objet JSON avec les propriétés suivantes :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDescription
nameString +

Nom du module PKCS #11.

+ +

Cela doit correspondre au nom utilisé dans l'API pkcs11 .

+ +

Sur OS X et Linux, il doit également correspondre au nom de fichier du manifest (à l'exclusion de l'extension).

+ +

Sous Windows, il doit correspondre au nom de la clé de registre que vous créez, qui contient l'emplacement du manifest.

+ +

Le nom doit correspondre à l'expression régulière suivante : "^\w+(\.\w+)*$". Cela signifie qu'il ne peut contenir que des caractères alphanumériques minuscules, des traits de soulignement et des points. Il ne peut pas commencer ou se terminer par un point, et un point ne peut pas être suivi d'un autre point.

+
descriptionString +

Description du module.

+ +

Ceci est utilisé pour définir le nom convivial du module dans l'interface utilisateur du navigateur (par exemple, la boîte de dialogue "Security Devices" dans Firefox).

+
pathString +

Chemin d'accès au module.

+ +

Sous Windows, cela peut être relatif au manifest lui-même. Sur OS X et Linux, il doit être absolu

+
typeStringCela doit être "pkcs11".
allowed_extensionsArray of String +

Un tableau de valeurs d'ID de l'extension. Chaque valeur représente une extension qui est autorisée à interagir avec le module.

+ +

Notez que cela signifie que vous voudrez probablement inclure la clé des applications dans le fichier manifest.json de votre extension, afin de pouvoir définir un identifiant explicite lors du développement.

+
+ +

Par exemple :

+ +
{
+  "name": "my_module",
+  "description": "My test module",
+  "type": "pkcs11",
+  "path": "/path/to/libpkcs11testmodule.dylib",
+  "allowed_extensions": ["my-extension@mozilla.org"]
+}
+ +

Compte tenu de ce manifest JSON, enregistré sous le nom ""my_module.json", l'extension "my-extension@mozilla.org" pourrait installer le module de sécurité dans "/path/to/libpkcs11testmodule.dylib" en utilisant le code suivant :

+ +
browser.pkcs11.installModule("my_module");
+ +

Emplacement du manifest

+ +

Sous Linux et Mac OS X, vous devez stocker le manifest dans un endroit particulier. Sous Windows, vous devez créer une clé de registre qui pointe vers l'emplacement du manifest.

+ +

Les règles détaillées sont les mêmes pour tous les types de manifest, sauf que l'avant-dernier composant du chemin identifie le type de manifest. Les exemples ci-dessous montrent la forme pour chacun des trois types différents. Dans tous les exemples, <name> est la valeur de la propriété name dans le manifest.

+ +

Windows

+ +

Pour une visibilité globale, créez une clé de registre avec le nom suivant :

+ +
HKEY_LOCAL_MACHINE\SOFTWARE\Mozilla\NativeMessagingHosts\<name>
+HKEY_LOCAL_MACHINE\SOFTWARE\Mozilla\ManagedStorage\<name>
+HKEY_LOCAL_MACHINE\SOFTWARE\Mozilla\PKCS11Modules\<name>
+ +

La clé doit avoir une seule valeur par défaut, qui est le chemin d'accès au manifest.

+ +

A partir de Firefox 64, la vue registre 32 bits (Wow6432Node) sera d'abord vérifiée pour ces clés, puis la vue registre "native". Utilisez celui qui convient le mieux à votre application. 

+ +

Pour Firefox 63 et les versions antérieures, cette clé ne doit pas être créée sous Wow6432Node, même si l'application est en 32 bits. Les versions précédentes du navigateur chercheront toujours la clé dans la vue "native" du registre, et non dans l'émulation 32 bits. Pour vous assurer que la clé est créée dans la vue "native", vous pouvez passer les indicateurs KEY_WOW64_64KEY ou KEY_WOW64_32KEY dans RegCreateKeyEx. Voir Accès à une autre vue de registre.

+ +

Pour une visibilité par utilisateur, créez une clé de registre avec le nom suivant :

+ +
HKEY_CURRENT_USER\SOFTWARE\Mozilla\NativeMessagingHosts\<name>
+HKEY_CURRENT_USER\SOFTWARE\Mozilla\ManagedStorage\<name>
+HKEY_CURRENT_USER\SOFTWARE\Mozilla\PKCS11Modules\<name>
+ +

La clé doit avoir une seule valeur par défaut, qui est le chemin d'accès au manifest.

+ +

Mac OS X

+ +

Pour une visibilité globale, stockez le manifest dans :

+ +
/Library/Application Support/Mozilla/NativeMessagingHosts/<name>.json
+/Library/Application Support/Mozilla/ManagedStorage/<name>.json
+/Library/Application Support/Mozilla/PKCS11Modules/<name>.json
+ +

Pour la visibilité par utilisateur, stockez le manifest dans :

+ +
~/Library/Application Support/Mozilla/NativeMessagingHosts/<name>.json
+~/Library/Application Support/Mozilla/ManagedStorage/<name>.json
+~/Library/Application Support/Mozilla/PKCS11Modules/<name>.json
+
+ +

Linux

+ +

Pour une visibilité globale, stockez le manifest dans :

+ +
/usr/lib/mozilla/native-messaging-hosts/<name>.json
+/usr/lib/mozilla/managed-storage/<name>.json
+/usr/lib/mozilla/pkcs11-modules/<name>.json
+
+ +

ou :

+ +
/usr/lib64/mozilla/native-messaging-hosts/<name>.json
+/usr/lib64/mozilla/managed-storage/<name>.json
+/usr/lib64/mozilla/pkcs11-modules/<name>.json
+ +

Pour la visibilité par utilisateur, stockez le manifest dans :

+ +
~/.mozilla/native-messaging-hosts/<name>.json
+~/.mozilla/managed-storage/<name>.json
+~/.mozilla/pkcs11-modules/<name>.json
diff --git a/files/fr/mozilla/add-ons/webextensions/partage_d_objets_avec_des_scripts_de_page/index.html b/files/fr/mozilla/add-ons/webextensions/partage_d_objets_avec_des_scripts_de_page/index.html deleted file mode 100644 index 81ac2d7584..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/partage_d_objets_avec_des_scripts_de_page/index.html +++ /dev/null @@ -1,258 +0,0 @@ ---- -title: Partage d'objets avec des scripts de page -slug: Mozilla/Add-ons/WebExtensions/partage_d_objets_avec_des_scripts_de_page -tags: - - Add-ons - - Extensions - - Firefox - - Guide - - Mozilla - - Non-standard - - WebExtensions - - XPCOM - - script de contenu - - scripts de page -translation_of: Mozilla/Add-ons/WebExtensions/Sharing_objects_with_page_scripts ---- -
{{AddonSidebar}} -
-

Les techniques décrites dans cette section sont uniquement disponibles dans Firefox, et seulement à partir de Firefox 49

-
- -
-

En tant que développeur d'extensions, vous devez considérer que les scripts s'exécutant sur des pages Web arbitraires sont des codes hostiles dont le but est de voler les informations personnelles de l'utilisateur, d'endommager leur ordinateur ou de les attaquer d'une autre manière.

- -

L'isolation entre les scripts de contenu et les scripts chargés par les pages Web a pour but de rendre plus difficile la tâche des pages Web hostiles.

- -

Puisque les techniques décrites dans cette section décompose cet isolement, elles sont intrinsèquement dangereuses et devraient être utilisées avec beaucoup de soin.

-
-
- -

Comme les notes du guide de scripts de contenu, les scripts de contenu ne voient pas les modifications apportées au DOM par des scripts chargés par des pages Web.Cela signifie que, par exemple, si une page Web charge une bibliothèque comme jQuery, les scripts de contenu ne pourront pas l'utiliser et devront charger leur propre copie. À l'inverse, les scripts chargés par les pages Web ne peuvent pas voir les modifications apportées par les scripts de contenu.

- -

Cependant, Firefox fournit des API qui permettent aux scripts de contenu de :

- - - -

Vision Xray dans Firefox

- -

Dans Firefox, une partie de l'isolation entre les scripts de contenu et les scripts de pages est implémentée en utilisant une fonction appelée "Vision Xray". Lorsqu'un script dans une portée plus privilégiée accède à un objet défini dans une portée moins privilégiée, il ne voit que la "version native" de l'objet. Toutes les propriétés expando sont invisibles et si des propriétés de l'objet ont été redéfinies, il voit l'implémentation d'origine et non la version redéfinie.

- -

Le but de cette fonctionnalité est de rendre le script moins privilégié plus difficile à confondre le script plus privilégié en redéfinissant les propriétés natives des objets.

- -

Par exemple, lorsqu'un script de contenu accède à la fenêtre de la page, il ne voit aucune propriété ajoutée au script de la page, et si le script de la page a redéfini les propriétés de la fenêtre, le script de contenu verra la version originale .

- -

Pour l'histoire complète sur la vision Xray, voir les articles sur Vision Xray et la securité des Scripts.

- -

Accès aux objets de script de page à partir de scripts de contenu

- -

Dans Firefox, les objets DOM dans les scripts de contenu obtiennent une propriété supplémentaire wrappedJSObject. C'est une version "déballée" de l'objet, qui inclut toutes les modifications apportées à cet objet par les scripts de page.

- -

Prenons un exemple simple. Supposons qu'une page Web charge un script:

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8">
-  </head>
-  <body>
-    <script type="text/javascript" src="main.js"></script>
-  </body>
-</html>
- -

Le script ajoute une propriété expando à la fenêtre globale :

- -
// main.js
-
-var foo = "I'm defined in a page script!";
- -

La vision Xray signifie que si un script de contenu tente d'accéder à foo, il sera indéfini:

- -
// content-script.js
-
-console.log(window.foo); // undefined
- -

Dans Firefox, les scripts de contenu peuvent utiliser window.wrappedJSObject pour voir la propriété expando :

- -
// content-script.js
-
-console.log(window.wrappedJSObject.foo); // "I'm defined in a page script!"
- -

Notez qu'une fois que vous faites cela, vous ne pouvez plus compter sur les propriétés ou les fonctions de cet objet qui sont, ou font, ce que vous attendez. N'importe lequel d'entre eux, même les setters et les getters, aurait pu être redéfini par un code non fiable.

- -

Notez également que le déballage est transitif: lorsque vous utilisez wrappedJSObject, toutes les propriétés de l'objet déplié sont elles-mêmes dépliées (et donc peu fiables). C'est donc une bonne pratique, une fois que vous avez l'objet dont vous avez besoin, de le réemballer, ce que vous pouvez faire comme ceci:

- -
XPCNativeWrapper(window.wrappedJSObject.foo);
- -

voir le document vision Xray pour plus de détails à ce sujet.

- -

Partage d'objets de script de contenu avec des scripts de page

- -

Firefox fournit également des API permettant aux scripts de contenu de rendre les objets disponibles pour les scripts de page. Il y a plusieurs approches ici:

- - - -

exportFunction

- -

Étant donné une fonction définie dans le script de contenu, exportFunction() l'exporte vers la portée du script de page, afin que le script de page puisse l'appeler.

- -

Par exemple, considérons une extension qui a un script d'arrière-plan comme ceci :

- -
/*
-Execute content script in the active tab.
-*/
-function loadContentScript() {
-  browser.tabs.executeScript({
-    file: "/content_scripts/export.js"
-  });
-}
-
-/*
-Add loadContentScript() as a listener to clicks
-on the browser action.
-*/
-browser.browserAction.onClicked.addListener(loadContentScript);
-
-/*
-Show a notification when we get messages from
-the content script.
-*/
-browser.runtime.onMessage.addListener((message) => {
-  browser.notifications.create({
-    type: "basic",
-    title: "Message from the page",
-    message: message.content
-  });
-});
- -

Cela fait deux choses :

- - - -

Le script de contenu ressemble à ceci :

- -
/*
-Define a function in the content script's scope, then export it
-into the page script's scope.
-*/
-function notify(message) {
-  browser.runtime.sendMessage({content: "Function call: " + message});
-}
-
-exportFunction(notify, window, {defineAs:'notify'});
- -

Cela définit une fonction notify(), qui envoie simplement son argument au script d'arrière-plan. Il exporte ensuite la fonction vers la portée du script de page. Maintenant, le script de la page peut appeler cette fonction:

- -
window.notify("Message from the page script!");
- -

Pour l'histoire complète, voir Components.utils.exportFunction.

- -

cloneInto

- -

Étant donné un objet défini dans le script de contenu, cela crée un clone de l'objet dans la portée du script de page, rendant ainsi le clone accessible aux scripts de page. Par défaut, cela utilise l'agorithme clone structuré pour cloner l'objet, ce qui signifie que les fonctions de l'objet ne sont pas incluses dans le clone. Pour inclure des fonctions, passez l'option cloneFunctions.

- -

Par exemple, voici un script de contenu qui définit un objet contenant une fonction, puis le clone dans la portée du script de page :

- -
/*
-Create an object that contains functions in
-the content script's scope, then clone it
-into the page script's scope.
-
-Because the object contains functions,
-the cloneInto call must include
-the `cloneFunctions` option.
-*/
-var messenger = {
-  notify: function(message) {
-    browser.runtime.sendMessage({
-      content: "Object method call: " + message
-    });
-  }
-};
-
-window.wrappedJSObject.messenger = cloneInto(
-  messenger,
-  window,
-  {cloneFunctions: true});
- -

Maintenant les scripts de page vont voir une nouvelle propriété sur la fenêtre, messenger, qui a une fonction notify():

- -
window.messenger.notify("Message from the page script!");
- -

Pour l'histoire complète, voir Components.utils.cloneInto.

- -

Constructeurs du contexte de la page

- -

Sur l'objet fenêtre de xrayed, des constructeurs immaculés pour certains objets javascript intégrés tels que Object, Function ou Proxy et différentes classe DOM sont disponibles. XMLHttpRequest ne se comporte pas de cette manière, voir la section XHR and fetch pour plus de détails. Ils créeront des instances appartenant à la hiérarchie d'objets de la page global, puis retourneront un wrapper xray.

- -

Puisque les objets créés de cette manière appartiennent déjà à la page et que le script de contenu ne les renvoie pas à la page, il ne nécessitera pas de clonage ou d'exportation supplémentaire.

- -
/* javascript built-ins */
-
-const objA = new Object();
-const objB = new window.Object();
-
-console.log(
-  objA instanceof Object,                        // true
-  objB instanceof Object,                        // false
-  objA instanceof window.Object,                 // false
-  objB instanceof window.Object,                 // true
-  'wrappedJSObject' in objB                      // true; xrayed
-);
-
-objA.foo = "foo";
-objB.foo = "foo";                                // xray wrappers for plain javascript objects pass through property assignments
-objB.wrappedJSObject.bar = "bar";                // unwrapping before assignment does not rely on this special behavior
-
-window.wrappedJSObject.objA = objA;
-window.wrappedJSObject.objB = objB;              // automatically unwraps when passed to page context
-
-window.eval(`
-  console.log(objA instanceof Object);           // false
-  console.log(objB instanceof Object);           // true
-
-  console.log(objA.foo);                         // undefined
-  objA.baz = "baz";                              // Error: permission denied
-
-  console.log(objB.foo, objB.bar);               // "foo", "bar"
-  objB.baz = "baz";
-`);
-
-/* other APIs */
-
-const ev = new Event("click");
-
-console.log(
-  ev instanceof Event,                           // true
-  ev instanceof window.Event,                    // true; Event constructor is actually inherited from the xrayed window
-  'wrappedJSObject' in ev                        // true; is an xrayed object
-);
-
-ev.propA = "propA"                                // xray wrappers for native objects do not pass through assignments
-ev.propB = "wrapper";                             // define property on xray wrapper
-ev.wrappedJSObject.propB = "unwrapped";           // define same property on page object
-Reflect.defineProperty(ev.wrappedJSObject,        // privileged reflection can operate on less privileged objects
-  'propC', {
-     get: exportFunction(function() {             // getters must be exported like regular functions
-       return 'propC';
-     }
-  }
-);
-
-window.eval(`
-  document.addEventListener("click", (e) => {
-    console.log(e instanceof Event, e.propA, e.propB, e.propC);
-  });
-`);
-
-document.dispatchEvent(ev); // true, undefined, "unwrapped", "propC"
diff --git a/files/fr/mozilla/add-ons/webextensions/portage_d_une_extension_firefox_heritee/index.html b/files/fr/mozilla/add-ons/webextensions/portage_d_une_extension_firefox_heritee/index.html deleted file mode 100644 index 5227fba14b..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/portage_d_une_extension_firefox_heritee/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: Portage d'une extension Firefox héritée -slug: Mozilla/Add-ons/WebExtensions/Portage_d_une_extension_Firefox_heritee -tags: - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/Porting_a_legacy_Firefox_add-on ---- -
{{AddonSidebar}}
- -

Si vous avez développé une extension Firefox en utilisant une technologie héritée en utilisant XUL/XPCOM ou le kit d'extensions, cette page vous aidera à migrer votre extension pour utiliser les API WebExtensions. La norme pour créer des extensions pour Firefox consiste à utiliser les API WebExtensions. Ce sera le seul type d'extension pris en charge par Firefox d'ici la fin du mois de novembre 2017 avec la sortie de Firefox 57.

- -
-

La prise en charge des extensions utilisant XUL/XPCOM ou le SDK Add-on a été supprimée dans Firefox 57, publié en novembre 2017. Comme il n'y a pas de version supportée de Firefox permettant ces technologies, cette page sera supprimée d'ici décembre 2020.

-
- -

Démarrage rapide

- -
    -
  1. Obtenez une idée des principales choses que vous devrez modifier dans votre extension : - -
    2. -
  2. Réécrivez le code de votre extension. Voir ci-dessous les chemins de migration pour différents types d'extensions. A partir de Firefox 51, vous pouvez intégrer une extension construite à l'aide d'API WebExtension dans une extension bootstrap ou une extension SDK, et peut donc porter une extension héritée une pièce à la fois et avoir une extension fonctionnelle à chaque étape. Consultez  Embedded WebExtensions.
    3. -
  3. Lorsque vous êtes prêt à soumettre la version WebExtension de votre extension à AMO... attendez une minute... êtes-vous vraiment prêt ? En raison du modèle de permissions d'extensions, vous ne pouvez pas revenir de WebExtensions à l'utilisation d'un format d'extension hérité. Donc tester bien, car il s'agit d'un aller simple permanent. Consultez également l'exemple hybride ci-dessous. Si vous n'êtes pas prêt, vous pouvez intégrer votre WebExtension dans un conteneur d'extension existant, ce qui vous permet de tester votre migration d'extension mais encore de revenir si nécessaire en cas d'urgence.
    4. -
  4. Lorsque vous êtes vraiment prêt à soumettre la version WebExtension de votre extension à AMO, connectez d'abord votre ancienne ID d'extension au nouveau fichier manifest.json de WebExtension. Votre extension doit avoir le même ID que les versions précédentes. Copiez la valeur dans le champ "id" de votre fichier package.json dans le champ id dans la section des applications du fichier manifest.json WebExtension. Ensuite, vous pouvez soumettre votre mise à jour de l'extension à AMO comme vous le feriez normalement.
    5. -
- -
-

Notez qu'il s'agit d'une conversion unidirectionnelle: vous ne pouvez pas mettre à jour une WebExtension pour utiliser une technologie héritée. Cela signifie que vous devez être sûr que vous êtes prêt à vous engager aux WebExtensions avant de soumettre la mise à jour de l'extension à AMO.

-
- -

Chemin de migration

- -


- SDK Extensions

- -

Voici le tableau de comparaison montrant les APIs SDK et leurs homologues de format WebExtensions. Si vous ne voyez pas les API dont vous avez besoin pour utiliser les APIs  WebExtensions,  consultez ci-dessous pour savoir comment demander des API et aussi comment les implémenter.

- -

XUL/XPCOM Extensions

- -

Voici le tableau de comparaison montrant les APIs XUL/XPCOM et leurs homologues de format WebExtensions. Si vous ne voyez pas les API dont vous avez besoin pour utiliser les APIs  WebExtension, consultez ci-dessous pour savoir comment demander des API et aussi comment les implémenter.

- -

Vous ne trouvez pas les APIs WebExtensions dont vous avez besoin ?

- -

Développez les APIs WebExtension pour Firefox - Si vous êtes expérimenté avec l'infrastructure Mozilla et souhaitez développer des API WebExtensions directement pour Firefox, voici une liste d' APIs approuvées que vous pouvez commencer à contribuer.

- -

Expérimentez avec les nouvelles APIs WebExtension - Si vous souhaitez créer un prototype et un bricolage avec les API WebExtensions sans avoir à créer Firefox, les Expériences WebExtensions sont pour vous !

- -

Demandez une nouvelle API WebExtensions - Si vous souhaitez demander une nouvelle API WebExtensions, lisez cette page.

- -

Outils

- - - -

Documentation

- - - -

Contact

- - diff --git a/files/fr/mozilla/add-ons/webextensions/publishing_your_webextension/index.html b/files/fr/mozilla/add-ons/webextensions/publishing_your_webextension/index.html deleted file mode 100644 index 8f50b00eaf..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/publishing_your_webextension/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: Publier votre extension -slug: Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension -tags: - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/Package_your_extension_ ---- -
{{AddonSidebar}}
- -
-
-

Les extensions packagées dans Firefox sont appelées "fichiers XPI", qui sont des fichiers ZIP avec une extension différente.

- -

Vous n'avez pas besoin d'utiliser l'extension XPI lors du téléchargement vers AMO.

-
-
- -

Pendant le développement, votre extension sera constituée d'un répertoire contenant un fichier manifest.json et les autres fichiers dont elle a besoin : scripts, icônes, documents HTML, etc. Vous devez les zipper dans un seul fichier pour les télécharger vers AMO.

- -

La façon la plus pratique de compiler votre extension est d'utiliser la  build web-ext. Cet outil exclut automatiquement les fichiers qui sont généralement indésirables dans les paquets, comme les fichiers .git . Sinon, suivez les instructions ci-dessous pour le système d'exploitation.

- -
-

Astuce. Le fichier ZIP doit être un fichier ZIP des fichiers de l'extension elle-même, et non du répertoire qui les contient.

-
- -

Windows

- -
    -
  1. Ouvrez le répertoire contenant les fichiers de votre extension.
    2. -
  2. Sélectionnez tous les fichiers et répertoires nécessaires pour implémenter votre extension, excluez les fichiers qui ne sont pas nécessaires pour exécuter l'extension, tels que .git, les sources graphiques et les fichiers similaires.
    3. -
  3. Ouvrez le menu contextuel et cliquez sur Envoyer dans le dossier compressé (zipped).
    4. -
- -

Illustration of how to use the send to compress folder feature in File Explorer to create a web extension package.

- -

macOS

- -
    -
  1. Ouvrez le répertoire contenant les fichiers de votre extension.
    2. -
  2. Sélectionnez tous les fichiers et répertoires nécessaires pour implémenter votre extension, excluez les fichiers qui ne sont pas nécessaires pour exécuter l'extension, tels que .git, les sources graphiques et les fichiers similaires.
    3. -
  3. Ouvrez le menu contextuel et cliquez Compress n éléments.
    4. -
- -

Illustration of how to use the compress feature in Finder to create a web extinction package.

- -
-
Voir http://www.info-zip.org/mans/zip.html.
-
- -

Linux / macOS Terminal

- -
    -
  1. Ouvrir un Terminal.
    2. -
  2. Ouvrez le répertoire contenant les fichiers de votre extension, en utilisant la commande
    - cd path/to/my-extension/
    3. -
  3. ZIPez le contenu du répertoire en vous souvenant d'exclure les fichiers qui ne sont pas nécessaires à l'exécution de l'extension, tels que .git, les sources graphiques, et les fichiers similaires - en utilisant la commande
    - zip -r -FS ../my-extension.zip * --exclude *.git*
    4. -
diff --git a/files/fr/mozilla/add-ons/webextensions/que_faire_ensuite/index.html b/files/fr/mozilla/add-ons/webextensions/que_faire_ensuite/index.html deleted file mode 100644 index aabc4dccba..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/que_faire_ensuite/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: Que faire ensuite ? -slug: Mozilla/Add-ons/WebExtensions/que_faire_ensuite -tags: - - Débutant - - Extensions - - WebExtension -translation_of: Mozilla/Add-ons/WebExtensions/What_next_ ---- -
{{AddonSidebar}}
- -

Vous serez maintenant prêt à commencer à transformer votre idée pour une extension de navigateur dans la réalité. Avant de commencer ce périple, ça vaut la peine d'être au courant de quelques choses  qui vous aides à en faire une.

- -

Vous pouvez trouver plus d'informations sur de nombreux sujets abordés sur cette page sur l'atelier d'extension, un site web dédié à vous aider à écrire, tester, publier et distribuer des extensions pour Firefox.

- -

Votre environnement de développement

- -

Vous n'avez pas besoin d'outils spéciaux de développement ou de création d'environnement pour créer des extensions de navigateur : il est tout à fait possible de créer de superbes extensions de navigateur avec un simple éditeur de texte. Cependant, vous avez peut-être développé pour le Web et avez un ensemble d'outils et un environnement que vous souhaitez réutiliser. Si vous le faites, vous devez être conscient de certaines choses.

- -

Si vous utilisez des outils de minimisation ou d'obscurcissement pour fournir votre code final, vous devez fournir votre code source au processus de révision AMO. De plus, les outils que vous utilisez — minification, obscurcissement et construction — doivent être open source (ou offrir une utilisation gratuite illimitée) et être disponible pour fonctionner sur l'ordinateur de l'utilisateur  (Windows, Mac, ou Linux). Malheureusement, nos réviseurs ne peuvent pas travailler avec des outils commerciaux ou basés sur le Web.

- -

En savoir plus sur les outils de développement sur l'atelier d'extensions

- -

Bibliothèques tierces

- -

Les bibliothèques tierces sont un excellent moyen d'ajouter rapidement des fonctionnalités ou fonctionnalités complexes aux extensions de votre navigateur. Lorsque vous soumettez une extension au processus de révision AMO, le processus considère également les bibliothèques tierces utilisées. Pour rationaliser la révision, assurez-vous de toujours télécharger des bibliothèques tierces à partir de leur site Web officiel ou référentiel, et si la bibliothèque est minifiée, fournissez un lien vers le code source. Veuillez noter que les bibliothèques tierces ne peuvent être modifiées d'aucune façon.

- -

En savoir plus sur la soumission du code source sur l'atelier d'extensions

- -

L'accord de distribution des modules complémentaires de   Firefox

- -

Les extensions de navigateur doivent être signées pour être installées dans les réalisations ou versions bêta de Firefox. La signature a lieu dans addons.mozilla.org (AMO) et est soumise aux termes et conditions du contrat de distribution de Firefox Add-on. L'objectif de l'accord est de garantir que les utilisateurs de Firefox aient accès à des modules complémentaires de qualité et bien supportés qui améliorent l'expérience de Firefox.

- -

Lire l'accord sur l'atelier d'extensions

- -

En savoir plus sur la signature de l'atelier extensions

- -

Le processus d'examen

- -

Lorsqu'une extension de navigateur est soumise à la signature, elle fait l'objet d'un examen automatisé. Il peut également faire l'objet d'un examen manuel lorsque l'examen automatisé détermine qu'un examen manuel est nécessaire. L'extension de votre navigateur ne sera pas signée tant qu'elle ne sera pas approuvée automatiquement et que sa signature sera révoquée si elle échoue à l'examen manuel. Le processus de révision suit un ensemble de directives strictes, il est donc facile de vérifier et d'éviter tout problème de révision probable.

- -

Consultez la politique de révision et les lignes directrices sur l'atelier d'extensions

- -

AMO a présenté des extensions de navigateur

- -

Si vous choisissez de lister l'extension de votre navigateur sur AMO, votre extension pourrait figurer sur le site Web d'AMO, dans le gestionnaire de modules complémentaires du navigateur Firefox ou ailleurs sur un site Web de Mozilla. Nous avons compilé une liste de directives sur la manière dont les extensions sont sélectionnées pour être mises en avant. En suivant ces directives, vous donnez à votre extension les meilleures chances d'être sélectionnée.

- -

En savoir plus sur la  façon de faire figurer vos modules complémentaires dans l'atelier d'extension

- -

Continuez votre expérience d'apprentissage

- -

Maintenant, vous savez ce qui nous attend, il est temps de plonger dans plus de détails sur le développement de l'extension du navigateur. Dans les sections suivantes, vous découvrirez :

- - - -

Vous voudrez également vous rendre à l'Atelier des extensions où vous trouverez tout ce que vous devez savoir sur la création d'extensions pour Firefox, notamment :

- - diff --git a/files/fr/mozilla/add-ons/webextensions/que_signifie_le_rejet_d_une_revision_pour_les_utilisateurs/index.html b/files/fr/mozilla/add-ons/webextensions/que_signifie_le_rejet_d_une_revision_pour_les_utilisateurs/index.html deleted file mode 100644 index df7532390b..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/que_signifie_le_rejet_d_une_revision_pour_les_utilisateurs/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: Que signifie le rejet d'une révision pour les utilisateurs ? -slug: >- - Mozilla/Add-ons/WebExtensions/que_signifie_le_rejet_d_une_revision_pour_les_utilisateurs -tags: - - Add-ons - - Extensions - - Guide - - Review - - WebExtensions - - publication -translation_of: Mozilla/Add-ons/WebExtensions/What_does_review_rejection_mean_to_users ---- -

{{AddonSidebar}}

- -

Cet article explique comment les utilisateurs et les personnes à la recherche de votre extension sont affectés si vous obtenez un rejet du processus de révision Mozilla.

- -

Aperçu de l'examen

- -

Toute extension que vous soumettez à addons.mozilla.org (AMO) fait l'objet de deux évaluations. Il y a une validation machine de votre extension dans le cadre du flux de soumission, et un examen humain qui a lieu après la publication de votre extension.

- -

La validation de la machine vous indique immédiatement si quelque chose doit être corrigé pour permettre la publication de votre extension. L'examen humain a lieu après la publication et peut avoir lieu à tout moment. Au début de cet examen, l'examinateur peut demander des éclaircissements au sujet de votre prolongation. Le résultat de l'examen pourrait être le rejet de la dernière version de votre extension, et le rejet des versions antérieures non révisées si elles contiennent également des problèmes.

- -

Pour plus d'informations sur ces processus, voir Soumission d'un add-on et de la politiques Add-on.

- -

Incidence du rejet de l'examen

- -

Si votre prolongation est rejetée par l'examen humain :

- - - -

Les personnes qui ont installé votre extension ne remarqueront aucun changement suite au rejet de la révision ; elles pourront continuer à utiliser votre extension comme d'habitude.

- -

Liste de blocage

- -

La liste de blocage est un mécanisme qui permet à Mozilla d'empêcher l'utilisation d'une extension dans Firefox (un bloc dur) ou de demander aux utilisateurs de confirmer qu'ils souhaitent exécuter l'extension (un bloc mou).

- -

Si vous ne répondez pas à la rétroaction d'examen et ne corrigez pas rapidement les problèmes, votre prolongation pourrait être considérée pour l'inscription sur la liste de blocage, particulièrement si les problèmes identifiés ont trait à des vulnérabilités critiques en matière de sécurité, de stabilité ou de rendement. Cependant, si votre extension est délibérément malveillante ou abusive, elle peut être bloquée sans notification.

- -

Pour plus d'informations sur la liste de blocage, voir Liste de blocage dans le wiki Mozilla.

diff --git a/files/fr/mozilla/add-ons/webextensions/safely_inserting_external_content_into_a_page/index.html b/files/fr/mozilla/add-ons/webextensions/safely_inserting_external_content_into_a_page/index.html new file mode 100644 index 0000000000..2365874169 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/safely_inserting_external_content_into_a_page/index.html @@ -0,0 +1,103 @@ +--- +title: Insérer en toute sécurité du contenu externe dans une page +slug: >- + Mozilla/Add-ons/WebExtensions/inserer_en_toute_securite_du_contenu_externe_dans_une_page +tags: + - Add-ons + - Comment + - Débutant + - Extensions + - How-to + - Sécurité + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Safely_inserting_external_content_into_a_page +--- +

{{AddonSidebar}}

+ +

Il y a des moments où vous pourriez vouloir ou devez inclure du contenu d'une source externe dans votre extension. Cependant, il existe un risque que des scripts malveillants soient intégrés à la source, soit par le développeur de la source, soit par une tierce partie malveillante.

+ +

Prenez un lecteur RSS à titre d'exemple. Vous ne savez pas quels flux RSS votre extension va ouvrir et n'ont aucun contrôle sur le contenu de ces flux RSS. Ainsi, il est possible que l'utilisateur puisse s'abonner à un flux où, par exemple, le titre d'un élément de fil inclut un script. Cela pourrait être quelque chose d'aussi simple que d'inclure du code JavaScript dans les balises <script></script>. Si vous deviez extraire le titre, supposer qu'il s'agissait d'un texte brut et l'ajouter au DOM d'une page créée par votre extension, votre script a maintenant un script inconnu dans son navigateur. Par conséquent, il faut prendre soin d'éviter d'évaluer du texte arbitraire au format HTML.

+ +

Vous devez également vous souvenir que les extensions ont des contextes privilégiés, par exemple dans les scripts d'arrière-plan et les scripts de contenu. Dans le pire des cas, un script incorporé peut s'exécuter dans l'un de ces contextes, une situation connue sous le nom d'escalade de privilèges. Cette situation peut laisser le navigateur d'un utilisateur ouvert à une attaque à distance en permettant au site Web qui a injecté le code d'accéder à des données utilisateur critiques, telles que des mots de passe, l'historique du navigateur ou le comportement de navigation.

+ +

Cet article examine comment travailler en toute sécurité avec des données distantes et l'ajouter à un DOM.

+ +

Travailler avec des chaînes arbitraires

+ +

Lorsque vous travaillez avec des chaînes, il existe quelques options recommandées pour les ajouter en toute sécurité à une page : les méthodes de création de nœuds DOM standard ou jQuery.

+ +

Méthodes de création de noeud DOM

+ +

Une approche légère pour insérer des chaînes dans une page consiste à utiliser les méthodes de manipulation DOM natives : document.createElement, Element.setAttribute, et Node.textContent. L'approche sécurisée consiste à créer les nœuds séparément et à affecter leur contenu à l'aide de textContent :

+ +
var data = JSON.parse(responseText);
+var div = document.createElement("div");
+div.className = data.className;
+div.textContent = "Your favorite color is now " + data.color;
+addonElement.appendChild(div);
+ +

Cette approche est sûre car l'utilisation de .textContent échappe automatiquement à tout code HTML distant dans data.color.

+ +

Cependant, attention, vous pouvez utiliser des méthodes natives qui ne sont pas sécurisées. Prenez le code suivant :

+ +
var data = JSON.parse(responseText);
+addonElement.innerHTML = "<div class='" + data.className + "'>" +
+                         "Your favorite color is now " + data.color +
+                         "</div>";
+ +

Ici, le contenu de data.className ou de data.color peut contenir du HTML qui peut fermer le tag plus tôt, insérer du contenu HTML arbitraire, puis ouvrir une autre balise.

+ +

jQuery

+ +

Lors de l'utilisation de jQuery, des fonctions telles que attr() et text() échappent au contenu lorsqu'il est ajouté à un DOM. Ainsi, l'exemple de "couleur préférée" ci-dessus, implémenté dans jQuery, ressemblerait à ceci:

+ +
var node = $("</div>");
+node.addClass(data.className);
+node.text("Your favorite color is now " + data.color);
+ +

Travailler avec du contenu HTML

+ +

Lorsque vous travaillez avec du contenu de source externe dont vous savez qu'il s'agit du code HTML, il est essentiel de nettoyer le code HTML avant de l'ajouter à une page. La meilleure pratique pour désinfecter le code HTML consiste à utiliser une bibliothèque de nettoyage HTML ou un moteur de modèle avec des fonctionnalités de nettoyage HTML. Dans cette section, nous examinons certains outils appropriés et comment les utiliser.

+ +

Désinfection HTML

+ +

Une bibliothèque de nettoyage HTML désactive tout ce qui pourrait conduire à l'exécution de scripts à partir du HTML, de sorte que vous pouvez injecter en toute sécurité des ensembles complets de nœuds HTML à partir d'une source distante dans votre DOM. DOMPurify, qui a été examiné par divers experts en sécurité, est une bibliothèque appropriée pour cette tâche dans les extensions.

+ +

Pour l'utilisation en production, DOMPurify cest disponible en version minifiée : purify.min.js. Vous pouvez utiliser ce script de la manière qui convient le mieux à votre extension. Par exemple, vous pouvez l'ajouter en tant que script de contenu :

+ +
"content_scripts": [
+  {
+    "matches" : ["<all_urls>"],
+    "js": ["purify.min.js", "myinjectionscript.js"]
+  }
+]
+ +

Ensuite, dans myinjectionscript.js, vous pouvez lire le code HTML externe, le désinfecter et l'ajouter au DOM d'une page :

+ +
var elem = document.createElement("div");
+var cleanHTML = DOMPurify.sanitize(externalHTML);
+elem.innerHTML = cleanHTML;
+ +

Vous pouvez utiliser n'importe quelle méthode pour ajouter le HTML aseptisé à votre DOM, par exemple la fonction .html() de jQuery’s. Souvenez-vous cependant que le drapeau SAFE_FOR_JQUERY doit être utilisé dans ce cas :

+ +
var elem = $("<div/>");
+var cleanHTML = DOMPurify.sanitize(externalHTML, { SAFE_FOR_JQUERY: true });
+elem.html(cleanHTML);
+ +

Moteur de modèle

+ +

Un autre modèle courant consiste à créer un modèle HTML local pour une page et à utiliser des valeurs distantes pour remplir les blancs. Bien que cette approche soit généralement acceptable, il faut éviter d'utiliser des constructions qui permettraient l'insertion de code exécutable. Cela peut se produire lorsque le moteur de création de modèles utilise des constructions qui insèrent du code HTML brut dans le document. Si la variable utilisée pour insérer le code HTML brut est une source distante, elle est soumise au même risque de sécurité mentionné dans l'introduction.

+ +

Par exemple, lorsque vous utilisez des modèles moustache, vous devez utiliser la double moustache, \{{variable}}, qui échappe à tout code HTML. L'utilisation de la triple moustache, \{\{{variable}}}, doit être évitée car cela injecte une chaîne HTML brute et pourrait ajouter du code exécutable à votre modèle. Handlebars fonctionne d'une manière similaire, avec des variables dans le double guidon, \{{variable}}, étant échappé. Considérant que, les variables dans le guidon triple sont laissées crues et doivent être évitées. De même, si vous créez une aide Handlebars à l'aide de  Handlebars.SafeString utilisez Handlebars.escapeExpression() pour échapper tous les paramètres dynamiques transmis à l'assistant. C'est une exigence car la variable résultante de Handlebars.SafeString est considérée comme sûre et elle n'est pas échappée lorsqu'elle est insérée avec des guidons doubles.

+ +

Il existe des concepts similaires dans d'autres systèmes de modélisation qui doivent être abordés avec le même niveau de soin.

+ +

Lecture supplémentaire

+ +

Pour plus d'informations sur ce sujet, consultez les articles suivants :

+ + diff --git a/files/fr/mozilla/add-ons/webextensions/securite_bonne_pratique/index.html b/files/fr/mozilla/add-ons/webextensions/securite_bonne_pratique/index.html deleted file mode 100644 index 05a6a7a699..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/securite_bonne_pratique/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: Bonnes pratiques de sécurité -slug: Mozilla/Add-ons/WebExtensions/securite_bonne_pratique -tags: - - Débutant - - Extensions - - Intermédiaire - - Sécurité - - WebExtensions - - revue -translation_of: Mozilla/Add-ons/WebExtensions/Security_best_practices ---- -
{{AddonSidebar}}
- -

Voici une liste des meilleures pratiques à suivre pour protéger les utilisateurs de votre extension. Si vous ne suivez pas ces bonnes pratiques, votre extension risque d'échouer les avis sur addons.mozilla.org, Si vous ne suivez pas ces bonnes pratiques, votre extension risque d'échouer les avis survous empêchant ainsi de distribuer votre module ou de le bloquer à l'installation dans Firefox.

- - diff --git a/files/fr/mozilla/add-ons/webextensions/sharing_objects_with_page_scripts/index.html b/files/fr/mozilla/add-ons/webextensions/sharing_objects_with_page_scripts/index.html new file mode 100644 index 0000000000..81ac2d7584 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/sharing_objects_with_page_scripts/index.html @@ -0,0 +1,258 @@ +--- +title: Partage d'objets avec des scripts de page +slug: Mozilla/Add-ons/WebExtensions/partage_d_objets_avec_des_scripts_de_page +tags: + - Add-ons + - Extensions + - Firefox + - Guide + - Mozilla + - Non-standard + - WebExtensions + - XPCOM + - script de contenu + - scripts de page +translation_of: Mozilla/Add-ons/WebExtensions/Sharing_objects_with_page_scripts +--- +
{{AddonSidebar}} +
+

Les techniques décrites dans cette section sont uniquement disponibles dans Firefox, et seulement à partir de Firefox 49

+
+ +
+

En tant que développeur d'extensions, vous devez considérer que les scripts s'exécutant sur des pages Web arbitraires sont des codes hostiles dont le but est de voler les informations personnelles de l'utilisateur, d'endommager leur ordinateur ou de les attaquer d'une autre manière.

+ +

L'isolation entre les scripts de contenu et les scripts chargés par les pages Web a pour but de rendre plus difficile la tâche des pages Web hostiles.

+ +

Puisque les techniques décrites dans cette section décompose cet isolement, elles sont intrinsèquement dangereuses et devraient être utilisées avec beaucoup de soin.

+
+
+ +

Comme les notes du guide de scripts de contenu, les scripts de contenu ne voient pas les modifications apportées au DOM par des scripts chargés par des pages Web.Cela signifie que, par exemple, si une page Web charge une bibliothèque comme jQuery, les scripts de contenu ne pourront pas l'utiliser et devront charger leur propre copie. À l'inverse, les scripts chargés par les pages Web ne peuvent pas voir les modifications apportées par les scripts de contenu.

+ +

Cependant, Firefox fournit des API qui permettent aux scripts de contenu de :

+ + + +

Vision Xray dans Firefox

+ +

Dans Firefox, une partie de l'isolation entre les scripts de contenu et les scripts de pages est implémentée en utilisant une fonction appelée "Vision Xray". Lorsqu'un script dans une portée plus privilégiée accède à un objet défini dans une portée moins privilégiée, il ne voit que la "version native" de l'objet. Toutes les propriétés expando sont invisibles et si des propriétés de l'objet ont été redéfinies, il voit l'implémentation d'origine et non la version redéfinie.

+ +

Le but de cette fonctionnalité est de rendre le script moins privilégié plus difficile à confondre le script plus privilégié en redéfinissant les propriétés natives des objets.

+ +

Par exemple, lorsqu'un script de contenu accède à la fenêtre de la page, il ne voit aucune propriété ajoutée au script de la page, et si le script de la page a redéfini les propriétés de la fenêtre, le script de contenu verra la version originale .

+ +

Pour l'histoire complète sur la vision Xray, voir les articles sur Vision Xray et la securité des Scripts.

+ +

Accès aux objets de script de page à partir de scripts de contenu

+ +

Dans Firefox, les objets DOM dans les scripts de contenu obtiennent une propriété supplémentaire wrappedJSObject. C'est une version "déballée" de l'objet, qui inclut toutes les modifications apportées à cet objet par les scripts de page.

+ +

Prenons un exemple simple. Supposons qu'une page Web charge un script:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+  </head>
+  <body>
+    <script type="text/javascript" src="main.js"></script>
+  </body>
+</html>
+ +

Le script ajoute une propriété expando à la fenêtre globale :

+ +
// main.js
+
+var foo = "I'm defined in a page script!";
+ +

La vision Xray signifie que si un script de contenu tente d'accéder à foo, il sera indéfini:

+ +
// content-script.js
+
+console.log(window.foo); // undefined
+ +

Dans Firefox, les scripts de contenu peuvent utiliser window.wrappedJSObject pour voir la propriété expando :

+ +
// content-script.js
+
+console.log(window.wrappedJSObject.foo); // "I'm defined in a page script!"
+ +

Notez qu'une fois que vous faites cela, vous ne pouvez plus compter sur les propriétés ou les fonctions de cet objet qui sont, ou font, ce que vous attendez. N'importe lequel d'entre eux, même les setters et les getters, aurait pu être redéfini par un code non fiable.

+ +

Notez également que le déballage est transitif: lorsque vous utilisez wrappedJSObject, toutes les propriétés de l'objet déplié sont elles-mêmes dépliées (et donc peu fiables). C'est donc une bonne pratique, une fois que vous avez l'objet dont vous avez besoin, de le réemballer, ce que vous pouvez faire comme ceci:

+ +
XPCNativeWrapper(window.wrappedJSObject.foo);
+ +

voir le document vision Xray pour plus de détails à ce sujet.

+ +

Partage d'objets de script de contenu avec des scripts de page

+ +

Firefox fournit également des API permettant aux scripts de contenu de rendre les objets disponibles pour les scripts de page. Il y a plusieurs approches ici:

+ + + +

exportFunction

+ +

Étant donné une fonction définie dans le script de contenu, exportFunction() l'exporte vers la portée du script de page, afin que le script de page puisse l'appeler.

+ +

Par exemple, considérons une extension qui a un script d'arrière-plan comme ceci :

+ +
/*
+Execute content script in the active tab.
+*/
+function loadContentScript() {
+  browser.tabs.executeScript({
+    file: "/content_scripts/export.js"
+  });
+}
+
+/*
+Add loadContentScript() as a listener to clicks
+on the browser action.
+*/
+browser.browserAction.onClicked.addListener(loadContentScript);
+
+/*
+Show a notification when we get messages from
+the content script.
+*/
+browser.runtime.onMessage.addListener((message) => {
+  browser.notifications.create({
+    type: "basic",
+    title: "Message from the page",
+    message: message.content
+  });
+});
+ +

Cela fait deux choses :

+ + + +

Le script de contenu ressemble à ceci :

+ +
/*
+Define a function in the content script's scope, then export it
+into the page script's scope.
+*/
+function notify(message) {
+  browser.runtime.sendMessage({content: "Function call: " + message});
+}
+
+exportFunction(notify, window, {defineAs:'notify'});
+ +

Cela définit une fonction notify(), qui envoie simplement son argument au script d'arrière-plan. Il exporte ensuite la fonction vers la portée du script de page. Maintenant, le script de la page peut appeler cette fonction:

+ +
window.notify("Message from the page script!");
+ +

Pour l'histoire complète, voir Components.utils.exportFunction.

+ +

cloneInto

+ +

Étant donné un objet défini dans le script de contenu, cela crée un clone de l'objet dans la portée du script de page, rendant ainsi le clone accessible aux scripts de page. Par défaut, cela utilise l'agorithme clone structuré pour cloner l'objet, ce qui signifie que les fonctions de l'objet ne sont pas incluses dans le clone. Pour inclure des fonctions, passez l'option cloneFunctions.

+ +

Par exemple, voici un script de contenu qui définit un objet contenant une fonction, puis le clone dans la portée du script de page :

+ +
/*
+Create an object that contains functions in
+the content script's scope, then clone it
+into the page script's scope.
+
+Because the object contains functions,
+the cloneInto call must include
+the `cloneFunctions` option.
+*/
+var messenger = {
+  notify: function(message) {
+    browser.runtime.sendMessage({
+      content: "Object method call: " + message
+    });
+  }
+};
+
+window.wrappedJSObject.messenger = cloneInto(
+  messenger,
+  window,
+  {cloneFunctions: true});
+ +

Maintenant les scripts de page vont voir une nouvelle propriété sur la fenêtre, messenger, qui a une fonction notify():

+ +
window.messenger.notify("Message from the page script!");
+ +

Pour l'histoire complète, voir Components.utils.cloneInto.

+ +

Constructeurs du contexte de la page

+ +

Sur l'objet fenêtre de xrayed, des constructeurs immaculés pour certains objets javascript intégrés tels que Object, Function ou Proxy et différentes classe DOM sont disponibles. XMLHttpRequest ne se comporte pas de cette manière, voir la section XHR and fetch pour plus de détails. Ils créeront des instances appartenant à la hiérarchie d'objets de la page global, puis retourneront un wrapper xray.

+ +

Puisque les objets créés de cette manière appartiennent déjà à la page et que le script de contenu ne les renvoie pas à la page, il ne nécessitera pas de clonage ou d'exportation supplémentaire.

+ +
/* javascript built-ins */
+
+const objA = new Object();
+const objB = new window.Object();
+
+console.log(
+  objA instanceof Object,                        // true
+  objB instanceof Object,                        // false
+  objA instanceof window.Object,                 // false
+  objB instanceof window.Object,                 // true
+  'wrappedJSObject' in objB                      // true; xrayed
+);
+
+objA.foo = "foo";
+objB.foo = "foo";                                // xray wrappers for plain javascript objects pass through property assignments
+objB.wrappedJSObject.bar = "bar";                // unwrapping before assignment does not rely on this special behavior
+
+window.wrappedJSObject.objA = objA;
+window.wrappedJSObject.objB = objB;              // automatically unwraps when passed to page context
+
+window.eval(`
+  console.log(objA instanceof Object);           // false
+  console.log(objB instanceof Object);           // true
+
+  console.log(objA.foo);                         // undefined
+  objA.baz = "baz";                              // Error: permission denied
+
+  console.log(objB.foo, objB.bar);               // "foo", "bar"
+  objB.baz = "baz";
+`);
+
+/* other APIs */
+
+const ev = new Event("click");
+
+console.log(
+  ev instanceof Event,                           // true
+  ev instanceof window.Event,                    // true; Event constructor is actually inherited from the xrayed window
+  'wrappedJSObject' in ev                        // true; is an xrayed object
+);
+
+ev.propA = "propA"                                // xray wrappers for native objects do not pass through assignments
+ev.propB = "wrapper";                             // define property on xray wrapper
+ev.wrappedJSObject.propB = "unwrapped";           // define same property on page object
+Reflect.defineProperty(ev.wrappedJSObject,        // privileged reflection can operate on less privileged objects
+  'propC', {
+     get: exportFunction(function() {             // getters must be exported like regular functions
+       return 'propC';
+     }
+  }
+);
+
+window.eval(`
+  document.addEventListener("click", (e) => {
+    console.log(e instanceof Event, e.propA, e.propB, e.propC);
+  });
+`);
+
+document.dispatchEvent(ev); // true, undefined, "unwrapped", "propC"
diff --git a/files/fr/mozilla/add-ons/webextensions/test_des_fonctionnalites_persistantes_et_de_redemarrage/index.html b/files/fr/mozilla/add-ons/webextensions/test_des_fonctionnalites_persistantes_et_de_redemarrage/index.html deleted file mode 100644 index 92e16e408d..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/test_des_fonctionnalites_persistantes_et_de_redemarrage/index.html +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: Test des fonctionnalités persistantes et de redémarrage -slug: >- - Mozilla/Add-ons/WebExtensions/test_des_fonctionnalites_persistantes_et_de_redemarrage -tags: - - Comment - - Débutant - - Développement - - Intermédiaire - - WebExtensions - - add-on - - test - - web-ext -translation_of: Mozilla/Add-ons/WebExtensions/Testing_persistent_and_restart_features ---- -

{{AddonSidebar}}

- -

Lors du test de votre extension, vous pouvez remarquer que certaines fonctionnalités se réinitialisent ou cessent de fonctionner lorsque vous chargez une version mise à jour ou après le redémarrage de Firefox. Par exemple, vous pouvez utiliser le stockage local et remarquer que les données précédemment sauvegardées disparaissent lorsque vous rechargez votre extension. Alternativement, vous pouvez tester votre extension à travers un redémarrage de Firefox, mais notez que votre extension ne reste pas chargée.

- -

Cet article explique pourquoi vous voyez ces comportements. Il vous montre ensuite ce qu'il faut faire pour vous assurer que les fonctions persistent lorsque vous rechargez votre extension et comment configurer pour tester le comportement de redémarrage.

- -

Avant de regarder comment Firefox traite l'extension que vous testez; Il y a quelques fonctionnalités de Firefox et des extensions dont vous devez être conscient : l'ID du module complémentaire et les profils Firefox.

- -

Qu'est-ce qu'un ID complémentaire ?

- -

L'ID de module complémentaire est utilisé pour identifier de manière unique chaque extension et à son tour, cet ID est utilisé pour lier une extension à certaines fonctionnalités des API WebExtension. Ces fonctionnalités sont:

- - - -

Une extension peut se voir attribuer un ID complémentaire en utilisant la clé  "applications" du fichier manifest.json.

- -
"applications": {
-  "gecko": {
-    "id": "addon@example.com",
-    }
-  }
- -

Si l'extension n'a pas d'ID de module défini avec la clé "applications" , il reçoit un ID de module complémentaire via l'un des éléments suivants:

- - - -

Vous remarquerez un ID supplémentaire dans l'image ci-dessus, l'UUID interne. C'est un identifiant unique donné à l'extension lors de l'installation. Il est utilisé pour définir l'emplacement de stockage des ressources incluses dans l'extension et identifier les données d'un poste dans window.localStorage ou indexedDB. Cependant, vous n'avez pas besoin de connaître sa valeur. Son utilisation dans window.localStorage ou indexedDB est transparente et pour accéder aux ressources incluses dans l'extension, vous utilisez {{WebExtAPIRef("runtime.getURL")}}, qui renvoie le chemin d'accès aux ressources. De plus, étant donné qu'il est unique à chaque installation, il ne fournit pas d'ID pouvant être utilisé à d'autres fins.

- -

Qu'est-ce qu'un profil Firefox?

- -

Les données qui définissent la manière dont l'utilisateur a configuré Firefox, ainsi que les informations générées lors de la navigation sur le Web, telles que l'historique et les cookies, sont stockées dans un dossier spécial, appelé profile. En plus des cookies, le profil contient du stockage local et d'autres contenus liés au profil.

- -

Comportement d'extension dans Firefox

- -

Lorsque vous développez une extension, en supposant que vous n'avez pas défini d'ID complémentaire à l'aide de la clé "applications", le comportement par défaut dans Firefox est le suivant :

- - - -

Les conséquences de ce comportement, lors du rechargement d'une extension, sont les suivantes :

- - - -

Que dois-je faire pour m'assurer de pouvoir tester mon extension ?

- -

Pour que votre extension se comporte comme une extension signée pendant les tests de développement, utilisez les techniques suivantes :

- - diff --git a/files/fr/mozilla/add-ons/webextensions/travailler_avec_des_identites_contextuelles/index.html b/files/fr/mozilla/add-ons/webextensions/travailler_avec_des_identites_contextuelles/index.html deleted file mode 100644 index 7acabb6773..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/travailler_avec_des_identites_contextuelles/index.html +++ /dev/null @@ -1,169 +0,0 @@ ---- -title: Travailler avec des identités contextuelles -slug: Mozilla/Add-ons/WebExtensions/travailler_avec_des_identites_contextuelles -tags: - - Add-ons - - Comment - - Contextual identities - - Débutant - - Extensions - - Hox-to - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/Work_with_contextual_identities ---- -

{{AddonSidebar}}

- -

Beaucoup de gens ont besoin ou veulent interagir avec le web en utilisant plusieurs personnages. Ils peuvent avoir des comptes pour le travail sur le Web et le courrier électronique personnel. Ils peuvent se déconnecter de leurs comptes de médias sociaux avant d'accéder aux achats en ligne, afin de s'assurer que les scripts de suivi sur les sites d'achat ne peuvent pas prendre en charge leur activité de médias sociaux. Pour répondre à ces exigences, les utilisateurs finissent souvent par utiliser une fenêtre de navigateur standard et privée ou deux navigateurs différents.

- -

Pour répondre à ce besoin, Firefox inclut une fonctionnalité connue sous le nom d'identités contextuelles, d'onglets de conteneurs ou de conteneurs de comptes. Cette fonctionnalité permet la création d'un conteneur de cookies pour chacune des identités que l'utilisateur souhaite utiliser dans son navigateur. Les onglets peuvent être associés à l'une de ces identités, en conservant les cookies distincts de ceux des autres identités dans le navigateur. Le résultat pratique est que, par exemple, un utilisateur peut avoir une identité personnelle et professionnelle. Ils peuvent ensuite utiliser l'identité personnelle dans un onglet, où ils se connectent à leur messagerie Web personnelle, et l'identité professionnelle dans un autre onglet, où ils se connectent à leur messagerie Web professionnelle.

- -

Pour plus d'informations sur cette fonctionnalité, voir :

- - - -

API pour travailler avec des identités contextuelles

- -

Pour utiliser les fonctionnalités d'identité contextuelle dans les extensions, vous utiliserez deux APIs :

- - - -

Permissions

- -

Pour utiliser l'API {{WebExtAPIRef("contextualIdentities")}} vous devez inclure la  permission "contextualIdentities" dans votre fichier manifest.json. Vous n'avez pas besoin de la permission "tabs" pour utiliser {{WebExtAPIRef("tabs.create")}} ; vous avez besoin de la permission "cookies" pour spécifier le conteneur de cookies que vous souhaitez utiliser.

- -

Exemple de procédure pas à pas

- -

L'exemple d'extension contextual-identities fournit un bouton de barre d'outils avec une fenêtre qui répertorie les identités dans le navigateur. Pour chaque identité, l'extension fournit des options permettant de créer un nouvel onglet en utilisant son conteneur de cookies ou de supprimer tous les onglets de l'identité.

- -

Voici une courte vidéo de l'extension en action :

- -

{{EmbedYouTube("SgLCS7_ppas")}}

- -

manifest.json

- -

Les principales caractéristiques du fichier manifest.json sont :

- - - -

context.html

- -

Une fenêtre contextuelle sur le bouton de la barre d'outils fournit l'interface utilisateur de l'extension. context.html implémente ce popup, mais c'est juste un shell dans lequel le script context.js écrit la liste des identités contextuelles et leurs options associées.

- -
  <body>
-    <div class="panel">
-      <div id="identity-list"></div>
-    </div>
-  <script src="context.js"></script>
-  </body>
- -

context.js

- -

Toutes les fonctionnalités de l'extension sont implémentées via context.js, qui est appelée chaque fois que la barre d'outils est affichée.

- -

Le script obtient d'abord le div 'identity-list' depuis context.html.

- -
var div = document.getElementById('identity-list');
- -

Il vérifie ensuite si la fonction d'identités contextuelles est activée dans le navigateur. Si ce n'est pas le cas, des informations sur la façon de l'activer sont ajoutées à la fenêtre contextuelle.

- -
if (browser.contextualIdentities === undefined) {
-  div.innerText = 'browser.contextualIdentities not available. Check that the privacy.userContext.enabled pref is set to true, and reload the add-on.';
-} else {
- -

Firefox s'installe avec la fonctionnalité d'identité contextuelle désactivée, elle est activée lorsqu'une extension utilisant l'API contextualIdentities est installée. Cependant, il est toujours possible pour l'utilisateur de désactiver la fonctionnalité, en utilisant une option sur la page des préférences (about:preferences), d'où la nécessité de la vérification.

- -

Le script utilise maintenant contextualIdentities.query pour déterminer s'il existe des identités contextuelles définies dans le navigateur. S'il n'y en a pas, un message est ajouté au popup et le script s'arrête.

- -
  browser.contextualIdentities.query({})
-    .then((identities) => {
-      if (!identities.length) {
-        div.innerText = 'No identities returned from the API.';
-        return;
-      }
- -

Si des identités contextuelles sont présentes — Firefox a quatre identités par défaut — le script parcourt chacune d'elles en ajoutant son nom, stylisé dans la couleur choisie, à l'élément <div>. La fonction createOptions() ajoute ensuite les options à “create” ou  “close all” à la <div> avant qu'elle ne soit ajoutée au popup.

- -
     for (let identity of identities) {
-       let row = document.createElement('div');
-       let span = document.createElement('span');
-       span.className = 'identity';
-       span.innerText = identity.name;
-       span.style = `color: ${identity.color}`;
-       console.log(identity);
-       row.appendChild(span);
-       createOptions(row, identity);
-       div.appendChild(row);
-     }
-  });
-}
-
-function createOptions(node, identity) {
-  for (let option of ['Create', 'Close All']) {
-    let a = document.createElement('a');
-    a.href = '#';
-    a.innerText = option;
-    a.dataset.action = option.toLowerCase().replace(' ', '-');
-    a.dataset.identity = identity.cookieStoreId;
-    a.addEventListener('click', eventHandler);
-    node.appendChild(a);
-  }
-}
- -

Le script attend maintenant que l'utilisateur sélectionne une option dans le popup.

- -
function eventHandler(event) {
- -

Si l'utilisateur clique sur l'option permettant de créer un onglet pour une identité, l'un d'entre eux est ouvert à l'aide de tabs.create en transmettant l'ID de cookie de l'identité.

- -
  if (event.target.dataset.action == 'create') {
-    browser.tabs.create({
-      url: 'about:blank',
-      cookieStoreId: event.target.dataset.identity
-    });
-  }
- -

Si l'utilisateur sélectionne l'option permettant de fermer tous les onglets pour l'identité, le script exécute une tabs.query pour tous les onglets qui utilisent le cookie store de l'identité. Le script passe ensuite cette liste d'onglets à tabs.remove.

- -
  if (event.target.dataset.action == 'close-all') {
-    browser.tabs.query({
-      cookieStoreId: event.target.dataset.identity
-    }).then((tabs) => {
-      browser.tabs.remove(tabs.map((i) => i.id));
-    });
-  }
-  event.preventDefault();
-}
- -

Apprendre encore plus

- -

Si vous voulez en savoir plus sur l'API contextualIdentities, consultez :

- - diff --git a/files/fr/mozilla/add-ons/webextensions/travailler_avec_l_api_cookies/index.html b/files/fr/mozilla/add-ons/webextensions/travailler_avec_l_api_cookies/index.html deleted file mode 100644 index c13965f88e..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/travailler_avec_l_api_cookies/index.html +++ /dev/null @@ -1,254 +0,0 @@ ---- -title: Travailler avec l'API Cookies -slug: Mozilla/Add-ons/WebExtensions/travailler_avec_l_API_cookies -tags: - - Add-ons - - Comment - - Cookies - - Débutant - - Extensions - - How-to - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/Work_with_the_Cookies_API ---- -

{{AddonSidebar}}

- -

Avec l'API Cookies, vos extensions ont accès à des fonctionnalités similaires à celles utilisées par les sites Web pour stocker et lire les cookies. Les fonctionnalités de l'API permettent aux extensions de stocker des informations site par site. Ainsi, comme nous le verrons dans l'exemple, vous pouvez stocker des détails sur le choix de la couleur de fond d'un site pour un utilisateur. Ensuite, lorsque l'utilisateur revient sur le site, votre extension peut utiliser la capacité de l'API pour obtenir des détails sur les cookies et les lire pour récupérer le choix de l'utilisateur et l'appliquer au site Web.

- -
-

Le comportement des cookies peut être contrôlé à l'aide de la propriété {{WebExtAPIRef("privacy.websites")}} cookieConfig. Cette propriété contrôle si et comment les cookies sont acceptés ou si tous les cookies sont traités comme des cookies de session.

-
- -

Permissions

- -

Pour utiliser l'API Cookies, vous devez demander à la fois la permission "cookies" et les  permissions d'hôte pour les protocoles, domaines, ou sites web auxquels vous souhaitez accéder ou utiliser "<all_urls>" pour accéder à tous les protocoles et domaines. La façon dont vous définissez votre chaîne de permission d'hôte affecte la capacité de votre extension à lire, écrire et supprimer les cookies.

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

Chaine de permission hôte

- 		-

Lecture

- 		-

Ecriture/Effacer

-
-

Sécurisé

- 		-

Non-sécurisé

- 		-

Sécurisé

- 		-

Non-sécurisé

-
-

"http://*.example.com/"

- 		-

Non

- 		-

Principaux et sous domaines, avec n'importe quel chemin

- 		-

Principaux et sous domaines, avec n'importe quel chemin

- 		-

Principaux et sous domaines, avec n'importe quel chemin

-
-

"https://www.example.com/"

- 		-

www.example.com ou .example.com avec n'importe quel chemin, mais aucun sous domaine

- 		-

www.example.com ou .example.com avec n'importe quel chemin, mais aucun sous domaine

- 		-

www.example.com ou .example.com avec n'importe quel chemin, mais aucun sous domaine

- 		-

www.example.com ou .example.com avec n'importe quel chemin, mais aucun sous domaine

-
-

"*://*.example.com/"

- 		-

Principaux et sous domaines, avec n'importe quel chemin

- 		-

Principaux et sous domaines, avec n'importe quel chemin

- 		-

Principaux et sous domaines, avec n'importe quel chemin

- 		-

Principaux et sous domaines, avec n'importe quel chemin

-
-

"<all_urls>"

- 		-

Tout domaine avec un chemin

- 		-

Tout domaine avec un chemin

- 		-

Tout domaine avec un chemin

- 		-

Tout domaine avec un chemin

-
-
- -

Banque de cookies

- -

Firefox fournit trois types de banque de cookies :

- - - -

Vous pouvez trouver les banques de cookies disponibles en utilisant {{WebExtAPIRef("cookies.getAllCookieStores")}}, qui renvoie un objet contenant l'ID de chaque cookie et une liste des ID des onglets utilisant chaque banque de cookies.

- -

Exemple de procédure pas à pas

- -

L'exemple d'extension cookie-bg-picker permet à l'utilisateur de choisir une couleur et une icône appliquées à l'arrière-plan des pages Web d'un site. Ces choix sont sauvegardés par site en utilisant {{WebExtAPIRef("cookies.set")}}. Lorsqu'une page du site est ouverte, {{WebExtAPIRef("cookies.get")}} lit tout choix précédent, et l'extension l'applique à la page Web. Une option de réinitialisation supprime l'icône d'arrière-plan et la couleur du site ainsi que le cookie, en utilisant {{WebExtAPIRef("cookies.remove")}}. Il utilise également {{WebExtAPIRef("cookies.onChanged")}} pour écouter les modifications apportées aux cookies, en envoyant les détails de la modification à la console.

- -

Cette vidéo montre l'extension en action :

- -

{{EmbedYouTube("_rlp3eYqEMA")}}

- -

Cet exemple utilise également les API Tabs et Runtime, mais nous ne discuterons de ces fonctionnalités qu'en passant.

- -

manifest.json

- -

The key feature of the manifest.json file relating to the use of the Cookies API is the permissions request:

- -
  "permissions": [
-      "tabs",
-      "cookies",
-      "<all_urls>"
-],
- -

Ici, l'extension demande l'autorisation d'utiliser l'API Cookies ("cookies") avec tous les sites Web ("<all_urls>"). Cela permet à l'extension d'enregistrer le choix de l'icône de couleur d'arrière-plan pour n'importe quel site Web.

- -

Scripts—bgpicker.js

- -

L'interface utilisateur de l'extension utilise un bouton de barre d'outils ({{WebExtAPIRef("browserAction")}}) implémenté avec bgpicker.html qui appelle bgpicker.js. Ensemble, ils permettent à l'utilisateur de sélectionner l'icône et d'entrer la couleur à appliquer en arrière-plan. Ils offrent également la possibilité d'effacer ces paramètres.

- -

bgpicker.js gère la sélection de l'icône ou l'entrée d'une couleur pour l'arrière-plan dans des fonctions séparées.

- -

Pour gérer les boutons d'icônes, le script rassemble d'abord tous les noms de classe utilisés pour les boutons dans le fichier HTML :

- -
var bgBtns = document.querySelectorAll('.bg-container button');
- -

Il boucle ensuite à travers tous les boutons en leur assignant leur image et en créant un écouteur onclick pour chaque bouton :

- -
for(var i = 0; i < bgBtns.length; i++) {
-  var imgName = bgBtns[i].getAttribute('class');
-  var bgImg = 'url(\'images/' + imgName + '.png\')';
-  bgBtns[i].style.backgroundImage = bgImg;
-
-  bgBtns[i].onclick = function(e) {
- -

Quand un bouton est cliqué, sa fonction d'écouteur correspondante obtient le nom de classe de bouton et ensuite le chemin d'icône qu'il passe au script de contenu de la page (updatebg.js) en utilisant un message. Le script de contenu applique ensuite l'icône à l'arrière-plan de la page Web. Pendant ce temps, bgpicker.js stocke les détails de l'icône appliquée à l'arrière-plan dans un cookie :

- -
    cookieVal.image = fullURL;
-    browser.cookies.set({
-    url: tabs[0].url,
-    name: "bgpicker",
-    value: JSON.stringify(cookieVal)
-  })
- -

Le paramètre de couleur est traité de la même manière, déclenché par un écouteur dans le champ de saisie de couleur. Lorsqu'une couleur est entrée, l'onglet actif est découvert et les détails de sélection de couleur envoyés, à l'aide d'un message, au script de contenu de la page à appliquer à l'arrière-plan de la page Web. Ensuite, la sélection de couleur est ajoutée au cookie :

- -
    cookieVal.color = currColor;
-    browser.cookies.set({
-    url: tabs[0].url,
-    name: "bgpicker",
-    value: JSON.stringify(cookieVal)
- -

Lorsque l'utilisateur clique sur le bouton de réinitialisation qui a été affecté à la réinitialisation de la variable :

- -
var reset = document.querySelector('.color-reset button');
- -

reset.onclick trouve d'abord l'onglet actif. Ensuite, en utilisant l'ID de l'onglet, il transmet un message au script de contenu de la page (updatebg.js) pour qu'il supprime l'icône et la couleur de la page. La fonction efface ensuite les valeurs de cookie (de sorte que les anciennes valeurs ne sont pas reportées et écrites sur un cookie créé pour une nouvelle icône ou sélection de couleur sur la même page) avant de supprimer le cookie :

- -
    cookieVal = { image : '',
-                  color : '' };
-    browser.cookies.remove({
-    url: tabs[0].url,
-    name: "bgpicker"
- -

Aussi, afin que vous puissiez voir ce qui se passe avec les cookies, le script rend compte de toutes les modifications apportées aux cookies dans la console :

- -
browser.cookies.onChanged.addListener((changeInfo) => {
-  console.log(`Cookie changed:\n
-    * Cookie: ${JSON.stringify(changeInfo.cookie)}\n
-    * Cause: ${changeInfo.cause}\n
-    * Removed: ${changeInfo.removed}`);
-  });
- -

Scripts—background.js

- -

Un script d'arrière-plan (background.js) permet à l'utilisateur de choisir une icône d'arrière-plan et une couleur pour le site Web dans une session antérieure. Le script est à l'écoute des changements dans l'onglet actif, que ce soit l'utilisateur qui passe d'un onglet à l'autre ou modifie l'URL de la page affichée dans l'onglet. Lorsque l'un de ces événements se produit, cookieUpdate() est appelée.  cookieUpdate() utilise à son tour getActiveTab() pour obtenir l'ID de l'onglet actif. La fonction peut ensuite vérifier si un cookie existe pour l'extension, en utilisant l'URL de l'onglet :

- -
    var gettingCookies = browser.cookies.get({
-      url: tabs[0].url,
-      name: "bgpicker"
-    });
- -

Si le cookie "bgpicker" existe pour le site Web, les détails de l'icône et de la couleur sélectionnés précédemment sont récupérés et transmis au script de contenu updatebg.js à l'aide de messages :

- -
    gettingCookies.then((cookie) => {
-      if (cookie) {
-        var cookieVal = JSON.parse(cookie.value);
-        browser.tabs.sendMessage(tabs[0].id, {image: cookieVal.image});
-        browser.tabs.sendMessage(tabs[0].id, {color: cookieVal.color});
-      }
-    });
- -

Autres caractéristiques

- -

En plus des API mentionnées jusqu'à présent, l'API Cookies propose également {{WebExtAPIRef("cookies.getAll")}}. Cette fonction prend l'objet details pour spécifier des filtres pour les cookies sélectionnés et retourne un tableau d'objets {{WebExtAPIRef("cookies.Cookie")}} qui correspondent aux critères de filtrage.

- -

Apprendre encore plus

- -

Si vous voulez en savoir plus sur l'API Cookies, consultez :

- - diff --git a/files/fr/mozilla/add-ons/webextensions/travailler_avec_l_api_tabs/index.html b/files/fr/mozilla/add-ons/webextensions/travailler_avec_l_api_tabs/index.html deleted file mode 100644 index 049a8e5683..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/travailler_avec_l_api_tabs/index.html +++ /dev/null @@ -1,628 +0,0 @@ ---- -title: Travailler avec l'API Tabs -slug: Mozilla/Add-ons/WebExtensions/Travailler_avec_l_API_Tabs -tags: - - Add-ons - - Comment - - Débutant - - WebExtensions - - onglets - - tabs -translation_of: Mozilla/Add-ons/WebExtensions/Working_with_the_Tabs_API ---- -

{{AddonSidebar}}

- -

Les onglets permettent à un utilisateur d'ouvrir plusieurs pages Web dans la fenêtre de son navigateur, puis de basculer entre ces pages Web. Grâce à l'API Tabs, vous pouvez utiliser et manipuler ces onglets pour créer des utilitaires qui offrent aux utilisateurs de nouvelles façons de travailler avec des onglets ou de fournir les fonctionnalités de votre extension.

- -

Dans cet article, nous allons regarder :

- - - -

Nous concluons ensuite en examinant d'autres fonctionnalités diverses offertes par l'API.

- -
-

Remarque : Certaines fonctionnalités de l'API d'onglet sont couvert ailleurs. Voici les méthodes que vous pouvez utiliser pour manipuler le contenu de l'onglet avec des scripts ({{WebExtAPIRef("tabs.connect")}}, {{WebExtAPIRef("tabs.sendMessage")}}, et  {{WebExtAPIRef("tabs.executeScript")}}). Si vous voulez plus d'informations sur ces méthodes, reportez-vous à l'article scripts de contenu et le guide pratique modifier une page web.

-
- -

Permissions et l'API Tabs

- -

Pour la majorité des fonctions de l'API Tabs, vous n'avez besoin d'aucune autorisation. Cependant, il y a certaines exceptions :

- - - -

Vous pouvez demander la permission "tabs" dans le fichier manifest.json de votre extension :

- -
"permissions": [
-  "<all_urls>",
-  "tabs"
-],
-
- -

Cette requête vous permet d'utiliser toutes les fonctionnalités de l'API Tabs sur tous les sites Web que vos utilisateurs visitent. Il existe également une autre méthode pour demander la permission d'utiliser {{WebExtAPIRef("tabs.executeScript")}} ou {{WebExtAPIRef("tabs.insertCSS")}} où vous n'avez pas besoin de la permission de l'hôte, sous la forme "activeTab". Cette permission fournit les mêmes droits que les  "onglets" avec <all_urls>, mais avec deux restrictions:

- - - -

L'avantage de cette approche est que l'utilisateur ne recevra pas d'avertissement d'autorisation indiquant que votre extension peut “Accéder à vos données pour tous les sites Web”. En effet, la permission <all_urls> permet à une extension d'exécuter des scripts dans n'importe quel onglet, à tout moment, alors que "activeTab" se limite à autoriser l'extension à effectuer une action demandée par l'utilisateur dans l'onglet en cours.

- -

En savoir plus sur les onglets et leurs propriétés

- -

Il y aura des occasions où vous voulez obtenir une liste de tous les onglets dans toutes les fenêtres du navigateur. D'autres fois, vous pourriez vouloir trouver un sous-ensemble d'onglets qui correspondent à certains critères spécifiques, tels que ceux ouverts à partir d'un onglet spécifique ou l'affichage des pages d'un domaine particulier. Et une fois que vous avez votre liste d'onglets, vous voudrez probablement en savoir plus sur leurs propriétés.

- -

C'est ici qu'intervient {{WebExtAPIRef("tabs.query")}}. Utilisé seul pour obtenir tous les onglets ou prendre l'objet queryInfo — pour spécifier des critères de requête tels que l'activation de l'onglet, dans la fenêtre en cours ou plus de 17 critères — {{WebExtAPIRef("tabs.query")}} renvoie un tableau d'objets {{WebExtAPIRef("tabs.Tab")}} objects contenant des informations sur les onglets.

- -

Lorsque vous souhaitez uniquement obtenir des informations sur l'onglet en cours, vous pouvez obtenir un objet {{WebExtAPIRef("tabs.Tab")}} pour cet onglet à l'aide de  {{WebExtAPIRef("tabs.getCurrent")}}. Si vous avez un ID d'onglet, vous pouvez obtenir son objet {{WebExtAPIRef("tabs.Tab")}} en utilisant {{WebExtAPIRef("tabs.get")}}.

- -

Par exemple

- -

Pour voir comment {{WebExtAPIRef("tabs.query")}} et {{WebExtAPIRef("tabs.Tab")}} sont utilisés, voyons comment l'exemple tabs-tabs-tabs ajoute la liste de  “passer aux onglets” à son popup bouton de barre d'outils.

- -

The tabs tabs tabs toolbar menu showing the switch to tap area

- -

manifest.json

- -

Voici le manifest.json:

- -
{
-  "browser_action": {
-    "browser_style": true,
-    "default_title": "Tabs, tabs, tabs",
-    "default_popup": "tabs.html"
-  },
-  "description": "A list of methods you can perform on a tab.",
-  "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/tabs-tabs-tabs",
-  "manifest_version": 2,
-  "name": "Tabs, tabs, tabs",
-  "permissions": [
-    "tabs"
-  ],
-  "version": "1.0"
-}
-
- -
-

Notez ce qui suit :

- - -
- -

tabs.html

- -

tabs.html définit le contenu du popup de l'extension :

- -
<!DOCTYPE html>
-
-<html>
-
- <head>
-    <meta charset="utf-8">
-    <link rel="stylesheet" href="tabs.css"/>
- </head>
-
-<body>
-
- <div class="panel">
-    <div class="panel-section panel-section-header">
-     <div class="text-section-header">Tabs-tabs-tabs</div>
-    </div>
-
-    <a href="#" id="tabs-move-beginning">Move active tab to the beginning of the window</a><br>
-
-
-…
-
-Define the other menu items
-…
-
-    <div class="switch-tabs">
-
-     <p>Switch to tab</p>
-
-     <div id="tabs-list"></div>
-
-    </div>
- </div>
-
- <script src="tabs.js"></script>
-
-</body>
-
-</html>
-
- -

Ici, vous pouvez voir que, après la création des éléments de menu, un div vide avec la liste des onglets ID est configuré pour contenir la liste des onglets. Ensuite, tabs.js est appelée.

- -

Voici un résumé de ce qui précède :

- -
    -
  1. Les éléments de menu sont déclarés.  
    2. -
  2. Une div vide avec tabs-list est déclaré comme contenant la liste des onglets.
    3. -
  3. tabs.js est appelé.
    4. -
- -

tabs.js

- -

Dans tabs.js nous pouvons voir comment la liste des onglets est construite et ajoutée à la popup.

- -

Tout d'abord, un gestionnaire d'événements est ajouté pour exécuter listTabs() quand tabs.html est chargé :

- -

Création de la fenêtre contextuelle

- -

Tout d'abord, un gestionnaire d'événements est ajouté pour exécuter listTabs() quand tabs.html est chargé :

- -
document.addEventListener("DOMContentLoaded", listTabs);
- -

La première chose que fait listTabs() est d'appeler getCurrentWindowTabs(), où {{WebExtAPIRef("tabs.query")}} est utilisé pour obtenur un objet  {{WebExtAPIRef("tabs.Tab")}} pour le onglets dans la fenêtre courante :

- -
function getCurrentWindowTabs() {
-  return browser.tabs.query({currentWindow: true});
-}
-
- -

Maintenant, listTabs() est prêt à créer le contenu de la popup.

- -

Pour commencer :

- -
    -
  1. Récupérer les tabs-list div.
    2. -
  2. Créer un fragment de document (dans lequel la liste sera construite).
    3. -
  3. Mettre les compteurs.
    4. -
  4. Effacer le contenu de tabs-list div.
    5. -
- -
function listTabs() {
- getCurrentWindowTabs().then((tabs) => {
-    let tabsList = document.getElementById('tabs-list');
-    let currentTabs = document.createDocumentFragment();
-    let limit = 5;
-    let counter = 0;
-
-    tabsList.textContent = '';
-
- -

Ensuite, nous allons créer les liens pour chaque onglet :

- -
    -
  1. Boucle les 5 premiers éléments de l'objet {{WebExtAPIRef("tabs.Tab")}}.
    2. -
  2. Pour chaque poste, ajoutez un hyperlien vers le fragment de document. -
      -
    • L'étiquette du lien, c'est-à-dire son texte, est définie à l'aide du titre de l'onglet (ou de l'ID, s'il n'a pas de titre).
      • -
    • L'adresse du lien est définie à l'aide de l'ID de l'onglet.
      • -
    -
    3. -
- -
    for (let tab of tabs) {
-     if (!tab.active && counter <= limit) {
-        let tabLink = document.createElement('a');
-
-        tabLink.textContent = tab.title || tab.id;
-
-       tabLink.setAttribute('href', tab.id);
-        tabLink.classList.add('switch-tabs');
-        currentTabs.appendChild(tabLink);
-     }
-
-     counter += 1;
-
-    }
-
- -

Enfin, le fragment du document est écrit dans la div tabs-list :

- -
    tabsList.appendChild(currentTabs);
-  });
-}
-
- -

Travailler avec l'onglet actif

- -

Un autre exemple connexe est l'option d'information “Alert active tab”qui décharge toutes les propriétés de l'objet {{WebExtAPIRef("tabs.Tab")}} de l'onglet actif dans une alerte :

- -
 else if (e.target.id === "tabs-alertinfo") {
-   callOnActiveTab((tab) => {
-     let props = "";
-     for (let item in tab) {
-       props += `${ item } = ${ tab[item] } \n`;
-     }
-     alert(props);
-   });
- }
-
- -

Où callOnActiveTab() ftrouve l'objet de tabulation active en faisant une boucle sur les objets {{WebExtAPIRef("tabs.Tab")}} qui recherchent l'objet avec l'ensemble actif :

- -
document.addEventListener("click", function(e) {
- function callOnActiveTab(callback) {
-   getCurrentWindowTabs().then((tabs) => {
-     for (var tab of tabs) {
-       if (tab.active) {
-         callback(tab, tabs);
-       }
-     }
-   });
- }
-}
-
-
- -

Création, duplication, déplacement, mise à jour, rechargement et suppression des onglets

- -

Après avoir recueilli des informations sur les onglets, vous voudrez probablement faire quelque chose avec eux — soit pour offrir aux utilisateurs des fonctionnalités de manipulation et de gestion des onglets — soit pour implémenter des fonctionnalités dans votre extension. Les fonctions suivantes sont disponibles :

- - - -
-

NOTE :

- -

Ces fonctions nécessitent toutes l'ID (ou les ID) de l'onglet qu'elles manipulent :

- - - -

Alors que les fonctions suivantes agissent sur l'onglet actif (si aucun ID d'onglet n'est fourni) :

- - -
- -

Par exemple

- -

L'exemple tabs-tabs-tabs utilise toutes ces fonctionnalités sauf la mise à jour de l'URL d'un onglet. La façon dont ces API sont utilisées est similaire, nous allons donc regarder l'une des implémentations les plus impliquées, celle de l'option “Deplacer l'onglet actif vers le début de la liste des fenêtres”. Mais d'abord, voici une démonstration de la fonctionnalité en action :

- -

{{EmbedYouTube("-lJRzTIvhxo")}}

- -

manifest.json

- -

Aucune de ces fonctions ne nécessite de permission pour fonctionner, donc il n'y a aucune fonctionnalité dans le fichier manifest.json qui doit être mise en surbrillance.

- -

tabs.html

- -

tabs.html définit le “menu” affiché dans la fenêtre contextuelle, qui inclut l'option “Déplacer l'onglet actif au début de la liste des fenêtres”, wavec une série de balises <a> groupées par un séparateur visuel. Chaque élément de menu reçoit un ID, qui est utilisé dans tabs.js pour déterminer quel élément de menu est demandé.

- -
    <a href="#" id="tabs-move-beginning">Move active tab to the beginning of the window</a><br>
-    <a href="#" id="tabs-move-end">Move active tab to the end of the window</a><br>
-
-    <div class="panel-section-separator"></div>
-
-
-    <a href="#" id="tabs-duplicate">Duplicate active tab</a><br>
-
-    <a href="#" id="tabs-reload">Reload active tab</a><br>
-    <a href="#" id="tabs-alertinfo">Alert active tab info</a><br>
- -

tabs.js

- -

Pour implémenter le "menu" défini dans tabs.html, tabs.js inclut un écouteur pour les clics dans tabs.html

- -
document.addEventListener("click", function(e) {
- function callOnActiveTab(callback) {
-
-   getCurrentWindowTabs().then((tabs) => {
-     for (var tab of tabs) {
-       if (tab.active) {
-         callback(tab, tabs);
-       }
-     }
-   });
-}
-}
-
- -

Une série d'instructions if cherche alors à faire correspondre l'identifiant de l'élément cliqué. Cet extrait de code est pour l'option “Déplacer l'onglet actif au début de la liste des fenêtres” :

- -
 if (e.target.id === "tabs-move-beginning") {
-   callOnActiveTab((tab, tabs) => {
-     var index = 0;
-     if (!tab.pinned) {
-       index = firstUnpinnedTab(tabs);
-     }
-     console.log(`moving ${tab.id} to ${index}`)
-     browser.tabs.move([tab.id], {index});
-   });
- }
-
- -

Il est intéressant de noter l'utilisation de console.log. Cela vous permet de générer des informations sur la console du debugger, ce qui peut être utile lors de la résolution des problèmes rencontrés lors du développement.

- -

Example of the console.log output, from the move tabs feature, in the debugging console

- -

Le code de déplacement appelle d'abord callOnActiveTab() qui à son tour appelle  getCurrentWindowTabs() pour obtenir un objet {{WebExtAPIRef("tabs.Tab")}} contenant les onglets de la fenêtre active. Il parcourt ensuite l'objet pour rechercher et renvoyer l'objet onglet actif :

- -
 function callOnActiveTab(callback) {
-   getCurrentWindowTabs().then((tabs) => {
-     for (var tab of tabs) {
-       if (tab.active) {
-         callback(tab, tabs);
-       }
-     }
-   });
- }
-
- -
Onglets épinglés
- -

Une caractéristique des onglets est que l'utilisateur peut épingler des onglets dans une fenêtre. Les onglets épinglés sont placés au début de la liste des onglets et ne peuvent pas être déplacés. Cela signifie que la première position vers laquelle un onglet peut se déplacer est la première position après les onglets épinglés. Ainsi, firstUnpinnedTab() est appelé pour trouver la position du premier onglet non goupillé en faisant une boucle dans l'objet tabs :

- -
function firstUnpinnedTab(tabs) {
- for (var tab of tabs) {
-   if (!tab.pinned) {
-     return tab.index;
-   }
- }
-}
-
- -

Nous avons maintenant tout ce qu'il faut pour déplacer l'onglet : l'objet onglet actif à partir duquel nous pouvons obtenir l'ID de l'onglet et la position à laquelle l'onglet doit être déplacé. Ainsi, nous pouvons mettre en œuvre le mouvement :

- -
     browser.tabs.move([tab.id], {index});
- -

Les fonctions restantes à dupliquer, recharger, créer et supprimer des onglets sont implémentées de manière similaire.

- -

Manipulation du niveau du zoom d'un onglet

- -

Le prochain ensemble de fonctions vous permet d'obtenir  ({{WebExtAPIRef("tabs.getZoom")}}) et de définir ({{WebExtAPIRef("tabs.setZoom")}}) le niveau de zoom dans un onglet. Vous pouvez également récupérer les paramètres de zoom  ({{WebExtAPIRef("tabs.getZoomSettings")}}) mais, au moment de l'écriture, la possibilité de définir les paramètres ({{WebExtAPIRef("tabs.setZoomSettings")}}) n'était pas disponible dans Firefox.

- -

Le niveau de zoom peut être compris entre 30% et 300% (représenté par des décimales de 0.3 à 3).

- -

Dans Firefox les paramètres de zoom par défaut sont :

- - - -

Par exemple

- -

L'exemple tabs-tabs-tabs comprend trois démonstrations de la fonction de zoom : zoom avant, zoom arrière, et réinitialisation du zoom. Voici la fonctionnalité en action :

- -

{{EmbedYouTube("RFr3oYBCg28")}}

- -

Jetons un coup d'oeil à la façon dont le zoom est implémenté.

- -

manifest.json

- -

Aucune des fonctions de zoom n'a besoin d'autorisations. Par conséquent, aucune fonction du fichier manifest.json ne doit être mise en surbrillance.

- -

tabs.html

- -

Nous avons déjà discuté comment le tabs.html définit les options pour cette extension, rien de nouveau ou unique n'est fait pour fournir les options de zoom.

- -

tabs.js

- -

tabs.js commence par définir plusieurs constantes utilisées dans le code du zoom :

- -
const ZOOM_INCREMENT = 0.2;
-const MAX_ZOOM = 3;
-const MIN_ZOOM = 0.3;
-const DEFAULT_ZOOM = 1;
-
- -

Il utilise ensuite le même écouteur que nous avons discuté précédemment afin qu'il puisse agir sur les clics dans tabs.html.

- -

Pour la fonction zoom, ceci s'exécute :

- -
 else if (e.target.id === "tabs-add-zoom") {
-   callOnActiveTab((tab) => {
-     var gettingZoom = browser.tabs.getZoom(tab.id);
-     gettingZoom.then((zoomFactor) => {
-       //the maximum zoomFactor is 3, it can't go higher
-       if (zoomFactor >= MAX_ZOOM) {
-         alert("Tab zoom factor is already at max!");
-       } else {
-         var newZoomFactor = zoomFactor + ZOOM_INCREMENT;
-         //if the newZoomFactor is set to higher than the max accepted
-         //it won't change, and will never alert that it's at maximum
-         newZoomFactor = newZoomFactor > MAX_ZOOM ? MAX_ZOOM : newZoomFactor;
-         browser.tabs.setZoom(tab.id, newZoomFactor);
-       }
-     });
-   });
- }
-
- -

Ce code utilise callOnActiveTab() pour obtenir les détails de l'onglet actif, puis  {{WebExtAPIRef("tabs.getZoom")}} obtient le facteur de zoom actuel de l'onglet. Le zoom actuel est comparé au maximum défini (MAX_ZOOM) et une alerte est émise si l'onglet est déjà au zoom maximum. Sinon, le niveau de zoom est incrémenté mais limité au zoom maximum, puis le zoom est défini avec {{WebExtAPIRef("tabs.getZoom")}}.

- -

Manipuler le CSS d'un onglet

- -

Une autre fonctionnalité importante offerte par l'API Tabs est la possibilité de manipuler le CSS dans un onglet — ajouter un nouveau CSS dans un onglet ({{WebExtAPIRef("tabs.insertCSS")}}) ou supprimer CSS d'un onglet  ({{WebExtAPIRef("tabs.removeCSS")}}).

- -

Cela peut être utile si vous voulez, par exemple, mettre en évidence certains éléments de la page ou modifier la disposition par défaut de la page (liste courte des cas d'utilisation).

- -

Par exemple

- -

L'exemple apply-css utilise ces fonctionnalités pour ajouter une bordure rouge à la page Web dans l'onglet actif. Voici la fonctionnalité en action:

- -

{{EmbedYouTube("bcK-GT2Dyhs")}}

- -

Voyons comment cela se passe.

- -

manifest.json

- -

Pour utiliser les fonctionnalités CSS dont vous avez besoin :

- - - -

Ce dernier est le plus utile, car il permet à une extension d'utiliser  {{WebExtAPIRef("tabs.insertCSS")}} et {{WebExtAPIRef("tabs.removeCSS")}} dans l'onglet actif lorsqu'il est exécuté depuis le navigateur de l'extension ou action de la page, menu contextuel ou un raccourci.

- -
{
-  "description": "Adds a page action to toggle applying CSS to pages.",
-
- "manifest_version": 2,
- "name": "apply-css",
- "version": "1.0",
- "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/apply-css",
-
- "background": {
-
-    "scripts": ["background.js"]
- },
-
- "page_action": {
-
-    "default_icon": "icons/off.svg",
-    "browser_style": true
- },
-
- "permissions": [
-    "activeTab",
-    "tabs"
- ]
-
-}
-
- -

Vous noterez que la permission "tabs" est ajoutée en plus de "activeTab". Cette permission supplémentaire est nécessaire pour permettre au script de l'extension d'accéder à l'URL de l'onglet, dont nous verrons l'importance dans un instant.

- -

Les autres caractéristiques principales du fichier manifeste sont la définition de:

- - - -

background.js

- -

Au démarrage, background.js définit un certain nombre de constantes à utiliser dans l'extension qui définissent le CSS à appliquer, des titres pour les “actions de page”, et une liste de protocoles dans lesquels l'extension fonctionnera :

- -
const CSS = "body { border: 20px solid red; }";
-const TITLE_APPLY = "Apply CSS";
-const TITLE_REMOVE = "Remove CSS";
-const APPLICABLE_PROTOCOLS = ["http:", "https:"];
-
- -

Lors du premier chargement, l'extension utilise {{WebExtAPIRef("tabs.query")}} pour obtenir une liste de tous les onglets de la fenêtre du navigateur en cours. Il parcourt ensuite les onglets appelant initializePageAction().

- -
var gettingAllTabs = browser.tabs.query({});
-
-gettingAllTabs.then((tabs) => {
- for (let tab of tabs) {
-   initializePageAction(tab);
- }
-});
-
- -

initializePageAction utilise protocolIsApplicable() pour déterminer si l'URL de l'onglet actif est celle à laquelle le CSS peut être appliqué :

- -
function protocolIsApplicable(url) {
- var anchor =  document.createElement('a');
- anchor.href = url;
- return APPLICABLE_PROTOCOLS.includes(anchor.protocol);
-}
-
- -

Ensuite, si l'exemple peut agir sur l'onglet, initializePageAction() définit l'icône  pageAction (barre de navigation) et le titre de l'onglet pour utiliser les versions ‘off’ avant de rendre la pageAction visible :

- -
function initializePageAction(tab) {
-
- if (protocolIsApplicable(tab.url)) {
-   browser.pageAction.setIcon({tabId: tab.id, path: "icons/off.svg"});
-   browser.pageAction.setTitle({tabId: tab.id, title: TITLE_APPLY});
-   browser.pageAction.show(tab.id);
- }
-}
-
- -

Maintenant, un écouteur sur geAction.onClicked attend que l'icône pageAction soit cliqué et appelle toggleCSS quand il l'est.

- -
browser.pageAction.onClicked.addListener(toggleCSS);
- -

toggleCSS() obtient le titre de la pageAction  puis prend l'action décrite :

- - - -
function toggleCSS(tab) {
-
-
- function gotTitle(title) {
-
-    if (title === TITLE_APPLY) {
-     browser.pageAction.setIcon({tabId: tab.id, path: "icons/on.svg"});
-     browser.pageAction.setTitle({tabId: tab.id, title: TITLE_REMOVE});
-     browser.tabs.insertCSS({code: CSS});
-    } else {
-     browser.pageAction.setIcon({tabId: tab.id, path: "icons/off.svg"});
-     browser.pageAction.setTitle({tabId: tab.id, title: TITLE_APPLY});
-     browser.tabs.removeCSS({code: CSS});
-    }
- }
-
- var gettingTitle = browser.pageAction.getTitle({tabId: tab.id});
-
- gettingTitle.then(gotTitle);
-}
-
- -

Enfin, pour s'assurer que pageAction est valide après chaque mise à jour de l'onglet, un écouteur sur {{WebExtAPIRef("tabs.onUpdated")}} appelle  initializePageAction() chaque fois que l'onglet est mis à jour pour vérifier que l'onglet utilise toujours un protocole auquel le CSS peut être appliqué.

- -
browser.tabs.onUpdated.addListener((id, changeInfo, tab) => {
-
- initializePageAction(tab);
-});
-
- -

Quelques autres capacités intéressantes

- -

Il existe deux autres fonctionnalités de l'API Tabs qui ne rentrent pas dans l'une des sections précédentes :

- - - -

Apprendre encore plus

- -

Si vous voulez en savoir plus sur l'API Tabs, consultez le :

- - diff --git a/files/fr/mozilla/add-ons/webextensions/user_interface/barres_laterales/index.html b/files/fr/mozilla/add-ons/webextensions/user_interface/barres_laterales/index.html deleted file mode 100644 index 5d9e2cab05..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/user_interface/barres_laterales/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: Barres laterales -slug: Mozilla/Add-ons/WebExtensions/user_interface/barres_laterales -tags: - - WebExtensions - - barre latérale -translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Sidebars ---- -
{{AddonSidebar}}
- -
-

Une barre latérale est un volet qui s'affiche à gauche de la fenêtre du navigateur, à côté de la page Web. Cette page décrit les barres latérales, leur spécification, leur conception et des exemples d'utilisation.

- -

Le navigateur fournit une interface utilisateur (UI) qui permet à l'utilisateur de voir les barres latéraux actuellement disponibles et de sélectionner une barre latérale à afficher. Par exemple, Firefox a un menu "Affichage > Barre latérale". Une seule barre latérale peut être affichée à la fois, et cette barre latérale sera affichée pour tous les onglets et toutes les fenêtres du navigateur.

-Le navigateur peut inclure un certain nombre de barrières intégrées. Par exemple, Firefox inclut une barre latérale pour interagir avec les favoris: - -

En utilisant la clé sidebar_action du manifest.json, une extension peut ajouter sa propre barre latérale au navigateur. Il sera répertorié à côté des barrières intégrées, et l'utilisateur pourra l'ouvrir en utilisant le même mécanisme que pour les barres intégrés.

- -

Comme un popup d'action du navigateur, le contenu de la barre latérale est spécifié comme un document HTML. Lorsque l'utilisateur ouvre la barre latérale, son document de la barre latérale est chargé dans chaque fenêtre ouverte du navigateur. Chaque fenêtre possède sa propre instance du document. Lorsque de nouvelles fenêtres sont ouvertes, elles obtiennent également leurs propres documents de barre latérale.

- -

Un document pour un onglet particulier peut être défini en utilisant la fonction {{WebExtAPIRef("sidebarAction.setPanel()")}}. Une barre latérale peut comprendre quelle fenêtre elle appartient à l'utilisation de l'API  {{WebExtAPIRef("windows.getCurrent()")}} :

- -
// sidebar.js
-browser.windows.getCurrent({populate: true}).then((windowInfo) => {
-  myWindowId = windowInfo.id;
-});
- -

Ceci est utile si une barre latérale veut afficher différents contenus pour différentes fenêtres. Par exemple, regardez l'exemple "annotate-page".

- -

Les documents de la barre latérale ont accès au même priviléges que les API JavaScript d'arrière-plan et les scripts contextuels. Ils peuvent accéder directement à la page de fond en utilisant {{WebExtAPIRef("runtime.getBackgroundPage()")}}, et peuvent interagir avec des scripts de contenu ou des applications natives à l'aide d'API de messagerie comme {{WebExtAPIRef("tabs.sendMessage()")}} et  {{WebExtAPIRef("runtime.sendNativeMessage()")}}.

- -

Les documents de la barre latérale sont déchargés lorsque leur fenêtre de navigateur est fermée ou lorsque l'utilisateur ferme la barre latérale. Cela signifie que, contrairement aux pages de fond, les documents de la barre latérale ne restent pas chargés tout le temps, mais contrairement aux popups d'action du navigateur, ils restent chargés pendant que l'utilisateur interagit avec les pages Web.

- -

Lorsqu'une extension est installée comme une barre latérale, sa barre latérale s'ouvrira automatiquement. Ceci est destiné à aider l'utilisateur à comprendre que l'extension comprend une barre latérale. Notez qu'il n'est pas possible pour les add-ons d'ouvrir les barres latérales de façon programmée: les barrières latérales ne peuvent être ouvertes que par l'utilisateur.

- -

Spécification des barres latérales

- -

Pour spécifier une barre latérale, définissez le document par défaut avec la clé du manifest.json  sidebar_action, à côté d'un titre et d'une icône par défaut :

- -
"sidebar_action": {
-  "default_title": "My sidebar",
-  "default_panel": "sidebar.html",
-  "default_icon": "sidebar_icon.png"
-}
- -

Le titre, le panneau et l'icône peuvent être modifiés par programme en utilisant l'API {{WebExtAPIRef ("sidebarAction")}}.

- -

Le titre et l'icône sont affichés à l'utilisateur dans une interface utilisateur fournie par le navigateur pour lister les barres latérales, telles que "Affichage > Barre latérale" dans le menu Firefox.

- -

Concept de la barre latérale

- -

Pour plus de détails sur la façon de concevoir la page web d'une barre latérale pour qu'elle corresponde au style de Firefox, voir la documentation du Système de conception Photon.

- -

Exemple

- -

Le dépôt webextensions-examples sur GitHub contient plusieurs exemples de WebExtensions qu utilise une barre latérale:

- - -
diff --git a/files/fr/mozilla/add-ons/webextensions/user_interface/context_menu_items/index.html b/files/fr/mozilla/add-ons/webextensions/user_interface/context_menu_items/index.html new file mode 100644 index 0000000000..b2cf42a214 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/user_interface/context_menu_items/index.html @@ -0,0 +1,59 @@ +--- +title: Elements du menu contextuel +slug: Mozilla/Add-ons/WebExtensions/user_interface/elements_menu_contextuel +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items +--- +
{{AddonSidebar}}
+ +
+

Cette option d'interface utilisateur ajoute un ou plusieurs éléments à un menu contextuel du navigateur. Il s'agit du menu contextuel disponible lorsqu'un utilisateur clique avec le bouton droit de la souris sur une page Web. Les onglets peuvent aussi avoir des menus contextuels, disponibles via l' API browser.menus.

+ +

Example of content menu items added by a WebExtension, from the context-menu-demo example

+ +

Vous utiliseriez cette option pour exposer les fonctions qui sont pertinentes à des contextes de navigateur ou de page Web spécifiques. Par exemple, vous pouvez afficher des fonctions pour ouvrir un éditeur graphique lorsque l'utilisateur clique sur une image ou offrir une fonction pour enregistrer le contenu d'une page lorsqu'une partie de celle-ci est sélectionnée. Vous pouvez ajouter des éléments de menu simples, des cases à cocher, des groupes de boutons radio et des séparateurs aux menus. Une fois qu'un élément de menu contextuel a été ajouté à l'aide de {{WebExtAPIRef("contextMenus.create")}}, il est affiché dans tous les onglets du navigateur, mais vous pouvez le masquer en le supprimant avec {{WebExtAPIRef("contextMenus.remove")}}.

+ +

La liste complète des contextes pris en charge est disponible sur {{WebExtAPIRef("menus.ContextType")}} et inclut les contextes en dehors d'une page Web, tels que les signets dans l'interface du navigateur. Par exemple, l'extension "Open bookmark in Container Tab" ajoute un élément de menu qui permet à l'utilisateur d'ouvrir une URL de signet dans un nouvel onglet de conteneur :

+ +

+ +
+

Spécification des éléments du menu contextuel

+ +

Vous gérez les éléments du menu contextuel par programmation, en utilisant l'API {{WebExtAPIRef("contextMenus")}}. Cependant, vous devez demander la permission contextMenus dans votre manifest.json pour pouvoir profiter de l'avantage de l'API.

+ +
"permissions": ["contextMenus"]
+Vous pouvez ensuite ajouter (mettre à jour ou supprimer) les éléments du menu contextuel dans votre script de fond de l'extension. Pour créer un élément de menu, vous spécifiez un ID, son titre et les menus contextuels sur lesquels il doit apparaître: + +
browser.contextMenus.create({
+  id: "log-selection",
+  title: browser.i18n.getMessage("contextMenuItemSelectionLogger"),
+  contexts: ["selection"]
+}, onCreated);
+ +

Votre extension attend les clics sur les éléments du menu. L'information passée sur l'élément a cliqué, le contexte où le clic s'est produit, et les détails de l'onglet où le clic a eu lieu, peuvent ensuite être utilisés pour appeler les fonctionnalités de l'extension appropriées.

+ +
browser.contextMenus.onClicked.addListener(function(info, tab) {
+  switch (info.menuItemId) {
+    case "log-selection":
+      console.log(info.selectionText);
+      break;
+    ...
+  }
+})
+ +

Icônes

+ +

Pour plus de détails sur la création d'icônes à utiliser avec votre menu contextuel, voir  Iconography dans la documentation du Systeme de conception de Photon.

+ +

Exemples

+ +

Le depot webextensions-examples sur GitHub contient plusieurs exemples de WebExtensions qui utilise les élements du menu contextuel :

+ +
    +
  • menu-demo ajoute différents éléments au menu contextuel.
    • +
  • context-menu-copy-link-with-types ajoute un élément de menu contextuel aux liens qui copient l'URL vers le presse-papiers, comme un texte brut et HTML enrichi.
    • +
+
+
diff --git a/files/fr/mozilla/add-ons/webextensions/user_interface/devtools_panels/index.html b/files/fr/mozilla/add-ons/webextensions/user_interface/devtools_panels/index.html new file mode 100644 index 0000000000..e487250175 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/user_interface/devtools_panels/index.html @@ -0,0 +1,74 @@ +--- +title: panneaux devtools +slug: Mozilla/Add-ons/WebExtensions/user_interface/panneaux_devtools +tags: + - Débutant + - Guide + - WebExtensions + - interface utilisateur +translation_of: Mozilla/Add-ons/WebExtensions/user_interface/devtools_panels +--- +
{{AddonSidebar}}
+ +
+

Cette fonctionnalité deviendra disponible dans Firefox 54.

+
+ +

Lorsqu'une extension fournit des outils utiles aux développeurs, il est possible d'ajouter une interface utilisateur pour les outils de développement du navigateur en tant que nouveau panneau.

+ +

Simple example showing the addition of "My panel" to the Developer Tools tabs.

+ +

Spécification d'un panneau d'outils de développement

+ +

Un panneau d'outils de développement est ajouté à l'aide de l'API devtools.panels, qui, à son tour, doit être exécutée à partir d'une page spéciale devtools.

+ +

Ajoutez la page devtools en incluant la clé devtools_page dans l'extension manifest.json et fournissez l'emplacement du fichier de la page HTML dans l'extension :

+ +
"devtools_page": "devtools-page.html"
+ +

Dans la page des devtools, appelez un script qui ajoutera un panneau dans devtools:

+ +
<body>
+  <script src="devtools.js"></script>
+</body>
+ +

Dans le script, créez un panneau devtools en spécifiant le titre, l'icône et le fichier HTML du panneau qui fournit le contenu du panneau:

+ +
function handleShown() {
+  console.log("panel is being shown");
+}
+
+function handleHidden() {
+  console.log("panel is being hidden");
+}
+
+browser.devtools.panels.create(
+  "My Panel",           // title
+  "icons/star.png",           // icon
+  "devtools/panel/panel.html"          // content
+).then((newPanel) => {
+  newPanel.onShown.addListener(handleShown);
+  newPanel.onHidden.addListener(handleHidden);
+});
+ +

L'extension peut maintenant exécuter un code dans la fenêtre inspectée à l'aide de devtools.inspectedWindow.eval() ou en injectant un script de contenu via le script en arrière en passant un message. Vous pouvez trouver plus de détails sur la façon de procéder dans l'Extension des outils de développement.

+ +

Conception du panneau de développement

+ +

Pour plus de détails sur la façon de concevoir la page Web de votre panneau de développeurs pour qu'elle corresponde au style de Firefox, consultez la documentation Photon Design System.

+ +

Icônes

+ +

Pour plus de détails sur la création d'icônes à utiliser avec votre panneau d'outils de développement, voir Iconographie dans la documentation du Photon Design System.

+ + + +

Exemples

+ +

Le depot webextensions-examples sur GitHub contient plusieurs exemples de WebExtensions qui utilisent les panneaux devtools:

+ + diff --git a/files/fr/mozilla/add-ons/webextensions/user_interface/elements_menu_contextuel/index.html b/files/fr/mozilla/add-ons/webextensions/user_interface/elements_menu_contextuel/index.html deleted file mode 100644 index b2cf42a214..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/user_interface/elements_menu_contextuel/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: Elements du menu contextuel -slug: Mozilla/Add-ons/WebExtensions/user_interface/elements_menu_contextuel -tags: - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items ---- -
{{AddonSidebar}}
- -
-

Cette option d'interface utilisateur ajoute un ou plusieurs éléments à un menu contextuel du navigateur. Il s'agit du menu contextuel disponible lorsqu'un utilisateur clique avec le bouton droit de la souris sur une page Web. Les onglets peuvent aussi avoir des menus contextuels, disponibles via l' API browser.menus.

- -

Example of content menu items added by a WebExtension, from the context-menu-demo example

- -

Vous utiliseriez cette option pour exposer les fonctions qui sont pertinentes à des contextes de navigateur ou de page Web spécifiques. Par exemple, vous pouvez afficher des fonctions pour ouvrir un éditeur graphique lorsque l'utilisateur clique sur une image ou offrir une fonction pour enregistrer le contenu d'une page lorsqu'une partie de celle-ci est sélectionnée. Vous pouvez ajouter des éléments de menu simples, des cases à cocher, des groupes de boutons radio et des séparateurs aux menus. Une fois qu'un élément de menu contextuel a été ajouté à l'aide de {{WebExtAPIRef("contextMenus.create")}}, il est affiché dans tous les onglets du navigateur, mais vous pouvez le masquer en le supprimant avec {{WebExtAPIRef("contextMenus.remove")}}.

- -

La liste complète des contextes pris en charge est disponible sur {{WebExtAPIRef("menus.ContextType")}} et inclut les contextes en dehors d'une page Web, tels que les signets dans l'interface du navigateur. Par exemple, l'extension "Open bookmark in Container Tab" ajoute un élément de menu qui permet à l'utilisateur d'ouvrir une URL de signet dans un nouvel onglet de conteneur :

- -

- -
-

Spécification des éléments du menu contextuel

- -

Vous gérez les éléments du menu contextuel par programmation, en utilisant l'API {{WebExtAPIRef("contextMenus")}}. Cependant, vous devez demander la permission contextMenus dans votre manifest.json pour pouvoir profiter de l'avantage de l'API.

- -
"permissions": ["contextMenus"]
-Vous pouvez ensuite ajouter (mettre à jour ou supprimer) les éléments du menu contextuel dans votre script de fond de l'extension. Pour créer un élément de menu, vous spécifiez un ID, son titre et les menus contextuels sur lesquels il doit apparaître: - -
browser.contextMenus.create({
-  id: "log-selection",
-  title: browser.i18n.getMessage("contextMenuItemSelectionLogger"),
-  contexts: ["selection"]
-}, onCreated);
- -

Votre extension attend les clics sur les éléments du menu. L'information passée sur l'élément a cliqué, le contexte où le clic s'est produit, et les détails de l'onglet où le clic a eu lieu, peuvent ensuite être utilisés pour appeler les fonctionnalités de l'extension appropriées.

- -
browser.contextMenus.onClicked.addListener(function(info, tab) {
-  switch (info.menuItemId) {
-    case "log-selection":
-      console.log(info.selectionText);
-      break;
-    ...
-  }
-})
- -

Icônes

- -

Pour plus de détails sur la création d'icônes à utiliser avec votre menu contextuel, voir  Iconography dans la documentation du Systeme de conception de Photon.

- -

Exemples

- -

Le depot webextensions-examples sur GitHub contient plusieurs exemples de WebExtensions qui utilise les élements du menu contextuel :

- -
    -
  • menu-demo ajoute différents éléments au menu contextuel.
    • -
  • context-menu-copy-link-with-types ajoute un élément de menu contextuel aux liens qui copient l'URL vers le presse-papiers, comme un texte brut et HTML enrichi.
    • -
-
-
diff --git a/files/fr/mozilla/add-ons/webextensions/user_interface/extension_pages/index.html b/files/fr/mozilla/add-ons/webextensions/user_interface/extension_pages/index.html new file mode 100644 index 0000000000..d12b031f08 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/user_interface/extension_pages/index.html @@ -0,0 +1,77 @@ +--- +title: Extension pages +slug: Mozilla/Add-ons/WebExtensions/user_interface/pages_web_incluses +tags: + - Débutant + - User Interface + - WebExtensions + - interface utilisateur +translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Extension_pages +--- +
{{AddonSidebar()}}
+ +

Vous pouvez inclure des pages HTML dans votre extension sous la forme de formulaires, d’aide ou tout autre contenu dont votre extension a besoin.

+ +

Example of a simple bundled page displayed as a detached panel.

+ +

Ces pages ont également accès aux mêmes API JavaScript privilégiées qui sont disponibles pour les scripts d’arrière‐plan de votre extension, mais elles sont dans leur propre onglet, leur propre file d’attente d’événements JavaScript, leurs propres globales etc.

+ +

Pensez à la page d'arrière-plan comme une « page cachée d’extension ».

+ +

Spécification des pages d’extension

+ +

Vous pouvez inclure des fichiers HTML - et les fichiers CSS ou JavaScript associés - dans votre extension. Les fichiers peuvent être inclus à la racine ou organisés dans des sous‐dossiers.***

+ +
/my-extension
+    /manifest.json
+    /my-page.html
+    /my-page.js
+ +

Affichage des pages d’extension

+ +

Il existe deux options pour afficher des pages d'extension :  {{WebExtAPIRef("windows.create()")}} et {{WebExtAPIRef("tabs.create()")}}.

+ +

À l’aide de windows.create(), vous pouvez ouvrir une page HTML intégrée dans un panneau détaché (une fenêtre sans l’interface utilisateur de la barre d’la barre de signet et similaire) pour créer une expérience utilisateur semblable à une boîte de dialogue :

+ +
var createData = {
+  type: "detached_panel",
+  url: "panel.html",
+  width: 250,
+  height: 100
+};
+var creating = browser.windows.create(createData);
+ +

Lorsque la fenêtre n'est plus nécessaire, elle peut être fermée par programme.

+ +

Par exemple, après que l’utilisateur a cliqué sur un bouton, en passant l’ID de la fenêtre actuelle à {{WebExtAPIRef("windows.remove()")}} :

+ +
document.getElementById("closeme").addEventListener("click", function(){
+  let winId = browser.windows.WINDOW_ID_CURRENT;
+  let removing = browser.windows.remove(winId);
+});
+ +

Pages d’extension et historique

+ +

Par défaut, les pages que vous ouvrez de cette manière seront stockées dans l’historique de l’utilisateur, comme les pages Web normales. Si vous ne voulez pas avoir ce comportement, utilisez {{WebExtAPIRef("history.deleteUrl()")}} pour supprimer l'enregistrement du navigateur :

+ +
function onVisited(historyItem) {
+  if (historyItem.url == browser.extension.getURL(myPage)) {
+    browser.history.deleteUrl({url: historyItem.url});
+  }
+}
+
+browser.history.onVisited.addListener(onVisited);
+ +

Pour utiliser l’API historique, vous devez demander la permission « history » dans votre fichier manifest.json.

+ +

Conception des pages Web

+ +

Pour plus de détails sur la façon de concevoir votre page Web pour correspondre au style de Firefox, voir la documentation sur le système de conception Photon et les styles de navigateur.

+ +

Exemples

+ +

Le dépôt webextensions-examples sur GitHub contient plusieurs exemples de WebExtensions qui utilise une action de navigateur :

+ + diff --git a/files/fr/mozilla/add-ons/webextensions/user_interface/lignes_directrices_en_matiere_accessibilite/index.html b/files/fr/mozilla/add-ons/webextensions/user_interface/lignes_directrices_en_matiere_accessibilite/index.html deleted file mode 100644 index e974f0871b..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/user_interface/lignes_directrices_en_matiere_accessibilite/index.html +++ /dev/null @@ -1,153 +0,0 @@ ---- -title: Lignes directrices en matière d'accessibilité -slug: >- - Mozilla/Add-ons/WebExtensions/user_interface/lignes_directrices_en_matiere_accessibilite -tags: - - Développement - - Extensions - - UI - - UX - - WebExtensions - - interface utilisateur -translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Accessibility_guidelines ---- -

{{AddonSidebar()}}

- -

En ce qui concerne l'accessibilité, les extensions devraient suivre les mêmes lignes directrices que les sites Web. Cependant, les extensions ont des caractéristiques uniques qui méritent d'être prises en considération lors de la conception pour l'accessibilité. Voici une ventilation des fonctions d'extension et comment elles devraient être utilisées pour rendre une extension accessible.

- -

Vous trouverez plus d'information sur la conception et l'accessibilité dans la section Photon Design System et Accessibilité et Mozilla section de MDN.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Fonction d'interface utilisateur Lignes directrices
-

Raccourcis clavier  (commands)

- 		-

Les raccourcis clavier permettent d'activer facilement les fonctions d'extension.

- -

Pour améliorer l'accessibilité, ajoutez des raccourcis clavier pour :

- -
    -
  • éléments de l'interface utilisateur de l'extension, tels que les boutons de la barre d'outils et de la barre d'adresse.
    • -
  • toutes les fonctionnalités d'une extension, cependant, lorsque cela n'est pas pratique, fournissent des raccourcis pour les fonctionnalités d'extension couramment utilisées.  
    • -
- -
-

Les utilisateurs peuvent modifier les raccourcis clavier d'une extension en fonction de leurs besoins. Cependant, les utilisateurs ne peuvent pas ajouter de raccourcis, c'est pourquoi il est préférable d'en ajouter autant que possible.

-
-
-

Bouton de la barre d'outils (action du navigateur)

- 		-

Pour tenir compte du thème actif, fournissez des icônes de boutons de la barre d'outils pour les thèmes avec du texte clair et foncé.

- -

Suivez les directives du Photon Design System sur l'Iconographie. Utilisez différentes images pour transmettre l'état, par exemple basculé ou actif. N'utilisez pas d'icônes colorées ou de changements de couleur pour indiquer les changements d'état, car ils peuvent ne pas être visibles pour tous les utilisateurs.

- -

Incluez toujours un titre de texte pour que les détails des boutons puissent être lus par un lecteur d'écran. Le titre du bouton doit être mis à jour pour refléter :

- -
    -
  • l'état de l'extension.
    • -
  • le contenu des badges texte affichés sur le bouton.
    • -
- -

Ajoutez un raccourci à l'action du bouton, en utilisant l'option spéciale de raccourci spécial _execute_browser_action.

-
-

Bouton de la barre d'outils avec une fenêtre contextuelle

- 		-

Le balisage dans la fenêtre contextuelle doit suivre les lignes directrices standard d'accessibilité au web.

-
-

Bouton de la barre d'adresse (action page)

- 		-

Les mêmes directives que les boutons de la barre d'outils doivent être suivies.

- -

Ajoutez un raccourci à l'action du bouton, en utilisant l'option de raccourci  _execute_page_action.

-
-

Bouton de la bare d'adresse avec un popup

- 		-

Le balisage dans la fenêtre contextuelle devrait suivre les lignes directrices standard d'accessibilité du web.

-
-

Elément du menu contextuel

- 		-

Les éléments de menu contextuel offrent aux utilisateurs un moyen accessible de découvrir les fonctions d'extension associées aux éléments d'une page Web. Par conséquent, dans la mesure du possible, ajoutez des fonctions d'extension à leurs menus contextuels pertinents.

-
-

Barre latérale

- 		-

Le balisage dans la barre latérale doit être conforme aux lignes directrices standard d'accessibilité du web.

- -

Ajoutez un raccourci clavier pour ouvrir une barre latérale, en utilisant l'option de raccourci spécial _execute_sidebar_action.

-
-

Options page

- 		-

Le balisage de la page des options doit suivre les lignes directrices standard d'accessibilité du Web.

-
-

Extension page

- 		-

Le balisage de la page d'extension doit suivre les lignes directrices standard d'accessibilité du Web.

-
-

Notification

- 		-

Fournir des notifications pour les événements qui se produisent en arrière-plan ou qui ne sont pas autrement notifiés dans l'interface utilisateur. Soyez économe en notifications, mais veillez à ne pas les minimiser au détriment de l'accessibilité.

-
-

Suggestion de la barre d'adresse

- 		-

Ajoutez des suggestions selon le guide, il n'y a pas d'autres considérations d'accessibilité pour les extensions.

-
-

Panneau d'outils de développement

- 		-

Le balisage dans la barre latérale doit être conforme aux conforme aux directives d'accessibilité du Web standard.

- -

Il est recommandé d'offrir un raccourci clavier pour ouvrir un panneau devtools.

-
diff --git a/files/fr/mozilla/add-ons/webextensions/user_interface/pages_web_incluses/index.html b/files/fr/mozilla/add-ons/webextensions/user_interface/pages_web_incluses/index.html deleted file mode 100644 index d12b031f08..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/user_interface/pages_web_incluses/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: Extension pages -slug: Mozilla/Add-ons/WebExtensions/user_interface/pages_web_incluses -tags: - - Débutant - - User Interface - - WebExtensions - - interface utilisateur -translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Extension_pages ---- -
{{AddonSidebar()}}
- -

Vous pouvez inclure des pages HTML dans votre extension sous la forme de formulaires, d’aide ou tout autre contenu dont votre extension a besoin.

- -

Example of a simple bundled page displayed as a detached panel.

- -

Ces pages ont également accès aux mêmes API JavaScript privilégiées qui sont disponibles pour les scripts d’arrière‐plan de votre extension, mais elles sont dans leur propre onglet, leur propre file d’attente d’événements JavaScript, leurs propres globales etc.

- -

Pensez à la page d'arrière-plan comme une « page cachée d’extension ».

- -

Spécification des pages d’extension

- -

Vous pouvez inclure des fichiers HTML - et les fichiers CSS ou JavaScript associés - dans votre extension. Les fichiers peuvent être inclus à la racine ou organisés dans des sous‐dossiers.***

- -
/my-extension
-    /manifest.json
-    /my-page.html
-    /my-page.js
- -

Affichage des pages d’extension

- -

Il existe deux options pour afficher des pages d'extension :  {{WebExtAPIRef("windows.create()")}} et {{WebExtAPIRef("tabs.create()")}}.

- -

À l’aide de windows.create(), vous pouvez ouvrir une page HTML intégrée dans un panneau détaché (une fenêtre sans l’interface utilisateur de la barre d’la barre de signet et similaire) pour créer une expérience utilisateur semblable à une boîte de dialogue :

- -
var createData = {
-  type: "detached_panel",
-  url: "panel.html",
-  width: 250,
-  height: 100
-};
-var creating = browser.windows.create(createData);
- -

Lorsque la fenêtre n'est plus nécessaire, elle peut être fermée par programme.

- -

Par exemple, après que l’utilisateur a cliqué sur un bouton, en passant l’ID de la fenêtre actuelle à {{WebExtAPIRef("windows.remove()")}} :

- -
document.getElementById("closeme").addEventListener("click", function(){
-  let winId = browser.windows.WINDOW_ID_CURRENT;
-  let removing = browser.windows.remove(winId);
-});
- -

Pages d’extension et historique

- -

Par défaut, les pages que vous ouvrez de cette manière seront stockées dans l’historique de l’utilisateur, comme les pages Web normales. Si vous ne voulez pas avoir ce comportement, utilisez {{WebExtAPIRef("history.deleteUrl()")}} pour supprimer l'enregistrement du navigateur :

- -
function onVisited(historyItem) {
-  if (historyItem.url == browser.extension.getURL(myPage)) {
-    browser.history.deleteUrl({url: historyItem.url});
-  }
-}
-
-browser.history.onVisited.addListener(onVisited);
- -

Pour utiliser l’API historique, vous devez demander la permission « history » dans votre fichier manifest.json.

- -

Conception des pages Web

- -

Pour plus de détails sur la façon de concevoir votre page Web pour correspondre au style de Firefox, voir la documentation sur le système de conception Photon et les styles de navigateur.

- -

Exemples

- -

Le dépôt webextensions-examples sur GitHub contient plusieurs exemples de WebExtensions qui utilise une action de navigateur :

- - diff --git a/files/fr/mozilla/add-ons/webextensions/user_interface/panneaux_devtools/index.html b/files/fr/mozilla/add-ons/webextensions/user_interface/panneaux_devtools/index.html deleted file mode 100644 index e487250175..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/user_interface/panneaux_devtools/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: panneaux devtools -slug: Mozilla/Add-ons/WebExtensions/user_interface/panneaux_devtools -tags: - - Débutant - - Guide - - WebExtensions - - interface utilisateur -translation_of: Mozilla/Add-ons/WebExtensions/user_interface/devtools_panels ---- -
{{AddonSidebar}}
- -
-

Cette fonctionnalité deviendra disponible dans Firefox 54.

-
- -

Lorsqu'une extension fournit des outils utiles aux développeurs, il est possible d'ajouter une interface utilisateur pour les outils de développement du navigateur en tant que nouveau panneau.

- -

Simple example showing the addition of "My panel" to the Developer Tools tabs.

- -

Spécification d'un panneau d'outils de développement

- -

Un panneau d'outils de développement est ajouté à l'aide de l'API devtools.panels, qui, à son tour, doit être exécutée à partir d'une page spéciale devtools.

- -

Ajoutez la page devtools en incluant la clé devtools_page dans l'extension manifest.json et fournissez l'emplacement du fichier de la page HTML dans l'extension :

- -
"devtools_page": "devtools-page.html"
- -

Dans la page des devtools, appelez un script qui ajoutera un panneau dans devtools:

- -
<body>
-  <script src="devtools.js"></script>
-</body>
- -

Dans le script, créez un panneau devtools en spécifiant le titre, l'icône et le fichier HTML du panneau qui fournit le contenu du panneau:

- -
function handleShown() {
-  console.log("panel is being shown");
-}
-
-function handleHidden() {
-  console.log("panel is being hidden");
-}
-
-browser.devtools.panels.create(
-  "My Panel",           // title
-  "icons/star.png",           // icon
-  "devtools/panel/panel.html"          // content
-).then((newPanel) => {
-  newPanel.onShown.addListener(handleShown);
-  newPanel.onHidden.addListener(handleHidden);
-});
- -

L'extension peut maintenant exécuter un code dans la fenêtre inspectée à l'aide de devtools.inspectedWindow.eval() ou en injectant un script de contenu via le script en arrière en passant un message. Vous pouvez trouver plus de détails sur la façon de procéder dans l'Extension des outils de développement.

- -

Conception du panneau de développement

- -

Pour plus de détails sur la façon de concevoir la page Web de votre panneau de développeurs pour qu'elle corresponde au style de Firefox, consultez la documentation Photon Design System.

- -

Icônes

- -

Pour plus de détails sur la création d'icônes à utiliser avec votre panneau d'outils de développement, voir Iconographie dans la documentation du Photon Design System.

- - - -

Exemples

- -

Le depot webextensions-examples sur GitHub contient plusieurs exemples de WebExtensions qui utilisent les panneaux devtools:

- - diff --git a/files/fr/mozilla/add-ons/webextensions/user_interface/sidebars/index.html b/files/fr/mozilla/add-ons/webextensions/user_interface/sidebars/index.html new file mode 100644 index 0000000000..5d9e2cab05 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/user_interface/sidebars/index.html @@ -0,0 +1,61 @@ +--- +title: Barres laterales +slug: Mozilla/Add-ons/WebExtensions/user_interface/barres_laterales +tags: + - WebExtensions + - barre latérale +translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Sidebars +--- +
{{AddonSidebar}}
+ +
+

Une barre latérale est un volet qui s'affiche à gauche de la fenêtre du navigateur, à côté de la page Web. Cette page décrit les barres latérales, leur spécification, leur conception et des exemples d'utilisation.

+ +

Le navigateur fournit une interface utilisateur (UI) qui permet à l'utilisateur de voir les barres latéraux actuellement disponibles et de sélectionner une barre latérale à afficher. Par exemple, Firefox a un menu "Affichage > Barre latérale". Une seule barre latérale peut être affichée à la fois, et cette barre latérale sera affichée pour tous les onglets et toutes les fenêtres du navigateur.

+Le navigateur peut inclure un certain nombre de barrières intégrées. Par exemple, Firefox inclut une barre latérale pour interagir avec les favoris: + +

En utilisant la clé sidebar_action du manifest.json, une extension peut ajouter sa propre barre latérale au navigateur. Il sera répertorié à côté des barrières intégrées, et l'utilisateur pourra l'ouvrir en utilisant le même mécanisme que pour les barres intégrés.

+ +

Comme un popup d'action du navigateur, le contenu de la barre latérale est spécifié comme un document HTML. Lorsque l'utilisateur ouvre la barre latérale, son document de la barre latérale est chargé dans chaque fenêtre ouverte du navigateur. Chaque fenêtre possède sa propre instance du document. Lorsque de nouvelles fenêtres sont ouvertes, elles obtiennent également leurs propres documents de barre latérale.

+ +

Un document pour un onglet particulier peut être défini en utilisant la fonction {{WebExtAPIRef("sidebarAction.setPanel()")}}. Une barre latérale peut comprendre quelle fenêtre elle appartient à l'utilisation de l'API  {{WebExtAPIRef("windows.getCurrent()")}} :

+ +
// sidebar.js
+browser.windows.getCurrent({populate: true}).then((windowInfo) => {
+  myWindowId = windowInfo.id;
+});
+ +

Ceci est utile si une barre latérale veut afficher différents contenus pour différentes fenêtres. Par exemple, regardez l'exemple "annotate-page".

+ +

Les documents de la barre latérale ont accès au même priviléges que les API JavaScript d'arrière-plan et les scripts contextuels. Ils peuvent accéder directement à la page de fond en utilisant {{WebExtAPIRef("runtime.getBackgroundPage()")}}, et peuvent interagir avec des scripts de contenu ou des applications natives à l'aide d'API de messagerie comme {{WebExtAPIRef("tabs.sendMessage()")}} et  {{WebExtAPIRef("runtime.sendNativeMessage()")}}.

+ +

Les documents de la barre latérale sont déchargés lorsque leur fenêtre de navigateur est fermée ou lorsque l'utilisateur ferme la barre latérale. Cela signifie que, contrairement aux pages de fond, les documents de la barre latérale ne restent pas chargés tout le temps, mais contrairement aux popups d'action du navigateur, ils restent chargés pendant que l'utilisateur interagit avec les pages Web.

+ +

Lorsqu'une extension est installée comme une barre latérale, sa barre latérale s'ouvrira automatiquement. Ceci est destiné à aider l'utilisateur à comprendre que l'extension comprend une barre latérale. Notez qu'il n'est pas possible pour les add-ons d'ouvrir les barres latérales de façon programmée: les barrières latérales ne peuvent être ouvertes que par l'utilisateur.

+ +

Spécification des barres latérales

+ +

Pour spécifier une barre latérale, définissez le document par défaut avec la clé du manifest.json  sidebar_action, à côté d'un titre et d'une icône par défaut :

+ +
"sidebar_action": {
+  "default_title": "My sidebar",
+  "default_panel": "sidebar.html",
+  "default_icon": "sidebar_icon.png"
+}
+ +

Le titre, le panneau et l'icône peuvent être modifiés par programme en utilisant l'API {{WebExtAPIRef ("sidebarAction")}}.

+ +

Le titre et l'icône sont affichés à l'utilisateur dans une interface utilisateur fournie par le navigateur pour lister les barres latérales, telles que "Affichage > Barre latérale" dans le menu Firefox.

+ +

Concept de la barre latérale

+ +

Pour plus de détails sur la façon de concevoir la page web d'une barre latérale pour qu'elle corresponde au style de Firefox, voir la documentation du Système de conception Photon.

+ +

Exemple

+ +

Le dépôt webextensions-examples sur GitHub contient plusieurs exemples de WebExtensions qu utilise une barre latérale:

+ + +
diff --git a/files/fr/mozilla/add-ons/webextensions/what_next_/index.html b/files/fr/mozilla/add-ons/webextensions/what_next_/index.html new file mode 100644 index 0000000000..aabc4dccba --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/what_next_/index.html @@ -0,0 +1,72 @@ +--- +title: Que faire ensuite ? +slug: Mozilla/Add-ons/WebExtensions/que_faire_ensuite +tags: + - Débutant + - Extensions + - WebExtension +translation_of: Mozilla/Add-ons/WebExtensions/What_next_ +--- +
{{AddonSidebar}}
+ +

Vous serez maintenant prêt à commencer à transformer votre idée pour une extension de navigateur dans la réalité. Avant de commencer ce périple, ça vaut la peine d'être au courant de quelques choses  qui vous aides à en faire une.

+ +

Vous pouvez trouver plus d'informations sur de nombreux sujets abordés sur cette page sur l'atelier d'extension, un site web dédié à vous aider à écrire, tester, publier et distribuer des extensions pour Firefox.

+ +

Votre environnement de développement

+ +

Vous n'avez pas besoin d'outils spéciaux de développement ou de création d'environnement pour créer des extensions de navigateur : il est tout à fait possible de créer de superbes extensions de navigateur avec un simple éditeur de texte. Cependant, vous avez peut-être développé pour le Web et avez un ensemble d'outils et un environnement que vous souhaitez réutiliser. Si vous le faites, vous devez être conscient de certaines choses.

+ +

Si vous utilisez des outils de minimisation ou d'obscurcissement pour fournir votre code final, vous devez fournir votre code source au processus de révision AMO. De plus, les outils que vous utilisez — minification, obscurcissement et construction — doivent être open source (ou offrir une utilisation gratuite illimitée) et être disponible pour fonctionner sur l'ordinateur de l'utilisateur  (Windows, Mac, ou Linux). Malheureusement, nos réviseurs ne peuvent pas travailler avec des outils commerciaux ou basés sur le Web.

+ +

En savoir plus sur les outils de développement sur l'atelier d'extensions

+ +

Bibliothèques tierces

+ +

Les bibliothèques tierces sont un excellent moyen d'ajouter rapidement des fonctionnalités ou fonctionnalités complexes aux extensions de votre navigateur. Lorsque vous soumettez une extension au processus de révision AMO, le processus considère également les bibliothèques tierces utilisées. Pour rationaliser la révision, assurez-vous de toujours télécharger des bibliothèques tierces à partir de leur site Web officiel ou référentiel, et si la bibliothèque est minifiée, fournissez un lien vers le code source. Veuillez noter que les bibliothèques tierces ne peuvent être modifiées d'aucune façon.

+ +

En savoir plus sur la soumission du code source sur l'atelier d'extensions

+ +

L'accord de distribution des modules complémentaires de   Firefox

+ +

Les extensions de navigateur doivent être signées pour être installées dans les réalisations ou versions bêta de Firefox. La signature a lieu dans addons.mozilla.org (AMO) et est soumise aux termes et conditions du contrat de distribution de Firefox Add-on. L'objectif de l'accord est de garantir que les utilisateurs de Firefox aient accès à des modules complémentaires de qualité et bien supportés qui améliorent l'expérience de Firefox.

+ +

Lire l'accord sur l'atelier d'extensions

+ +

En savoir plus sur la signature de l'atelier extensions

+ +

Le processus d'examen

+ +

Lorsqu'une extension de navigateur est soumise à la signature, elle fait l'objet d'un examen automatisé. Il peut également faire l'objet d'un examen manuel lorsque l'examen automatisé détermine qu'un examen manuel est nécessaire. L'extension de votre navigateur ne sera pas signée tant qu'elle ne sera pas approuvée automatiquement et que sa signature sera révoquée si elle échoue à l'examen manuel. Le processus de révision suit un ensemble de directives strictes, il est donc facile de vérifier et d'éviter tout problème de révision probable.

+ +

Consultez la politique de révision et les lignes directrices sur l'atelier d'extensions

+ +

AMO a présenté des extensions de navigateur

+ +

Si vous choisissez de lister l'extension de votre navigateur sur AMO, votre extension pourrait figurer sur le site Web d'AMO, dans le gestionnaire de modules complémentaires du navigateur Firefox ou ailleurs sur un site Web de Mozilla. Nous avons compilé une liste de directives sur la manière dont les extensions sont sélectionnées pour être mises en avant. En suivant ces directives, vous donnez à votre extension les meilleures chances d'être sélectionnée.

+ +

En savoir plus sur la  façon de faire figurer vos modules complémentaires dans l'atelier d'extension

+ +

Continuez votre expérience d'apprentissage

+ +

Maintenant, vous savez ce qui nous attend, il est temps de plonger dans plus de détails sur le développement de l'extension du navigateur. Dans les sections suivantes, vous découvrirez :

+ + + +

Vous voudrez également vous rendre à l'Atelier des extensions où vous trouverez tout ce que vous devez savoir sur la création d'extensions pour Firefox, notamment :

+ + diff --git a/files/fr/mozilla/add-ons/webextensions/work_with_contextual_identities/index.html b/files/fr/mozilla/add-ons/webextensions/work_with_contextual_identities/index.html new file mode 100644 index 0000000000..7acabb6773 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/work_with_contextual_identities/index.html @@ -0,0 +1,169 @@ +--- +title: Travailler avec des identités contextuelles +slug: Mozilla/Add-ons/WebExtensions/travailler_avec_des_identites_contextuelles +tags: + - Add-ons + - Comment + - Contextual identities + - Débutant + - Extensions + - Hox-to + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Work_with_contextual_identities +--- +

{{AddonSidebar}}

+ +

Beaucoup de gens ont besoin ou veulent interagir avec le web en utilisant plusieurs personnages. Ils peuvent avoir des comptes pour le travail sur le Web et le courrier électronique personnel. Ils peuvent se déconnecter de leurs comptes de médias sociaux avant d'accéder aux achats en ligne, afin de s'assurer que les scripts de suivi sur les sites d'achat ne peuvent pas prendre en charge leur activité de médias sociaux. Pour répondre à ces exigences, les utilisateurs finissent souvent par utiliser une fenêtre de navigateur standard et privée ou deux navigateurs différents.

+ +

Pour répondre à ce besoin, Firefox inclut une fonctionnalité connue sous le nom d'identités contextuelles, d'onglets de conteneurs ou de conteneurs de comptes. Cette fonctionnalité permet la création d'un conteneur de cookies pour chacune des identités que l'utilisateur souhaite utiliser dans son navigateur. Les onglets peuvent être associés à l'une de ces identités, en conservant les cookies distincts de ceux des autres identités dans le navigateur. Le résultat pratique est que, par exemple, un utilisateur peut avoir une identité personnelle et professionnelle. Ils peuvent ensuite utiliser l'identité personnelle dans un onglet, où ils se connectent à leur messagerie Web personnelle, et l'identité professionnelle dans un autre onglet, où ils se connectent à leur messagerie Web professionnelle.

+ +

Pour plus d'informations sur cette fonctionnalité, voir :

+ + + +

API pour travailler avec des identités contextuelles

+ +

Pour utiliser les fonctionnalités d'identité contextuelle dans les extensions, vous utiliserez deux APIs :

+ + + +

Permissions

+ +

Pour utiliser l'API {{WebExtAPIRef("contextualIdentities")}} vous devez inclure la  permission "contextualIdentities" dans votre fichier manifest.json. Vous n'avez pas besoin de la permission "tabs" pour utiliser {{WebExtAPIRef("tabs.create")}} ; vous avez besoin de la permission "cookies" pour spécifier le conteneur de cookies que vous souhaitez utiliser.

+ +

Exemple de procédure pas à pas

+ +

L'exemple d'extension contextual-identities fournit un bouton de barre d'outils avec une fenêtre qui répertorie les identités dans le navigateur. Pour chaque identité, l'extension fournit des options permettant de créer un nouvel onglet en utilisant son conteneur de cookies ou de supprimer tous les onglets de l'identité.

+ +

Voici une courte vidéo de l'extension en action :

+ +

{{EmbedYouTube("SgLCS7_ppas")}}

+ +

manifest.json

+ +

Les principales caractéristiques du fichier manifest.json sont :

+ + + +

context.html

+ +

Une fenêtre contextuelle sur le bouton de la barre d'outils fournit l'interface utilisateur de l'extension. context.html implémente ce popup, mais c'est juste un shell dans lequel le script context.js écrit la liste des identités contextuelles et leurs options associées.

+ +
  <body>
+    <div class="panel">
+      <div id="identity-list"></div>
+    </div>
+  <script src="context.js"></script>
+  </body>
+ +

context.js

+ +

Toutes les fonctionnalités de l'extension sont implémentées via context.js, qui est appelée chaque fois que la barre d'outils est affichée.

+ +

Le script obtient d'abord le div 'identity-list' depuis context.html.

+ +
var div = document.getElementById('identity-list');
+ +

Il vérifie ensuite si la fonction d'identités contextuelles est activée dans le navigateur. Si ce n'est pas le cas, des informations sur la façon de l'activer sont ajoutées à la fenêtre contextuelle.

+ +
if (browser.contextualIdentities === undefined) {
+  div.innerText = 'browser.contextualIdentities not available. Check that the privacy.userContext.enabled pref is set to true, and reload the add-on.';
+} else {
+ +

Firefox s'installe avec la fonctionnalité d'identité contextuelle désactivée, elle est activée lorsqu'une extension utilisant l'API contextualIdentities est installée. Cependant, il est toujours possible pour l'utilisateur de désactiver la fonctionnalité, en utilisant une option sur la page des préférences (about:preferences), d'où la nécessité de la vérification.

+ +

Le script utilise maintenant contextualIdentities.query pour déterminer s'il existe des identités contextuelles définies dans le navigateur. S'il n'y en a pas, un message est ajouté au popup et le script s'arrête.

+ +
  browser.contextualIdentities.query({})
+    .then((identities) => {
+      if (!identities.length) {
+        div.innerText = 'No identities returned from the API.';
+        return;
+      }
+ +

Si des identités contextuelles sont présentes — Firefox a quatre identités par défaut — le script parcourt chacune d'elles en ajoutant son nom, stylisé dans la couleur choisie, à l'élément <div>. La fonction createOptions() ajoute ensuite les options à “create” ou  “close all” à la <div> avant qu'elle ne soit ajoutée au popup.

+ +
     for (let identity of identities) {
+       let row = document.createElement('div');
+       let span = document.createElement('span');
+       span.className = 'identity';
+       span.innerText = identity.name;
+       span.style = `color: ${identity.color}`;
+       console.log(identity);
+       row.appendChild(span);
+       createOptions(row, identity);
+       div.appendChild(row);
+     }
+  });
+}
+
+function createOptions(node, identity) {
+  for (let option of ['Create', 'Close All']) {
+    let a = document.createElement('a');
+    a.href = '#';
+    a.innerText = option;
+    a.dataset.action = option.toLowerCase().replace(' ', '-');
+    a.dataset.identity = identity.cookieStoreId;
+    a.addEventListener('click', eventHandler);
+    node.appendChild(a);
+  }
+}
+ +

Le script attend maintenant que l'utilisateur sélectionne une option dans le popup.

+ +
function eventHandler(event) {
+ +

Si l'utilisateur clique sur l'option permettant de créer un onglet pour une identité, l'un d'entre eux est ouvert à l'aide de tabs.create en transmettant l'ID de cookie de l'identité.

+ +
  if (event.target.dataset.action == 'create') {
+    browser.tabs.create({
+      url: 'about:blank',
+      cookieStoreId: event.target.dataset.identity
+    });
+  }
+ +

Si l'utilisateur sélectionne l'option permettant de fermer tous les onglets pour l'identité, le script exécute une tabs.query pour tous les onglets qui utilisent le cookie store de l'identité. Le script passe ensuite cette liste d'onglets à tabs.remove.

+ +
  if (event.target.dataset.action == 'close-all') {
+    browser.tabs.query({
+      cookieStoreId: event.target.dataset.identity
+    }).then((tabs) => {
+      browser.tabs.remove(tabs.map((i) => i.id));
+    });
+  }
+  event.preventDefault();
+}
+ +

Apprendre encore plus

+ +

Si vous voulez en savoir plus sur l'API contextualIdentities, consultez :

+ + diff --git a/files/fr/mozilla/add-ons/webextensions/work_with_the_cookies_api/index.html b/files/fr/mozilla/add-ons/webextensions/work_with_the_cookies_api/index.html new file mode 100644 index 0000000000..c13965f88e --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/work_with_the_cookies_api/index.html @@ -0,0 +1,254 @@ +--- +title: Travailler avec l'API Cookies +slug: Mozilla/Add-ons/WebExtensions/travailler_avec_l_API_cookies +tags: + - Add-ons + - Comment + - Cookies + - Débutant + - Extensions + - How-to + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Work_with_the_Cookies_API +--- +

{{AddonSidebar}}

+ +

Avec l'API Cookies, vos extensions ont accès à des fonctionnalités similaires à celles utilisées par les sites Web pour stocker et lire les cookies. Les fonctionnalités de l'API permettent aux extensions de stocker des informations site par site. Ainsi, comme nous le verrons dans l'exemple, vous pouvez stocker des détails sur le choix de la couleur de fond d'un site pour un utilisateur. Ensuite, lorsque l'utilisateur revient sur le site, votre extension peut utiliser la capacité de l'API pour obtenir des détails sur les cookies et les lire pour récupérer le choix de l'utilisateur et l'appliquer au site Web.

+ +
+

Le comportement des cookies peut être contrôlé à l'aide de la propriété {{WebExtAPIRef("privacy.websites")}} cookieConfig. Cette propriété contrôle si et comment les cookies sont acceptés ou si tous les cookies sont traités comme des cookies de session.

+
+ +

Permissions

+ +

Pour utiliser l'API Cookies, vous devez demander à la fois la permission "cookies" et les  permissions d'hôte pour les protocoles, domaines, ou sites web auxquels vous souhaitez accéder ou utiliser "<all_urls>" pour accéder à tous les protocoles et domaines. La façon dont vous définissez votre chaîne de permission d'hôte affecte la capacité de votre extension à lire, écrire et supprimer les cookies.

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

Chaine de permission hôte

+ 		+

Lecture

+ 		+

Ecriture/Effacer

+
+

Sécurisé

+ 		+

Non-sécurisé

+ 		+

Sécurisé

+ 		+

Non-sécurisé

+
+

"http://*.example.com/"

+ 		+

Non

+ 		+

Principaux et sous domaines, avec n'importe quel chemin

+ 		+

Principaux et sous domaines, avec n'importe quel chemin

+ 		+

Principaux et sous domaines, avec n'importe quel chemin

+
+

"https://www.example.com/"

+ 		+

www.example.com ou .example.com avec n'importe quel chemin, mais aucun sous domaine

+ 		+

www.example.com ou .example.com avec n'importe quel chemin, mais aucun sous domaine

+ 		+

www.example.com ou .example.com avec n'importe quel chemin, mais aucun sous domaine

+ 		+

www.example.com ou .example.com avec n'importe quel chemin, mais aucun sous domaine

+
+

"*://*.example.com/"

+ 		+

Principaux et sous domaines, avec n'importe quel chemin

+ 		+

Principaux et sous domaines, avec n'importe quel chemin

+ 		+

Principaux et sous domaines, avec n'importe quel chemin

+ 		+

Principaux et sous domaines, avec n'importe quel chemin

+
+

"<all_urls>"

+ 		+

Tout domaine avec un chemin

+ 		+

Tout domaine avec un chemin

+ 		+

Tout domaine avec un chemin

+ 		+

Tout domaine avec un chemin

+
+
+ +

Banque de cookies

+ +

Firefox fournit trois types de banque de cookies :

+ + + +

Vous pouvez trouver les banques de cookies disponibles en utilisant {{WebExtAPIRef("cookies.getAllCookieStores")}}, qui renvoie un objet contenant l'ID de chaque cookie et une liste des ID des onglets utilisant chaque banque de cookies.

+ +

Exemple de procédure pas à pas

+ +

L'exemple d'extension cookie-bg-picker permet à l'utilisateur de choisir une couleur et une icône appliquées à l'arrière-plan des pages Web d'un site. Ces choix sont sauvegardés par site en utilisant {{WebExtAPIRef("cookies.set")}}. Lorsqu'une page du site est ouverte, {{WebExtAPIRef("cookies.get")}} lit tout choix précédent, et l'extension l'applique à la page Web. Une option de réinitialisation supprime l'icône d'arrière-plan et la couleur du site ainsi que le cookie, en utilisant {{WebExtAPIRef("cookies.remove")}}. Il utilise également {{WebExtAPIRef("cookies.onChanged")}} pour écouter les modifications apportées aux cookies, en envoyant les détails de la modification à la console.

+ +

Cette vidéo montre l'extension en action :

+ +

{{EmbedYouTube("_rlp3eYqEMA")}}

+ +

Cet exemple utilise également les API Tabs et Runtime, mais nous ne discuterons de ces fonctionnalités qu'en passant.

+ +

manifest.json

+ +

The key feature of the manifest.json file relating to the use of the Cookies API is the permissions request:

+ +
  "permissions": [
+      "tabs",
+      "cookies",
+      "<all_urls>"
+],
+ +

Ici, l'extension demande l'autorisation d'utiliser l'API Cookies ("cookies") avec tous les sites Web ("<all_urls>"). Cela permet à l'extension d'enregistrer le choix de l'icône de couleur d'arrière-plan pour n'importe quel site Web.

+ +

Scripts—bgpicker.js

+ +

L'interface utilisateur de l'extension utilise un bouton de barre d'outils ({{WebExtAPIRef("browserAction")}}) implémenté avec bgpicker.html qui appelle bgpicker.js. Ensemble, ils permettent à l'utilisateur de sélectionner l'icône et d'entrer la couleur à appliquer en arrière-plan. Ils offrent également la possibilité d'effacer ces paramètres.

+ +

bgpicker.js gère la sélection de l'icône ou l'entrée d'une couleur pour l'arrière-plan dans des fonctions séparées.

+ +

Pour gérer les boutons d'icônes, le script rassemble d'abord tous les noms de classe utilisés pour les boutons dans le fichier HTML :

+ +
var bgBtns = document.querySelectorAll('.bg-container button');
+ +

Il boucle ensuite à travers tous les boutons en leur assignant leur image et en créant un écouteur onclick pour chaque bouton :

+ +
for(var i = 0; i < bgBtns.length; i++) {
+  var imgName = bgBtns[i].getAttribute('class');
+  var bgImg = 'url(\'images/' + imgName + '.png\')';
+  bgBtns[i].style.backgroundImage = bgImg;
+
+  bgBtns[i].onclick = function(e) {
+ +

Quand un bouton est cliqué, sa fonction d'écouteur correspondante obtient le nom de classe de bouton et ensuite le chemin d'icône qu'il passe au script de contenu de la page (updatebg.js) en utilisant un message. Le script de contenu applique ensuite l'icône à l'arrière-plan de la page Web. Pendant ce temps, bgpicker.js stocke les détails de l'icône appliquée à l'arrière-plan dans un cookie :

+ +
    cookieVal.image = fullURL;
+    browser.cookies.set({
+    url: tabs[0].url,
+    name: "bgpicker",
+    value: JSON.stringify(cookieVal)
+  })
+ +

Le paramètre de couleur est traité de la même manière, déclenché par un écouteur dans le champ de saisie de couleur. Lorsqu'une couleur est entrée, l'onglet actif est découvert et les détails de sélection de couleur envoyés, à l'aide d'un message, au script de contenu de la page à appliquer à l'arrière-plan de la page Web. Ensuite, la sélection de couleur est ajoutée au cookie :

+ +
    cookieVal.color = currColor;
+    browser.cookies.set({
+    url: tabs[0].url,
+    name: "bgpicker",
+    value: JSON.stringify(cookieVal)
+ +

Lorsque l'utilisateur clique sur le bouton de réinitialisation qui a été affecté à la réinitialisation de la variable :

+ +
var reset = document.querySelector('.color-reset button');
+ +

reset.onclick trouve d'abord l'onglet actif. Ensuite, en utilisant l'ID de l'onglet, il transmet un message au script de contenu de la page (updatebg.js) pour qu'il supprime l'icône et la couleur de la page. La fonction efface ensuite les valeurs de cookie (de sorte que les anciennes valeurs ne sont pas reportées et écrites sur un cookie créé pour une nouvelle icône ou sélection de couleur sur la même page) avant de supprimer le cookie :

+ +
    cookieVal = { image : '',
+                  color : '' };
+    browser.cookies.remove({
+    url: tabs[0].url,
+    name: "bgpicker"
+ +

Aussi, afin que vous puissiez voir ce qui se passe avec les cookies, le script rend compte de toutes les modifications apportées aux cookies dans la console :

+ +
browser.cookies.onChanged.addListener((changeInfo) => {
+  console.log(`Cookie changed:\n
+    * Cookie: ${JSON.stringify(changeInfo.cookie)}\n
+    * Cause: ${changeInfo.cause}\n
+    * Removed: ${changeInfo.removed}`);
+  });
+ +

Scripts—background.js

+ +

Un script d'arrière-plan (background.js) permet à l'utilisateur de choisir une icône d'arrière-plan et une couleur pour le site Web dans une session antérieure. Le script est à l'écoute des changements dans l'onglet actif, que ce soit l'utilisateur qui passe d'un onglet à l'autre ou modifie l'URL de la page affichée dans l'onglet. Lorsque l'un de ces événements se produit, cookieUpdate() est appelée.  cookieUpdate() utilise à son tour getActiveTab() pour obtenir l'ID de l'onglet actif. La fonction peut ensuite vérifier si un cookie existe pour l'extension, en utilisant l'URL de l'onglet :

+ +
    var gettingCookies = browser.cookies.get({
+      url: tabs[0].url,
+      name: "bgpicker"
+    });
+ +

Si le cookie "bgpicker" existe pour le site Web, les détails de l'icône et de la couleur sélectionnés précédemment sont récupérés et transmis au script de contenu updatebg.js à l'aide de messages :

+ +
    gettingCookies.then((cookie) => {
+      if (cookie) {
+        var cookieVal = JSON.parse(cookie.value);
+        browser.tabs.sendMessage(tabs[0].id, {image: cookieVal.image});
+        browser.tabs.sendMessage(tabs[0].id, {color: cookieVal.color});
+      }
+    });
+ +

Autres caractéristiques

+ +

En plus des API mentionnées jusqu'à présent, l'API Cookies propose également {{WebExtAPIRef("cookies.getAll")}}. Cette fonction prend l'objet details pour spécifier des filtres pour les cookies sélectionnés et retourne un tableau d'objets {{WebExtAPIRef("cookies.Cookie")}} qui correspondent aux critères de filtrage.

+ +

Apprendre encore plus

+ +

Si vous voulez en savoir plus sur l'API Cookies, consultez :

+ + diff --git a/files/fr/mozilla/add-ons/webextensions/working_with_the_tabs_api/index.html b/files/fr/mozilla/add-ons/webextensions/working_with_the_tabs_api/index.html new file mode 100644 index 0000000000..049a8e5683 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/working_with_the_tabs_api/index.html @@ -0,0 +1,628 @@ +--- +title: Travailler avec l'API Tabs +slug: Mozilla/Add-ons/WebExtensions/Travailler_avec_l_API_Tabs +tags: + - Add-ons + - Comment + - Débutant + - WebExtensions + - onglets + - tabs +translation_of: Mozilla/Add-ons/WebExtensions/Working_with_the_Tabs_API +--- +

{{AddonSidebar}}

+ +

Les onglets permettent à un utilisateur d'ouvrir plusieurs pages Web dans la fenêtre de son navigateur, puis de basculer entre ces pages Web. Grâce à l'API Tabs, vous pouvez utiliser et manipuler ces onglets pour créer des utilitaires qui offrent aux utilisateurs de nouvelles façons de travailler avec des onglets ou de fournir les fonctionnalités de votre extension.

+ +

Dans cet article, nous allons regarder :

+ + + +

Nous concluons ensuite en examinant d'autres fonctionnalités diverses offertes par l'API.

+ +
+

Remarque : Certaines fonctionnalités de l'API d'onglet sont couvert ailleurs. Voici les méthodes que vous pouvez utiliser pour manipuler le contenu de l'onglet avec des scripts ({{WebExtAPIRef("tabs.connect")}}, {{WebExtAPIRef("tabs.sendMessage")}}, et  {{WebExtAPIRef("tabs.executeScript")}}). Si vous voulez plus d'informations sur ces méthodes, reportez-vous à l'article scripts de contenu et le guide pratique modifier une page web.

+
+ +

Permissions et l'API Tabs

+ +

Pour la majorité des fonctions de l'API Tabs, vous n'avez besoin d'aucune autorisation. Cependant, il y a certaines exceptions :

+ + + +

Vous pouvez demander la permission "tabs" dans le fichier manifest.json de votre extension :

+ +
"permissions": [
+  "<all_urls>",
+  "tabs"
+],
+
+ +

Cette requête vous permet d'utiliser toutes les fonctionnalités de l'API Tabs sur tous les sites Web que vos utilisateurs visitent. Il existe également une autre méthode pour demander la permission d'utiliser {{WebExtAPIRef("tabs.executeScript")}} ou {{WebExtAPIRef("tabs.insertCSS")}} où vous n'avez pas besoin de la permission de l'hôte, sous la forme "activeTab". Cette permission fournit les mêmes droits que les  "onglets" avec <all_urls>, mais avec deux restrictions:

+ + + +

L'avantage de cette approche est que l'utilisateur ne recevra pas d'avertissement d'autorisation indiquant que votre extension peut “Accéder à vos données pour tous les sites Web”. En effet, la permission <all_urls> permet à une extension d'exécuter des scripts dans n'importe quel onglet, à tout moment, alors que "activeTab" se limite à autoriser l'extension à effectuer une action demandée par l'utilisateur dans l'onglet en cours.

+ +

En savoir plus sur les onglets et leurs propriétés

+ +

Il y aura des occasions où vous voulez obtenir une liste de tous les onglets dans toutes les fenêtres du navigateur. D'autres fois, vous pourriez vouloir trouver un sous-ensemble d'onglets qui correspondent à certains critères spécifiques, tels que ceux ouverts à partir d'un onglet spécifique ou l'affichage des pages d'un domaine particulier. Et une fois que vous avez votre liste d'onglets, vous voudrez probablement en savoir plus sur leurs propriétés.

+ +

C'est ici qu'intervient {{WebExtAPIRef("tabs.query")}}. Utilisé seul pour obtenir tous les onglets ou prendre l'objet queryInfo — pour spécifier des critères de requête tels que l'activation de l'onglet, dans la fenêtre en cours ou plus de 17 critères — {{WebExtAPIRef("tabs.query")}} renvoie un tableau d'objets {{WebExtAPIRef("tabs.Tab")}} objects contenant des informations sur les onglets.

+ +

Lorsque vous souhaitez uniquement obtenir des informations sur l'onglet en cours, vous pouvez obtenir un objet {{WebExtAPIRef("tabs.Tab")}} pour cet onglet à l'aide de  {{WebExtAPIRef("tabs.getCurrent")}}. Si vous avez un ID d'onglet, vous pouvez obtenir son objet {{WebExtAPIRef("tabs.Tab")}} en utilisant {{WebExtAPIRef("tabs.get")}}.

+ +

Par exemple

+ +

Pour voir comment {{WebExtAPIRef("tabs.query")}} et {{WebExtAPIRef("tabs.Tab")}} sont utilisés, voyons comment l'exemple tabs-tabs-tabs ajoute la liste de  “passer aux onglets” à son popup bouton de barre d'outils.

+ +

The tabs tabs tabs toolbar menu showing the switch to tap area

+ +

manifest.json

+ +

Voici le manifest.json:

+ +
{
+  "browser_action": {
+    "browser_style": true,
+    "default_title": "Tabs, tabs, tabs",
+    "default_popup": "tabs.html"
+  },
+  "description": "A list of methods you can perform on a tab.",
+  "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/tabs-tabs-tabs",
+  "manifest_version": 2,
+  "name": "Tabs, tabs, tabs",
+  "permissions": [
+    "tabs"
+  ],
+  "version": "1.0"
+}
+
+ +
+

Notez ce qui suit :

+ + +
+ +

tabs.html

+ +

tabs.html définit le contenu du popup de l'extension :

+ +
<!DOCTYPE html>
+
+<html>
+
+ <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="tabs.css"/>
+ </head>
+
+<body>
+
+ <div class="panel">
+    <div class="panel-section panel-section-header">
+     <div class="text-section-header">Tabs-tabs-tabs</div>
+    </div>
+
+    <a href="#" id="tabs-move-beginning">Move active tab to the beginning of the window</a><br>
+
+
+…
+
+Define the other menu items
+…
+
+    <div class="switch-tabs">
+
+     <p>Switch to tab</p>
+
+     <div id="tabs-list"></div>
+
+    </div>
+ </div>
+
+ <script src="tabs.js"></script>
+
+</body>
+
+</html>
+
+ +

Ici, vous pouvez voir que, après la création des éléments de menu, un div vide avec la liste des onglets ID est configuré pour contenir la liste des onglets. Ensuite, tabs.js est appelée.

+ +

Voici un résumé de ce qui précède :

+ +
    +
  1. Les éléments de menu sont déclarés.  
    2. +
  2. Une div vide avec tabs-list est déclaré comme contenant la liste des onglets.
    3. +
  3. tabs.js est appelé.
    4. +
+ +

tabs.js

+ +

Dans tabs.js nous pouvons voir comment la liste des onglets est construite et ajoutée à la popup.

+ +

Tout d'abord, un gestionnaire d'événements est ajouté pour exécuter listTabs() quand tabs.html est chargé :

+ +

Création de la fenêtre contextuelle

+ +

Tout d'abord, un gestionnaire d'événements est ajouté pour exécuter listTabs() quand tabs.html est chargé :

+ +
document.addEventListener("DOMContentLoaded", listTabs);
+ +

La première chose que fait listTabs() est d'appeler getCurrentWindowTabs(), où {{WebExtAPIRef("tabs.query")}} est utilisé pour obtenur un objet  {{WebExtAPIRef("tabs.Tab")}} pour le onglets dans la fenêtre courante :

+ +
function getCurrentWindowTabs() {
+  return browser.tabs.query({currentWindow: true});
+}
+
+ +

Maintenant, listTabs() est prêt à créer le contenu de la popup.

+ +

Pour commencer :

+ +
    +
  1. Récupérer les tabs-list div.
    2. +
  2. Créer un fragment de document (dans lequel la liste sera construite).
    3. +
  3. Mettre les compteurs.
    4. +
  4. Effacer le contenu de tabs-list div.
    5. +
+ +
function listTabs() {
+ getCurrentWindowTabs().then((tabs) => {
+    let tabsList = document.getElementById('tabs-list');
+    let currentTabs = document.createDocumentFragment();
+    let limit = 5;
+    let counter = 0;
+
+    tabsList.textContent = '';
+
+ +

Ensuite, nous allons créer les liens pour chaque onglet :

+ +
    +
  1. Boucle les 5 premiers éléments de l'objet {{WebExtAPIRef("tabs.Tab")}}.
    2. +
  2. Pour chaque poste, ajoutez un hyperlien vers le fragment de document. +
      +
    • L'étiquette du lien, c'est-à-dire son texte, est définie à l'aide du titre de l'onglet (ou de l'ID, s'il n'a pas de titre).
      • +
    • L'adresse du lien est définie à l'aide de l'ID de l'onglet.
      • +
    +
    3. +
+ +
    for (let tab of tabs) {
+     if (!tab.active && counter <= limit) {
+        let tabLink = document.createElement('a');
+
+        tabLink.textContent = tab.title || tab.id;
+
+       tabLink.setAttribute('href', tab.id);
+        tabLink.classList.add('switch-tabs');
+        currentTabs.appendChild(tabLink);
+     }
+
+     counter += 1;
+
+    }
+
+ +

Enfin, le fragment du document est écrit dans la div tabs-list :

+ +
    tabsList.appendChild(currentTabs);
+  });
+}
+
+ +

Travailler avec l'onglet actif

+ +

Un autre exemple connexe est l'option d'information “Alert active tab”qui décharge toutes les propriétés de l'objet {{WebExtAPIRef("tabs.Tab")}} de l'onglet actif dans une alerte :

+ +
 else if (e.target.id === "tabs-alertinfo") {
+   callOnActiveTab((tab) => {
+     let props = "";
+     for (let item in tab) {
+       props += `${ item } = ${ tab[item] } \n`;
+     }
+     alert(props);
+   });
+ }
+
+ +

Où callOnActiveTab() ftrouve l'objet de tabulation active en faisant une boucle sur les objets {{WebExtAPIRef("tabs.Tab")}} qui recherchent l'objet avec l'ensemble actif :

+ +
document.addEventListener("click", function(e) {
+ function callOnActiveTab(callback) {
+   getCurrentWindowTabs().then((tabs) => {
+     for (var tab of tabs) {
+       if (tab.active) {
+         callback(tab, tabs);
+       }
+     }
+   });
+ }
+}
+
+
+ +

Création, duplication, déplacement, mise à jour, rechargement et suppression des onglets

+ +

Après avoir recueilli des informations sur les onglets, vous voudrez probablement faire quelque chose avec eux — soit pour offrir aux utilisateurs des fonctionnalités de manipulation et de gestion des onglets — soit pour implémenter des fonctionnalités dans votre extension. Les fonctions suivantes sont disponibles :

+ + + +
+

NOTE :

+ +

Ces fonctions nécessitent toutes l'ID (ou les ID) de l'onglet qu'elles manipulent :

+ + + +

Alors que les fonctions suivantes agissent sur l'onglet actif (si aucun ID d'onglet n'est fourni) :

+ + +
+ +

Par exemple

+ +

L'exemple tabs-tabs-tabs utilise toutes ces fonctionnalités sauf la mise à jour de l'URL d'un onglet. La façon dont ces API sont utilisées est similaire, nous allons donc regarder l'une des implémentations les plus impliquées, celle de l'option “Deplacer l'onglet actif vers le début de la liste des fenêtres”. Mais d'abord, voici une démonstration de la fonctionnalité en action :

+ +

{{EmbedYouTube("-lJRzTIvhxo")}}

+ +

manifest.json

+ +

Aucune de ces fonctions ne nécessite de permission pour fonctionner, donc il n'y a aucune fonctionnalité dans le fichier manifest.json qui doit être mise en surbrillance.

+ +

tabs.html

+ +

tabs.html définit le “menu” affiché dans la fenêtre contextuelle, qui inclut l'option “Déplacer l'onglet actif au début de la liste des fenêtres”, wavec une série de balises <a> groupées par un séparateur visuel. Chaque élément de menu reçoit un ID, qui est utilisé dans tabs.js pour déterminer quel élément de menu est demandé.

+ +
    <a href="#" id="tabs-move-beginning">Move active tab to the beginning of the window</a><br>
+    <a href="#" id="tabs-move-end">Move active tab to the end of the window</a><br>
+
+    <div class="panel-section-separator"></div>
+
+
+    <a href="#" id="tabs-duplicate">Duplicate active tab</a><br>
+
+    <a href="#" id="tabs-reload">Reload active tab</a><br>
+    <a href="#" id="tabs-alertinfo">Alert active tab info</a><br>
+ +

tabs.js

+ +

Pour implémenter le "menu" défini dans tabs.html, tabs.js inclut un écouteur pour les clics dans tabs.html

+ +
document.addEventListener("click", function(e) {
+ function callOnActiveTab(callback) {
+
+   getCurrentWindowTabs().then((tabs) => {
+     for (var tab of tabs) {
+       if (tab.active) {
+         callback(tab, tabs);
+       }
+     }
+   });
+}
+}
+
+ +

Une série d'instructions if cherche alors à faire correspondre l'identifiant de l'élément cliqué. Cet extrait de code est pour l'option “Déplacer l'onglet actif au début de la liste des fenêtres” :

+ +
 if (e.target.id === "tabs-move-beginning") {
+   callOnActiveTab((tab, tabs) => {
+     var index = 0;
+     if (!tab.pinned) {
+       index = firstUnpinnedTab(tabs);
+     }
+     console.log(`moving ${tab.id} to ${index}`)
+     browser.tabs.move([tab.id], {index});
+   });
+ }
+
+ +

Il est intéressant de noter l'utilisation de console.log. Cela vous permet de générer des informations sur la console du debugger, ce qui peut être utile lors de la résolution des problèmes rencontrés lors du développement.

+ +

Example of the console.log output, from the move tabs feature, in the debugging console

+ +

Le code de déplacement appelle d'abord callOnActiveTab() qui à son tour appelle  getCurrentWindowTabs() pour obtenir un objet {{WebExtAPIRef("tabs.Tab")}} contenant les onglets de la fenêtre active. Il parcourt ensuite l'objet pour rechercher et renvoyer l'objet onglet actif :

+ +
 function callOnActiveTab(callback) {
+   getCurrentWindowTabs().then((tabs) => {
+     for (var tab of tabs) {
+       if (tab.active) {
+         callback(tab, tabs);
+       }
+     }
+   });
+ }
+
+ +
Onglets épinglés
+ +

Une caractéristique des onglets est que l'utilisateur peut épingler des onglets dans une fenêtre. Les onglets épinglés sont placés au début de la liste des onglets et ne peuvent pas être déplacés. Cela signifie que la première position vers laquelle un onglet peut se déplacer est la première position après les onglets épinglés. Ainsi, firstUnpinnedTab() est appelé pour trouver la position du premier onglet non goupillé en faisant une boucle dans l'objet tabs :

+ +
function firstUnpinnedTab(tabs) {
+ for (var tab of tabs) {
+   if (!tab.pinned) {
+     return tab.index;
+   }
+ }
+}
+
+ +

Nous avons maintenant tout ce qu'il faut pour déplacer l'onglet : l'objet onglet actif à partir duquel nous pouvons obtenir l'ID de l'onglet et la position à laquelle l'onglet doit être déplacé. Ainsi, nous pouvons mettre en œuvre le mouvement :

+ +
     browser.tabs.move([tab.id], {index});
+ +

Les fonctions restantes à dupliquer, recharger, créer et supprimer des onglets sont implémentées de manière similaire.

+ +

Manipulation du niveau du zoom d'un onglet

+ +

Le prochain ensemble de fonctions vous permet d'obtenir  ({{WebExtAPIRef("tabs.getZoom")}}) et de définir ({{WebExtAPIRef("tabs.setZoom")}}) le niveau de zoom dans un onglet. Vous pouvez également récupérer les paramètres de zoom  ({{WebExtAPIRef("tabs.getZoomSettings")}}) mais, au moment de l'écriture, la possibilité de définir les paramètres ({{WebExtAPIRef("tabs.setZoomSettings")}}) n'était pas disponible dans Firefox.

+ +

Le niveau de zoom peut être compris entre 30% et 300% (représenté par des décimales de 0.3 à 3).

+ +

Dans Firefox les paramètres de zoom par défaut sont :

+ + + +

Par exemple

+ +

L'exemple tabs-tabs-tabs comprend trois démonstrations de la fonction de zoom : zoom avant, zoom arrière, et réinitialisation du zoom. Voici la fonctionnalité en action :

+ +

{{EmbedYouTube("RFr3oYBCg28")}}

+ +

Jetons un coup d'oeil à la façon dont le zoom est implémenté.

+ +

manifest.json

+ +

Aucune des fonctions de zoom n'a besoin d'autorisations. Par conséquent, aucune fonction du fichier manifest.json ne doit être mise en surbrillance.

+ +

tabs.html

+ +

Nous avons déjà discuté comment le tabs.html définit les options pour cette extension, rien de nouveau ou unique n'est fait pour fournir les options de zoom.

+ +

tabs.js

+ +

tabs.js commence par définir plusieurs constantes utilisées dans le code du zoom :

+ +
const ZOOM_INCREMENT = 0.2;
+const MAX_ZOOM = 3;
+const MIN_ZOOM = 0.3;
+const DEFAULT_ZOOM = 1;
+
+ +

Il utilise ensuite le même écouteur que nous avons discuté précédemment afin qu'il puisse agir sur les clics dans tabs.html.

+ +

Pour la fonction zoom, ceci s'exécute :

+ +
 else if (e.target.id === "tabs-add-zoom") {
+   callOnActiveTab((tab) => {
+     var gettingZoom = browser.tabs.getZoom(tab.id);
+     gettingZoom.then((zoomFactor) => {
+       //the maximum zoomFactor is 3, it can't go higher
+       if (zoomFactor >= MAX_ZOOM) {
+         alert("Tab zoom factor is already at max!");
+       } else {
+         var newZoomFactor = zoomFactor + ZOOM_INCREMENT;
+         //if the newZoomFactor is set to higher than the max accepted
+         //it won't change, and will never alert that it's at maximum
+         newZoomFactor = newZoomFactor > MAX_ZOOM ? MAX_ZOOM : newZoomFactor;
+         browser.tabs.setZoom(tab.id, newZoomFactor);
+       }
+     });
+   });
+ }
+
+ +

Ce code utilise callOnActiveTab() pour obtenir les détails de l'onglet actif, puis  {{WebExtAPIRef("tabs.getZoom")}} obtient le facteur de zoom actuel de l'onglet. Le zoom actuel est comparé au maximum défini (MAX_ZOOM) et une alerte est émise si l'onglet est déjà au zoom maximum. Sinon, le niveau de zoom est incrémenté mais limité au zoom maximum, puis le zoom est défini avec {{WebExtAPIRef("tabs.getZoom")}}.

+ +

Manipuler le CSS d'un onglet

+ +

Une autre fonctionnalité importante offerte par l'API Tabs est la possibilité de manipuler le CSS dans un onglet — ajouter un nouveau CSS dans un onglet ({{WebExtAPIRef("tabs.insertCSS")}}) ou supprimer CSS d'un onglet  ({{WebExtAPIRef("tabs.removeCSS")}}).

+ +

Cela peut être utile si vous voulez, par exemple, mettre en évidence certains éléments de la page ou modifier la disposition par défaut de la page (liste courte des cas d'utilisation).

+ +

Par exemple

+ +

L'exemple apply-css utilise ces fonctionnalités pour ajouter une bordure rouge à la page Web dans l'onglet actif. Voici la fonctionnalité en action:

+ +

{{EmbedYouTube("bcK-GT2Dyhs")}}

+ +

Voyons comment cela se passe.

+ +

manifest.json

+ +

Pour utiliser les fonctionnalités CSS dont vous avez besoin :

+ + + +

Ce dernier est le plus utile, car il permet à une extension d'utiliser  {{WebExtAPIRef("tabs.insertCSS")}} et {{WebExtAPIRef("tabs.removeCSS")}} dans l'onglet actif lorsqu'il est exécuté depuis le navigateur de l'extension ou action de la page, menu contextuel ou un raccourci.

+ +
{
+  "description": "Adds a page action to toggle applying CSS to pages.",
+
+ "manifest_version": 2,
+ "name": "apply-css",
+ "version": "1.0",
+ "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/apply-css",
+
+ "background": {
+
+    "scripts": ["background.js"]
+ },
+
+ "page_action": {
+
+    "default_icon": "icons/off.svg",
+    "browser_style": true
+ },
+
+ "permissions": [
+    "activeTab",
+    "tabs"
+ ]
+
+}
+
+ +

Vous noterez que la permission "tabs" est ajoutée en plus de "activeTab". Cette permission supplémentaire est nécessaire pour permettre au script de l'extension d'accéder à l'URL de l'onglet, dont nous verrons l'importance dans un instant.

+ +

Les autres caractéristiques principales du fichier manifeste sont la définition de:

+ + + +

background.js

+ +

Au démarrage, background.js définit un certain nombre de constantes à utiliser dans l'extension qui définissent le CSS à appliquer, des titres pour les “actions de page”, et une liste de protocoles dans lesquels l'extension fonctionnera :

+ +
const CSS = "body { border: 20px solid red; }";
+const TITLE_APPLY = "Apply CSS";
+const TITLE_REMOVE = "Remove CSS";
+const APPLICABLE_PROTOCOLS = ["http:", "https:"];
+
+ +

Lors du premier chargement, l'extension utilise {{WebExtAPIRef("tabs.query")}} pour obtenir une liste de tous les onglets de la fenêtre du navigateur en cours. Il parcourt ensuite les onglets appelant initializePageAction().

+ +
var gettingAllTabs = browser.tabs.query({});
+
+gettingAllTabs.then((tabs) => {
+ for (let tab of tabs) {
+   initializePageAction(tab);
+ }
+});
+
+ +

initializePageAction utilise protocolIsApplicable() pour déterminer si l'URL de l'onglet actif est celle à laquelle le CSS peut être appliqué :

+ +
function protocolIsApplicable(url) {
+ var anchor =  document.createElement('a');
+ anchor.href = url;
+ return APPLICABLE_PROTOCOLS.includes(anchor.protocol);
+}
+
+ +

Ensuite, si l'exemple peut agir sur l'onglet, initializePageAction() définit l'icône  pageAction (barre de navigation) et le titre de l'onglet pour utiliser les versions ‘off’ avant de rendre la pageAction visible :

+ +
function initializePageAction(tab) {
+
+ if (protocolIsApplicable(tab.url)) {
+   browser.pageAction.setIcon({tabId: tab.id, path: "icons/off.svg"});
+   browser.pageAction.setTitle({tabId: tab.id, title: TITLE_APPLY});
+   browser.pageAction.show(tab.id);
+ }
+}
+
+ +

Maintenant, un écouteur sur geAction.onClicked attend que l'icône pageAction soit cliqué et appelle toggleCSS quand il l'est.

+ +
browser.pageAction.onClicked.addListener(toggleCSS);
+ +

toggleCSS() obtient le titre de la pageAction  puis prend l'action décrite :

+ + + +
function toggleCSS(tab) {
+
+
+ function gotTitle(title) {
+
+    if (title === TITLE_APPLY) {
+     browser.pageAction.setIcon({tabId: tab.id, path: "icons/on.svg"});
+     browser.pageAction.setTitle({tabId: tab.id, title: TITLE_REMOVE});
+     browser.tabs.insertCSS({code: CSS});
+    } else {
+     browser.pageAction.setIcon({tabId: tab.id, path: "icons/off.svg"});
+     browser.pageAction.setTitle({tabId: tab.id, title: TITLE_APPLY});
+     browser.tabs.removeCSS({code: CSS});
+    }
+ }
+
+ var gettingTitle = browser.pageAction.getTitle({tabId: tab.id});
+
+ gettingTitle.then(gotTitle);
+}
+
+ +

Enfin, pour s'assurer que pageAction est valide après chaque mise à jour de l'onglet, un écouteur sur {{WebExtAPIRef("tabs.onUpdated")}} appelle  initializePageAction() chaque fois que l'onglet est mis à jour pour vérifier que l'onglet utilise toujours un protocole auquel le CSS peut être appliqué.

+ +
browser.tabs.onUpdated.addListener((id, changeInfo, tab) => {
+
+ initializePageAction(tab);
+});
+
+ +

Quelques autres capacités intéressantes

+ +

Il existe deux autres fonctionnalités de l'API Tabs qui ne rentrent pas dans l'une des sections précédentes :

+ + + +

Apprendre encore plus

+ +

Si vous voulez en savoir plus sur l'API Tabs, consultez le :

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