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 +++++++++++++++++ .../index.html | 94 --- .../developer_guide/build_instructions/index.html | 108 +++ .../developer_guide/introduction/index.html | 24 + .../so_you_just_built_firefox/index.html | 10 + .../index.html | 10 - .../index.html | 33 + files/fr/mozilla/firefox/releases/1.5/index.html | 125 ++++ .../1.5/using_firefox_1.5_caching/index.html | 195 ++++++ files/fr/mozilla/firefox/releases/11/index.html | 144 ++++ files/fr/mozilla/firefox/releases/12/index.html | 162 +++++ files/fr/mozilla/firefox/releases/13/index.html | 145 ++++ files/fr/mozilla/firefox/releases/15/index.html | 114 ++++ files/fr/mozilla/firefox/releases/16/index.html | 88 +++ files/fr/mozilla/firefox/releases/17/index.html | 87 +++ .../releases/17/site_compatibility/index.html | 12 + files/fr/mozilla/firefox/releases/18/index.html | 92 +++ .../releases/18/site_compatibility/index.html | 12 + files/fr/mozilla/firefox/releases/19/index.html | 82 +++ .../releases/19/site_compatibility/index.html | 12 + files/fr/mozilla/firefox/releases/2/index.html | 149 ++++ .../firefox/releases/2/security_changes/index.html | 32 + .../releases/2/updating_extensions/index.html | 47 ++ files/fr/mozilla/firefox/releases/20/index.html | 75 +++ .../releases/20/site_compatibility/index.html | 12 + files/fr/mozilla/firefox/releases/21/index.html | 141 ++++ .../releases/21/site_compatibility/index.html | 12 + files/fr/mozilla/firefox/releases/22/index.html | 72 ++ .../releases/22/site_compatibility/index.html | 12 + files/fr/mozilla/firefox/releases/23/index.html | 85 +++ .../releases/23/site_compatibility/index.html | 12 + files/fr/mozilla/firefox/releases/24/index.html | 77 +++ .../releases/24/site_compatibility/index.html | 13 + files/fr/mozilla/firefox/releases/3.5/index.html | 233 +++++++ files/fr/mozilla/firefox/releases/3.6/index.html | 297 ++++++++ .../firefox/releases/3/dom_improvements/index.html | 35 + .../firefox/releases/3/full_page_zoom/index.html | 42 ++ files/fr/mozilla/firefox/releases/3/index.html | 272 ++++++++ .../releases/3/notable_bugs_fixed/index.html | 35 + .../releases/3/site_compatibility/index.html | 80 +++ .../firefox/releases/3/svg_improvements/index.html | 65 ++ .../releases/3/updating_extensions/index.html | 219 ++++++ .../3/updating_web_applications/index.html | 95 +++ .../3/xul_improvements_in_firefox_3/index.html | 95 +++ files/fr/mozilla/firefox/releases/35/index.html | 197 ++++++ .../releases/35/site_compatibility/index.html | 13 + files/fr/mozilla/firefox/releases/4/index.html | 640 ++++++++++++++++++ files/fr/mozilla/firefox/releases/40/index.html | 198 ++++++ .../releases/40/site_compatibility/index.html | 13 + files/fr/mozilla/firefox/releases/41/index.html | 198 ++++++ .../releases/41/site_compatibility/index.html | 13 + files/fr/mozilla/firefox/releases/5/index.html | 168 +++++ files/fr/mozilla/firefox/releases/50/index.html | 198 ++++++ files/fr/mozilla/firefox/releases/59/index.html | 204 ++++++ files/fr/mozilla/firefox/releases/6/index.html | 290 ++++++++ files/fr/mozilla/firefox/releases/63/index.html | 275 ++++++++ files/fr/mozilla/firefox/releases/65/index.html | 249 +++++++ files/fr/mozilla/firefox/releases/68/index.html | 245 +++++++ files/fr/mozilla/firefox/releases/69/index.html | 139 ++++ files/fr/mozilla/firefox/releases/7/index.html | 239 +++++++ files/fr/mozilla/firefox/releases/70/index.html | 111 +++ files/fr/mozilla/firefox/releases/76/index.html | 114 ++++ files/fr/mozilla/firefox/releases/77/index.html | 117 ++++ files/fr/mozilla/firefox/releases/8/index.html | 255 +++++++ files/fr/mozilla/firefox/releases/9/index.html | 233 +++++++ files/fr/mozilla/firefox/releases/index.html | 13 + files/fr/mozilla/firefox/versions/1.5/index.html | 125 ---- files/fr/mozilla/firefox/versions/11/index.html | 144 ---- files/fr/mozilla/firefox/versions/12/index.html | 162 ----- files/fr/mozilla/firefox/versions/13/index.html | 145 ---- files/fr/mozilla/firefox/versions/15/index.html | 114 ---- files/fr/mozilla/firefox/versions/16/index.html | 88 --- files/fr/mozilla/firefox/versions/17/index.html | 87 --- .../versions/17/site_compatibility/index.html | 12 - files/fr/mozilla/firefox/versions/18/index.html | 92 --- .../versions/18/site_compatibility/index.html | 12 - files/fr/mozilla/firefox/versions/19/index.html | 82 --- .../versions/19/site_compatibility/index.html | 12 - files/fr/mozilla/firefox/versions/2/index.html | 149 ---- files/fr/mozilla/firefox/versions/20/index.html | 75 --- .../versions/20/site_compatibility/index.html | 12 - files/fr/mozilla/firefox/versions/21/index.html | 141 ---- .../versions/21/site_compatibility/index.html | 12 - files/fr/mozilla/firefox/versions/22/index.html | 72 -- .../versions/22/site_compatibility/index.html | 12 - files/fr/mozilla/firefox/versions/23/index.html | 85 --- .../versions/23/site_compatibility/index.html | 12 - files/fr/mozilla/firefox/versions/24/index.html | 77 --- .../versions/24/site_compatibility/index.html | 13 - files/fr/mozilla/firefox/versions/3.5/index.html | 233 ------- files/fr/mozilla/firefox/versions/3.6/index.html | 297 -------- files/fr/mozilla/firefox/versions/3/index.html | 272 -------- files/fr/mozilla/firefox/versions/35/index.html | 197 ------ .../versions/35/site_compatibility/index.html | 13 - files/fr/mozilla/firefox/versions/4/index.html | 640 ------------------ files/fr/mozilla/firefox/versions/40/index.html | 198 ------ .../versions/40/site_compatibility/index.html | 13 - files/fr/mozilla/firefox/versions/41/index.html | 198 ------ .../versions/41/site_compatibility/index.html | 13 - files/fr/mozilla/firefox/versions/5/index.html | 168 ----- files/fr/mozilla/firefox/versions/50/index.html | 198 ------ files/fr/mozilla/firefox/versions/59/index.html | 204 ------ files/fr/mozilla/firefox/versions/6/index.html | 290 -------- files/fr/mozilla/firefox/versions/63/index.html | 275 -------- files/fr/mozilla/firefox/versions/65/index.html | 249 ------- files/fr/mozilla/firefox/versions/68/index.html | 245 ------- files/fr/mozilla/firefox/versions/69/index.html | 139 ---- files/fr/mozilla/firefox/versions/7/index.html | 239 ------- files/fr/mozilla/firefox/versions/70/index.html | 111 --- files/fr/mozilla/firefox/versions/76/index.html | 114 ---- files/fr/mozilla/firefox/versions/77/index.html | 117 ---- files/fr/mozilla/firefox/versions/8/index.html | 255 ------- files/fr/mozilla/firefox/versions/9/index.html | 233 ------- files/fr/mozilla/firefox/versions/index.html | 13 - 236 files changed, 14286 insertions(+), 16122 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 delete mode 100644 files/fr/mozilla/add-ons_bonnes_pratiques_performances_extensions/index.html create mode 100644 files/fr/mozilla/developer_guide/build_instructions/index.html create mode 100644 files/fr/mozilla/developer_guide/introduction/index.html create mode 100644 files/fr/mozilla/developer_guide/so_you_just_built_firefox/index.html delete mode 100644 files/fr/mozilla/developer_guide/vous_venez_juste_de_compiler_firefox/index.html create mode 100644 files/fr/mozilla/firefox/releases/1.5/adapting_xul_applications_for_firefox_1.5/index.html create mode 100644 files/fr/mozilla/firefox/releases/1.5/index.html create mode 100644 files/fr/mozilla/firefox/releases/1.5/using_firefox_1.5_caching/index.html create mode 100644 files/fr/mozilla/firefox/releases/11/index.html create mode 100644 files/fr/mozilla/firefox/releases/12/index.html create mode 100644 files/fr/mozilla/firefox/releases/13/index.html create mode 100644 files/fr/mozilla/firefox/releases/15/index.html create mode 100644 files/fr/mozilla/firefox/releases/16/index.html create mode 100644 files/fr/mozilla/firefox/releases/17/index.html create mode 100644 files/fr/mozilla/firefox/releases/17/site_compatibility/index.html create mode 100644 files/fr/mozilla/firefox/releases/18/index.html create mode 100644 files/fr/mozilla/firefox/releases/18/site_compatibility/index.html create mode 100644 files/fr/mozilla/firefox/releases/19/index.html create mode 100644 files/fr/mozilla/firefox/releases/19/site_compatibility/index.html create mode 100644 files/fr/mozilla/firefox/releases/2/index.html create mode 100644 files/fr/mozilla/firefox/releases/2/security_changes/index.html create mode 100644 files/fr/mozilla/firefox/releases/2/updating_extensions/index.html create mode 100644 files/fr/mozilla/firefox/releases/20/index.html create mode 100644 files/fr/mozilla/firefox/releases/20/site_compatibility/index.html create mode 100644 files/fr/mozilla/firefox/releases/21/index.html create mode 100644 files/fr/mozilla/firefox/releases/21/site_compatibility/index.html create mode 100644 files/fr/mozilla/firefox/releases/22/index.html create mode 100644 files/fr/mozilla/firefox/releases/22/site_compatibility/index.html create mode 100644 files/fr/mozilla/firefox/releases/23/index.html create mode 100644 files/fr/mozilla/firefox/releases/23/site_compatibility/index.html create mode 100644 files/fr/mozilla/firefox/releases/24/index.html create mode 100644 files/fr/mozilla/firefox/releases/24/site_compatibility/index.html create mode 100644 files/fr/mozilla/firefox/releases/3.5/index.html create mode 100644 files/fr/mozilla/firefox/releases/3.6/index.html create mode 100644 files/fr/mozilla/firefox/releases/3/dom_improvements/index.html create mode 100644 files/fr/mozilla/firefox/releases/3/full_page_zoom/index.html create mode 100644 files/fr/mozilla/firefox/releases/3/index.html create mode 100644 files/fr/mozilla/firefox/releases/3/notable_bugs_fixed/index.html create mode 100644 files/fr/mozilla/firefox/releases/3/site_compatibility/index.html create mode 100644 files/fr/mozilla/firefox/releases/3/svg_improvements/index.html create mode 100644 files/fr/mozilla/firefox/releases/3/updating_extensions/index.html create mode 100644 files/fr/mozilla/firefox/releases/3/updating_web_applications/index.html create mode 100644 files/fr/mozilla/firefox/releases/3/xul_improvements_in_firefox_3/index.html create mode 100644 files/fr/mozilla/firefox/releases/35/index.html create mode 100644 files/fr/mozilla/firefox/releases/35/site_compatibility/index.html create mode 100644 files/fr/mozilla/firefox/releases/4/index.html create mode 100644 files/fr/mozilla/firefox/releases/40/index.html create mode 100644 files/fr/mozilla/firefox/releases/40/site_compatibility/index.html create mode 100644 files/fr/mozilla/firefox/releases/41/index.html create mode 100644 files/fr/mozilla/firefox/releases/41/site_compatibility/index.html create mode 100644 files/fr/mozilla/firefox/releases/5/index.html create mode 100644 files/fr/mozilla/firefox/releases/50/index.html create mode 100644 files/fr/mozilla/firefox/releases/59/index.html create mode 100644 files/fr/mozilla/firefox/releases/6/index.html create mode 100644 files/fr/mozilla/firefox/releases/63/index.html create mode 100644 files/fr/mozilla/firefox/releases/65/index.html create mode 100644 files/fr/mozilla/firefox/releases/68/index.html create mode 100644 files/fr/mozilla/firefox/releases/69/index.html create mode 100644 files/fr/mozilla/firefox/releases/7/index.html create mode 100644 files/fr/mozilla/firefox/releases/70/index.html create mode 100644 files/fr/mozilla/firefox/releases/76/index.html create mode 100644 files/fr/mozilla/firefox/releases/77/index.html create mode 100644 files/fr/mozilla/firefox/releases/8/index.html create mode 100644 files/fr/mozilla/firefox/releases/9/index.html create mode 100644 files/fr/mozilla/firefox/releases/index.html delete mode 100644 files/fr/mozilla/firefox/versions/1.5/index.html delete mode 100644 files/fr/mozilla/firefox/versions/11/index.html delete mode 100644 files/fr/mozilla/firefox/versions/12/index.html delete mode 100644 files/fr/mozilla/firefox/versions/13/index.html delete mode 100644 files/fr/mozilla/firefox/versions/15/index.html delete mode 100644 files/fr/mozilla/firefox/versions/16/index.html delete mode 100644 files/fr/mozilla/firefox/versions/17/index.html delete mode 100644 files/fr/mozilla/firefox/versions/17/site_compatibility/index.html delete mode 100644 files/fr/mozilla/firefox/versions/18/index.html delete mode 100644 files/fr/mozilla/firefox/versions/18/site_compatibility/index.html delete mode 100644 files/fr/mozilla/firefox/versions/19/index.html delete mode 100644 files/fr/mozilla/firefox/versions/19/site_compatibility/index.html delete mode 100644 files/fr/mozilla/firefox/versions/2/index.html delete mode 100644 files/fr/mozilla/firefox/versions/20/index.html delete mode 100644 files/fr/mozilla/firefox/versions/20/site_compatibility/index.html delete mode 100644 files/fr/mozilla/firefox/versions/21/index.html delete mode 100644 files/fr/mozilla/firefox/versions/21/site_compatibility/index.html delete mode 100644 files/fr/mozilla/firefox/versions/22/index.html delete mode 100644 files/fr/mozilla/firefox/versions/22/site_compatibility/index.html delete mode 100644 files/fr/mozilla/firefox/versions/23/index.html delete mode 100644 files/fr/mozilla/firefox/versions/23/site_compatibility/index.html delete mode 100644 files/fr/mozilla/firefox/versions/24/index.html delete mode 100644 files/fr/mozilla/firefox/versions/24/site_compatibility/index.html delete mode 100644 files/fr/mozilla/firefox/versions/3.5/index.html delete mode 100644 files/fr/mozilla/firefox/versions/3.6/index.html delete mode 100644 files/fr/mozilla/firefox/versions/3/index.html delete mode 100644 files/fr/mozilla/firefox/versions/35/index.html delete mode 100644 files/fr/mozilla/firefox/versions/35/site_compatibility/index.html delete mode 100644 files/fr/mozilla/firefox/versions/4/index.html delete mode 100644 files/fr/mozilla/firefox/versions/40/index.html delete mode 100644 files/fr/mozilla/firefox/versions/40/site_compatibility/index.html delete mode 100644 files/fr/mozilla/firefox/versions/41/index.html delete mode 100644 files/fr/mozilla/firefox/versions/41/site_compatibility/index.html delete mode 100644 files/fr/mozilla/firefox/versions/5/index.html delete mode 100644 files/fr/mozilla/firefox/versions/50/index.html delete mode 100644 files/fr/mozilla/firefox/versions/59/index.html delete mode 100644 files/fr/mozilla/firefox/versions/6/index.html delete mode 100644 files/fr/mozilla/firefox/versions/63/index.html delete mode 100644 files/fr/mozilla/firefox/versions/65/index.html delete mode 100644 files/fr/mozilla/firefox/versions/68/index.html delete mode 100644 files/fr/mozilla/firefox/versions/69/index.html delete mode 100644 files/fr/mozilla/firefox/versions/7/index.html delete mode 100644 files/fr/mozilla/firefox/versions/70/index.html delete mode 100644 files/fr/mozilla/firefox/versions/76/index.html delete mode 100644 files/fr/mozilla/firefox/versions/77/index.html delete mode 100644 files/fr/mozilla/firefox/versions/8/index.html delete mode 100644 files/fr/mozilla/firefox/versions/9/index.html delete mode 100644 files/fr/mozilla/firefox/versions/index.html (limited to 'files/fr/mozilla') 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 :

+ + diff --git a/files/fr/mozilla/add-ons_bonnes_pratiques_performances_extensions/index.html b/files/fr/mozilla/add-ons_bonnes_pratiques_performances_extensions/index.html deleted file mode 100644 index e1d91724fb..0000000000 --- a/files/fr/mozilla/add-ons_bonnes_pratiques_performances_extensions/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: Add-ons bonnes pratiques performances extensions -slug: Mozilla/Add-ons_bonnes_pratiques_performances_extensions ---- -

Un des grands avantages de Firefox est son extrême extensibilité. Les extensions peuvent presque tout faire. Cela présente un inconvénient: les extensions mal écrites ont un impact majeur sur l'expérience de navigation, incluant les performances de Firefox lui-même. Cet article vous offre quelques bonnes pratiques et suggestions qui pourront non seulement augmenter les performances et la vitesse de votre extension, mais aussi celles de Firefox.

- -

Améliorer les performances au chargement

- -

Les extensions sont chargées et démarrés à chaque fois qu'une nouvelle fenêtre du navigateur est ouverte. Cela signifie qu'à chaque fois qu'une fenêtre s'ouvre, votre extension peut avoir un impact sur le temps que mettra l'utilisateur à voir le contenu qu'il essaye de visualiser. Il y a plusieurs choses que vous pouvez faire pour réduire la durée que votre extension ajoutera à l'apparition du contenu désiré par l'utilisateur.

- -

Chargez uniquement ce dont vous avez besoin, quand vous en avez besoin

- -

Ne chargez pas des choses au démarrage qui ne seront nécessaire que si l'utilisateur clique sur un bouton, ou si une préférence donnée est activé quand elle ne l'est pas. Si votre extension présente des fonctionnalités accessibles uniquement si l'utilisateur est identifié auprès d'un service, ne chargez pas de ressources pour ces fonctionnalités tant que l'utilisateur n'est pas identifié.

- -

Utilisez les modules de code JavaScript

- -

Vous pouvez créer vos propres JavaScript code modules incorporants les fonctionnalités qui ne sont requises que dans des circonstances particulières. Cela permet de charger à la volé des morceaux de votre extension, au lieu de tout charger d'un coup.

- -

While JavaScript modules can be extremely useful, and provide significant performance benefits, they should be used wisely. Loading modules incurs a small cost, so breaking code up to an unnecessary degree can be counter-productive. Code should be modularized to the extend that doing so increases clarity, and loading of large or expensive chunks of code fragments can be significantly deferred.

- -

Defer everything that you can

- -

Most extensions have a load event listener in the main overlay that runs their startup functions. Do as little as possible here. The browser window is blocked while your add-on's load handler runs, so the more it does, the slower Firefox will appear to the user.

- -

If there is anything that can be done even a fraction of a second later, you can use an {{ interface("nsITimer") }} or the {{ domxref("window.setTimeout()") }} method to schedule that work for later.  Even a short delay can have a big impact.

- -

Astuces de performances générales

- -

Evitez de créer des fuites de mémoires

- -

Memory leaks require the garbage collector and the cycle collector to work harder, which can significantly degrade performance.

- -

Zombie compartments are a particular kind of memory leak that you can detect with minimal effort.  See the Zombie compartments page, especially the Proactive checking of add-ons section.

- -

See Common causes of memory leaks in extensions for ways to avoid zombie compartments and other kinds of leaks.

- -

As well as looking for these specific kinds of leaks, it's worth exercising your extension's functionality and checking the contents of about:memory for any excessive memory usage.  For example, bug 719601 featured a "System Principal" JavaScript compartment containing 100s of MBs of memory, which is much larger than usual.

- -

Evitez d'écrire des CSS lents

- - - -

Avoid DOM mutation event listeners

- -

DOM mutation event listeners are extremely expensive and, once added to a document even briefly, significantly harm its performance. As mutation events are officially deprecated, and there are many alternatives, they should be avoided at all costs.

- -

Lazily load services

- -

The XPCOMUtils JavaScript module provides two methods for lazily loading things:

- - - -

Beaucoup de services commun sont dàja en cache dans Services.jsm.

- -

Utilisez les E/S asynchrones

- -

Ne jamais faire E/S synchrone dans le thread principal.

- -

N'importe quelle sorte d'E/S dans le thread principal, qu'elle soit sur un disque ou sur le réseau, peuvent provoquez de sérieux problème de ralentissement de l'interface utilisateur.

- - - -

Evitez les évenements de mouvement de la souris

- -

Evitez d'utiliser les évenements de mouvement de la souris, tel que mouseover, mouseout, mouseenter, mouseexit, et plus spécialement mousemove. Ces évenements se déclenchent à haute fréquence, par conséquent leurs écouteurs d'évenements peuvent facilement provoquer une surcharge CPU.

- -

Quand ces évenements ne peuvent être évités, computation during the listeners should be kept to a minimum and real work throttled. Ces évenements doivent être ajoutés sur des éléments les plus spécifiques possible, et supprimé immédiatement lorsqu'il ne sont plus nécessaires.

- -

Evitez les images animées

- -

Animated images are much more expensive than generally expected, especially when used in XUL {{ XULElem("tree") }} elements..

- -

Considérez l'utilisation des Chrome Workers

- -

Vous pouvez utiliser {{ domxref("ChromeWorker") }} pour executer de longues tâches ou du traitement de données.

- -

Voir aussi

- - diff --git a/files/fr/mozilla/developer_guide/build_instructions/index.html b/files/fr/mozilla/developer_guide/build_instructions/index.html new file mode 100644 index 0000000000..958b486d2a --- /dev/null +++ b/files/fr/mozilla/developer_guide/build_instructions/index.html @@ -0,0 +1,108 @@ +--- +title: Compilation et installation +slug: Compilation_et_installation +tags: + - Documentation_sur_la_compilation + - Développement_de_Mozilla +translation_of: Mozilla/Developer_guide/Build_Instructions +translation_of_original: Build_and_Install +--- +
+

Se réferer à la page suivante pour la compilation de Thunderbird (utilisation de l'outil Mach recommandée) : Simple Thunderbird build

+
+ +
+

Ne commencez pas à compiler sans configurer vos options de compilation au préalable !

+
+ +

Compilation

+ +

Vous devez utiliser GNU make pour récupérer et compiler Mozilla. Aucun autre programme « make » n'est acceptable. Sous Windows, Mac OS X et Linux, utilisez « make » pour lancer GNU make ; sur la plupart des systèmes UNIX non-GNU, utilisez « gmake ».

+ +

Une fois les sources récupérées, assurez-vous de configurer une application comme décrit sur la page Configuration des options de compilation.

+ +

Pour Windows, Mac OS X et GNU/Linux, assurez-vous d'être dans le répertoire principal des sources (le répertoire « mozilla »), avant d'invoquer la commande make :

+ +
$ make -f client.mk build
+
+ +

Note pour Mac OS X : le chemin vers le répertoire des sources créé à la décompression du tarball des sources ne doit pas contenir d'espaces !

+ +

Pour la plupart des UNIX non-GNU, la commande est :

+ +
$ gmake -f client.mk build
+
+ +

Si vous désirez configurer et compiler manuellement, placez-vous (cd) dans votre répertoire objdir, lancez configure, et ensuite make/gmake. Configure récupèrera cependant toujours les options spécifiées dans votre fichier .mozconfig.

+ +

Lancement de votre nouvelle application

+ +

Il est possible d'exécuter votre nouvelle application directement depuis le répertoire dans lequel elle a été compilée. Cependant, le répertoire de compilation peut contenir des liens symboliques vers l'arbre de compilation ; vous devez passer par l'étape d'installation/packaging pour produire une applicationstandalone qui peut être partagée ou déplacée.

+ +

Windows et Linux

+ +

Sur les systèmes de compilation non-Macintosh, l'application finale peut être trouvée dansobjdir /dist/bin. Sur les plateformes POSIX (BSD, GNU/Linux, Solaris), vous devrez exécuter le fichier « mozilla » ou « firefox », pas le binaire « mozilla-bin » ou « firefox-bin ».

+ +

Mac OS X

+ +

Sous Macintosh, le système de compilation produit un bundle d'application dansobjdir /dist/AppName .app, par exempleobjdir /dist/Minefield.app.

+ +

Veuillez noter que lorsque vous compilez avec --enable-debug, l'application est placée dansobjdir /dist/AppName Debug.app, par exemple.objdir /dist/MinefieldDebug.app.

+ +

Vous pouvez exécuter l'application soit en ouvrant le bundle à partir du Finder, soit depuis la ligne de commande à l'aide de

+ +
$ objdir/dist/AppName[Debug].app/Contents/MacOS/appname
+
+ +

par exemple :

+ +
$ objdir/dist/MinefieldDebug.app/Contents/MacOS/firefox
+
+ +
Construction d'un .dmg pour une compilation XULRunner
+ +

Ces instructions concernent la construction d'un fichier .dmg depuis une compilation Mac OS X Universal binary.

+ +
    +
  1. Effectuez une compilation Universal Binary
    2. +
  2. Créez les fichiers source chown_root.c et chown_revert.c depuis mxr:chown_root.c et mxr:chown_revert.c
    3. +
  3. Utilisez gcc pour compiler ces fichiers quelque part : gcc -o chown_root chown_root.c et gcc -o chown_revert chown_revert.c
    4. +
  4. Rendez-vous dans «objdir»/«arch»/xulrunner/installer et entrez make CHOWN_ROOT=«chemin_absolu_vers_votre_root_chown» CHOWN_REVERT=«chemin_absolu_vers_votre_binaire_inverse_chown»
    5. +
+ +

Ceci devrait vous construire un binaire dans «arch»/dist.

+ +

Installation de votre application

+ +

Sur les plateformes POSIX, vous pouvez installer votre application dans le système en lançantgmake install . Cependant, ce n'est pas recommandé et il est préférable de suivre les instructions suivantes pour créer un tarball, et de décompresser ensuite ce tarball.

+ +

Pour le tronc (Firefox 3)

+ +

Pour les compilations du tronc, vous pouvez simplement exécuter make package dans votre répertoire objet pour créer une compilation empaquetée. Ceci créera un fichier zip ou tar.gz dans objdir/dist que vous pourrez ensuite décompresser n'importe où. Pour compiler un installeur Windows, utilisez simplement make installer dans votre répertoire objet.

+ +

Pour la branche 1.8 (Firefox 2)

+ +

Pour la plupart des applications, préparez un tarball/zip de votre application en faisant dans un répertoire spécifique à l'application :

+ + + +

Pour créer un installeur Windows, lancez make avec le target « installer » dans le répertoire évoqué plus haut:

+ + + +

{{ Note("Pour réaliser l\'installeur fortement compressé utilisé par Firefox et Thunderbird avec un système de compilation basé sur Cygwin, vous devrez installer quelques programmes additionnels :") }}

+ + + +

Ces deux utilitaires doivent être accessibles depuis le PATH. De plus, la variable MOZ_INSTALLER_USE_7ZIP doit être définie dans votre environnement. Si vous utilisez le système de compilation MozillaBuild, 7-Zip et UPX seront installés automatiquement.

diff --git a/files/fr/mozilla/developer_guide/introduction/index.html b/files/fr/mozilla/developer_guide/introduction/index.html new file mode 100644 index 0000000000..a8a6f99467 --- /dev/null +++ b/files/fr/mozilla/developer_guide/introduction/index.html @@ -0,0 +1,24 @@ +--- +title: Introduction (alternative) +slug: Introduction_(alternative) +translation_of: Mozilla/Developer_guide/Introduction +translation_of_original: Introduction_(alternate) +--- +

Bien que Firefox soit largement écrit en C++, il existe de très nombreuses manière de contribuer sans connaître C++.

+

Firefox/Thunderbird/etc.

+

Malgré que Firefox (et les autres produits Mozilla qui sont construits depuis la base de code Mozilla) sont écrits en C++, il y a de nombreux composants écrits dans d'autres languages :

+ +

Pour trouver du travail sur ces bogues, suivez le guide principal. Presque toutes les étapes sont identiques, y compris comment trouver des bogues adaptés pour commencer et le système d'encadrement.

+

Sites Web

+

Mozilla possède plus d'une centaine d'outils et de sites, qui sont presque tous open-source. Nous avons un guide pour débuter avec les sites Web majeurs de Mozilla, ainsi qu'une liste presque à jour des projets de développement Web dans lesquels Mozilla est impliqué, et nous souhaitons améliorer cette liste bientôt. Utilisez cette liste pour trouver un projet qui vous intéresse, et savoir comment vous y impliquer.

+

Projets Github

+

La page github de Mozilla compte plus de 100 projets auxquels vous pouvez contribuer. Ces projets sont développés en utilisant les pratiques courantes de GitHub, donc faites votre branche et au boulot. Nous attendons vos demandes d'intégration ! Parmis ces projets, il y a beaucoup de projets à forte visibilité comme Jetpack, Chromeless, F1 et de nombreux autres.

+

Dépôts Mercurial de Mozilla

+

De nombreux projets Mozilla ont leur propre dépôt à hg.mozilla.org. Cela montre la hiérarchie entre les projets de Mozilla, ainsi que ceux qui sont maintenus (tous ne le sont pas). Parmis eux, il y a des zones critiques de Mozilla comme QA, RelEng, la localisation, webtools, les dépôts des développeurs majeurs, et plus.

+

D'autres manières de s'engager

+

Il existe beaucoup d'autres manières de contribuer à la mission de Mozilla sans programmer. Si vous souhaitez vous diriger vers le design, l'aide, la traduction, les tests ou d'autres types de contributions, rendez vous sur la page dédiées au volontariat.

diff --git a/files/fr/mozilla/developer_guide/so_you_just_built_firefox/index.html b/files/fr/mozilla/developer_guide/so_you_just_built_firefox/index.html new file mode 100644 index 0000000000..31e260de0a --- /dev/null +++ b/files/fr/mozilla/developer_guide/so_you_just_built_firefox/index.html @@ -0,0 +1,10 @@ +--- +title: Vous venez juste de compiler Firefox +slug: Mozilla/Developer_guide/Vous_venez_juste_de_compiler_Firefox +translation_of: Mozilla/Developer_guide/So_you_just_built_Firefox +--- +

Un lien vers cette page sera affiché après que vous ayez compilé Firefox, avec succès. Elle contient des informations sur les étapes à suivre, avec des liens pour lancer les tests, packager votre executable, etc. Pour le contenu, essayez d'être bref, et d'afficher des liens vers les pages que vous pensez utiles. Votre audience est composée de personnes qui viennent de compiler Firefox, pour la première fois.

+

Voici quelques liens qui pourraient vous servir :

+

Lancer les tests

+

Debugger

+

Rapporter un bug

diff --git a/files/fr/mozilla/developer_guide/vous_venez_juste_de_compiler_firefox/index.html b/files/fr/mozilla/developer_guide/vous_venez_juste_de_compiler_firefox/index.html deleted file mode 100644 index 31e260de0a..0000000000 --- a/files/fr/mozilla/developer_guide/vous_venez_juste_de_compiler_firefox/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: Vous venez juste de compiler Firefox -slug: Mozilla/Developer_guide/Vous_venez_juste_de_compiler_Firefox -translation_of: Mozilla/Developer_guide/So_you_just_built_Firefox ---- -

Un lien vers cette page sera affiché après que vous ayez compilé Firefox, avec succès. Elle contient des informations sur les étapes à suivre, avec des liens pour lancer les tests, packager votre executable, etc. Pour le contenu, essayez d'être bref, et d'afficher des liens vers les pages que vous pensez utiles. Votre audience est composée de personnes qui viennent de compiler Firefox, pour la première fois.

-

Voici quelques liens qui pourraient vous servir :

-

Lancer les tests

-

Debugger

-

Rapporter un bug

diff --git a/files/fr/mozilla/firefox/releases/1.5/adapting_xul_applications_for_firefox_1.5/index.html b/files/fr/mozilla/firefox/releases/1.5/adapting_xul_applications_for_firefox_1.5/index.html new file mode 100644 index 0000000000..8702ac2824 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/1.5/adapting_xul_applications_for_firefox_1.5/index.html @@ -0,0 +1,33 @@ +--- +title: Adaptation des applications XUL pour Firefox 1.5 +slug: Adaptation_des_applications_XUL_pour_Firefox_1.5 +tags: + - Extensions + - XUL +translation_of: Mozilla/Firefox/Releases/1.5/Adapting_XUL_Applications_for_Firefox_1.5 +--- +
{{FirefoxSidebar}}

 

+ +

Cette page contient une liste des modifications de Firefox 1.5 qui concernent les développeurs XUL.

+ +

Modifications spécifiques

+ + + +

Autres informations

+ + + +

{{ languages( { "en": "en/Adapting_XUL_Applications_for_Firefox_1.5", "it": "it/Adattare_le_applicazioni_XUL_a_Firefox_1.5", "ja": "ja/Adapting_XUL_Applications_for_Firefox_1.5", "pl": "pl/Dostosowanie_aplikacji_XUL_do_Firefoksa_1.5" } ) }}

diff --git a/files/fr/mozilla/firefox/releases/1.5/index.html b/files/fr/mozilla/firefox/releases/1.5/index.html new file mode 100644 index 0000000000..84f17d122f --- /dev/null +++ b/files/fr/mozilla/firefox/releases/1.5/index.html @@ -0,0 +1,125 @@ +--- +title: Firefox 1.5 pour les développeurs +slug: Mozilla/Firefox/Versions/1.5 +tags: + - Firefox + - Firefox 1.5 +translation_of: Mozilla/Firefox/Releases/1.5 +--- +
{{FirefoxSidebar}}

Firefox 1.5, basé sur le moteur Gecko 1.8, améliore son support des standards déjà de premier ordre et fournit de nouvelles opportunités de créer la prochaine génération d'applications Web. Firefox 1.5 propose un support amélioré de CSS2 et CSS3, des API pour des graphiques 2D scriptables et programmables grâce à SVG 1.1 et <canvas>, les évènements XForms et XML, ainsi que de nombreuses améliorations du DHTML, du JavaScript et du DOM.

+ +

Outils pour développeurs

+ +

Plusieurs outils et extensions sont disponibles pour aider les développeurs à travailler avec Firefox 1.5.

+ + + +

Note : Certaines extensions ne sont pas encore supportées par Firefox 1.5 et seront automatiquement désactivées.

+ +

Fonctionnalités

+ +

Voici certaines des nouvelles fonctionnalités de Firefox 1.5 :

+ +

Site Web et développeurs d'applications

+ +
+
Introduction à SVG dans HTML
+
Apprenez à utiliser le SVG dans des pages XHTML et comment JavaScript et CSS sont utilisés pour manipuler une image comme vous le feriez avec le XHTML dans un script. Voir également SVG dans Firefox pour connaître l'état et les problèmes connus de l'implémentation du SVG dans la version 1.5.
+
+ +
+
Dessiner avec canvas
+
Apprenez à utiliser la nouvelle balise <canvas> et comment dessiner des graphiques et d'autres objets dans Firefox.
+
+ +
+
Colonnes CSS3
+
Apprenez à utiliser le nouveau support de mise en page multi-colonnes automatiques comme proposé par CSS3.
+
+ +
+
Utilisation du cache de Firefox 1.5
+
Découvrez bfcache et comment il accélère la navigation en arrière et en avant.
+
+ +

XUL et développeurs d'extension

+ +
+
Construire une extension
+
Ce tutoriel vous guidera par étape dans la création d'une extension très simple pour Firefox. Consultez également un autre tutoriel sur la base de connaissance de MozillaZine qui montre comment il est encore plus simple de créer une nouvelle extension avec les nouvelles fonctionnalités du gestionnaire d'extensions dans 1.5.
+
+ +
+
XPCNativeWrapper
+
XPCNativeWrapper est un moyen pour empaqueter un objet afin qu'il puisse accéder à des privilèges chrome. Il peut être utilisé dans toutes les versions de Firefox bien que son comportement soit sensiblement différent au lancement de Firefox 1.5 (Gecko 1.8).
+
+ +
+
Système de préférences
+
Apprenez à utiliser les nouveaux composants graphiques qui vous permettront de créer des fenêtres d'options plus facilement en utilisant moins de code JavaScript.
+
+ +
+
Caractères internationaux dans du JavaScript XUL
+
Les fichiers JavaScript XUL peuvent maintenant contenir des caractères non-ASCII.
+
+ +
+
Modifications de l'API Tree
+
Les interfaces pour accéder aux éléments XUL <tree> ont été modifiées.
+
+ +
+
Modifications XUL pour Firefox 1.5
+
Résumé des modifications du XUL. Consultez également Adaptation des applications XUL pour Firefox 1.5.
+
+ +

Nouvelles fonctionnalités pour l'utilisateur

+ +

Utilisation courante

+ + + +

Sécurité et vie privée

+ + + +

Support des standards Web ouverts

+ +

Le support des standards Web de Firefox garde une longueur d'avance avec des implémentations fonctionnelles et multiplateformes pour :

+ + + +

Firefox 1.5 supporte un bon nombre de protocoles de transport de données (HTTP, FTP, SSL, TLS et d'autres), les caractères multi-langages (Unicode), plusieurs formats graphiques (GIF, JPEG, PNG, SVG et d'autres) et la dernière version du langage de script le plus populaire au monde, JavaScript 1.6.

+ +

Changements depuis Firefox 1.0

+ +

De nombreux changements ont été introduits dans Firefox depuis sa première sortie le 9 novembre 2004. Firefox a progressé avec beaucoup de nouvelles fonctions et de corrections de bogues. Une liste détaillée des modifications est disponible sur squarefree.com.

diff --git a/files/fr/mozilla/firefox/releases/1.5/using_firefox_1.5_caching/index.html b/files/fr/mozilla/firefox/releases/1.5/using_firefox_1.5_caching/index.html new file mode 100644 index 0000000000..b88ec3bfcd --- /dev/null +++ b/files/fr/mozilla/firefox/releases/1.5/using_firefox_1.5_caching/index.html @@ -0,0 +1,195 @@ +--- +title: Utilisation du cache de Firefox 1.5 +slug: Utilisation_du_cache_de_Firefox_1.5 +tags: + - DOM + - Développement_Web + - Extensions + - HTML + - JavaScript +translation_of: Mozilla/Firefox/Releases/1.5/Using_Firefox_1.5_caching +--- +
{{FirefoxSidebar}}

 

+ +

Introduction

+ +

Firefox 1.5 met en mémoire cache des pages Web entières, avec leurs états JavaScript, pour une même session de navigation. Revenir ou avancer entre des pages déjà visitées ne nécessite aucun chargement de page et les états JavaScript sont préservés. Cette fonctionnalité parfois appelée bfcache (pour « Back-Forward Cache ») rend la navigation très rapide. Ce cache est préservé en mémoire jusqu'à ce que l'utilisateur ferme le navigateur.

+ +

Il existe des cas où Firefox ne met pas en cache les pages. Vous trouverez ci-dessous certaines raisons classiques de programmation faisant qu'une page n'est pas mise en cache :

+ + + +

Cette nouvelle fonctionnalité de mise en cache modifie le comportement du chargement des pages, et les webmestres peuvent désirer :

+ + + +

Le navigateur offre aux webmestres deux nouveaux évènements pour cela.

+ +

Nouveaux évènements du navigateur

+ +

Si vous utilisez ces nouveaux évènements, vos pages continueront à s'afficher correctement dans les autres navigateurs (nous avons testé des versions antérieures de Firefox, Internet Explorer, Opera et Safari), et elles utiliseront ces nouvelles fonctionnalités de mise en cache lors de leur chargement dans Firefox 1.5.

+ +

Le comportement standard des pages Web est :

+ +
    +
  1. L'utilisateur accède à une page.
    2. +
  2. Au cours du chargement de la page, les scripts contenus dans la page (inline) s'exécutent.
    3. +
  3. Dès que la page est chargée, le gestionnaire onload est invoqué.
    4. +
+ +

Certaines pages comprennent une quatrième étape. Ce sont celles qui utilisent un gestionnaire unload se déclenchant lorsque l'utilisateur quitte la page pour en charger une autre. Si un gestionnaire unload est présent, la page ne sera pas mise en cache.

+ +

Lorsqu'un utilisateur navigue vers une page mise en cache, les scripts en-ligne et le gestionnaire onload ne sont pas exécutés (étape 2 et 3) puisque dans la plupart des cas les effets de ces scripts ont été préservés.

+ +

Si la page contient des scripts ou d'autres actions déclenchées au chargement qui doivent continuer à s'exécuter lorsque l'utilisateur affiche la page, ou si vous voulez savoir si un utilisateur a consulté une page en cache, utilisez le nouvel évènement pageshow.

+ +

Si vous avez des actions devant s'exécuter lorsque l'utilisateur quitte une page, mais désirez profiter de la nouvelle fonctionnalité de mise en cache, donc sans pouvoir employer le gestionnaire unload, utilisez le nouvel évènement pagehide.

+ +

L'évènement pageshow

+ +

Cet évènement fonctionne comme l'évènement load, sauf qu'il se déclenche à chaque fois que la page est chargée (tandis que l'évènement load ne se déclenche pas avec Firefox 1.5 pour une page chargée depuis le cache). La première fois qu'une page se charge, l'évènement pageshow se déclenche juste après l'évènement load. L'évènement pageshow utilise une propriété booléenne persisted définie à false lors du chargement initial. Elle est définie à true s'il ne s'agit pas du chargement initial de la page (en d'autres termes, elle est définie à true pour une page chargée depuis le cache).

+ +

Définissez tous vos scripts JavaScript que vous voulez voir exécutés à chaque fois qu'une page se charge grâce à l'évènement pageshow.

+ +

Si vous appelez des fonctions JavaScript comme faisant partie de l'évènement pageshow, vous pouvez vous assurer qu'elles soient appelées lorsque la page est chargée dans d'autres navigateurs que Firefox 1.5 en appelant l'évènement pageshow depuis l'évènement load, comme indiqué dans l'exemple plus bas dans cet article.

+ +

L'évènement pagehide

+ +

Si vous désirez définir un comportement se produisant lorsque l'utilisateur quitte la page, mais ne voulez pas utiliser l'évènement unload (ce qui empêcherait la page d'être mise en cache), vous pouvez utiliser le nouvel évènement pagehide. Comme pageshow, l'évènement pagehide utilise une propriété booléenne appelée persisted. Cette propriété est définie à true si la page est mise en cache par le navigateur. Lorsque cette propriété est définie à false, le gestionnaire unload, s'il existe, se déclenche immédiatement après l'évènement pagehide.

+ +

Firefox 1.5 essaie de simuler les évènements de chargement dans le même ordre de déroulement que lorsque la page est chargée initialement. Les cadres sont traités de la même façon que le document principal. Si la page contient des cadres, cela signifie que lorsque la page mise en cache est chargée :

+ + + +

Exemple de code

+ +

L'exemple ci-dessous illustre une page utilisant à la fois les évènements load et pageshow. La page se comporte de la façon suivante :

+ + + + + + + +

Dans cet exemple :

+ + + +
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+   "http://www.w3.org/TR/html4/loose.dtd">
+<HTML>
+<head>
+<title>Commande : Exemple de Firefox 1.5</title>
+<style type="text/css">
+body, p {
+	font-family: Verdana, sans-serif;
+	font-size: 12px;
+   	}
+</style>
+<script type="text/javascript">
+function onLoad() {
+	loadOnlyFirst();
+	onPageShow();
+}
+
+function onPageShow() {
+// calcule la date et l'heure courantes
+	var currentTime = new Date();
+	var year = currentTime.getFullYear();
+	var month = currentTime.getMonth()+1;
+	var day = currentTime.getDate();
+	var hour = currentTime.getHours();
+	var min = currentTime.getMinutes();
+	var sec = currentTime.getSeconds();
+	var mil = currentTime.getMilliseconds();
+	var displayTime = (day + "/" + month + "/" + year + " " +
+		hour + ":" + min + ":" + sec + ":" + mil);
+	document.getElementById("timefield").value = displayTime;
+}
+
+function loadOnlyFirst() {
+	document.zipForm.name.focus();
+}
+</script>
+</head>
+<body onload="onLoad();" onpageshow="if (event.persisted) onPageShow();">
+<h2>Commande</h2>
+
+<form name="zipForm" action="http://www.example.com/formresult.html" method="get">
+<label for="timefield">Date et heure :</label>
+<input type="text" id="timefield"><br>
+<label for="name">Nom :</label>
+<input type="text" id="name"><br>
+<label for="address">Adresse e-mail :</label>
+<input type="text" id="address"><br>
+<label for="order">Numéro de commande :</label>
+<input type="text" id="order"><br>
+<input type="submit" name="submit" value="Soumettre la requête">
+</form>
+</body>
+</html>
+
+ +

En revanche, si la page ci-dessus n'avait pas écouté l'évènement pageshow et gérait tous les calculs au sein de l'évènement load (et était codée à la place comme dans l'exemple de code ci-dessous), la position du curseur et l'heure auraient été mis en cache par Firefox 1.5 lorsque l'utilisateur aurait quitté la page. Lors de son retour, ce seraient la date et l'heure mises en cache qui auraient été affichées.

+ +
<script>
+function onLoad() {
+	loadOnlyFirst();
+
+// calcule la date et l'heure courante
+	var currentTime = new Date();
+	var year = currentTime.getFullYear();
+	var month = currentTime.getMonth()+1;
+	var day = currentTime.getDate();
+	var hour = currentTime.getHours();
+	var min = currentTime.getMinutes();
+	var sec = currentTime.getSeconds();
+	var mil = currentTime.getMilliseconds();
+	var displayTime = (day + "/" + month + "/" + year + " " +
+		hour + ":" + min + ":" + sec + ":" + mil);
+	document.getElementById("timefield").value = displayTime;
+}
+
+function loadOnlyFirst() {
+	document.zipForm.name.focus();
+}
+</script>
+</head>
+
+<body onload="onLoad();">
+
+ +

Développement d'extensions pour Firefox

+ +

Les extensions pour Firefox 1.5 doivent prendre en compte cette fonctionnalité de mise en cache. Si vous développez une extension pour Firefox et que vous désirez qu'elle soit compatible à la fois avec la 1.5 et les versions antérieures, assurez-vous qu'elle écoute l'évènement load pour les déclencheurs qui peuvent être mis en cache et écoute l'évènement pageshow pour les déclencheurs qui ne doivent pas être mis en cache.

+ +

Par exemple, la Barre d'outils Google pour Firefox doit écouter l'évènement load pour la fonction de liens automatiques et l'évènement pageshow pour la fonction PageRank afin d'être compatible à la fois avec la version 1.5 et les versions antérieures.

+ +

Catégories

+ +

Interwiki

+ +

{{ languages( { "de": "de/Benutzen_des_Zwischenspeichers_in_Firefox_1.5_(caching)", "en": "en/Using_Firefox_1.5_caching", "it": "it/Usare_il_caching_di_Firefox_1.5", "ja": "ja/Using_Firefox_1.5_caching" } ) }}

diff --git a/files/fr/mozilla/firefox/releases/11/index.html b/files/fr/mozilla/firefox/releases/11/index.html new file mode 100644 index 0000000000..bc1d161fbd --- /dev/null +++ b/files/fr/mozilla/firefox/releases/11/index.html @@ -0,0 +1,144 @@ +--- +title: Firefox 11 pour les développeurs +slug: Mozilla/Firefox/Versions/11 +tags: + - Firefox + - Firefox 11 +translation_of: Mozilla/Firefox/Releases/11 +--- +
{{FirefoxSidebar}}

Firefox 11, basé sur Gecko 11.0, est sorti le 13 mars 2012. Cet article fournit des informations sur les nouvelles fonctionnalités et les principaux bugs corrigés, ainsi que des liens vers une documentation plus détaillée pour les développeurs web et d'extensions.

+ +

Changements pour les développeurs Web

+ +

HTML

+ + + +

DOM

+ + + +

CSS

+ + + +

SVG

+ + + +

WebSocket

+ + + +

IndexedDB

+ + + +

Réseau

+ + + +

Outils de développement

+ + + +

Changements pour les développeurs de Mozilla et de modules complémentaires

+ +

Module de code JavaScript

+ +

NetUtil.jsm

+ + + +

Nouveau module de code JavaScript

+ +
+
source-editor.jsm
+
Offre un moyen pratique facile d'éditeur de code source que vous pouvez utiliser dans vos add-ons. C'est le même éditeur utilisé par l'Ardoise et les autres outils de développement intégrés dans Firefox.
+
+ +

Changements dans les interfaces

+ + + +

Interface supprimées

+ +

Les interfaces suivantes ont été supprimées car elles n'étaient plus indispensables :

+ + + +

Changement lié au thème

+ + + +

Changement dans les préférences

+ +
+
{{Pref("ui.tooltipDelay")}}
+
Définit le délai, en millisecondes, entre le moment où le curseur de la souris s'arrête et l'affichage d'une info-bulle.
+
+ +

Changement dans le système de compilation

+ + + +

Autre changement

+ + + +

Voir également

+ +

{{Firefox_for_developers('10')}}

diff --git a/files/fr/mozilla/firefox/releases/12/index.html b/files/fr/mozilla/firefox/releases/12/index.html new file mode 100644 index 0000000000..dbb7811cb7 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/12/index.html @@ -0,0 +1,162 @@ +--- +title: Firefox 12 pour les développeurs +slug: Mozilla/Firefox/Versions/12 +tags: + - Firefox + - Firefox 12 +translation_of: Mozilla/Firefox/Releases/12 +--- +
{{FirefoxSidebar}}
+ +

Firefox 12, basé sur Gecko 12.0, est sorti le 24 avril 2012. Cette page résume les principaux changements dans Firefox 12 qui sont utiles aux développeurs.

+ +

Changements pour les développeurs Web

+ +

HTML

+ + + +

CSS

+ + + +

JavaScript

+ + + +

DOM

+ + + +

Nouvelles WebAPIs

+ + + +

SVG

+ + + +

MathML

+ + + +

Réseau

+ + + +

Outils de développement

+ + + +

Mozilla travaille sur l'intégration des ses propres outils de développement Web qui complètent l'add-on populaire Firebug. Vous pouvez obtenir plus d'informations sur ces outils et également voir une liste de ressources externes à Firefox qui vous aideront dans le développement Web. La liste se trouve dans les outils de développement Web.

+ +

Changements divers

+ + + +

Changements pour les développeurs de Mozilla et de modules complémentaires

+ +

Modules de code JavaScript

+ +

source-editor.jsm

+ + + +

XUL

+ + + +

XPCOM

+ + + +

XPConnect

+ + + +

Changements dans les interfaces

+ + + +

SpiderMonkey

+ + + +

Compilation

+ + + +

Autres changements

+ + + +

Voir également

+ +

{{Firefox_for_developers('11')}}

diff --git a/files/fr/mozilla/firefox/releases/13/index.html b/files/fr/mozilla/firefox/releases/13/index.html new file mode 100644 index 0000000000..df1af7aca1 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/13/index.html @@ -0,0 +1,145 @@ +--- +title: Firefox 13 pour les développeurs +slug: Mozilla/Firefox/Versions/13 +tags: + - Firefox + - Firefox 13 +translation_of: Mozilla/Firefox/Releases/13 +--- +
{{FirefoxSidebar}}

Firefox 13, basé sur Gecko 13.0, est sorti le 5 juin 2012. Cette page résume les principaux changements dans Firefox 13 qui sont utiles aux développeurs.

+ +

Changements pour les développeurs Web

+ +

HTML

+ + + +

CSS

+ + + +

JavaScript

+ + + +

DOM

+ + + +

UA string

+ + + +

SVG

+ + + +

WebGL

+ + + +

MathML

+ + + +

Réseau

+ + + +

Outils de développement

+ +

Amélioration de la vue 3D

+ + + +

Améliorations du panneau de style

+ + + +

Amélioration de l'Ardoise

+ + + +

Changements pour les développeurs de Mozilla et de modules complémentaires

+ +

Note de compatibilité

+ +

A partir de Firefox 13, Firefox pour Windows requiert au minimum Windows XP Service Pack 2, il ne pourra plus s'exécuter sur Windows 2000 ou les versions antérieures de Windows XP.

+ +

Modules de code JavaScript

+ +

source-editor.jsm

+ + + +

ARIA

+ + + +

Interfaces

+ + + +

Voir également

+ +

{{Firefox_for_developers('12')}}

diff --git a/files/fr/mozilla/firefox/releases/15/index.html b/files/fr/mozilla/firefox/releases/15/index.html new file mode 100644 index 0000000000..e4ed3d90ea --- /dev/null +++ b/files/fr/mozilla/firefox/releases/15/index.html @@ -0,0 +1,114 @@ +--- +title: Firefox 15 pour les développeurs +slug: Mozilla/Firefox/Versions/15 +tags: + - Firefox + - Firefox 15 +translation_of: Mozilla/Firefox/Releases/15 +--- +
{{FirefoxSidebar}}

Firefox 15, basé sur Gecko 15.0, est sorti le 28 août 2012. Cette page résume les principaux changements dans Firefox 15 qui sont utiles aux développeurs.

+ +

Changements pour les développeurs Web

+ +

HTML

+ + + +

CSS

+ + + +

DOM

+ + + +

JavaScript

+ + + +

WebGL

+ + + +

MathML

+ + + +

Réseau

+ + + +

Changements pour les développeurs de Mozilla et de modules complémentaires

+ +

Changements dans les interfaces

+ +
+
{{interface("nsIDOMWindowUtils")}}
+
aModifiers de sendMouseEvent(), sendTouchEvent(), sendMouseEventToWindow(), sendMouseScrollEvent() et sendKeyEvent() supporte toutes les touches de modification qui sont supportées par KeyboardEvent.getModifierState(). Utiliser les valeurs MODIFIER_*. Et désormais le 5ème paramètre de sendKeyEvent() est changé d'un boolean vers un unsigned long. Pour la compatibilité ascendante, si l'appelant passe true ou false, le comportement n'est pas changé. Ce changement permet aux appelants d'indiquer l'emplacement de la touche.
+
{{interface("nsIBrowserHistory")}}
+
La méthode hidePage() n'a jamais été implémentée, et a été entièrement supprimée dans cette version. La méthode addPageWithDetails() a également été supprimée dans le cadre des travaux pour faire une API Places asynchrone ; à la place, utilisez plutôt {{ifmethod("mozIAsyncHistory", "updatePlaces")}}. De plus, l'attribut count a été retiré, il ne renvoyé pas un comptage réel à certain moment (à la place, il indiqué simplement si les entrées existées). Vous pouvez utiliser à la place {{ifattribute("nsINavHistoryService", "hasHistoryEntries")}}.
+
+ +
+
{{interface("inIDOMUtils")}}
+
La méthode parseStyleSheet() permet d'ajouter et d'analyser des feuilles de style.
+
+ +

Nouvelles interfaces

+ +
+
{{interface("nsISpeculativeConnect")}}
+
Fournit un moyen de suggérer la couche réseau que vous allez être susceptibles de demander l'ouverture d'une connexion à un URI donné dans un futur proche. Cela permet à la couche réseau d'entamer le processus, qui a parfois une forte latence, d'ouvrir une nouvelle connexion réseau à l'avance.
+
+ +

Interfaces supprimées

+ +

Les interfaces suivantes ont été supprimées.

+ + + +

Voir également

+ +

{{Firefox_for_developers('14')}}

diff --git a/files/fr/mozilla/firefox/releases/16/index.html b/files/fr/mozilla/firefox/releases/16/index.html new file mode 100644 index 0000000000..0d9335ab6b --- /dev/null +++ b/files/fr/mozilla/firefox/releases/16/index.html @@ -0,0 +1,88 @@ +--- +title: Firefox 16 pour les développeurs +slug: Mozilla/Firefox/Versions/16 +tags: + - Firefox + - Firefox 16 +translation_of: Mozilla/Firefox/Releases/16 +--- +
{{FirefoxSidebar}}

Firefox 16, basé sur Gecko 16.0, est sorti le 9 octobre 2012. Cette page résume les principaux changements dans Firefox 15 qui sont utiles aux développeurs.

+ +

Changements pour les développeurs Web

+ +

HTML

+ + + +

CSS

+ + + +

DOM

+ + + +

JavaScript

+ + + +

MathML

+ + + +

Outils de développement

+ + + +

Changements pour les développeurs de Mozilla et de modules complémentaires

+ +

Changements dans les interfaces

+ +

{{interface("nsIPrivateDOMEvent")}} a été fusionné dans {{interface("nsIDOMEvent")}}. ({{bug("761613")}})

+ +

Nouvelles interfaces

+ +

Interfaces supprimées

+ +

Les interfaces suivantes ont été supprimées.

+ +

Voir également

+ +

{{Firefox_for_developers('15')}}

diff --git a/files/fr/mozilla/firefox/releases/17/index.html b/files/fr/mozilla/firefox/releases/17/index.html new file mode 100644 index 0000000000..b8c77bfa66 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/17/index.html @@ -0,0 +1,87 @@ +--- +title: Firefox 17 pour les développeurs +slug: Mozilla/Firefox/Versions/17 +tags: + - Firefox + - Firefox 17 +translation_of: Mozilla/Firefox/Releases/17 +--- +
{{FirefoxSidebar}}
+ +

Firefox 17, basé sur Gecko 17.0, est sorti le 20 novembre 2012. Cette page résume les principaux changements dans Firefox 17 qui sont utiles aux développeurs.

+ +

Changements pour les développeurs Web

+ +

HTML

+ + + +

CSS

+ + + +

DOM

+ + + + +

JavaScript

+ + + +

MathML

+ + + +

XUL

+ + + +

Agent Utilisateur

+ +

La partie de Gecko sur la chaine de l'agent utilisateur a changée. La date de compilation (qui n’avait pas été mise à jour depuis 2010) a été retirée, et c'est le numéro de version de Gecko qui a été mis en place. Donc Gecko/20100101 -> Gecko/17.0. Cela peut vous affecter si vous faites du reniflement.

+ +

Changements pour les développeurs de Mozilla et de modules complémentaires

+ +

Changements dans les interfaces

+ +
+
{{interface("nsIInputStream")}}
+
La méthode available() retourne une longueur de 64-bit au lieu de 32-bit. ({{bug(215450)}})
+
{{interface("nsIDOMWindowUtils")}}
+
La méthode sendMouseScrollEvent() a été remplacée par sendWheelEvent(). ({{bug(719320)}})
+
{{interface("nsIFilePicker")}}
+
La méthode open(), pour ouvrir la boîte de dialogue d'un fichier de façon asynchrone, a été ajoutée et la méthode show() a été dépréciée. ({{bug("731307")}})
+
{{interface("nsIScriptSecurityManager")}}
+
Les méthodes checkLoadURIStr() et checkLoadURI() ont été retirées. ({{bug(327244)}})
+
{{interface("nsIRefreshURI")}}
+
La méthode setupRefreshURIFromHeader() a un paramètre principal en plus.
+
+ +

Voir également

+ +

{{Firefox_for_developers('16')}}

diff --git a/files/fr/mozilla/firefox/releases/17/site_compatibility/index.html b/files/fr/mozilla/firefox/releases/17/site_compatibility/index.html new file mode 100644 index 0000000000..5f4d2359da --- /dev/null +++ b/files/fr/mozilla/firefox/releases/17/site_compatibility/index.html @@ -0,0 +1,12 @@ +--- +title: Compatibilité des sites avec Firefox 17 +slug: Mozilla/Firefox/Versions/17/Site_compatibility +tags: + - Compatibilité + - Développement Web + - Firefox + - Firefox 17 + - FxSiteCompat +translation_of: Mozilla/Firefox/Releases/17/Site_compatibility +--- +
{{FirefoxSidebar}}

Cette page a été déplacée vers FxSiteCompat.com.

diff --git a/files/fr/mozilla/firefox/releases/18/index.html b/files/fr/mozilla/firefox/releases/18/index.html new file mode 100644 index 0000000000..7ed2e61e84 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/18/index.html @@ -0,0 +1,92 @@ +--- +title: Firefox 18 pour les développeurs +slug: Mozilla/Firefox/Versions/18 +tags: + - Firefox + - Firefox 18 +translation_of: Mozilla/Firefox/Releases/18 +--- +
{{FirefoxSidebar}}

Firefox 18, basé sur Gecko 18.0, est sorti le 8 janvier 2013. Cette page résume les principaux changements dans Firefox 18 qui sont utiles aux développeurs.

+ +

Changements pour les développeurs Web

+ +

HTML

+ + + +

CSS

+ + + +

DOM

+ + + +

JavaScript

+ + + +

Réseau

+ + + +

Changements pour les développeurs de Mozilla et de modules complémentaires

+ +

Changements dans les interfaces

+ +
+
{{interface("nsIStreamListener")}}
+
Le 4ème paramètre (aOffset) de la méthode onDataAvailable() modifie unsigned long long. ({{bug("784912")}})
+
{{interface("nsIUploadChannel")}}
+
setUploadStream() supporte plus de 2 Go de content-length. ({{bug("790617")}})
+
{{interface("nsIEditor")}}
+
addEditorObserver() a été supprimé, utilisez setEditorObserver() à la place, removeEditorObserver() ne prend plus le paramètre {{interface("nsIEditorObserver")}}. ({{bug("785091")}})
+
{{interface("nsIHttpProtocolHandler")}}
+
Il n'y a plus de garantie que les observateurs http-on-modify-request soit appelés de manière synchrone au cours de nsIChannel.asyncOpen(). Pour les observateurs qui ont besoin d'être appelés pendant asyncOpen(), le nouvel observateur http-on-opening-request a été ajouté. {{bug("800799")}}
+
{{interface("nsIProtocolProxyService")}}
+
La méthode resolve a été retirée. Maintenant, seule la méthode asyncResolve peut être utilisée. Voir ({{bug("769764")}}).
+
+ +

Interfaces supprimées

+ +

Les interfaces suivantes ont été supprimées.

+ + + +

Voir également

+ + + +

Anciennes versions

+ +

{{Firefox_for_developers('17')}}

diff --git a/files/fr/mozilla/firefox/releases/18/site_compatibility/index.html b/files/fr/mozilla/firefox/releases/18/site_compatibility/index.html new file mode 100644 index 0000000000..40090de357 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/18/site_compatibility/index.html @@ -0,0 +1,12 @@ +--- +title: Compatibilité des sites avec Firefox 18 +slug: Mozilla/Firefox/Versions/18/Site_compatibility +tags: + - Compatibilité + - Développement Web + - Firefox + - Firefox 18 + - FxSiteCompat +translation_of: Mozilla/Firefox/Releases/18/Site_compatibility +--- +
{{FirefoxSidebar}}

Cette page a été déplacée vers FxSiteCompat.com.

diff --git a/files/fr/mozilla/firefox/releases/19/index.html b/files/fr/mozilla/firefox/releases/19/index.html new file mode 100644 index 0000000000..8ece44bb72 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/19/index.html @@ -0,0 +1,82 @@ +--- +title: Firefox 19 pour les développeurs +slug: Mozilla/Firefox/Versions/19 +tags: + - Firefox + - Firefox 19 +translation_of: Mozilla/Firefox/Releases/19 +--- +
{{FirefoxSidebar}}

{{ draft() }}

+ +

Firefox 19, basé sur Gecko 19.0, est sorti le 19 février 2013. Cette page résume les principaux changements dans Firefox 19 qui sont utiles aux développeurs.

+ +

Vous voulez aider à documenter Firefox 19 ? Regardez la liste des bugs qui ont besoin de rédaction et lancez-vous !

+ +

Changements pour les développeurs web

+ +

JavaScript

+ + + +

CSS

+ + + +

DOM

+ + + +

XForms

+ +

Le support des XForms a été retiré dans Firefox 19.

+ +

Changements pour les développeurs d'add-ons et les développeurs Mozilla

+ +
+

Note:  nsresult est maintenant fortement typé, c'est un changement majeur dans Firefox 19. Cela permet de détecter plus facilement les bugs causés par la mauvaise gestion des valeurs retournées mais peut empêcher des codes actuels de fonctionner si nsresult fait de mauvaises suppositions concernant ces valeurs.

+
+ + + +

Changements dans les intefaces

+ +
+
{{interface("nsIImgLoadingContent")}}
+
Le paramètre (aObserver) de la méthode addObserver() change de {{interface("imgIDecoderObserver")}} pour {{interface("imgINotificationObserver")}}. La méthode notify() de {{interface("imgINotificationObserver")}} n'est pas scriptable, vous devez donc utiliser createScriptedObserver() à partir de {{interface("imgITools")}}.
+
{{interface("nsIChannel")}}
+
La propriété contentLength a changée de long à int64_t
+
+ +

A voir également

+ + + +

Anciennes versions

+ +

{{Firefox_for_developers('18')}}

diff --git a/files/fr/mozilla/firefox/releases/19/site_compatibility/index.html b/files/fr/mozilla/firefox/releases/19/site_compatibility/index.html new file mode 100644 index 0000000000..bf8fd61a81 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/19/site_compatibility/index.html @@ -0,0 +1,12 @@ +--- +title: Compatibilité des sites avec Firefox 19 +slug: Mozilla/Firefox/Versions/19/Site_compatibility +tags: + - Compatibilité + - Développement Web + - Firefox + - Firefox 19 + - FxSiteCompat +translation_of: Mozilla/Firefox/Releases/19/Site_compatibility +--- +
{{FirefoxSidebar}}

Cette page a été déplacée vers FxSiteCompat.com.

diff --git a/files/fr/mozilla/firefox/releases/2/index.html b/files/fr/mozilla/firefox/releases/2/index.html new file mode 100644 index 0000000000..c0027bed2d --- /dev/null +++ b/files/fr/mozilla/firefox/releases/2/index.html @@ -0,0 +1,149 @@ +--- +title: Firefox 2 pour les développeurs +slug: Mozilla/Firefox/Versions/2 +tags: + - Firefox + - Firefox 2 +translation_of: Mozilla/Firefox/Releases/2 +--- +
{{FirefoxSidebar}}

''Une grande partie du contenu de cette page est juste là pour boucher les trous. Voyez la version anglaise de cette page pour savoir comment la compléter.''

+ +

Nouvelles fonctionnalités pour les développeurs dans Firefox 2

+ +

Firefox 2 propose un grand nombre de nouvelles fonctionnalités et de nouvelles possibilités. Cet article fournit des liens vers des articles couvrant les nouvelles fonctionnalités.

+ +

Pour les développeurs Web et les développeurs d'applications

+ +
+
Microrésumés
+
Les microrésumés sont de courtes compilations, régulièrement mises à jour, des plus importantes informations présentes sur des pages Web. Ils peuvent être fournis tant par les sites eux-mêmes que par des développeurs tiers. Lorsque les utilisateurs marquent des pages présentant des microrésumés, ils peuvent choisir d'afficher ceux-ci en lieu et place de titres statiques.
+
+ +
+
Création d'un générateur de microrésumé
+
Un tutoriel sur la création d'un générateur de microrésumés.
+
+ +
+
Référence grammaticale XML d'un microrésumé
+
Un guide de référence sur la grammaire XML utilisée pour la création de générateurs de microrésumés.
+
+ +
+
Création de plugins MozSearch
+
Firefox 2 utilise MozSearch, un format de plugins de recherche basé sur OpenSearch.
+
+ +
+
Création de plugins OpenSearch pour Firefox
+
Firefox 2 support le format de moteur de recherche OpenSearch.
+
+ +
+
Gestion de suggestions dans les plugins de recherche
+
Comment permettre à votre plugin MozSearch de proposer des suggestions, qui apparaîtront dans une liste déroulante au fur et à mesure de la frappe dans la Barre de recherche.
+
+ +
+
Nouveautés dans JavaScript 1.7
+
Firefox 2 fournit JavaScript 1.7, qui comprend de nouvelles fonctionnalités comme let, des assignations déstructurantes, des générateurs et itérateurs, et la définition de tableaux par compréhension.
+
+ +
+
WHATWG Client-side session and persistent storage (ou DOM Storage)
+
Le stockage de session et le stockage persistant côté client permet aux applications Web de conserver des données structurées du côté du client.
+
+ +
+
SVG dans Firefox
+
Firefox 2 améliore le support du SVG (Scalable Vector Graphics) en implémentant l'élément <textPath> et en ajoutant le support de quelques attributs non encore supportés.
+
+ +
+
Contrôle du correcteur d'orthographe dans les formulaires HTML
+
Firefox 2 contient un correcteur d'orthographe des zones de texte et des champs de saisie. Cet article décrit comment écrire votre HTML pour activer et désactiver ce correcteur d'orthographe sur des éléments individuels de formulaires.
+
+ +
+
La sécurité dans Firefox 2
+
Firefox 2 a modifié les protocoles de sécurité activés par défaut.
+
+ +

Pour les développeurs XUL et les développeurs d'extensions

+ +
+
Mise à jour des extensions pour Firefox 2
+
Comment migrer vos extensions existantes pour qu'elles fonctionnent avec Firefox 2.
+
+ +
+
API de restauration de session
+
Ajout d'élément à enregistrer et à restaurer d'une session à l'autre dans Firefox.
+
+ +
+
API d'accès au contenu de flux
+
API permettant aux développeurs d'accéder et de traiter des flux RSS et Atom.
+
+ +
+
Support SAX
+
API de parcours XML basé sur les évènements.
+
+ +
+
Ajout de moteurs de recherche depuis des pages Web
+
Un code JavaScript peut demander à Firefox d'installer un nouveau plugin de moteur de recherche, qui peut être fourni au format OpenSearch ou au format Sherlock.
+
+ +
+
Utilisation du correcteur orthographique dans XUL
+
Explique comment vérifier l'orthographe de certains mots et comment obtenir une liste de suggestions de corrections depuis le code.
+
+ +
+
Ajout de fournisseurs de données de protection anti-phishing
+
Il est possible d'améliorer la protection de Firefox contre le phishing (hameçonnage) en ajoutant des fournisseurs de données pour le système de navigation sécurisée.
+
+ +
+
Storage
+
Firefox 2 propose mozStorage, une architecture de base de données basée sur sqlite.
+
+ +
+
Changements dans les thèmes graphiques pour Firefox 2
+
Discussion autour des changements à apporter au thèmes graphiques existants pour qu'ils fonctionnent avec Firefox 2.
+
+ +
+
Améliorations de Textbox (à partir de Firefox 2.0.0.1 uniquement)
+
L'élément <textbox> dispose à présent d'une méthode reset() pour réinitialiser la valeur de la boîte de texte à sa valeur par défaut. La propriété defaultValue peut être utilisée pour récupérer et modifier cette valeur par défaut ({{ Bug(312867) }}).
+
Support d'une propriété editor permettant d'obtenir l'interface interne nsIEditor pour le champ texte ({{ Bug(312867) }}).
+
+ +

Nouvelles fonctionnalités pour les utilisateurs

+ +

Firefox 2 offre une version améliorée de l'agréable interface utilisateur par rapport à ses versions précédentes, avec un niveau accru de sécurité pour rendre votre expérience de navigation encore plus sûre et plus pratique que jamais.

+ +

Apparence et comportement

+ + + +

Sécurité et vie privée

+ + + +

Voir aussi

+ +

{{Firefox_for_developers('1')}}

diff --git a/files/fr/mozilla/firefox/releases/2/security_changes/index.html b/files/fr/mozilla/firefox/releases/2/security_changes/index.html new file mode 100644 index 0000000000..02a1c4e215 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/2/security_changes/index.html @@ -0,0 +1,32 @@ +--- +title: La sécurité dans Firefox 2 +slug: La_sécurité_dans_Firefox_2 +tags: + - Sécurité +translation_of: Mozilla/Firefox/Releases/2/Security_changes +--- +
{{FirefoxSidebar}}

Cet article aborde les changements concernant la sécurité dans Firefox 2.

+ +

Chiffrements faibles désactivés par défaut

+ +

Firefox 2 désactive par défaut le support de SSLv2 et les suites de chiffrement faible (celles ayant des longueurs de clefs inférieures à 64 bits) en faveur de SSLv3. Ce choix améliore la sécurité.

+ +

Les méthodes privilégiées de chiffrage sont TLS_DHE_DSS_WITH_3DES_EDE_CBC_SHA et TLS_RSA_WITH_3DES_EDE_CBC_SHA. Certains serveurs y font référence en tant que SSL_DHE_DSS_WITH_3DES_EDE_CBC_SHA et SSL_RSA_WITH_3DES_EDE_CBC_SHA.

+ +

Si le support de SSLv2 doit être activé, vous devrez définir avec la valeur true la préférence utilisateur security.ssl2.* dans about:config.

+ +

Nouvelles fonctionnalités

+ + + +

Détermination du chiffrement disponible

+ +

Comme toujours, vous pouvez vérifier le chiffrement supporté — celui qui a été activé ou désactivé — en cherchant « ssl » ou « tls » dans about:config.

+ +
 
+ +

{{ languages( { "en": "en/Security_in_Firefox_2", "pl": "pl/Bezpiecze\u0144stwo_w_Firefoksie_2", "zh-tw": "zh_tw/Firefox_2_\u7684\u5b89\u5168\u529f\u80fd" } ) }}

diff --git a/files/fr/mozilla/firefox/releases/2/updating_extensions/index.html b/files/fr/mozilla/firefox/releases/2/updating_extensions/index.html new file mode 100644 index 0000000000..2835b6b46a --- /dev/null +++ b/files/fr/mozilla/firefox/releases/2/updating_extensions/index.html @@ -0,0 +1,47 @@ +--- +title: Mise à jour des extensions pour Firefox 2 +slug: Mise_à_jour_des_extensions_pour_Firefox_2 +translation_of: Mozilla/Firefox/Releases/2/Updating_extensions +--- +
{{FirefoxSidebar}}

 

+ +

Cet article s'adresse aux développeurs qui souhaitent mettre à jour leur extension pour qu'elle fonctionne correctement avec Firefox 2.

+ +

Étape 1 : Mise à jour du manifeste d'installation

+ +

La première étape - pour de nombreuses extensions, la seule nécessaire - est de mettre à jour le fichier du manifeste d'installation, install.rdf, pour annoncer la compatibilité avec Firefox 2.

+ +

Trouvez la ligne indiquant la plus récente version de Firefox compatible. Pour Firefox 1.5, elle serait :

+ +
 <em:maxVersion>1.5.0.*</em:maxVersion>
+
+ +

Et remplacez-la par celle-ci :

+ +
 <em:maxVersion>2.0.0.*</em:maxVersion>
+
+ +

Réinstallez ensuite votre extension.

+ +

Étape 2 : Mise à jour des calques XUL

+ +

Firefox 2 apporte des changements au thème par défaut, et certains éléments de l'interface utilisateur ont été modifiés ou déplacés. Cela peut affecter votre extension, selon les actions de vos calques XUL.

+ +

Référez-vous à l'article Changements dans les thèmes graphiques pour Firefox 2 pour déterminer les modifications qui pourraient avoir un effet sur votre extension.

+ +

Étape 3 : Test

+ +

Assurez-vous de tester en profondeur votre extension sous Firefox 2 avant de la publier. Vous ne désirez sûrement pas que votre extension soit la cause d'un déferlement de rapports de bogues avec la toute dernière version de Firefox...

+ +

Étape 4 : Publication

+ +

Mettez à jour la description de votre extension sur http://addons.mozilla.org, pour vous assurez que les utilisateurs la retrouveront.

+ +

De plus, si le manifeste d'installation contient une URL de mise à jour, vérifiez qu'elle est valide pour que Firefox puisse automatiquement trouver les nouvelles versions de votre extension. De cette manière, Firefox proposera de l'installer automatiquement au premier lancement de l'extension après le passage à Firefox 2.

+ +


+ Lien Interwiki

+ +
 
+ +

{{ languages( { "en": "en/Updating_extensions_for_Firefox_2", "ja": "ja/Updating_extensions_for_Firefox_2", "ko": "ko/Updating_extensions_for_Firefox_2", "pl": "pl/Aktualizacja_rozszerze\u0144_do_Firefoksa_2" } ) }}

diff --git a/files/fr/mozilla/firefox/releases/20/index.html b/files/fr/mozilla/firefox/releases/20/index.html new file mode 100644 index 0000000000..d9bf6ebdd7 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/20/index.html @@ -0,0 +1,75 @@ +--- +title: Firefox 20 pour les développeurs +slug: Mozilla/Firefox/Versions/20 +tags: + - Firefox + - Firefox 20 +translation_of: Mozilla/Firefox/Releases/20 +--- +
{{FirefoxSidebar}}

Firefox 20 est sorti le 2 avril 2013. Cette page résume les principaux changements dans Firefox 20 qui sont utiles aux développeurs.

+ +

Changements pour les développeurs Web

+ +

HTML

+ + + +

JavaScript

+ + + +

CSS

+ + + +

DOM

+ + + +

MathML

+ + + +

Changements pour les add-ons et les développeurs Mozilla

+ + + +

Voir également

+ + + +

Anciennes versions

+ +

{{Firefox_for_developers('19')}}

diff --git a/files/fr/mozilla/firefox/releases/20/site_compatibility/index.html b/files/fr/mozilla/firefox/releases/20/site_compatibility/index.html new file mode 100644 index 0000000000..b126ee10ba --- /dev/null +++ b/files/fr/mozilla/firefox/releases/20/site_compatibility/index.html @@ -0,0 +1,12 @@ +--- +title: Compatibilité des sites avec Firefox 20 +slug: Mozilla/Firefox/Versions/20/Site_compatibility +tags: + - Compatibilité + - Développement Web + - Firefox + - Firefox 20 + - FxSiteCompat +translation_of: Mozilla/Firefox/Releases/20/Site_compatibility +--- +
{{FirefoxSidebar}}

Cette page a été déplacée vers FxSiteCompat.com.

diff --git a/files/fr/mozilla/firefox/releases/21/index.html b/files/fr/mozilla/firefox/releases/21/index.html new file mode 100644 index 0000000000..5b31107b63 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/21/index.html @@ -0,0 +1,141 @@ +--- +title: Firefox 21 pour les développeurs +slug: Mozilla/Firefox/Versions/21 +tags: + - Firefox + - Firefox 21 +translation_of: Mozilla/Firefox/Releases/21 +--- +
{{FirefoxSidebar}}
+ +

Firefox 21 est sorti le 14 mai 2013. Cette page résume les principaux changements dans Firefox 21 qui sont utiles aux développeurs, que vous soyez développeur web, développeur Firefox et Gecko, ou développeur d'add-ons.

+ +

Changement pour les développeurs Web

+ +

HTML

+ + + +

JavaScript

+ + + +

CSS

+ + + +

DOM

+ + + +

SVG

+ + + +

Networking

+ + + +

Worker

+ + + +

Changement pour les add-ons et les développeurs Mozilla

+ + + +

Voir également

+ + + +

Anciennes versions

+ +
{{Firefox_for_developers('20')}}
diff --git a/files/fr/mozilla/firefox/releases/21/site_compatibility/index.html b/files/fr/mozilla/firefox/releases/21/site_compatibility/index.html new file mode 100644 index 0000000000..0baf393fc3 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/21/site_compatibility/index.html @@ -0,0 +1,12 @@ +--- +title: Compatibilité des sites avec Firefox 21 +slug: Mozilla/Firefox/Versions/21/Site_compatibility +tags: + - Compatibilité + - Développement Web + - Firefox + - Firefox 21 + - FxSiteCompat +translation_of: Mozilla/Firefox/Releases/21/Site_compatibility +--- +
{{FirefoxSidebar}}

Cette page a été déplacée vers FxSiteCompat.com.

diff --git a/files/fr/mozilla/firefox/releases/22/index.html b/files/fr/mozilla/firefox/releases/22/index.html new file mode 100644 index 0000000000..d772c8108d --- /dev/null +++ b/files/fr/mozilla/firefox/releases/22/index.html @@ -0,0 +1,72 @@ +--- +title: Firefox 22 pour les développeurs +slug: Mozilla/Firefox/Versions/22 +translation_of: Mozilla/Firefox/Releases/22 +--- +
{{FirefoxSidebar}}

Vous voulez aider à documenter Firefox 22 ? Parcourez la liste des bugs qui ont besoin d'être documentés et lancez-vous !

+ +

Changements pour les développeurs Web

+ +

HTML

+ + + +

JavaScript

+ + + +

DOM

+ + + +

CSS

+ + + +

Changements pour les développeurs Mozilla et développeurs d'add-on

+ + + +

Outils pour développeurs de Firefox

+ + + +

A voir aussi

+ + + +

Versions

+ +
{{Firefox_for_developers('21')}}
diff --git a/files/fr/mozilla/firefox/releases/22/site_compatibility/index.html b/files/fr/mozilla/firefox/releases/22/site_compatibility/index.html new file mode 100644 index 0000000000..d58f2a06c8 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/22/site_compatibility/index.html @@ -0,0 +1,12 @@ +--- +title: Compatibilité des sites avec Firefox 22 +slug: Mozilla/Firefox/Versions/22/Site_compatibility +tags: + - Compatibilité + - Développement Web + - Firefox + - Firefox 22 + - FxSiteCompat +translation_of: Mozilla/Firefox/Releases/22/Site_compatibility +--- +
{{FirefoxSidebar}}

Cette page a été déplacée vers FxSiteCompat.com.

diff --git a/files/fr/mozilla/firefox/releases/23/index.html b/files/fr/mozilla/firefox/releases/23/index.html new file mode 100644 index 0000000000..6d9da9604c --- /dev/null +++ b/files/fr/mozilla/firefox/releases/23/index.html @@ -0,0 +1,85 @@ +--- +title: Firefox 23 pour les développeurs +slug: Mozilla/Firefox/Versions/23 +translation_of: Mozilla/Firefox/Releases/23 +--- +
{{FirefoxSidebar}}
Changements pour les développeurs Web
+ +

Sécurité

+ + + +

Outils de développement

+ + + +

HTML

+ + + +

JavaScript

+ + + +

DOM

+ + + +

CSS

+ + + +

MathML

+ + + +

Changements pour les développeurs Mozilla et développeurs d'add-on

+ +

Outils pour développeurs de Firefox

+ +

Les add-ons qui ont recourt à chrome://browser/content/debugger.xul doivent désormais utiliser chrome://browser/content/devtools/debugger.xul. Vous pouvez ajouter des références à ces deux fichiers dans chrome.manifest pour la compatibilité.

+ +

Voir aussi

+ + + +

Anciennes versions

+ +

{{Firefox_for_developers('22')}}

diff --git a/files/fr/mozilla/firefox/releases/23/site_compatibility/index.html b/files/fr/mozilla/firefox/releases/23/site_compatibility/index.html new file mode 100644 index 0000000000..ee40cc83d3 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/23/site_compatibility/index.html @@ -0,0 +1,12 @@ +--- +title: Compatibilité des sites avec Firefox 23 +slug: Mozilla/Firefox/Versions/23/Site_compatibility +tags: + - Compatibilité + - Développement Web + - Firefox + - Firefox 23 + - FxSiteCompat +translation_of: Mozilla/Firefox/Releases/23/Site_compatibility +--- +
{{FirefoxSidebar}}

Cette page a été déplacée vers FxSiteCompat.com.

diff --git a/files/fr/mozilla/firefox/releases/24/index.html b/files/fr/mozilla/firefox/releases/24/index.html new file mode 100644 index 0000000000..7aa78478c5 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/24/index.html @@ -0,0 +1,77 @@ +--- +title: Firefox 24 pour les développeurs +slug: Mozilla/Firefox/Versions/24 +translation_of: Mozilla/Firefox/Releases/24 +--- +
{{FirefoxSidebar}}

Changements pour les développeurs Web

+ +

CSS

+ + + +

HTML

+ + + +

JavaScript

+ + + +

DOM

+ + + +

Outils de développement

+ + + +

MathML

+ + + +

Changements pour les développeurs Mozilla et développeurs d'add-on

+ + + +

Voir aussi

+ + + +

Anciennes versions

+ +

{{Firefox_for_developers('23')}}

diff --git a/files/fr/mozilla/firefox/releases/24/site_compatibility/index.html b/files/fr/mozilla/firefox/releases/24/site_compatibility/index.html new file mode 100644 index 0000000000..7cacf2fae5 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/24/site_compatibility/index.html @@ -0,0 +1,13 @@ +--- +title: Compatibilité des sites avec Firefox 24 +slug: Mozilla/Firefox/Versions/24/Site_compatibility +tags: + - Compatibilité + - Développement Web + - Firefox + - Firefox 24 + - FxSiteCompat + - Guide +translation_of: Mozilla/Firefox/Releases/24/Site_compatibility +--- +
{{FirefoxSidebar}}

Cette page a été déplacée vers FxSiteCompat.com.

diff --git a/files/fr/mozilla/firefox/releases/3.5/index.html b/files/fr/mozilla/firefox/releases/3.5/index.html new file mode 100644 index 0000000000..375c8488d7 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/3.5/index.html @@ -0,0 +1,233 @@ +--- +title: Firefox 3.5 pour les développeurs +slug: Mozilla/Firefox/Versions/3.5 +tags: + - Firefox + - Firefox 3.5 +translation_of: Mozilla/Firefox/Releases/3.5 +--- +
{{FirefoxSidebar}}

Firefox 3.5 introduit un certain nombre de nouvelles fonctionnalités, ainsi qu'une gestion améliorée d'une grande variété de standards du Web. Cet article en fournit une longue liste, avec des liens vers des articles décrivant les améliorations majeures.

+ +

Nouvelles fonctionnalités pour les développeurs dans Firefox 3.5

+ +

Pour les développeurs de sites et d'applications web

+ +

HTML5

+ +
+
Utilisation d'audio et video dans Firefox
+
Firefox 3.5 ajoute la gestion des éléments HTML5 audio et video.
+
Ressources hors ligne dans Firefox
+
Firefox 3.5 gère entièrement la spécification de ressources hors ligne d'HTML5.
+
Glisser et déposer
+
L'API de glisser/déposer d'HTML5 permet de gérer le glisser/déposer d'éléments à l'intérieur et entre des sites web. Elle fournit également une API plus simple pour les extensions et applications basées sur Mozilla.
+
+ +

Nouvelles fonctionnalités CSS

+ +
+
Gestion des polices téléchargeables
+
La nouvelle règle-@ @font-face permet aux pages web de fournir des polices téléchargeables, afin qu'elles puissent être affichées exactement telles que l'auteur de la page les attend.
+
Media queries
+
Firefox 3.5 gère les requêtes de médias, qui améliorent le traitement des feuilles de style destinées à des médias particuliers.
+
Mise à jour de {{ cssxref(":before") }} et {{ cssxref(":after") }} pour CSS 2.1
+
Les pseudo-éléments :before et :after ont été mis à jour pour respecter complètement CSS 2.1, avec l'ajout des propriétés position, float et list-style-*, ainsi que de certaines valeurs de display.
+
Unité de longueur ch
+
L'unité ch peut à présent être utilisée à tout endroit où peut être indiquée une unité de longueur. 1ch est la largeur du caractère « 0 » (zéro).
+
{{ cssxref("opacity") }}
+
L'extension à CSS -moz-opacity de Mozilla a été supprimée en faveur de la propriété standard opacity.
+
{{ cssxref("text-shadow") }}
+
La propriété text-shadow, qui permet à du contenu web de spécifier des effets d'ombres sur le texte et les décorations de texte est à présent gérée.
+
{{ cssxref("word-wrap") }}
+
Cette nouvelle propriété permet au contenu d'indiquer si oui ou non les lignes de texte peuvent être coupées au milieu d'un mot afin d'empêcher un débordement lorsqu'une chaîne normalement insécable est trop longue pour rentrer dans une seule ligne.
+
Valeur pre-line pour la propriété white-space
+
La propriété {{ cssxref("white-space") }} accepte à présent la valeur pre-line.
+
{{ cssxref("-moz-box-shadow") }}
+
{{ cssxref("-moz-border-image") }}
+
{{ cssxref("-moz-column-rule") }}
+
{{ cssxref("-moz-column-rule-width") }}
+
{{ cssxref("-moz-column-rule-style") }}
+
{{ cssxref("-moz-column-rule-color") }}
+
La gestion de ces extensions à CSS de Mozilla a été ajoutée dans Firefox 3.5.
+
La {{ cssxref("valeur_de_couleur#Extensions_spécifiques_à_Mozilla","-moz-nativehyperlinktext") }}
+
Cette nouvelle valeur de couleur représente la couleur de lien hypertexte par défaut de l'utilisateur du système.
+
La nouvelle propriété {{ cssxref("-moz-window-shadow") }} et la pseudo-classe {{ cssxref(":-moz-system-metric(mac-graphite-theme)") }}
+
Ces nouvelles fonctionnalités CSS ont été ajoutées pour faciliter la mise en place de thèmes.
+
Nouvelles valeurs pour {{ cssxref("-moz-appearance") }}
+
Les valeurs -moz-win-glass et -moz-mac-unified-toolbar ont été ajoutées à -moz-appearance.
+
Utilisation des transformations CSS
+
Firefox 3.5 gère les transformations CSS. Consultez {{ cssxref("-moz-transform") }} et {{ cssxref("-moz-transform-origin") }} pour plus de détails.
+
{{ cssxref(":nth-child") }}
+
{{ cssxref(":nth-last-child") }}
+
{{ cssxref(":nth-of-type") }}
+
{{ cssxref(":nth-last-of-type") }}
+
{{ cssxref(":first-of-type") }}
+
{{ cssxref(":last-of-type") }}
+
{{ cssxref(":only-of-type") }}
+
Ces sélecteurs sont nouvellement gérés dans Firefox 3.5
+
+ +

Nouvelles fonctionnalités DOM

+ +
+
localStorage
+
Firefox 3.5 ajoute la gestion de la propriété localStorage pour le stockage web, fournissant ainsi une manière pour les applications web de stocker des données localement sur l'ordinateur du client.
+
Utilisation de workers DOM
+
Firefox 3.5 gère les workers DOM afin de permettre une gestion multithreadée dans les applications web.
+
Utilisation de la géolocalisation
+
Firefox 3.5 gère l'API Geolocation, qui permet aux applications web d'obtenir des informations concernant l'emplacement actuel de l'utilisateur si cette information est fournie et activée dans le système.
+
Identification d'éléments DOM à l'aide de sélecteurs
+
L'API Selectors permet d'interroger un document afin d'identifier les éléments correspondant à une règle de sélection donnée.
+
Évènements de mouvement de souris
+
Firefox 3.5 gère les évènements de mouvements de souris dont les glissades sur un trackpad.
+
L'objet NodeIterator
+
L'objet NodeIterator permet de parcourir la liste de nœuds dans un sous-arbre DOM.
+
L'évènement MozAfterPaint
+
Ce nouvel évènement DOM est envoyé après les mises à jour de l'affichage dans les fenêtres.
+
L'évènement MozMousePixelScroll
+
Ce nouvel évènement DOM permet de détecter les évènements de défilement à la souris par pixels plutôt que par ligne.
+
+ +

Nouvelles fonctionnalités JavaScript

+ +
+
Nouveautés dans JavaScript 1.8.1
+
Un aperçu de tous les changements dans JavaScript 1.8.1.
+
Object.getPrototypeOf()
+
Cette nouvelle méthode renvoie le prototype d'un objet spécifié.
+
Utilisation de JSON dans Firefox
+
La gestion de JSON est à présent intégrée dans le DOM.
+
Nouvelles méthodes de nettoyage des espaces sur l'objet String
+
L'objet String dispose à présent des méthodes trim(), trimLeft() et trimRight().
+
+ +

Réseau

+ +
+
Contrôle d'accès entre sites pour HTTP
+
Dans Firefox 3.5, il devient possible pour les requêtes HTTP, notamment celles faites au travers d'XMLHttpRequest, de fonctionne entre différents domaines si le serveur le permet.
+
Évènements de progression pour XMLHttpRequest
+
Des évènements de progression sont à présent émis pour permettre aux extensions de surveiller l'état des requêtes.
+
Amélioration des appels XMLHttpRequest synchrones
+
Les timeouts DOM et les évènements d'entrée sont à présent supprimés pendant un appel XMLHttpRequest synchrone.
+
Contrôle du préchargement DNS
+
Firefox 3.5 permet le préchargement DNS, par lequel il effectue la résolution des noms de domaines à l'avance pour les liens présents dans la page courante, afin de gagner du temps lorsque l'on clique effectivement sur ces liens. Cet article explique comment adapter votre site pour désactiver le préchargement, ou contrôler le comportement de ce préchargement.
+
+ +

Nouvelles fonctionnalités de Canvas

+ +
+
API HTML5 text pour les éléments canvas
+
Les éléments canvas gèrent à présent l'API texte d'HTML5.
+
Effets d'ombres dans un canvas
+
Les effets d'ombrages sont à présent gérés dans canvas.
+
createImageData()
+
La méthode createImageData() de canvas est à présent gérée, ce qui permet à du code de créer spécifiquement un objet ImageData plutôt que demander que ce soit fait automatiquement. Les performances d'autres méthodes d'ImageData peuvent en être améliorées puisqu'elles n'ont pas à créer l'objet.
+
Attribut moz-opaque
+
L'attribut DOM moz-opaque a été ajouté, ce qui permet à canvas de savoir si oui ou non la transparence devra être prise en compte. Si le canvas sait qu'il n'y a pas de transparence, les performances de dessin peuvent être optimisées.
+
+ +

Nouvelles fonctionnalités SVG

+ +
+
Application d'effets SVG à du contenu HTML
+
Vous pouvez à présent appliquer des effets SVG à du contenu HTML et XHTML ; cet article explique comment.
+
+ +

Autres nouvelles fonctionnalités

+ +
+
Correction de couleurs ICC dans Firefox
+
Firefox 3.5 gère à présent la correction de couleurs ICC pour les images balisées.
+
L'attribut defer est géré sur les éléments script
+
Cet attribut indique au navigateur qu'il peut décider de continuer d'analyser et d'afficher la page sans attendre que le script ait terminé son exécution.
+
+ +

Autres améliorations

+ + + +

Pour les développeurs XUL et développeurs d'applications

+ +

Si vous développez des extensions, vous devriez tout d'abord lire Mise à jour des extensions pour Firefox 3.5 qui fournit un aperçu pratique des changements qui pourraient affecter vos extensions.

+ +

Nouveaux composants et nouvelles fonctionnalités

+ +
+
Gestion du mode de navigation privée
+
Firefox 3.5 offre un mode de navigation privée, qui n'enregistre pas les activités de l'utilisateur. Les extensions peuvent gérer la navigation privée en suivant les conseils donnés dans cet article.
+
Changements liés à la sécurité dans Firefox 3.5
+
Cet article détaille les changements liés à la sécurité dans Firefox 3.5.
+
Changements dans les thèmes pour Firefox 3.5
+
Cet article détaille les changements liés aux thèmes dans Firefox 3.5.
+
Surveillance des points d'accès WiFi
+
Le code disposant des privilèges UniversalXPConnect peut à présent surveiller la liste des points d'accès disponibles, et obtenir des informations concernant leurs SSID, adresses MAC et force du signal. Ceci peut être utilisé couplé avec la géolocalisaiton pour fournir des services locaux basés sur la présence d'un WiFi.
+
+ +

Changements et améliorations notables

+ + + +

Nouvelles fonctionnalités pour les utilisateurs

+ +

Interface

+ +
+
Navigation en fonction de sa localisation
+
Si vous le désirez, vous pouvez permettre à Firefox 3.5 de partager des informations concernant votre localisation géographique avec des sites web. Firefox 3.5 peut utiliser des informations sur le réseau auquel votre machine est connectée pour partager votre localisation. Bien évidemment, votre permission sera demandée au préalable afin de préserver votre vie privée.
+
Gestion de la vidéo et de l'audio ouverts
+
Firefox 3.5 gère l'intégration de vidéos et d'extraits audio à l'aide du format ouvert Ogg, ainsi qu'au format WAV pour l'audio. Aucun plugin nécessaire, pas de messages d'erreurs incompréhensibles vous demandant d'installer quelque chose qui n'est en fait pas disponible sur votre plateforme.
+
Stockage local de données
+
Les applications web peuvent à présent utiliser les possibilités de stockage local pour conserver des données sur votre ordinateur. Cela peut servir pour conserver des préférences ou d'autres données plus complexes.
+
+ +

Sécurité et vie privée

+ +
+
Navigation privée
+
Besoin d'utiliser l'ordinateur de quelqu'un d'autre ? Activez la navigation privée et rien ne sera enregistré concernant votre session, ni cookies, ni historique, ni aucune autre information privée.
+
Meilleurs contrôles sur la vie privée
+
Le panneau de préférences Vie privée a été complètement revu pour disposer d'un meilleur contrôle sur vos informations privées. Les utilisateurs peuvent choisir de conserver ou d'effacer tout ce qui concerne l'historique, les cookies, les téléchargements et les informations de formulaire enregistrées. De plus, il est possible d'indiquer si l'historique et/ou les marque-pages doivent faire partie des suggestions automatiques de la Barre d'adresse, afin d'empêcher des adresses privées d'apparaître par inadvertance en saisissant des informations dans la Barre d'adresse.
+
+ +

Performances

+ +
+
Du JavaScript plus rapide
+
Le code JavaScript est exécuté nettement plus rapidement dans Firefox 3.5 grâce à son nouveau moteur TraceMonkey. Les applications web sont ainsi beaucoup plus rapides que dans Firefox 3.
+
Rendu plus rapide des pages
+
Le contenu web est affiché plus rapidement dans Firefox 3.5, grâce à des technologies telles que l'« analyse spéculative ». Vos utilisateurs n'ont pas besoin de savoir de quoi il s'agit, simplement que ça rend les choses plus rapides.
+
+ +

Voir également

+ +

{{Firefox_for_developers('3')}}

diff --git a/files/fr/mozilla/firefox/releases/3.6/index.html b/files/fr/mozilla/firefox/releases/3.6/index.html new file mode 100644 index 0000000000..6e27affe9d --- /dev/null +++ b/files/fr/mozilla/firefox/releases/3.6/index.html @@ -0,0 +1,297 @@ +--- +title: Firefox 3.6 pour les développeurs +slug: Mozilla/Firefox/Versions/3.6 +tags: + - Firefox + - Firefox 3.6 +translation_of: Mozilla/Firefox/Releases/3.6 +--- +

Firefox 3.6 (nom de code Namoroka) est sorti le 21 janvier 2010 et est basé sur Gecko 1.9.2. Cette page fournit des liens vers des articles qui décrivent les nouvelles fonctionnalités de Firefox 3.6.

+ +

Pour les développeurs de sites et d'applications Web

+ +

CSS

+ +
+
Utilisation de dégradés
+
Firefox 3.6 ajoute le support de -moz-linear-gradient et -moz-radial-gradient pour la propriété background.
+
Fonds multiples
+
La propriété background (ainsi que background-attachmentbackground-color, background-image, background-position et background-repeat) peuvent gérer des fonds multiples. Ceux-ci seront affichés par couches, les uns au dessus des autres.
+
Fonctionnalités de médias spécifiques à Mozilla
+
Des fonctionnalités de médias ont été ajoutées pour des mesures spécifiques à Mozilla, afin de pouvoir utiliser des media queries pour vérifier plus aisément la disponibilité de fonctionnalités comme un écran tactile.
+
Redimensionnement d'images de fond
+
La propriété background-size du brouillon CSS 3 Backgrounds and Borders est gérée sous le nom de -moz-background-size.
+
Support des polices WOFF
+
@font-face supporte désormais le format de polices Web téléchargeables WOFF
+
Evènements pointeurs
+
La propriété pointer-events si le contenu d'un élément peut être ou non la cible d'évènements pointeur avec la souris.
+
+ +

Autres changements CSS

+ + + +

HTML

+ +
+
Utilisation de fichiers à partir d'applications Web
+
Le support de la nouvelle API de fichier HTML5 a été ajouté à Gecko, ce qui permet à des applications Web d'accéder à des fichiers locaux sélectionnés par l'utilisateur.
+
Support des affiches pour les vidéos HTML5
+
L'attribut poster est pris en charge pour l'élément <video>, ce qui permet au contenu de choisir une image à afficher tant que la vidéo n'a pas commencée.
+
Support de la propriété indeterminate pour les cases à cocher et boutons radio
+
Les éléments HTML <input> des types checkbox et radio supportent désormais la propriété indeterminate qui permet d'avoir un troisième état « indéterminé ».
+
Contrôle du lissage d'images dans canvas
+
La nouvelle propriété mozImageSmoothingEnabled peut être utilisée pour activer et désactiver le lissage lors d'un redimensionnement dans les éléments <canvas>.
+
Exécution d'un script asynchrone
+
En définissant l'attribut async sur un élément <script>, le script ne bloquera pas le chargement ou l'affichage du reste de la page. En revanche, le script s'exécutera dès qu'il sera téléchargé.
+
+ +

JavaScript

+ +

Gecko 1.9.2 introduit JavaScript 1.8.2, qui ajoute un certain nombre de fonctionnalités de langage de la norme ECMAScript 5 :

+ + + +

DOM

+ +
+
Terminaison des web workers par eux-mêmes
+
Les web workers prennent désormais en charge la méthode nsIWorkerScope.close(), qui leur permet de se terminer d'eux-mêmes.
+
Glisser-déposer de fichiers
+
L'objet DataTransfer fournit à présent aux observateurs de glisser-déposer une liste des fichiers glissés.
+
Vérification pour voir si un élément correspond à un sélecteur CSS
+
La nouvelle méthode element.mozMatchesSelector permet de déterminer si un élément correspond bien à un sélecteur CSS. Voir bug 518003.
+
Dispositf de détection de l'orientation
+
Le contenu peut à présent détecter l'orientation de l'appareil s'il dispose d'un accéléromètre, à l'aide de l'évènement MozOrientation. Firefox 3.6 gère notamment l'accéléromètre des ordinateurs portables Mac.
+
Détection des changements de largeur et hauteur d'un document
+
Le nouvel évènement MozScrollAreaChanged est déclenché lorsqu'une des propriétés scrollWidth ou scrollHeight d'un document change.
+
+ + + +

XPath

+ +
+
Gestion de la méthode XPath choose()
+
La méthode choose() est à présent gérée par notre implémentation de XPath.
+
+ +

Pour les développeurs XUL et les développeurs d'extensions

+ +

Si vous êtes un développeur d'extensions, vous devriez commencer par lire Updating extensions for Firefox 3.6, qui offre une vue d'ensemble sur les changements qui pourraient affecter vos extensions. Les développeurs de Plug-in devraient lire Updating plug-ins for Firefox 3.6.

+ +

Nouvelles fonctionnalités

+ +
+
Détection de l'orientation de l'appareil
+
Le contenu peut maintenant détecter l'orientation de l'appareil si il possède un accéléromètre, en utilisant l'évènement MozOrientation. Firefox 3.6 supporte l'accéléromètre des ordinateurs portables Mac.
+
Surveillance de l'activité HTTP
+
Vous pouvez maintenant surveiller en temps réel les données HTTP demandées et reçues.
+
Intégration à la Barre des tâches de Windows
+
Il est maintenant possible de personnaliser l'apparence des fenêtres dans la barre des tâches sous Windows 7 ou plus récent. C'est désactivé par défaut dans Firefox 3.6.
+
+ +

Places

+ + + +

Storage

+ +
+
Tri des données locales avec l'API Storage
+
Gecko 1.9.2 ajoute plusieurs nouvelles méthodes pour offrir une collecte (tri) optimisée des résulats en utilisant les techniques de localisation.
+
Énumération des propriétés d'une requête
+
Vous pouvez maintenant utiliser for...in pour énumérer toutes les propriétés d'une déclaration.
+
mozIStorageStatement's getParameterIndex a changé de comportement entre Firefox 3.5 et 3.6.
+
Voir bug 528166 pour plus de détails.
+
Liaison asynchrone de plusieurs ensembles de paramètres pour exécution d'une requête.
+
Voir bug 490085 pour plus de détails.
+
+ +

Préférences

+ + + +

Thèmes

+ +

Voir Updating themes for Firefox 3.6 pour la liste des changements liés aux thèmes.

+ +
+
Thèmes légers
+
Firefox 3.6 supporte les thèmes légers ; ce sont des thèmes faciles à créer et qui sont simplement appliqué sur le fond de la fenêtre du navigateur, en haut (barre d'adresses et boutons) et en bas (barre d'état). Il s'agit d'une intégration de l'architecture de thèmes Personas dans Firefox.
+
+ +

Divers

+ + + +

Pours les développeurs de Firefox/Gecko

+ +

Certains changements sont vraiment intéressant si vous travaillez sur le fonctionnement interne de Firefox.

+ +

Interfaces fusionnées

+ +

Les interfaces suivantes ont été fusionnées :

+ + + +

Interfaces supprimées

+ +

Les interfaces suivantes ont été entièrement supprimées car elles étaient inutilisées, non implémentées ou obsolètes :

+ + + +

Interfaces déplacées

+ +

Les interfaces suivantes ont été déplacées de leurs précédents fichiers IDL vers leurs nouveaux :

+ + + +

Un grand nombre d'interfaces ont été déplacées. Voir Interfaces moved in Firefox 3.6 pour la liste complète.

+ +

Autres changements dans les interfaces

+ +

Les modifications suivantes ont été faites :

+ + + +

Changements dans l'accessibilitée du code

+ + + +

Voir également

+ +
+ +
diff --git a/files/fr/mozilla/firefox/releases/3/dom_improvements/index.html b/files/fr/mozilla/firefox/releases/3/dom_improvements/index.html new file mode 100644 index 0000000000..38f958218c --- /dev/null +++ b/files/fr/mozilla/firefox/releases/3/dom_improvements/index.html @@ -0,0 +1,35 @@ +--- +title: Améliorations DOM dans Firefox 3 +slug: Améliorations_DOM_dans_Firefox_3 +tags: + - DOM + - Firefox 3 +translation_of: Mozilla/Firefox/Releases/3/DOM_improvements +--- +
{{FirefoxSidebar}}

{{ Fx_minversion_header(3) }}

+ +

Firefox 3 offre un certain nombre d'améliorations dans sa gestion du modèle objet de document (DOM), en particulier en ce qui concerne la gestion de ses extensions ajoutées par d'autres navigateurs. Cet article reprend une liste de ces améliorations ainsi que des liens vers une documentation plus détaillée.

+ + + +

Voir également

+ + + +
 
+ +

{{ languages( { "en": "en/DOM_improvements_in_Firefox_3", "es": "es/Mejoras_DOM_en_Firefox_3", "ja": "ja/DOM_improvements_in_Firefox_3", "pl": "pl/Poprawki_DOM_w_Firefoksie_3" } ) }}

diff --git a/files/fr/mozilla/firefox/releases/3/full_page_zoom/index.html b/files/fr/mozilla/firefox/releases/3/full_page_zoom/index.html new file mode 100644 index 0000000000..88e46ac3f4 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/3/full_page_zoom/index.html @@ -0,0 +1,42 @@ +--- +title: Zoom pleine page +slug: Zoom_pleine_page +translation_of: Mozilla/Firefox/Releases/3/Full_page_zoom +--- +
{{FirefoxSidebar}}

{{ Fx_minversion_header(3) }} {{ Gecko_minversion_header(1.9) }}

+ +

Le zoom pleine page (ou fullZoom) est une nouvelle fonctionnalité qui sera probablement disponible dans Firefox 3. Elle peut être utilisée dans les compilations courantes du tronc depuis la version 1.9a7. Bien qu'il n'y ait actuellement aucune interface utilisateur visible, il est possible d'utiliser JavaScript et l'interface XPCOM nsIMarkupDocumentViewer.

+ +

Exemple (xul:browser)

+ +

L'exemple qui suit montre l'utilisation du zoom pour la fenêtre de navigation ayant actuellement le focus. C'est l'utilisation typique pour une extension Firefox.

+ +
var zoom = 1.5;
+var docViewer = getBrowser().mCurrentBrowser.markupDocumentViewer;
+docViewer.fullZoom = zoom;
+
+ +

Exemple (xul:iframe)

+ +

Il est également possible d'utiliser la fonction fullZoom pour un xul:iframe. Cependant, comme un iframe n'a pas de propriété markupDocumentViewer, il faut d'abord obtenir cette valeur :

+ +
var zoom = 1.5;
+var iframe = document.getElementById("authorFrame");
+var contViewer = iframe.docShell.contentViewer;
+var docViewer = contViewer.QueryInterface(Components.interfaces.nsIMarkupDocumentViewer);
+docViewer.fullZoom = zoom;
+
+ +

Références

+ + + +

 

+ +
 
+ +

{{ languages( { "en": "en/Full_page_zoom", "es": "es/Zoom_a_p\u00e1gina_completa", "ja": "ja/Full_page_zoom" } ) }}

diff --git a/files/fr/mozilla/firefox/releases/3/index.html b/files/fr/mozilla/firefox/releases/3/index.html new file mode 100644 index 0000000000..79519fa181 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/3/index.html @@ -0,0 +1,272 @@ +--- +title: Firefox 3 pour les développeurs +slug: Mozilla/Firefox/Versions/3 +tags: + - Firefox + - Firefox 3 +translation_of: Mozilla/Firefox/Releases/3 +--- +
{{FirefoxSidebar}}

Pour les développeurs qui désirent prendre connaissance de toutes les nouvelles fonctionnalités de Firefox 3, c'est ici qu'il convient de commencer. Cet article fournit la liste des nouveaux articles couvrant les fonctionnalités qui ont été ajoutées à Firefox 3. Même s'il ne couvre pas nécessairement chaque petite modification, il vous aidera à découvrir les améliorations majeures.

+ +

Nouvelles fonctionnalités pour les développeurs dans Firefox 3

+ +

Pour les développeurs de sites et d'applications Web

+ +
+
Mise à jour des applications Web pour Firefox 3
+
Fournit des informations concernant les changements que vous devrez éventuellement prendre en compte pour permettre à votre site ou application Web de profiter des nouvelles fonctionnalités de Firefox 3.
+
+ +
+
Évènements online et offline
+
Firefox 3 gère les évènements online et offline définis par le WHATWG, qui permettent aux applications et extensions de détecter si une connexion Internet active est disponible, ainsi que de détecter l'activation et la désactivation de la connexion.
+
+ +
+
Gestionnaires de protocoles web
+
Il est à présent possible d'enregistrer des applications Web en tant que gestionnaires de protocoles à l'aide de la méthode navigator.registerProtocolHandler().
+
+ +
+
Dessin de texte avec canvas
+
Il est possible de dessiner du texte dans un élément canvas dans Firefox 3 avec une API non normalisée.
+
+ +
+
Support des transformations pour canvas
+
Firefox gère à présent les méthodes transform() et setTransform() sur les éléments canvas.
+
+ +
+
Utilisation de microformats
+
Firefox dispose à présent d'API permettant de travailler avec des microformats.
+
+ +
+
Évènements de glisser-déposer
+
Firefox 3 gère de nouveaux évènements envoyés au nœud source d'une opération de glisser-déposer lorsque le glisser débute et se termine.
+
+ +
+
Gestion du focus en HTML
+
Les nouveaux attributs activeElement et hasFocus de HTML 5 sont gérés.
+
+ +
+
Ressources hors ligne dans Firefox
+
Firefox permet applications Web de demander que des ressources soient mises en cache pour permettre leur utilisation en mode hors ligne.
+
+ +
+
Améliorations CSS dans Firefox 3
+
Firefox 3 propose un certain nombre d'améliorations dans son support CSS.
+
+ +
+
Améliorations DOM dans Firefox 3
+
Firefox 3 propose un certain nombre de nouvelles fonctionnalités dans son implémentation DOM, comme la gestion de plusieurs extensions d'Internet Explorer au DOM.
+
+ +
+
Support de JavaScript 1.8
+
JavaScript 1.8 est fourni avec Firefox 3.
+
+ +
+
Support d'EXSLT
+
Firefox 3 permet d'utiliser une partie importante des extensions EXSLT à XSLT.
+
+ +
+
Améliorations SVG dans Firefox 3
+
La gestion du SVG dans Firefox 3 a été mise à jour de manière substantielle, avec plus d'une vingtaine de nouveaux filtres, plusieurs nouveaux éléments et attributs, et quelques autres améliorations.
+
+ +
+
Images PNG animées
+
Firefox 3 gère le format d'images PNG animées (APNG).
+
+ +

Pour les développeurs XUL et d'extensions

+ +

Améliorations et modifications notables

+ +
+
Mise à jour des extensions pour Firefox 3
+
Un guide fournissant tout ce qu'il faut savoir pour mettre à jour une extension afin de la faire fonctionner avec Firefox 3.
+
+ +
+
Améliorations XUL dans Firefox 3
+
Firefox 3 offre un certain nombre de nouveaux éléments XUL, dont de nouvelles échelles coulissantes, des sélecteurs de date et d'heure, et des boîtes d'incrément (spin buttons).
+
+ +
+
Templates dans Firefox 3
+
Les templates ont été notablement améliorés dans Firefox 3. Le plus remarquable est la possibilité d'utiliser des processeur de requêtes personnalisés permettant d'utiliser d'autres sources de données que RDF.
+
+ +
+
Mises à jour sécurisées
+
Afin que le processus de mise à jour soit plus sûr pour les utilisateurs, les modules complémentaires doivent à présent fournir une méthode sécurisée de distribution des mises à jour avant de pouvoir être installés. Les modules hébergés sur AMO fournissent ceci automatiquement. Tout module installé ne fournissant pas une méthode de mise à jour sécurisée lorsque l'utilisateur migrera vers Firefox 3 sera désactivé automatiquement. Firefox continuera cependant à vérifier si des mises à jour sont disponibles au travers du chemin non sécurisé et essayera d'installer toute mise à jour proposée (l'installation échouera si la mise à jour ne propose pas non plus de méthode de mise à jour sécurisée).
+
+ +
+
Guide de migration vers Places
+
Un article concernant la migration d'une application existante pour utiliser l'API Places.
+
+ +
+
Améliorations du gestionnaire de téléchargement dans Firefox 3
+
Le gestionnaire de téléchargement de Firefox 3 comprend de nouvelles API et d'autres améliorations, comme la gestion de plusieurs écouteurs de progression.
+
+ +
+
Utilisation de nsILoginManager
+
Le gestionnaire de mots de passe a été remplacé par le nouveau gestionnaire d'identification.
+
+ +
+
Intégration de liaisons XBL
+
Il est à présent possible d'utiliser le schéma d'URL data: depuis du code chrome pour intégrer des liaisons XBL directement au lieu de devoir les placer dans des fichiers XML séparés.
+
+ +
+
Localisation des descriptions d'extensions
+
Firefox 3 propose une nouvelle méthode de localisation des métadonnées des modules complémentaires. Ceci permet de disposer des détails localisés dès le téléchargement du module, et même s'il est désactivé.
+
+ +
+
Localisation et pluriels
+
Firefox 3 ajout un nouveau module PluralForm fournissant des outils pour aider à mettre des mots correctement au pluriel dans diverses localisations.
+
+ +
+
Changements dans les thèmes pour Firefox 3
+
Notes et informations pour ceux qui voudraient créer des thèmes pour Firefox 3.
+
+ +

Nouveaux composants et fonctionnalités

+ +
+
Bibliothèque FUEL
+
FUEL sert à améliorer la productivité des développeurs d'extensions en minimisant certaines des formalités XPCOM et en ajoutant certaines idées « modernes » de JavaScript.
+
+ +
+
Places
+
Les API d'historique et de marque-pages ont été entièrement remplacés par la nouvelle API Places.
+
+ +
+
Service Idle
+
Firefox 3 propose une nouvelle interface {{ Interface("nsIIdleService") }} qui permet aux extensions de savoir depuis quand l'utilisateur n'a plus appuyé sur une touche ou déplacé la souris.
+
+ +
+
ZIP writer
+
La nouvelle interface {{ Interface("nsIZipWriter") }} permet aux extensions de pouvoir créer des archives ZIP.
+
+ +
+
Zoom pleine page
+
Firefox 3 améliore l'expérience utilisateur en offrant un zoom complet des pages en plus du simple zoom de texte.
+
+ +
+
Interfaçage avec le collecteur de cycles XPCOM
+
XPCOM peut à présent bénéficier du collecteur de cycles, qui permet de s'assurer que la mémoire inutilisée est libérée et d'éviter les fuites mémoire.
+
+ +
+
Le gestionnaire de threads
+
Firefox 3 propose une nouvelle interface {{ Interface("nsIThreadManager") }}, accompagnée de nouvelles interfaces pour les threads et les évènements liés, qui offre une manière pratique de créer et gérer des threads dans votre code.
+
+ +
+
Modules JavaScript
+
Firefox 3 offre un mécanisme de modules de code partagés permettant de créer facilement des modules en JavaScript qui pourront être chargés par des extensions et applications, de manière similaire à des bibliothèques partagées.
+
+ +
+
L'interface nsIJSON
+
Firefox 3 propose la nouvelle interface {{ Interface("nsIJSON") }}, qui offre des chaînes de caractères JSON de codage et décodage en haute performance.
+
+ +
+
L'interface nsIParentalControlsService
+
Firefox 3 gère à présent la fonctionnalité de contrôle parental de Microsoft Windows Vista, et permet au code d'interagir directement avec elle.
+
+ +
+
Utilisation des préférences de contenu
+
Firefox 3 fournit un nouveau service permettant de définir et de lire des préférences particulières à un site, que des extensions ou le programme peuvent utiliser pour conserver des informations sur les préférences de l'utilisateur concernant certains sites.
+
+ +
+
Surveillance des plugins
+
Un nouveau composant du système de plugins est à présent disponible pour mesurer le temps mis par les plugins (par exemple Macromedia Flash) pour exécuter leurs appels.
+
+ +

Bugs corrigés

+ +
+
Bugs importants corrigés dans Firefox 3
+
Cet article fournit des informations concernant les bugs corrigés dans Firefox 3.
+
+ +

Nouvelles fonctionnalités pour les utilisateurs

+ +

Expérience utilisateur

+ + + +

Sécurité et vie privée

+ + + +

Performances

+ + + +

Voir également

+ +

{{Firefox_for_developers('2')}}

diff --git a/files/fr/mozilla/firefox/releases/3/notable_bugs_fixed/index.html b/files/fr/mozilla/firefox/releases/3/notable_bugs_fixed/index.html new file mode 100644 index 0000000000..8c21490a17 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/3/notable_bugs_fixed/index.html @@ -0,0 +1,35 @@ +--- +title: Bugs importants corrigés dans Firefox 3 +slug: Bugs_importants_corrigés_dans_Firefox_3 +translation_of: Mozilla/Firefox/Releases/3/Notable_bugs_fixed +--- +
{{FirefoxSidebar}}

Cet article fait la liste des corrections importantes faisant partie de Firefox 3 qui ne sont pas nécessairement évidentes à trouver dans la documentation.

+ + + +

Voir également

+ + + +

 

+ +
 
+ +

{{ languages( { "en": "en/Notable_bugs_fixed_in_Firefox_3", "es": "es/Bugs_importantes_solucionados_en_Firefox_3", "ja": "ja/Notable_bugs_fixed_in_Firefox_3", "pl": "pl/Istotne_b\u0142\u0119dy_poprawione_w_Firefoksie_3" } ) }}

diff --git a/files/fr/mozilla/firefox/releases/3/site_compatibility/index.html b/files/fr/mozilla/firefox/releases/3/site_compatibility/index.html new file mode 100644 index 0000000000..aacc05c730 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/3/site_compatibility/index.html @@ -0,0 +1,80 @@ +--- +title: Changements dans Gecko 1.9 affectant les sites Web +slug: Changements_dans_Gecko_1.9_affectant_les_sites_Web +tags: + - Développement_Web + - Gecko +translation_of: Mozilla/Firefox/Releases/3/Site_compatibility +--- +
{{FirefoxSidebar}}
+ +

Cette page essaie de donner un aperçu des changements entre Gecko 1.8 et Gecko 1.9 qui pourraient éventuellement affecter le comportement ou le rendu des sites Web.

+ +

Consultez également Firefox 3 pour les développeurs.

+ +

Évènements

+ +

Gestionnaires d'évènements capturants load

+ +

Dans Gecko 1.8, il n'était pas possible de définir des gestionnaires d'évènements load capturants sur les images. Dans Gecko 1.9, cela devient possible avec la résolution du {{ Bug(234455) }}. Cela peut cependant causer des problèmes sur les sites Web qui ont incorrectement défini leurs gestionnaires d'évènements sur l'évènement load. Consultez la discussion dans le {{ Bug(335251) }}. Pour résoudre ce problème, les pages en question ne doivent pas définir de gestionnaires d'évènements capturants pour l'évènement load.

+ +

Par exemple, ceci :

+ +
window.addEventListener('load', votreFonction, true);
+
+ +

devrait être remplacé par ceci :

+ +
window.addEventListener('load', votreFonction, false);
+
+ +

Pour une explication du fonctionnement de la capture des évènements, consultez DOM Level 2 Event capture (en)

+ +

preventBubble a été supprimée

+ +

Dans Gecko 1.8, la méthode preventBubble existait sur les évènements pour les empêcher de se propager plus haut. Dans Gecko 1.9, cette méthode a été supprimée. À la place, utilisez la méthode standard stopPropagation(), qui fonctionne également dans Gecko 1.8. Ce changement a été produit par le patch pour le {{ Bug(330494) }}. Consultez également le {{ Bug(105280) }}.

+ +

Quelques autres anciennes API d'évènements ne sont plus supportées

+ +

window.captureEvents, window.releaseEvents et window.routeEvent ne sont plus supportées ({{ Obsolete_inline() }}) dans Gecko 1.9.

+ +

DOM

+ +

L'exception WRONG_DOCUMENT_ERR se déclenche lorsque l'on essaie d'utiliser un nœud d'un document différent

+ +

Les nœuds provenant de documents externes doivent être clonés à l'aide de document.importNode() (ou adoptés avec + document.adoptNode()) avant de pouvoir être insérés dans le document courant. Pour en savoir plus sur les problèmes + de Node.ownerDocument, consultez la FAQ DOM du W3C (en anglais).

+ +

Gecko n'obligeait pas à utiliser document.importNode() et document.adoptNode() avant sa version 1.9. Depuis les versions 1.9 + alphas, si un nœud n'est pas adopté ou importé avant d'être utilisé dans un autre document, l'exception + WRONG_DOCUMENT_ERR est déclenchée (NS_ERROR_DOM_WRONG_DOCUMENT_ERR). implémentation dans le bug 47903.

+ + +

Ranges

+ +

intersectsNode a été supprimée

+ +

Dans Gecko 1.8, la fonction intersectsNode pouvait être utilisée pour vérifier si un nœud faisait partie d'un range. Cependant, les valeurs renvoyées par cette fonction étaient trompeuses et rarement utiles. Elle a donc été retirée de Gecko 1.9. Utilisez à la place la fonction standard et plus précise compareBoundaryPoints. Cette fonction a été retirée par le patch du {{ Bug(358073) }}.

+ +

Consultez la documentation de intersectsNode pour savoir comment utiliser compareBoundaryPoints à la place.

+ +

compareNode a été supprimée

+ +

Dans Gecko 1.8, la fonction compareNode pouvait être utilisée pour tester l'intersection d'un nœud avec un range. Cependant, les valeurs renvoyées par cette fonction étaient trompeuses et rarement utiles. Elle a donc été retirée de Gecko 1.9. Utilisez à la place la fonction standard et plus précise compareBoundaryPoints. Cette fonction a été retirée par le patch du {{ Bug(358073) }}.

+ +

Consultez la documentation de compareNode pour savoir comment utiliser compareBoundaryPoints à la place.

+ +

HTML

+ +

Correction de nombreux bogues dans le code de <object>

+ + + +
 
+ +

{{ languages( { "en": "en/Gecko_1.9_Changes_affecting_websites", "ja": "ja/Gecko_1.9_Changes_affecting_websites", "ko": "ko/Gecko_1.9_Changes_affecting_websites", "pl": "pl/Zmiany_w_Gecko_1.9_wp\u0142ywaj\u0105ce_na_wy\u015bwietlanie_stron", "pt": "pt/Mudan\u00e7as_no_Gecko_1.9_que_afetam_websites" } ) }}

diff --git a/files/fr/mozilla/firefox/releases/3/svg_improvements/index.html b/files/fr/mozilla/firefox/releases/3/svg_improvements/index.html new file mode 100644 index 0000000000..c46f799cea --- /dev/null +++ b/files/fr/mozilla/firefox/releases/3/svg_improvements/index.html @@ -0,0 +1,65 @@ +--- +title: Améliorations SVG dans Firefox 3 +slug: Améliorations_SVG_dans_Firefox_3 +tags: + - Firefox 3 + - SVG +translation_of: Mozilla/Firefox/Releases/3/SVG_improvements +--- +
{{FirefoxSidebar}}

{{ Fx_minversion_header(3) }}

+ +

Firefox 3 offre un support SVG amélioré par rapport aux versions précédentes de Firefox. Ces fonctionnalités sont documentés ailleurs, et cet article fournit une liste pratique permettant de déterminer lesquelles ont été ajoutées dans Firefox 3.

+ + + +

Voir également

+ + + +

 

+ +

 

+ +
 
+ +

{{ languages( { "en": "en/SVG_improvements_in_Firefox_3", "es": "es/Mejoras_SVG_en_Firefox_3", "ja": "ja/SVG_improvements_in_Firefox_3", "pl": "pl/Poprawki_SVG_w_Firefoksie_3" } ) }}

diff --git a/files/fr/mozilla/firefox/releases/3/updating_extensions/index.html b/files/fr/mozilla/firefox/releases/3/updating_extensions/index.html new file mode 100644 index 0000000000..9b5be44197 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/3/updating_extensions/index.html @@ -0,0 +1,219 @@ +--- +title: Mise à jour des extensions pour Firefox 3 +slug: Mise_à_jour_des_extensions_pour_Firefox_3 +tags: + - Firefox 3 +translation_of: Mozilla/Firefox/Releases/3/Updating_extensions +--- +
+ +

Cet article fournit des informations qui seront utiles pour les développeurs désirant mettre à jour leurs extensions pour qu'elles fonctionnent correctement avec Firefox 3.

+ +

Avant d'aller plus loin, voici une indication utile : si la seule modification dont votre extension a besoin est une mise à jour du champ maxVersion dans son manifeste d'installation, et que celle-ci est hébergée sur addons.mozilla.org, il n'est pas vraiment nécessaire de renvoyer une nouvelle version de votre extension ! Utilisez simplement le Developer Control Panel sur AMO pour ajuster la valeur de maxVersion. Cela vous évitera également la revérification de votre extension.

+ +

Première étape : mise à jour du manifeste d'installation

+ +

La première étape — et pour la plupart des extensions la seule qui sera nécessaire — est de mettre à jour le fichier de manifeste d'installation, install.rdf, pour indiquer sa compatibilité avec Firefox 3.

+ +

Trouvez simplement la ligne indiquant la version maximale compatible de Firefox (qui, pour Firefox 2, ressemblait probablement à ceci) :

+ +
 <em:maxVersion>2.0.*</em:maxVersion>
+
+ +

Modifiez-la pour indiquer la compatibilité avec Firefox 3 :

+ +
 <em:maxVersion>3.0.*</em:maxVersion>
+
+ +

Et réinstallez ensuite votre extension.

+ +

Notez que Firefox 3 n'a plus besoin d'un « .0 » supplémentaire dans son numéro de version, donc au lieu d'utiliser « 3.0.0.* », il ne faut plus indiquer que « 3.0.* ».

+ +
Note : Notez qu'à ce point, il faut s'attendre à d'autres changements dans Firefox 3. Ceux-ci peuvent poser des problèmes à certaines extensions, il faut donc éviter de publier une extension avec la valeur 3.0.0.* pour maxVersion avant que la RC de Firefox 3 soit disponible. Durant la pariode beta de Firefox 3, il convient d'utiliser 3.0b5 comme valeur de maxVersion.
+ +

Il y a eu (et il y aura encore) un certain nombre de changements dans les API qui poseront probablement des problèmes à certaines. Nous sommes encore en train d'établir une liste complète de ces changements.

+ +
Note : Si votre extension utilise toujours un script Install.js plutôt qu'un manifeste d'installation, il vous faudra faire la transition vers un manifeste d'installation maintenant. Firefox 3 ne gère plus les scripts install.js dans les fichiers XPI.
+ +

Ajout de localisations au manifeste d'installation

+ +

Firefox 3 permet d'utiliser de nouvelles propriétés dans le manifeste d'installation pour spécifier des descriptions localisées. Les anciennes méthodes continuent à fonctionner, mais la nouvelle permet à Firefox de charger les localisations même lorsque le module complémentaire est désactivé ou sur le point d'être installé. Consultez Localisation des descriptions d'extensions pour plus de détails.

+ +

Deuxième étape : s'assurer de fournir des mises à jour sécurisées

+ +

Si vous hébergez des modules complémentaires vous-mêmes et pas sur un fournisseur d'hébergement sécurisé comme addons.mozilla.org, vous devrez fournir une méthode sécurisée de mise à jour pour vos modules. Pour ce faire, il faudrait soit héberger vos mises à jour sur un site SSL, ou utiliser des clés cryptographiques pour signer les informations de mise à jour. Consultez Mises à jour sécurisées pour plus d'informations.

+ +

Troisième étape : s'occuper des changements d'API

+ +

Plusieurs API ont changé de manière significative. Les changements les plus importants, qui affecteront probablement un grand nombre d'extensions, sont les suivants :

+ +

DOM

+ +

Les nœuds provenant de documents externes doivent être clonés à l'aide de document.importNode() (ou adoptés avec + document.adoptNode()) avant de pouvoir être insérés dans le document courant. Pour en savoir plus sur les problèmes + de Node.ownerDocument, consultez la FAQ DOM du W3C (en anglais).

+ +

Gecko n'obligeait pas à utiliser document.importNode() et document.adoptNode() avant sa version 1.9. Depuis les versions 1.9 + alphas, si un nœud n'est pas adopté ou importé avant d'être utilisé dans un autre document, l'exception + WRONG_DOCUMENT_ERR est déclenchée (NS_ERROR_DOM_WRONG_DOCUMENT_ERR). implémentation dans le bug 47903.

+ + +

Marque-pages et historique

+ +

Si votre extension accède aux marque-pages ou à des données de l'historique d'une manière ou d'une autre, elle devra être substantiellement modifiée pour être compatible avec Firefox 3. Les anciennes API pour accéder à ces informations ont été remplacées par la nouvelle architecture Places. Consultez le Guide de migration vers Places pour des détails sur la mise à jour de vos extensions existantes en utilisant l'API Places.

+ +

Gestionnaire de téléchargement

+ +

L'API du gestionnaire de téléchargement a légèrement changé suite à la transition d'un stockage de données RDF vers l'API Storage. La transition devrait être très facile à faire. En outre, l'API permettant d'examiner la progression des téléchargements a été modifiée pour permettre l'existence de plusieurs écouteurs sur le gestionnaire de téléchargement. Consultez nsIDownloadManager, nsIDownloadProgressListener et Surveillance de téléchargements pour plus d'informations.

+ +

Gestionnaire de mots de passe

+ +

Si votre extension accède à des informations d'identification à l'aide du Gestionnaire de mots de passe, elle devra être adaptée pour utiliser la nouvelle API du gestionnaire d'identification.

+ + + +

Il est également possible de ne pas utiliser le stockage du gestionnaire de mots de passe intégré si vous désirez fournir votre propre implémentation de stockage de mots de passe dans vos extensions. Consultez Création d'un module de stockage du gestionnaire d'identification pour plus de détails.

+ +

Popups (menus, menus contextuels, bulles d'information et panneaux)

+ +

Le système de popups XUL a été modifié de manière importante dans Firefox 3. Celui-ci gère les menus principaux, les menus contextuels et les panneaux d'information. Un guide d'utilisation des popups a été créé pour expliquer en détail le fonctionnement du système. Une chose à noter est l'obsolescence de popup.showPopup en faveur des nouvelles méthodes popup.openPopup et popup.openPopupAtScreen.

+ +

Complément automatique

+ +

La méthode handleEnter() de l'interface nsIAutoCompleteController a été modifiée pour accepter un paramètre indiquant si le texte a été sélectionné depuis le popup de complément automatique ou par l'appui sur la touche Entrée par l'utilisateur après avoir saisi le texte.

+ +

DOMParser

+ + + +

Interfaces supprimées

+ +

Les interfaces suivantes ont été retirées de Gecko 1.9, sur lequel se base Firefox 3. Si votre extension utilise l'une ou l'autre d'entre-elles, vous devrez mettre à jour votre code :

+ + + +

Quatrième étape : vérifier les changements chrome appropriés

+ +

Un changement mineur dans le chrome pourrait nécessiter des changements dans votre code. Un nouveau vbox a été ajouté, appelé « browser-bottombox », qui comprend la Barre de recherche et la Barre d'état en bas de la fenêtre de navigation. Bien que ceci n'affecte pas l'apparence de l'affichage, votre extension peut être affectée si elle utilise des overlays chrome relatifs à ces éléments.

+ +

Par exemple, si vous faisiez précédemment un overlay chrome avant la Barre d'état, comme ceci :

+ +
<window id="main-window">
+  <something insertbefore="status-bar" />
+</window>
+
+ +

Vous devrez à présent le faire comme ceci :

+ +
<vbox id="browser-bottombox">
+  <something insertbefore="status-bar" />
+</vbox>
+
+ +

Ou utilisez la technique suivante pour que votre overlay fonctionne tant avec Firefox 2 que Firefox 3 :

+ +
<window id="main-window">
+  <vbox id="browser-bottombox" insertbefore="status-bar">
+    <something insertbefore="status-bar" />
+  <vbox>
+</window>
+
+ +
Note : Ce changement s'applique à partir de Firefox 3 beta 4 et des nightlies précédentes.
+ +

Autres changements

+ +

Ajoutez ici les changements simples que vous avez dû faire à vos extensions pour qu'elles fonctionnent avec Firefox 3.

+ + diff --git a/files/fr/mozilla/firefox/releases/3/updating_web_applications/index.html b/files/fr/mozilla/firefox/releases/3/updating_web_applications/index.html new file mode 100644 index 0000000000..993a2db147 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/3/updating_web_applications/index.html @@ -0,0 +1,95 @@ +--- +title: Mise à jour des applications Web pour Firefox 3 +slug: Mise_à_jour_des_applications_Web_pour_Firefox_3 +tags: + - Firefox 3 +translation_of: Mozilla/Firefox/Releases/3/Updating_web_applications +--- +
{{FirefoxSidebar}}
+ +

{{ Fx_minversion_header(3) }} Un certain nombre de changements présents dans Firefox 3 pourraient affecter votre site ou application Web. Vous pourriez en outre tirer parti de plusieurs de ses nouvelles fonctionnalités. Cet article servira de point de départ au fur et à mesure de la mise à jour de votre contenu pour bénéficier au maximum des possibilités de Firefox 3.

+ +

Changements dans le DOM

+ +

Les nœuds provenant de documents externes doivent être clonés à l'aide de document.importNode() (ou adoptés avec + document.adoptNode()) avant de pouvoir être insérés dans le document courant. Pour en savoir plus sur les problèmes + de Node.ownerDocument, consultez la FAQ DOM du W3C (en anglais).

+ +

Gecko n'obligeait pas à utiliser document.importNode() et document.adoptNode() avant sa version 1.9. Depuis les versions 1.9 + alphas, si un nœud n'est pas adopté ou importé avant d'être utilisé dans un autre document, l'exception + WRONG_DOCUMENT_ERR est déclenchée (NS_ERROR_DOM_WRONG_DOCUMENT_ERR). implémentation dans le bug 47903.

+ + +

Changements liés à HTML

+ +

Changements dans l'héritage des jeux de caractères

+ +

Firefox 3 corrige un bug de sécurité dans les éléments frame et iframe qui leur permettait d'hériter du jeu de caractères de leur parent. Cela pouvait poser des problèmes dans certains cas. À présent, les cadres ne peuvent hériter du jeu de caractère de leur parent que si tant le cadre que le parent sont chargés depuis le même serveur. Si vous avez des pages qui dépendent du fait que les cadres chargés depuis d'autres serveurs hériteront du même jeu de caractères, leurs balisage HTML devra être mis à jour pour indiquer leur jeu de caractères plus précisément.

+ +

Changements concernant l'élément SCRIPT

+ +

L'élément <script> dans les documents HTML servis en mode text/html doit à présent être obligatoirement accompagné d'une balise fermante </script>, même si aucun contenu n'est fourni entre les deux balises. Dans les versions précédentes de Firefox, il était possible de faire ceci :

+ +
<script ... />
+
+ +

Le balisage doit à présent respecter les spécifications HTML (si c'est effectivement du HTML), il devient donc obligatoire de placer une balise de fermeture séparément, comme ceci :

+ +
<script ...></script>
+
+ +

Ce changement améliore tant la compatibilité que la sécurité.

+ +

Changements liés à CSS

+ +

Changements concernant les tailles de police basées sur les unités em et ex

+ +

Les valeurs de taille de police (font-size) utilisant les unités em et ex étaient auparavant affectées selon la taille de police minimale spécifiée par l'utilisateur : si une police était affichée plus grande à cause de la taille de police minimale, les unités em et ex pour les tailles de police étaient adaptées en fonction. Ce comportement était incohérent avec la manière dont les tailles de police en pourcentage fonctionnaient.

+ +

Les valeurs de font-size sont à présent basées sur une « taille de police désirée » qui n'est pas affectée par la taille minimale de police de l'utilisateur. Autrement dit, les tailles de police sont toujours calculées selon l'intention du concepteur du site et ne sont ajustées selon la taille de police minimale qu'après coup.

+ +

Consultez le {{ Bug(322943) }} pour une démonstration (doit être visionnée avec une taille de police minimale supérieure ou égale à 6 pour voir la différence : les deux cascades de boîtes se comportent différemment dans Firefox 2, car la taille de police basée sur des unités em est décalée par la taille de police minimale).

+ +

Changements concernant la sécurité

+ +

Accès au chrome

+ +

Dans les versions précédentes de Firefox, toute page web pouvait charger des scripts ou des images depuis le chrome à l'aide du protocole chrome://. Cela permettait entre autres à des sites de détecter la présence de certains modules complémentaires — ce qui pourrait être utilisé pour compromettre la sécurité d'un utilisateur en contournant des modules ajoutant des fonctionnalités de sécurité au navigateur.

+ +

Firefox 3 ne permet plus au contenu web que d'accéder aux éléments dans les espaces chrome://browser/ et chrome://toolkit/. Ces fichiers sont prévus pour être accessibles au contenu web. Tous les autres contenus chrome y sont par contre à présent inaccessibles.

+ +

Une possibilité existe cependant pour les extensions désirant rendre le contenu accessible aux pages web. Ces extensions peuvent spécifier un paramètre spécial dans leur fichier chrome.manifest comme ceci :

+ +
content mypackage location/ contentaccessible=yes
+
+ +

Cette manipulation ne devrait pas être nécessaire la plupart du temps, mais elle existe toutefois pour les rares cas où elle reste indispensable. Notez qu'il n'est pas exclu que Firefox avertisse l'utilisateur de cette utilisation du paramètre contentaccessible, étant donné qu'il constitue un risque potentiel de sécurité.

+ +
Note : Firefox 2 ne gérant pas le paramètre contentaccessible (la ligne le contenant sera entièrement ignorée), si vous voulez que votre module reste compatible avec Firefox 2 et Firefox 3, ajoutez plutôt quelque chose comme ceci : + +
content mypackage location/
+content mypackage location/ contentaccessible=yes
+
+
+ +

Champs d'envoi de fichiers (upload)

+ +

Dans les versions précédentes de Firefox, un certain nombre de cas existaient où le chemin entier du fichier envoyé par l'utilisateur était lisible par une application web. Pour des raisons de confidentialité, ce n'est plus possible dans Firefox 3 ; à présent seul le nom du fichier lui-même est visible par l'application web.

+ +

Changements dans JavaScript

+ +

Firefox 3 intègre JavaScript 1.8. Un changement important qui pourrait nécessiter une mise à jour de vos sites ou applications Web est que l'objet obsolète et non standard Script n'est plus géré. Il ne s'agit pas de la balise <script> mais d'un objet JavaScript qui n'avait jamais été standardisé. Il est finalement peu probable que vous l'ayez jamais utilisé, et vous n'aurez sans doute aucun problème.

+ +

Voir également

+ + + +

 

+ +
 
+ +

{{ languages( { "en": "en/Updating_web_applications_for_Firefox_3", "es": "es/Actualizar_aplicaciones_web_para_Firefox_3", "ja": "ja/Updating_web_applications_for_Firefox_3", "pl": "pl/Aktualizacja_aplikacji_internetowych_dla_Firefoksa_3" } ) }}

diff --git a/files/fr/mozilla/firefox/releases/3/xul_improvements_in_firefox_3/index.html b/files/fr/mozilla/firefox/releases/3/xul_improvements_in_firefox_3/index.html new file mode 100644 index 0000000000..c509160ae5 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/3/xul_improvements_in_firefox_3/index.html @@ -0,0 +1,95 @@ +--- +title: Améliorations XUL dans Firefox 3 +slug: Améliorations_XUL_dans_Firefox_3 +tags: + - Firefox 3 + - XUL +translation_of: Mozilla/Firefox/Releases/3/XUL_improvements_in_Firefox_3 +--- +
{{FirefoxSidebar}}

{{ Fx_minversion_header(3) }}

+ +

Firefox 3 fournit un certain nombre de nouveaux éléments XUL, ainsi que des améliorations sur des éléments existants. Bien que ces éléments soient documentés ailleurs, cet article offre une liste pratique des améliorations ainsi que des liens vers la documentation détaillée.

+ +

Nouveaux éléments

+ + + +

Améliorations des arbres

+ + + +

Améliorations des menus

+ + + +

Améliorations des boîtes de texte

+ + + +

Autres améliorations

+ + + +

Voir également

+ + + +

{{ languages( { "en": "en/XUL_improvements_in_Firefox_3", "es": "es/Mejoras_XUL_en_Firefox_3", "ja": "ja/XUL_improvements_in_Firefox_3", "pl": "pl/Poprawki_XUL_w_Firefoksie_3" } ) }}

diff --git a/files/fr/mozilla/firefox/releases/35/index.html b/files/fr/mozilla/firefox/releases/35/index.html new file mode 100644 index 0000000000..12ed5c06b2 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/35/index.html @@ -0,0 +1,197 @@ +--- +title: Firefox 35 pour les développeurs +slug: Mozilla/Firefox/Versions/35 +tags: + - Firefox + - Guide + - Mozilla +translation_of: Mozilla/Firefox/Releases/35 +--- +

Changement concernant les développeurs

+ +

Outils de développement

+ +

Liens:

+ + + +

Tous les bugs des outils de développement résolus entre Firefox 34 et Firefox 35.

+ +

CSS

+ + + +

HTML

+ + + +

JavaScript

+ + + +

Interfaces/APIs/DOM

+ + + +

 MathML

+ + + +

SVG

+ +

Aucun changement.

+ +

Audio/Video

+ +

Aucun changement.

+ +

Réseau & Sécurité

+ + + +

Changements pour les modules et les développeurs Mozilla

+ +

XUL & Modules

+ + + +

Module SDK

+ +

Titres

+ + + +

Détails

+ +

Commits de GitHub effectués entre Firefox 34 et Firefox 35. Ceci ne comprendra pas les évolutions après la sortie officielle.

+ +

Bugs corrigés entre Firefox 34 et Firefox 35. Ceci ne comprendra pas les évolutions après la sortie officielle.

+ +

Voir aussi

+ + + +

Anciennes versions

+ +
+ +
diff --git a/files/fr/mozilla/firefox/releases/35/site_compatibility/index.html b/files/fr/mozilla/firefox/releases/35/site_compatibility/index.html new file mode 100644 index 0000000000..326b53a4b0 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/35/site_compatibility/index.html @@ -0,0 +1,13 @@ +--- +title: Compatibilité des sites avec Firefox 35 +slug: Mozilla/Firefox/Versions/35/Site_Compatibility +tags: + - Compatibilité + - Développement Web + - Firefox + - Firefox 35 + - FxSiteCompat + - Guide +translation_of: Mozilla/Firefox/Releases/35/Site_Compatibility +--- +
{{FirefoxSidebar}}

Cette page a été déplacée vers FxSiteCompat.com.

diff --git a/files/fr/mozilla/firefox/releases/4/index.html b/files/fr/mozilla/firefox/releases/4/index.html new file mode 100644 index 0000000000..050e4cfe06 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/4/index.html @@ -0,0 +1,640 @@ +--- +title: Firefox 4 pour les développeurs +slug: Mozilla/Firefox/Versions/4 +tags: + - Firefox + - Firefox 4 +translation_of: Mozilla/Firefox/Releases/4 +--- +
+ +

Firefox 4, est sorti le 22 mars 2011, améliore les performances, le support d'HTML5 et d'autres technologies du web et aussi la sécurité. Cet article fournit des informations sur cette version et sur les fonctionnalités qui sont disponibles pour les développeurs Web, les développeurs de modules complémentaires et les développeurs de la plate-forme Gecko.

+ +

Fonctionnalités pour les développeurs Web

+ +

Gecko utilise maintenant le parseur HTML5, qui corrige des bugs, améliore l'interopérabilité et les performances. Il permet également d'intégrer du contenu SVG et MathML directement dans le code HTML.

+ +

HTML

+ +
+
Rencontrez le parseur HTML5
+
Un aperçu sur ce que le parseur HTML5 représente pour vous et comment intégrer du contenu SVG et MathML dans votre code.
+
Les formulaires en HTML5
+
Un aperçu de l'amélioration de formulaires Web en HTML5. Parmi les changements on ajoute les types d'entrée dans l'élément <input>, la validation des données et d'autres modifications.
+
Sections HTML5
+
Gecko supporte à présent les nouveaux éléments HTML5 liés aux sections dans un document : <article>, <section>, <nav>, <aside>, <hgroup>, <header> et <footer>.
+
Attribut HTML5 hidden
+
Cet attribut, commun à tous les éléments, est utilisé pour cacher le contenu d'une page Web qui n'est pas encore pertinent pour l'utilisateur.
+
Autres éléments HTML5
+
Gecko supporte les nouveaux éléments HTML5 suivants : <mark>, <figure>, et <figcaption>.
+
WebSockets
+
Un guide pour utiliser la nouvelle API WebSockets pour la communication entre une application web et un serveur en temps réel. A noter que WebSockets tel qu'implémenté dans Firefox 4 n'est pas compatible avec la norme finale, et ne devrait pas être utilisé.
+
+ +

Améliorations de Canvas

+ +

Les modifications suivantes ont étés apportées à l'interface CanvasRenderingContext2D pour permettre à l'implémentation de <canvas> d'être en conformité avec la spécification :

+ + + +
+
+ +

Autres changements HTML

+ + + +

CSS

+ +
+
Transitions CSS
+
Le support des transitions CSS est disponible dans Firefox 4.
+
Les valeurs calculées en CSS
+
Le support de -moz-calc a été ajouté. Cela permet de spécifier des valeurs de <length> comme des expressions mathématiques.
+
Groupement de sélecteurs
+
Le support de :-moz-any pour grouper les sélecteurs et factoriser des combinateurs.
+
Support subrectangle pour background-image
+
La propriété -moz-image-rect permet d'utiliser des subrectangles en tant que background-image.
+
Propriétés CSS tactile
+
Le support des propriétés tactiles a été ajouté. Plus de détails plus tard.
+
Utilisation arbitraires d'élements comme fond
+
Vou pouvez utiliser la fonction CSS -moz-element et la fonction DOM document.mozSetImageElement() pour une utilisation arbitraire des éléments HTML comme fond.
+
Sélecteur :visited et confidentialité
+
Des modifications ont étés apportées sur les informations qui peuvent être obtenues sur le style des liens visités en utilisant les sélecteurs CSS. Certaines applications Web peuvent être affectées.
+
+ +

Nouvelles propriétés CSS

+ + + + + + + + + + + + + + + + + + + + +
PropriétéDescription
-moz-font-feature-settingsPermet de personnaliser les fonctionnalités avancées des polices OpenType.
-moz-tab-sizeSpécifie la largeur d'un espace de tabulation (U+0009) lors du rendu du texte.
resizePermet de modifier les dimensions d'un élément.
+ +
+
+ +

Nouvelles pseudo-classes CSS

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Pseudo-classDescription
:-moz-handler-crashedUtilisé pour le style d'un élément dont le plugin a planté.
:-moz-placeholderAppliquée à l'espace texte réservé dans les champs des formulaires.
:-moz-submit-invalidAppliquée au bouton d'envoi des formulaires quand un ou plusieurs des champs ne sont pas valides.
:-moz-window-inactiveAppliquée aux éléments d'une fenêtre inactive.
:invalidAutomatiquement appliquée aux champs <input> dont le contenu est invalide.
:optionalAutomatiquement appliquée aux champs <input> qui ne spécifient pas l'attribut required.
:requiredAutomatiquement appliquée aux champs <input> qui spécifient l'attribut required.
:validAutomatiquement appliquée aux champs <input> dont le contenu a été validé avec succès.
+ +

Nouveaux pseudo-selectors CSS

+ + + + + + + + + + + + +
Pseudo-selectorDescription
:-moz-focusringPermet de spécifier l'apparence d'un élément lorsque Gecko estime que l'on doit se fixer dessus.
+ +

Nouvelles fonctions CSS

+ + + + + + + + + + + + + + + + + + + + + + + + +
FonctionDescription
:-moz-anyPermet de grouper les sélecteurs et de factoriser les combinateurs.
-moz-calcPermet de spécifier des valeurs de <length> comme des expressions mathématiques.
-moz-elementPermet d'utiliser un élément arbritaire de fond pour background-image and background.
-moz-image-rectPermet d'utiliser un subrectangle d'une image comme background-image or background.
+ +

Propriétés CSS renommées

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Ancien nomNouveau nomNotes
-moz-background-sizebackground-sizeLe nom -moz-background-size n'est plus supporté.
-moz-border-radiusborder-radiusL'ancien nom est encore pris en charge pour une durée limitée, le temps de mettre vos sites à jour. Le changement du rendu a été fait pour correspondre à la dernière version de la spécification.
-moz-box-shadowbox-shadow
+ +

Divers changements CSS

+ + + +

Graphisme et vidéo

+ +
+
+
WebGL
+
La norme WebGL (encore en développement) est maintenant supportée par Firefox.
+
Optimisation des performances graphique
+
Trucs et astuces pour profiter le maximum des performances graphiques et vidéo dans Firefox 4.
+
Support de WebM
+
Le nouveau format vidéo ouvert WebM est supporté par Gecko 2.0.
+
Animation SVG avec SMIL
+
Les animations SVG avec SMIL sont désomais supportées.
+
Utilisation de SVG comme image ou arrière-plan CSS
+
Vous pouvez maintenant utilisez SVG avec l'élément <img>, ainsi qu'avec CSS background-image.
+
Attribut Media buffered
+
L'attribut buffered sur les éléments <video> and <audio> est maintenant supporté, vous permettant de déterminer quel fichier multimédia a été tamponné. L'interface DOM TimeRanges a été mise en place pour ce support.
+
Attribut Media preload
+
L'attribut preload de la spécification HTML5 a été implémenté, remplaçant l'attribut autobuffer précédemment mis en place (et qui n'est plus pris en charge). Cela affecte les éléments <video> et <audio> ainsi que l'interface nsIDOMHTMLMediaElement.
+
Amélioration du positionnement du texte SVG
+
Vous pouvez maintenant spécifier des listes des valeurs pour les propriétés x, y, dx, and dy sur les éléments SVG <text> et <tspan>. Cela vous permet de contrôler le positionnement de chaque caractère d'une chaîne, individuellement.
+
+ +

DOM

+ +
+
Tableaux JavaScript typés
+
Ajout du support pour les tableaux JavaScript typés, cela vous permet de manipuler des tampons contenant des données brutes en utilisant des types de données natives. Plusieurs API utilisent ça, y compris l'API File, WebGL et WebSockets.
+
Obtention des limites des rectangles limites
+
L'objet Range a désormais les méthodes range.getClientRects() et range.getBoundingClientRect().
+
Capture des évènements de la souris sur des éléments quelconques
+
Ajout du support des APIs setCapture() et releaseCapture() originaires d'Internet Explorer. Voir bug 503943.
+
Manipulation de l'historique du navigateur
+
L'objet de l'historique déjà existant et disponible via l'objet window.history, supporte maintenant les nouvelles méthodes HTML5 pushState() et replaceState().
+
Animations utilisant MozBeforePaint
+
Un nouvel évènement a été ajouté, qui, avec l'aide de la méthode window.mozRequestAnimationFrame() et de la propriété window.mozAnimationStartTime, offre un moyen de créer des animations qui sont synchronisées avec les autres.
+
Evènements touch et multi-touch
+
Ajout du support des évènements touch et multi-touch.
+
+ +

Changement des interfaces DOM d'éléments HTML

+ +

Plusieurs éléments HTML ont vu leur interface DOM modifier, conformément à la spécification HTML5.

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Interface dans Firefox 3.6Interface dans Firefox 4Elements HTML
HTMLSpanElementHTMLElement<abbr>, <acronym>, <address>, <b>, <bdo>, <big>, <blink>, <center>, <cite>, <code>, <dd>, <dfn>, <dt>, <em>, <i>, <kbd>, <listing>, <nobr>, <plaintext>, <s>, <samp>, <small>, <strike>, <strong>, <sub>, <sup>, , <tt>, <u>, <var>, <xmp>
HTMLDivElementHTMLElement<noembed>, <noframes>, <noscript>
HTMLWBRElementHTMLElement<wbr>
+ +
+
+ +

Divers changements DOM

+ + + +

Securité

+ +
+
Content Security Policy (CSP)
+
Content Security Policy (CSP) est une proposition de Mozilla, conçu pour aider les concepteurs de sites Web et les administrateurs de serveur en spécifiant comment le contenu sur leurs sites Web agit. L'objectif est d'aider à détecter et à atténuer les attaques incluant le cross-site scripting et des attaques par injection de données.
+
HTTP Strict Transport Security
+
HTTP Strict Transport Security est un dispositif de sécurité qui permet à un site web d'indiquer au navigateur d'utiliser une connexion sécurisée (HTTPS) à la place du protocole HTTP.
+
L'en-tête de réponse X-FRAME-OPTIONS
+
L'en-tête de réponse X-FRAME-OPTIONS HTTP introduite dans Internet Explorer 8 est désormais supportée par Firefox. Cela permet aux sites d'indiquer si leurs pages peuvent être utilisées dans des frames ou si l'utilisation de la page doit être restreint.
+
Changement de la chaîne de l'agent utilisateur
+
C'est un moyen de réduire la quantité et l'entropie des données envoyées dans les requêts HTPP (voir bug 572650), le niveau de cryptage et le signe de la langue ont été enlevés de la chaîne de l'agent utilisateur.
+
+ +

JavaScript

+ +

Pour un aperçu des changements effectués dans JavaScript 1.8.5, voir New in JavaScript 1.8.5. Dans Firefox 4, JavaScript a un plus grand respect de la norme ECMAScript 5.

+ +

Outils pour les développeurs

+ +
+
Utilisation de la Console Web
+
La Console Web est un outil qui aide le débogage.
+
+ +
+
+Gecko 2.0 note +
(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)
+
+ +

A partir de Firefox 4, la Console d'erreurs est désactivée par défaut. Vous pouvez la ré-activer en modifiant la préférence devtools.errorconsole.enabled à true et en redémarrant le navigateur.

+
+ +

Changements pour les développeurs de Mozilla et de modules complémentaires

+ +

Pour des conseils utiles sur la mise à jour des extensions existantes pour Firefox 4, voir Updating extensions for Firefox 4. Il y a plusieurs changements importants qui cassent la compatibilité avec les add-ons, donc n'oubliez pas de lire cet article.

+ +

Si vous développez des thèmes, vous devez lire Theme changes in Firefox 4 afin de connaître certains changements importants.

+ +

Modules de code JavaScript

+ +
+
Services.jsm
+
Le module de code Services.jsm fournit des accesseurs qui font qu'il est facile d'obtenir des références sur les services couramment utilisés, tels que le service de préférences ou le médiateur fenêtre.
+
API JS-ctypes
+
L'API JS-ctypes permet d'appeler une bibliothèque de fonctions étrangère C-compatible sans utiliser XPCOM.
+
Gestionnaire de modules complémentaires
+
Le nouveau gestionnaire de modules complémentaires fournit des informations sur les modules, permet la modifications des options, l'installation et la suppression des modules.
+
PopupNotifications.jsm
+
Le nouveau module des notifications popup facilite la présentation des notifications non-modales. Vous pouvez voir comment utiliser cette API dans Using popup notifications.
+
Chargement des modules de code à partir des URLs chrome:
+
Vous pouvez maintenant charger des modules de code à partir d'URLs chrome:, même à l'intérieur de fichiers JAR.
+
DownloadLastDir.jsm
+
Le module de code DownloadLastDir.jsm fournit la variable gDownloadLastDir qui contient une chaîne qui permet de connaître le chemin du répertoire dans lequel le dernier téléchargement s'est produit. Ce module gère les questions liées à la navigation privée.
+
Mesurer les performances en utilisant le module de code PerfMeasurement.jsm code module
+
Le module de code PerfMeasurement.jsm propose une API qui mesure les performances au niveau du CPU dans du code JavaScript.
+
+ +

Divers changements dans les modules de code

+ + + + + +

Changements DOM

+ +
+
ChromeWorker
+
Un nouveau type de travailleur pour du code privilégié, ce qui permet l'utilisation de choses comme js-ctypes à partir des travailleurs dans les extensions et le code d'une application.
+
Evènements tactile
+
Ajout du support de l'évènement tactile (non-standard), cela permet de pouvoir suivre plusieurs doigts qui se déplacent en même temps sur un écran tactile.
+
+ +

Autres changements DOM

+ + + +
+
+ +

XUL

+ +

Changements pour l'élément tabbrowser

+ +

Plusieurs changements ont été apportés à l'élément <xul:tabbrowser> ce qui impacte les extensions qui interagissent avec les onglets. En plus du support de app tabs, ces changements on aussi modifiés la barre d'onglet en une barre d'outils standard, ce qui permet à l'utilisateur de faire glisser les boutons dans la barre d'outils.

+ + + +

Changements pour les popups

+ + + +

Suppression du support à distance de XUL

+ +

Le support à distance de XUL n'est plus supporté, cela affecte les documents XUL qui étaient servis par HTTP, en outre, vous ne pouvez plus charger des documents XUL en utilisant l'URL file:// sauf en créant une préférence dom.allow_XUL_XBL_for_file avec la valeur true. Cependant, il y a une fonctionnalité de liste blanche qui peut être utilisée pour permettre à des domaines spécifiques de charger XUL à distance. L'extension Remote XUL Manager vous permet de gérer cette liste blanche.

+ +

Divers changements XUL

+ + + +

Changements dans l'UI affectant les développeurs

+ +
+
La barre d'add-on
+
La barre d'état a été supprimée en faveur de la nouvelle barre d'add-on. Vous devrez mettre à jour votre extension l'utiliser cette option si vous aviez ajouté l'UI de la barre d'état avant.
+
Cacher le chrome du navigateur
+
Vous pouvez désormais cacher le chrome du navigateur quand il est souhaitable de le faire, par exemple, about:addons le fait.
+
+ +

Storage

+ +

Divers changement dans l'API Storage

+ + + +

XPCOM

+ +

En plus des changements spécifiques référencés ci-dessous, il est important de noter qu'il n'y a plus aucune interfaces gelées. Elles sont toutes dégelées maintenant, indépendamment de ce que peut indiquer la documentation. Nous mettrons à jour la documentation au fil du temps.

+ +
+
Changements d'XPCOM dans Gecko 2.0
+
Détails sur les modifications d'XPCOM qui impactent la compatibilité dans Firefox 4.
+
Components.utils.getGlobalForObject()
+
Cette nouvelle méthode retourne l'objet global avec lequel un objet est associé, ce qui remplace un cas d'utilisation commun de __parent__ qui est désormais retiré.
+
+ +

Places

+ + + +

Changements dans les interfaces

+ + + +

Gestion de la mémoire

+ +
+
Allocation infaillible de la mémoire
+
Mozilla propose désormais des répartiteur de mémoire infaillible qui sont garantis de ne pas retouner null. Vous devriez lire cet article pour connaitre leur fonctionnement et savoir comment demander l'allocation de la mémoire.
+
+ +

Autres changements

+ + + +

Autres changements

+ +
+
Seul le fichier chrome.manifest racine est chargé
+
maintenant seul le fichier chrome.manifest racine est chargé ; si vous avez besoin de fichiers manifestes secondaires à charger, vous pouvez utilisez la commande manifest dans votre fichier chrome.manifest racine pour les charger.
+
Suppression du support de Gopher
+
Le protocole Gopher n'est plus supporté nativement. L'extension OverbiteFF permet de continuer à le supporter.
+
Gestion des évènement du processus Content
+
Pour le support des plugins hors du processus et les multiples processus caractéristiques, une nouvelle API a été mise en place pour permettre l'envoi de messages dans les processus.
+
Bootstrap des extensions
+
Vous pouvez désormais créer des extensions qui peuvent être installées, désinstallées et mises à jour sans nécessiter le redémarrage du navigateur.
+
Suppression des plugins par défaut
+
The default plugin has been removed. The application plugins folder has also been removed by default, however support for installing plugins via this folder still exists. Voir bug 533891.
+
Extension Manager remplacé par Addon Manager
+
nsIExtensionManager a été remplacée par AddonManager.
+
Child HWNDs n'est plus utilisé
+
Firefox ne créé plus de child HWNDs pour son usage interne sous Windows. Si vous avez codé une extension qui utilise du code natif pour manipuler ces HWNDs, votre extensions ne fonctionnera pas dans Firefox 4. Soit vous devez arrêter l'utilisation de HWND ou soit mettre votre code reposant sur HWND dans un plugin NPAPI. C'est un gros travail, alors si vous pouviez éviter d'utiliser HWND directement.
+
Changements dans les gestes
+
Les gestes par défaut ont été changés, en faisant glisser trois doigts de haut en bas sur le trackpad cela ouvrira ou fermera Firefox Panorama. Pour modifier les éléments précédents, afin d'avoir les commandes de défilement haut et défilement bas, ouvrez about:config et mettez cmd_scrollBottom pour browser.gesture.swipe.down et cmd_scrollTop pour browser.gesture.swipe.up.
+
+ +

Voir également

+ +
+ +
diff --git a/files/fr/mozilla/firefox/releases/40/index.html b/files/fr/mozilla/firefox/releases/40/index.html new file mode 100644 index 0000000000..82eb7fa6a7 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/40/index.html @@ -0,0 +1,198 @@ +--- +title: Firefox 40 pour développeurs +slug: Mozilla/Firefox/Versions/40 +translation_of: Mozilla/Firefox/Releases/40 +--- +
{{FirefoxSidebar}}
To test the latest developer features of Firefox,
+install Firefox Developer Edition Firefox 40 was released on August 11, 2015. This article lists key changes that are useful not only for web developers, but also Firefox and Gecko developers as well as add-on developers.
+ +

Changements pour les développeurs Web

+ +

Outils pour Développeurs

+ +

Nouveautés:

+ + + +

More:

+ + + +

Autres: Tous les bugs devtools corrigés depuis Firefox 39 et Firefox 40.

+ +

 

+ +

CSS

+ + + +

HTML

+ +

pas de changement.

+ +

JavaScript

+ + + +

Interfaces/APIs/DOM

+ +

Nouvelles APIs

+ + + +

Web Animations API

+ +

Amélioration de notre implémentation des animations Web expérimentales, principalement mostley to match latest spec changes:

+ + + +

CSSOM

+ + + +

WebRTC

+ + + +

DOM & HTML DOM

+ + + +

Web Audio API

+ +

Nouvelles extensions pour l'API Web Audio:

+ + + +

Web Workers

+ + + +

IndexedDB

+ + + +

Dev Tools

+ + + +

MathML

+ +

pas de changement.

+ +

SVG

+ +

pas de changement.

+ +

Audio/Video

+ +

pas de changement.

+ +

Networking

+ +

pas de changement.

+ +

Security

+ + + +

Changes for add-on and Mozilla developers

+ +

XUL

+ +

pas de changement.

+ +

JavaScript code modules

+ + + +

XPCOM

+ +

No change.

+ +

Other

+ + + +

See also

+ + + +

Older versions

+ +

{{Firefox_for_developers('39')}}

diff --git a/files/fr/mozilla/firefox/releases/40/site_compatibility/index.html b/files/fr/mozilla/firefox/releases/40/site_compatibility/index.html new file mode 100644 index 0000000000..cbe82d4b21 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/40/site_compatibility/index.html @@ -0,0 +1,13 @@ +--- +title: Compatibilité des sites avec Firefox 40 +slug: Mozilla/Firefox/Versions/40/Site_Compatibility +tags: + - Compatibilité + - Développement Web + - Firefox + - Firefox 40 + - FxSiteCompat + - Guide +translation_of: Mozilla/Firefox/Releases/40/Site_Compatibility +--- +
{{FirefoxSidebar}}

Cette page a été déplacée vers FxSiteCompat.com.

diff --git a/files/fr/mozilla/firefox/releases/41/index.html b/files/fr/mozilla/firefox/releases/41/index.html new file mode 100644 index 0000000000..8ad0302211 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/41/index.html @@ -0,0 +1,198 @@ +--- +title: Firefox 41 pour développeurs +slug: Mozilla/Firefox/Versions/41 +tags: + - Firefox + - Versions +translation_of: Mozilla/Firefox/Releases/41 +--- +
{{FirefoxSidebar}}
To test the latest developer features of Firefox,
+install Firefox Developer Edition Firefox 41 was released on September 22, 2015. This article lists key changes that are useful not only for web developers, but also Firefox and Gecko developers as well as add-on developers.
+ +

Changements pour les développeurs Web

+ +

Outils pour Développeurs

+ +

Nouveautés:

+ + + +

All devtools bugs fixed between Firefox 40 and Firefox 41: note that many of these bugs, especially those relating to the performance tools, were uplifted to Firefox 40.

+ +

CSS

+ + + +

HTML

+ + + +

JavaScript

+ + + +

Interfaces/APIs/DOM

+ +

HTML Editing API

+ + + +

Events

+ + + +

Web Crypto

+ + + +

Canvas API

+ + + +

Service Workers

+ + + +

Miscellaneous

+ + + +

MathML

+ +

New default and fallback font handling

+ +

Mathematical formulas require special fonts. So far, these fonts were hard-coded in the mathml.css user agent stylesheet (which sets the font-family on {{MathMLElement("math")}} tag) and in the preference option font.mathfont-family (which sets the fallback fonts to use for stretchy and large operators). Firefox 41 introduces, an internal x-math language that is automatically set on the <math> tag as well as corresponding preference options (e.g. font.name.serif.x-math). The user agent stylesheet now sets font-family to serif on the <math> tag and the preference option font.mathfont-family is replaced with font.name.serif.x-math.  All platforms now essentially use the same list of fallback fonts, with "Latin Modern Math" as first one. The default/fallback fonts can be configured from the standard per-language font preference menu. For more details, see {{bug(947654)}} and {{bug(1160456)}}.

+ +

SVG

+ + + +

Audio/Video

+ + + +

HTTP

+ + + +

Networking

+ +

pas de changement.

+ +

Security

+ + + +

Changes for add-on and Mozilla developers

+ +

XUL

+ +

pas de changement.

+ +

JavaScript code modules

+ +

pas de changement.

+ +

XPCOM

+ +

Interfaces

+ +

pas de changement.

+ +

Other

+ +

pas de changement.

+ +

See also

+ + + +

Older versions

+ +

{{Firefox_for_developers('40')}}

diff --git a/files/fr/mozilla/firefox/releases/41/site_compatibility/index.html b/files/fr/mozilla/firefox/releases/41/site_compatibility/index.html new file mode 100644 index 0000000000..2c89135474 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/41/site_compatibility/index.html @@ -0,0 +1,13 @@ +--- +title: Compatibilité des sites avec Firefox 41 +slug: Mozilla/Firefox/Versions/41/Site_Compatibility +tags: + - Compatibilité + - Développement Web + - Firefox + - Firefox 41 + - FxSiteCompat + - Guide +translation_of: Mozilla/Firefox/Releases/41/Site_Compatibility +--- +
{{FirefoxSidebar}}

Cette page a été déplacée vers FxSiteCompat.com.

diff --git a/files/fr/mozilla/firefox/releases/5/index.html b/files/fr/mozilla/firefox/releases/5/index.html new file mode 100644 index 0000000000..18020bc53e --- /dev/null +++ b/files/fr/mozilla/firefox/releases/5/index.html @@ -0,0 +1,168 @@ +--- +title: Firefox 5 pour les développeurs +slug: Mozilla/Firefox/Versions/5 +tags: + - Firefox + - Firefox 5 +translation_of: Mozilla/Firefox/Releases/5 +--- +
{{FirefoxSidebar}}
+ +

Firefox 5, basé sur Gecko 5.0, est sorti le 21 juin 2011. Cet article fournit des informations à propos des changements qui affectent les développeurs dans cette version.

+ +

Changements pour les développeurs Web

+ +

HTML

+ + + +

Améliorations de Canvas

+ + + +

CSS

+ +
+
Animations CSS
+
Le support pour les animations CSS a été ajouté, pour l'instant il faut utilisé le préfixe -moz-.
+
+ +

DOM

+ + + +

JavaScript

+ + + +

SVG

+ + + +

HTTP

+ + + +

MathML

+ + + +

Outils pour les développeurs

+ + + +

Changements pour les développeurs de Mozilla et de modules complémentaires

+ +

Pour des conseils utiles sur la mise à jour des extensions pour Firefox 5, voir Updating add-ons for Firefox 5.

+ +
Note : Firefox 5 requiert que les composants binaires soient recompilés, comme pour toutes les versions majeures de Firefox. Pour plus de détails, voir Interfaces Binaires.
+ +

Changements dans les modules de code JavaScript

+ +

Nouveau module de code JavaScript

+ + + +

NetUtil.jsm

+ + + +

Changements dans les interfaces

+ + + +

Nouvelle interface

+ + + +

Interfaces supprimées

+ +

Les interfaces suivantes ont été supprimées car elles n'étaient plus indispensables :

+ + + +

Aide au débogage

+ + + +

API JavaScript (SpiderMonkey)

+ + + +

Changement dans le système de compilation

+ + + +

Voir également

+ +

{{Firefox_for_developers('4')}}

diff --git a/files/fr/mozilla/firefox/releases/50/index.html b/files/fr/mozilla/firefox/releases/50/index.html new file mode 100644 index 0000000000..557addb508 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/50/index.html @@ -0,0 +1,198 @@ +--- +title: Firefox 50 for developers +slug: Mozilla/Firefox/Versions/50 +translation_of: Mozilla/Firefox/Releases/50 +--- +
{{FirefoxSidebar}}

Pour tester les dernières fonctionnalités développeur de Firefox,
+ installez Firefox Edition DeveloppeurFirefox 50 a été publié le 15 November 2016. Cet article relate les changements clés utiles non seulement aux développeurs web mais aussi aux développeurs travaillant sur Firefox et Gecko, ainsi que pour les développeurs d'extensions.

+ +

Changes pour les développeurs Web

+ + + +

HTML

+ + + +

CSS

+ + + +

JavaScript

+ + + +

Developer Tools

+ + + +

All devtools bugs fixed between Firefox 49 and Firefox 50.

+ +

HTTP

+ + + +

Security

+ + + +

Networking

+ + + +

DOM

+ + + +

SVG

+ + + +

Drag and Drop API

+ + + +

Pointer Lock API

+ + + +

IndexedDB

+ + + +

Service Workers

+ + + +

WebGL

+ + + +

WebRTC

+ + + +

Web Audio API

+ + + +

Audio/Video

+ + + +

Battery API

+ + + +

Files and directories

+ + + +

See also

+ + + +

Older versions

+ +

{{Firefox_for_developers(49)}}

diff --git a/files/fr/mozilla/firefox/releases/59/index.html b/files/fr/mozilla/firefox/releases/59/index.html new file mode 100644 index 0000000000..715432166e --- /dev/null +++ b/files/fr/mozilla/firefox/releases/59/index.html @@ -0,0 +1,204 @@ +--- +title: Firefox 59 for developers +slug: Mozilla/Firefox/Versions/59 +translation_of: Mozilla/Firefox/Releases/59 +--- +
{{FirefoxSidebar}}

This article provides information about the changes in Firefox 59 that will affect developers. Firefox 59 was released on March 13, 2018.

+ +

Changes for web developers

+ +

Developer tools

+ + + +

HTML

+ +

The {{HTMLElement("textarea")}} element's {{htmlattrxref("autocomplete", "textarea")}} attribute has been implemented. This lets you enable or disable form auto-fill for the element.

+ +

CSS

+ + + +

SVG

+ +

No changes.

+ +

JavaScript

+ +

No changes.

+ +

APIs

+ +

New APIs

+ +

{{domxref("PointerEvent","PointerEvents")}} have been enabled in Firefox Desktop ({{bug(1411467)}}).

+ +

DOM

+ + + +

DOM events

+ +

The {{domxref("Event.composedPath()")}} method has been implemented ({{bug(1412775)}}).

+ +

Service workers

+ + + +

Media and WebRTC

+ + + +

Canvas and WebGL

+ +

No changes.

+ +

CSSOM

+ +

The {{domxref("CSSNamespaceRule")}} interface and its namespaceURL and prefix properties have been implemented ({{bug(1326514)}}).

+ +

HTTP

+ +

No changes.

+ +

Security

+ + + +

Plugins

+ +

No changes.

+ +

Other

+ +

No changes.

+ +

Removals from the web platform

+ +

HTML

+ +

The non-standard version parameter of the {{htmlelement("script")}} element's {{htmlattrxref("type","script")}} attribute (e.g.  type="application/javascript;version=1.8") has been removed ({{bug(1428745)}}).

+ +

CSS

+ + + +

JavaScript

+ + + +

APIs

+ + + +

SVG

+ +

Support for SMIL's accessKey feature has been removed ({{bug(1423098)}}).

+ +

Other

+ +

Support for the non-standard pcast: and feed: protocols has been removed from Firefox ({{bug(1420622)}}).

+ +

Changes for add-on and Mozilla developers

+ +

WebExtensions

+ + + +

See also

+ +

Site compatibility for Firefox 59

+ +

Older versions

+ +

{{Firefox_for_developers(58)}}

diff --git a/files/fr/mozilla/firefox/releases/6/index.html b/files/fr/mozilla/firefox/releases/6/index.html new file mode 100644 index 0000000000..2ee16dc40b --- /dev/null +++ b/files/fr/mozilla/firefox/releases/6/index.html @@ -0,0 +1,290 @@ +--- +title: Firefox 6 pour les développeurs +slug: Mozilla/Firefox/Versions/6 +tags: + - Firefox + - Firefox 6 +translation_of: Mozilla/Firefox/Releases/6 +--- +

Firefox 6, basé sur Gecko 6.0, est sorti le 16 août 2011. Cet article fournit des informations à propos des changements qui affectent les développeurs dans cette version.

+ +

Changements pour les développeurs web

+ +

HTML

+ + + +

CSS

+ +
+
-moz-text-decoration-color
+
Cette nouvelle propriété vous permet de définir la couleur utilisée par les décorations du texte, comme le soulignement, le surlignement et le texte barré.
+
-moz-text-decoration-line
+
Cette nouvelle propriété vous permet de définir le type de décorations du texte ajoutée à un élément.
+
-moz-text-decoration-style
+
Cette nouvelle propriété vous permet de définir le style de décorations du texte, comme le soulignement, le surlignement et le texte barré. Les styles incluent les simples lignes, les lignes doubles, les lignes ondulées, les lignes pointillées, etc.
+
-moz-hyphens
+
Cette nouvelle propriété vous permet de contrôler la façon dont la césure des mots lors de retours à la ligne est gérée.
+
-moz-orient
+
Une nouvelle propriété (pour l'instant spécifique à Mozilla) qui vous permet de contrôler l'orientation verticale ou horizontale de certains éléments (en particulier <progress>).
+
::-moz-progress-bar
+
Un pseudo-élément spécifique à Mozilla qui vous permet de définir le style de la zone d'un élément <progress> représentant la fraction d'une tâche.
+
+ +

Autres changements

+ + + +

DOM

+ +
+
Utilisation de media queries à partir de code
+
Vous pouvez désormais tester le résultat d'une chaîne media query en programmant la méthode window.matchMedia() et l'interface MediaQueryList.
+
Evènements tactile
+
Firefox 6 ajout le support du standard W3C sur les évènements tactile, cela facilite l'interprétation d'une ou plusieurs touches à la fois sur les surfaces tactiles comme les écrans tactiles et pavés tactiles.
+
Evènements server-sent
+
Les évènements server-sent permettent à une application Web de demander à un serveur pour envoyer des événements comme n'importe quel événement DOM localement créé.
+
+ + + +

JavaScript

+ + + +

SVG

+ + + +

MathML

+ + + +

Accessibilité (ARIA)

+ + + +

Réseau

+ +
+
WebSockets
+
Pour Firefox 6, WebSockets a été mis à jour à la version 07 du protocole. De plus, l'objet WebSocket a été renommé en MozWebSocket pour l'empêcher d'être utilisé de façon incorrecte pour détecter la disponibilité des WebSockets sans préfixe.
+
+ + + +

Autres changements

+ + + +

Changements pour les développeurs de Mozilla et de modules complémentaires

+ +

Pour des conseils utiles sur la mise à jour des extensions pour Firefox 6, voir Updating add-ons for Firefox 6.

+ +
Note: Firefox 6 requiert que les composants binaires soient recompilés, comme pour toutes les versions majeures de Firefox. Pour plus de détails, voir Interfaces Binaires.
+ +

Modules de code JavaScript

+ +

FileUtils.jsm

+ + + +

XPCOMUtils.jsm

+ + + +

XPCOM

+ + + +

Utilisation du DOM depuis le chrome

+ +
+
Utilisation de l'API DOM File dans du code chrome
+
Bien que vous avez toujours pu utiliser l'API DOM File à partir du code chrome, le constructeur File supporte désormais la spécification d'un chemin d'accès local lorsqu'il est utilisé depuis le chrome. De plus, vous pouvez également spécifier le fichier pour accéder à l'aide de l'API DOM File en utilisant un objet nsIFile.
+
+ +

Changements dans les interfaces

+ + + +

Nouvelles interfaces

+ +
+
mozIAsyncFavicons
+
Un nouveau service qui vous permet d'accéder au service favicon de façon asynchrone.
+
nsIEventSource
+
Détails à venir.
+
nsIGSettingsCollection
+
Détails à venir.
+
nsIGSettingsService
+
Détails à venir.
+
nsIHttpUpgradeListener
+
L'interface de rappel pour le traitement des demandes de mise à niveau HTTP via la méthode nsIHttpChannelInternal.HTTPUpgrade().
+
nsIStructuredCloneContainer
+
Un conteneur pour les objets qui ont été sérialisé à l'aide de l'algorithme de clonage structuré.
+
nsITelemetry
+
Implémentation du support de la télémétrie permettant d'enregistrer des données de télémétrie pour être utilisé pour présenter des histogrammes à des fins de suivi des performances. Voir bug 649502 et bug 585196.
+
nsITimedChannel
+
Voir bug 576006.
+
nsIWebSocketListener
+
Voir bug 640003.
+
nsIWebSocketProtocol
+
Voir bug 640003.
+
+ +

Interfaces supprimées

+ +

Les interfaces suivantes ont été supprimées car elles n'étaient plus indispensables :

+ + + +

Autres changements

+ +
+
Utilisation des préférences à partir du code d'application
+
Une nouvelle API statique est disponible pour accéder facilement aux préférences, ce n'est disponible que pour le code d'application et ne peut pas être utilisé par les modules complémentaires.
+
+ +

Voir également

+ +
+ +
diff --git a/files/fr/mozilla/firefox/releases/63/index.html b/files/fr/mozilla/firefox/releases/63/index.html new file mode 100644 index 0000000000..06ad714a2a --- /dev/null +++ b/files/fr/mozilla/firefox/releases/63/index.html @@ -0,0 +1,275 @@ +--- +title: Firefox 63 for developers +slug: Mozilla/Firefox/Versions/63 +tags: + - '63' + - Firefox + - Mise à jour + - Mozilla +translation_of: Mozilla/Firefox/Releases/63 +--- +
{{FirefoxSidebar}}
+ +

Cet article fournit des informations à propos des changements dans Firefox 63 qui affecteront les développeurs. Firefox 63 a été publié le 23 octobre 2018.

+ +

Changements pour les développeurs web

+ +

Outils de développeurs

+ + + +

HTML

+ + + +

Suppressions

+ + + +

CSS

+ + + +

Suppressions

+ + + +

SVG

+ +

Aucun changement.

+ +

JavaScript

+ + + +

Suppressions

+ + + +

APIs

+ +

Nouvelles APIs

+ + + +

DOM

+ + + +

Evénements du DOM

+ + + +

Media, Web Audio, et WebRTC

+ + + +

Canvas et WebGL

+ + + +

Suppressions

+ + + +

CSSOM

+ +

Aucun changement.

+ +

HTTP

+ + + +

Sécurité

+ + + +

Plugins

+ +

Aucun changement.

+ +

Conformités WebDriver (Marionette)

+ +

Nouvelles fonctionnalités

+ + + +

Changements API

+ + + +

Corrections de bugs

+ + + +

Autre

+ + + +

Changements des add-on développeurs

+ +

Changements API

+ +

Thèmes

+ + + +

Recherche

+ + + +

Onglets

+ + + + + + + +

Autre

+ + + +

Voir aussi

+ + + +

Anciennes versions

+ +

{{Firefox_for_developers(62)}}

diff --git a/files/fr/mozilla/firefox/releases/65/index.html b/files/fr/mozilla/firefox/releases/65/index.html new file mode 100644 index 0000000000..98979a74b9 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/65/index.html @@ -0,0 +1,249 @@ +--- +title: Firefox 65 pour développeurs +slug: Mozilla/Firefox/Versions/65 +translation_of: Mozilla/Firefox/Releases/65 +--- +
{{FirefoxSidebar}}
+ +

Cet article fournit des informations au sujet de changements introduits dans Firefox 65 qui vont concerner les développeurs. Firefox 65 a été publié le 29 janvier 2019.

+ +

Changes for web developers

+ +

Outils de développement

+ + + +

HTML

+ + + +

CSS

+ + + +

Removals

+ + + +

SVG

+ +

No changes.

+ +

JavaScript

+ + + +

APIs

+ +

New APIs

+ + + +

DOM

+ + + +

DOM events

+ + + +

Web workers

+ + + +

Fetch and Service workers

+ + + +

Media, Web Audio, and WebRTC

+ + + +

Canvas and WebGL

+ + + +

Removals

+ + + +

Security

+ + + +

Networking

+ +

No changes.

+ +

Plugins

+ +

No changes.

+ +

WebDriver conformance (Marionette)

+ +

API changes

+ + + +

Bug fixes

+ + + +

Others

+ + + +

Other

+ + + +

Changes for add-on developers

+ +

API changes

+ + + +

Tabs

+ + + +

Manifest changes

+ +

No changes.

+ +

Other

+ + + +

See also

+ + + +

Older versions

+ +

{{Firefox_for_developers(65)}}

diff --git a/files/fr/mozilla/firefox/releases/68/index.html b/files/fr/mozilla/firefox/releases/68/index.html new file mode 100644 index 0000000000..037d582ad8 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/68/index.html @@ -0,0 +1,245 @@ +--- +title: Firefox 68 pour développeurs +slug: Mozilla/Firefox/Versions/68 +tags: + - '68' + - FRANCAIS + - Firefox + - Mozilla + - Release +translation_of: Mozilla/Firefox/Releases/68 +--- +

{{FirefoxSidebar}}

+ +

Cet article fournit des informations à destination des développeurs à propos des changements dans Firefox 68. Firefox 68 a été lancée le 9 Juillet 2019.

+ +

Changements pour développeurs web

+ +

Outils développeur

+ + + + + +

Le débuggeur JavaScript

+ + + +

Le moniteur réseau

+ + + +

L'inspecteur de styles et du DOM

+ + + +

Storage inspector

+ + + +

Other

+ + + +

Removals

+ + + +

HTML

+ + + +

 Removals

+ + + +

CSS

+ + + +

Removals

+ + + +

SVG

+ +

No changes.

+ +

JavaScript

+ + + +

APIs

+ +

CSS Object Model (CSSOM)

+ + + +

DOM

+ + + +

DOM events

+ + + +

Media, Web Audio, and WebRTC

+ + + +

Removals

+ + + +

HTTP

+ + + +

Removals

+ + + +

Security

+ + + +

WebDriver conformance (Marionette)

+ +

Bug fixes

+ + + +

Other

+ + + +

Plugins

+ +

No changes.

+ +

Changes for add-on developers

+ +

API changes

+ + + +

Manifest changes

+ +

No changes.

+ +

See also

+ + + +

Older versions

+ +

{{Firefox_for_developers(67)}}

diff --git a/files/fr/mozilla/firefox/releases/69/index.html b/files/fr/mozilla/firefox/releases/69/index.html new file mode 100644 index 0000000000..5a5ad086a5 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/69/index.html @@ -0,0 +1,139 @@ +--- +title: Firefox 69 for developers +slug: Mozilla/Firefox/Versions/69 +translation_of: Mozilla/Firefox/Releases/69 +--- +

{{FirefoxSidebar}}{{Draft}}

+ +

This article provides information about the changes in Firefox 69 that will affect developers. Firefox 69 is the current Beta version of Firefox, and will ship on September 3, 2019.

+ +

Changes for web developers

+ +

Developer tools

+ + + +

Removals

+ +

HTML

+ + + +

 Removals

+ + + +

CSS

+ + + +

Removals

+ +

SVG

+ + + +

Removals

+ +

JavaScript

+ + + +

Removals

+ +

HTTP

+ + + +

APIs

+ +

No changes.

+ +

New APIs

+ +

DOM

+ + + +

DOM events

+ +

Service workers

+ +

Media, Web Audio, and WebRTC

+ + + +

Canvas and WebGL

+ +

Removals

+ +

Security

+ +

No changes.

+ +

Removals

+ +

Plugins

+ +

No changes.

+ +

Removals

+ +

Other

+ +

No changes.

+ +

Removals

+ +

Changes for add-on developers

+ +

API changes

+ +

No changes.

+ +

Removals

+ +

Manifest changes

+ +

No changes.

+ +

Removals

+ +

See also

+ + + +

Older versions

+ +

{{Firefox_for_developers(68)}}

diff --git a/files/fr/mozilla/firefox/releases/7/index.html b/files/fr/mozilla/firefox/releases/7/index.html new file mode 100644 index 0000000000..16936f3f8d --- /dev/null +++ b/files/fr/mozilla/firefox/releases/7/index.html @@ -0,0 +1,239 @@ +--- +title: Firefox 7 pour les développeurs +slug: Mozilla/Firefox/Versions/7 +tags: + - Firefox + - Firefox 7 +translation_of: Mozilla/Firefox/Releases/7 +--- +
{{FirefoxSidebar}}

Firefox 7, basé sur Gecko 7.0, est sorti le 27 september 2011. Cet article fournit des informations à propos des changements qui affectent les développeurs dans cette version.

+ +

Changements pour les développeurs Web

+ +

HTML

+ + + +

Canvas

+ + + +

CSS

+ + + +

MathML

+ + + +

DOM

+ + + +

JavaScript

+ + + +

WebSockets

+ + + +

Console API

+ + + +
+

Web timing

+ + + +

XML

+ + +
+ +

Changements pour les développeurs de Mozilla et de modules complémentaires

+ +

Ces changements affectent les développeurs d'extensions ainsi que les développeurs qui travaillent sur ​​ou avec le code de Mozilla lui-même. Les developpeurs d'extensions doivent voir Updating extensions for Firefox 7 pour plus d'informations.

+ +
Note: Firefox 7 requiert que les composants binaires soient recompilés, comme pour toutes les versions majeures de Firefox. Pour plus de détails, voir Interfaces Binaires.
+ +

Modules de code JavaScript

+ +

FileUtils.jsm

+ + + +

AddonManager.jsm

+ + + +

XUL

+ + + +

XPCOM

+ + + +

Rapporteur de mémoire

+ +

Ajout du support pour le multi-reporters, c'est le rapporteur de mémoire qui rassemble des données sur demande et effectue un rappel pour chaque résultat généré. Voir {{interface("nsIMemoryMultiReporter")}} et {{interface("nsIMemoryMultiReporterCallback")}} pour les interfaces nécessaires, ainsi que les méthodes {{ifmethod("nsIMemoryReporterManager", "registerMultiReporter")}} et {{ifmethod("nsIMemoryReporterManager", "unregisterMultiReporter")}}.

+ +

Changements de l'expérience utilisateur

+ + + +

Changements dans le système de compilation

+ + + +

Changements dans les interfaces

+ + + +

Nouvelles interfaces

+ +
+
{{interface("nsIDOMFontFace")}}
+
Décrit une seule police de caractères.
+
{{interface("nsIDOMFontFaceList")}}
+
Décrit une liste de polices de caractères, chacune représentée par {{interface("nsIDOMFontFace")}}.
+
+ +

Interfaces supprimées

+ +

Les interfaces suivantes ont été supprimées car elles n'étaient plus indispensables :

+ + + +

Les interfaces suivantes ont été supprimées dans le cadre du retrait de l'API ActiveX :

+ + + +

Autres changements

+ + + +

Voir également

+ +

{{Firefox_for_developers('6')}}

diff --git a/files/fr/mozilla/firefox/releases/70/index.html b/files/fr/mozilla/firefox/releases/70/index.html new file mode 100644 index 0000000000..e104829d70 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/70/index.html @@ -0,0 +1,111 @@ +--- +title: Firefox 70 for developers +slug: Mozilla/Firefox/Versions/70 +translation_of: Mozilla/Firefox/Releases/70 +--- +

{{FirefoxSidebar}}{{Draft}}

+ +

This article provides information about the changes in Firefox 70 that will affect developers. Firefox 70 is the current Nightly version of Firefox, and will ship on October 22, 2019.

+ +

Changes for web developers

+ +

Developer tools

+ + + +

Removals

+ +

HTML

+ +

No changes.

+ +

 Removals

+ +

CSS

+ + + +

Removals

+ +

SVG

+ +

No changes.

+ +

Removals

+ +

JavaScript

+ + + +

Removals

+ +

APIs

+ +

New APIs

+ +

DOM

+ + + +

DOM events

+ +

Service workers

+ +

Media, Web Audio, and WebRTC

+ +

Canvas and WebGL

+ +

Removals

+ +

Security

+ +

No changes.

+ +

Removals

+ +

Plugins

+ +

No changes.

+ +

Removals

+ +

Other

+ +

No changes.

+ +

Removals

+ +

Changes for add-on developers

+ +

API changes

+ +

No changes.

+ +

Removals

+ +

Manifest changes

+ +

No changes.

+ +

Removals

+ +

See also

+ + + +

Older versions

+ +

{{Firefox_for_developers(69)}}

diff --git a/files/fr/mozilla/firefox/releases/76/index.html b/files/fr/mozilla/firefox/releases/76/index.html new file mode 100644 index 0000000000..efa1538412 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/76/index.html @@ -0,0 +1,114 @@ +--- +title: Firefox 76 for developers +slug: Mozilla/Firefox/Versions/76 +tags: + - '76' + - Firefox + - Mozilla + - Release +translation_of: Mozilla/Firefox/Releases/76 +--- +

{{FirefoxSidebar}}

+ +

Cet article fournit des informations sur les modifications apportées à Firefox 76 qui affecteront les développeurs. Firefox 76 a été publié le 5 Mai 2020.

+ +

Voir aussi le post d'accompagnement du blog hacks — Firefox 76: Audio worklets and other tricks.

+ +

Changements pour les développeurs web

+ +

Outils pour les développeurs

+ +

Débogueur

+ + + +

Moniteur de réseau

+ + + +

Console web

+ + + +

Débogage à distance

+ + + +

HTML

+ + + +

CSS

+ + + +

SVG

+ +

No changes.

+ +

JavaScript

+ + + +

APIs

+ +

Nouvelles APIs

+ + + +

DOM

+ + + +

Suppressions

+ + + +

HTTP

+ +

Aucun changements.

+ +

Sécurité

+ +

Aucun changements.

+ +

Changements pour les développeurs de modules complémentaires

+ +

Aucun changements.

+ +

Voir aussi

+ + + +

Anciennes versions

+ +

{{Firefox_for_developers(75)}}

diff --git a/files/fr/mozilla/firefox/releases/77/index.html b/files/fr/mozilla/firefox/releases/77/index.html new file mode 100644 index 0000000000..073ca22e4b --- /dev/null +++ b/files/fr/mozilla/firefox/releases/77/index.html @@ -0,0 +1,117 @@ +--- +title: Firefox 77 for developers +slug: Mozilla/Firefox/Versions/77 +tags: + - '77' + - Firefox + - Mozilla + - Sorties +translation_of: Mozilla/Firefox/Releases/77 +--- +

{{FirefoxSidebar}}{{Draft}}

+ +

Cet article fournit des informations sur les modifications apportées à Firefox 77 qui affecteront les développeurs. Firefox 77 est l'actuel version de Firefox Bêta, et sera livrée le 2 Juin 2020.

+ +

Changements pour les développeurs web

+ +

Outils pour les développeurs

+ +

Aucun changement.

+ +

Suppressions

+ +

HTML

+ +

Aucun changement.

+ +

 Suppressions

+ +

CSS

+ +

Aucun changement.

+ +

 Suppressions

+ +

SVG

+ +

Aucun changement.

+ +

Suppressions

+ +

JavaScript

+ +

Aucun changement.

+ +

APIs

+ +

Nouvelles APIs

+ +

DOM

+ +

Événements DOM

+ +

Service workers

+ +

Médias, Web Audio et WebRTC

+ +

Canevas et WebGL

+ +

Suppressions

+ +

HTTP

+ +

Aucun changement.

+ +

Securité

+ +

Aucun changement.

+ +

Suppressions

+ +

Plugins

+ +

Aucun changement.

+ +

Suppressions

+ +

Securité

+ +

Enlèvements

+ +

Autres

+ +

Aucun changement.

+ +

Suppressions

+ +

Changements pour les développeurs de modules complémentaires

+ +

Modifications de l'API

+ +

Aucun changement.

+ +

Suppressions

+ +

Changements manifestes

+ + + +

Suppressions

+ +

Autres

+ + + +

Voir aussi

+ + + +

Anciennes versions

+ +

{{Firefox_for_developers(76)}}

diff --git a/files/fr/mozilla/firefox/releases/8/index.html b/files/fr/mozilla/firefox/releases/8/index.html new file mode 100644 index 0000000000..b1e7b31fa7 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/8/index.html @@ -0,0 +1,255 @@ +--- +title: Firefox 8 pour les développeurs +slug: Mozilla/Firefox/Versions/8 +tags: + - Firefox + - Firefox 8 +translation_of: Mozilla/Firefox/Releases/8 +--- +

Firefox 8, basé sur Gecko 8.0, est sorti le 8 novembre 2011. Cet article fournit des informations à la fois pour les developpeurs Web et pour les développeurs d'extensions et de projets liés à Mozilla pour aider à tirer pleinement parti des fonctionnalités de cette version.

+ +

Changements pour les développeurs Web

+ +

HTML

+ + + +

DOM

+ + + +

JavaScript

+ + + +

CSS

+ + + +

Réseau

+ + + +

WebSockets

+ + + +

WebGL

+ + + +

MathML

+ + + +

Outils de développement

+ + + +

Changements pour les développeurs de Mozilla et de modules complémentaires

+ +

Voir Updating add-ons for Firefox 8 pour vous guidez dans les modifications que vous êtes susceptibles d'avoir à faire pour rendre vos extensions compatibles avec Firefox 8.

+ +
Note: Firefox 8 requiert que les composants binaires soient recompilés, comme pour toutes les versions majeures de Firefox. Pour plus de détails, voir Interfaces Binaires.
+ +

XPCOM

+ +
+
Components.utils
+
Les nouvelles méthodes Components.utils.createObjectIn() et Components.utils.makeObjectPropsNormal() ont été créées pour faciliter la création d'objets dans des compartiments spécifiques.
+
+ +

Autres changements relatifs à XPCOM

+ + + +

Workers

+ +

Il n'est plus possible d'accéder à des objets XPCOM depuis ChromeWorkers. XPConnect a été désactivé dans le contexte des travailleurs comme indiqué par le bug 649537.

+ +

XUL

+ + + +

Changements dans le système de compilation

+ + + +

Enregistrement du chrome

+ + + +

Changements dans les interfaces

+ + + +

Interfaces supprimées

+ +

Les interfaces suivantes ont été supprimées car elles n'étaient plus indispensables :

+ + + +

L'interface nsIWorkerFactory a également été retirée. WLes travailleurs peuvent encore être créés à l'aide des constructeurs Worker et ChromeWorker.

+ +

Autres changements

+ + + +

Voir également

+ +
+ +
diff --git a/files/fr/mozilla/firefox/releases/9/index.html b/files/fr/mozilla/firefox/releases/9/index.html new file mode 100644 index 0000000000..3ee33465b7 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/9/index.html @@ -0,0 +1,233 @@ +--- +title: Firefox 9 pour les développeurs +slug: Mozilla/Firefox/Versions/9 +tags: + - Firefox + - Firefox 9 +translation_of: Mozilla/Firefox/Releases/9 +--- +
+ +

Firefox 9, basé sur Gecko 9.0, est sorti le 20 décembre 2011 sur Windows. La version 9.0.1, qui corrige un problème de plantage découvert au dernier moment, est sortie le 21 décembre 2011, sur Mac et Linux.

+ +

Changements pour les développeurs Web

+ +

HTML

+ + + +

CSS

+ + + +

DOM

+ +
+
Utilisation du mode plein écran
+
La nouvelle API pour le plein écran offre un moyen de présenter le contenu en utilisant la totalité de l'écran, sans l'interface du navigateur. C'est très bien pour les vidéos et les jeux. Cette API est encore expérimentale et préfixée.
+
+ + + +

Workers

+ + + +

WebGL

+ + + +

MathML

+ + + +

Réseau

+ + + +

Outils de développement

+ + + +

Changements pour les développeurs de Mozilla et de modules complémentaires

+ +

Voir Updating add-ons for Firefox 9 pour un aperçu des modifications que vous devriez apporter pour rendre vos extensions compatibles avec Firefox 9.

+ +

XUL

+ + + +

Changements dans le module de code JavaScript

+ + + +

Changement dans le service

+ + + +

NSPR

+ + + +

Changements dans les interfaces

+ +

Interface supprimée

+ + + +

Divers changements dans les interfaces

+ + + +

Parseur IDL

+ +

Le parseur IDL ne supporte plus la notion de pointeurs unique qui n'a jamais été entièrement implémentée.

+ +

Changements dans le système de compilation

+ + + +

Autres changements

+ + + +

Voir également

+ +
+ +
diff --git a/files/fr/mozilla/firefox/releases/index.html b/files/fr/mozilla/firefox/releases/index.html new file mode 100644 index 0000000000..711c761192 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/index.html @@ -0,0 +1,13 @@ +--- +title: Notes de version Firefox pour développeurs +slug: Mozilla/Firefox/Versions +tags: + - Firefox + - TopicStub +translation_of: Mozilla/Firefox/Releases +--- +
{{FirefoxSidebar}}
+ +

Cette page regroupe les liens vers les articles « Firefox X pour les développeurs » pour chacune des versions de Firefox. Ces notes vous permettent de connaître quelles fonctions ont été ajoutées et les bogues éliminées à chacune des versions de Firefox.

+ +
{{ListSubpages("",1,0,1)}}
diff --git a/files/fr/mozilla/firefox/versions/1.5/index.html b/files/fr/mozilla/firefox/versions/1.5/index.html deleted file mode 100644 index 84f17d122f..0000000000 --- a/files/fr/mozilla/firefox/versions/1.5/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: Firefox 1.5 pour les développeurs -slug: Mozilla/Firefox/Versions/1.5 -tags: - - Firefox - - Firefox 1.5 -translation_of: Mozilla/Firefox/Releases/1.5 ---- -
{{FirefoxSidebar}}

Firefox 1.5, basé sur le moteur Gecko 1.8, améliore son support des standards déjà de premier ordre et fournit de nouvelles opportunités de créer la prochaine génération d'applications Web. Firefox 1.5 propose un support amélioré de CSS2 et CSS3, des API pour des graphiques 2D scriptables et programmables grâce à SVG 1.1 et <canvas>, les évènements XForms et XML, ainsi que de nombreuses améliorations du DHTML, du JavaScript et du DOM.

- -

Outils pour développeurs

- -

Plusieurs outils et extensions sont disponibles pour aider les développeurs à travailler avec Firefox 1.5.

- - - -

Note : Certaines extensions ne sont pas encore supportées par Firefox 1.5 et seront automatiquement désactivées.

- -

Fonctionnalités

- -

Voici certaines des nouvelles fonctionnalités de Firefox 1.5 :

- -

Site Web et développeurs d'applications

- -
-
Introduction à SVG dans HTML
-
Apprenez à utiliser le SVG dans des pages XHTML et comment JavaScript et CSS sont utilisés pour manipuler une image comme vous le feriez avec le XHTML dans un script. Voir également SVG dans Firefox pour connaître l'état et les problèmes connus de l'implémentation du SVG dans la version 1.5.
-
- -
-
Dessiner avec canvas
-
Apprenez à utiliser la nouvelle balise <canvas> et comment dessiner des graphiques et d'autres objets dans Firefox.
-
- -
-
Colonnes CSS3
-
Apprenez à utiliser le nouveau support de mise en page multi-colonnes automatiques comme proposé par CSS3.
-
- -
-
Utilisation du cache de Firefox 1.5
-
Découvrez bfcache et comment il accélère la navigation en arrière et en avant.
-
- -

XUL et développeurs d'extension

- -
-
Construire une extension
-
Ce tutoriel vous guidera par étape dans la création d'une extension très simple pour Firefox. Consultez également un autre tutoriel sur la base de connaissance de MozillaZine qui montre comment il est encore plus simple de créer une nouvelle extension avec les nouvelles fonctionnalités du gestionnaire d'extensions dans 1.5.
-
- -
-
XPCNativeWrapper
-
XPCNativeWrapper est un moyen pour empaqueter un objet afin qu'il puisse accéder à des privilèges chrome. Il peut être utilisé dans toutes les versions de Firefox bien que son comportement soit sensiblement différent au lancement de Firefox 1.5 (Gecko 1.8).
-
- -
-
Système de préférences
-
Apprenez à utiliser les nouveaux composants graphiques qui vous permettront de créer des fenêtres d'options plus facilement en utilisant moins de code JavaScript.
-
- -
-
Caractères internationaux dans du JavaScript XUL
-
Les fichiers JavaScript XUL peuvent maintenant contenir des caractères non-ASCII.
-
- -
-
Modifications de l'API Tree
-
Les interfaces pour accéder aux éléments XUL <tree> ont été modifiées.
-
- -
-
Modifications XUL pour Firefox 1.5
-
Résumé des modifications du XUL. Consultez également Adaptation des applications XUL pour Firefox 1.5.
-
- -

Nouvelles fonctionnalités pour l'utilisateur

- -

Utilisation courante

- - - -

Sécurité et vie privée

- - - -

Support des standards Web ouverts

- -

Le support des standards Web de Firefox garde une longueur d'avance avec des implémentations fonctionnelles et multiplateformes pour :

- - - -

Firefox 1.5 supporte un bon nombre de protocoles de transport de données (HTTP, FTP, SSL, TLS et d'autres), les caractères multi-langages (Unicode), plusieurs formats graphiques (GIF, JPEG, PNG, SVG et d'autres) et la dernière version du langage de script le plus populaire au monde, JavaScript 1.6.

- -

Changements depuis Firefox 1.0

- -

De nombreux changements ont été introduits dans Firefox depuis sa première sortie le 9 novembre 2004. Firefox a progressé avec beaucoup de nouvelles fonctions et de corrections de bogues. Une liste détaillée des modifications est disponible sur squarefree.com.

diff --git a/files/fr/mozilla/firefox/versions/11/index.html b/files/fr/mozilla/firefox/versions/11/index.html deleted file mode 100644 index bc1d161fbd..0000000000 --- a/files/fr/mozilla/firefox/versions/11/index.html +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: Firefox 11 pour les développeurs -slug: Mozilla/Firefox/Versions/11 -tags: - - Firefox - - Firefox 11 -translation_of: Mozilla/Firefox/Releases/11 ---- -
{{FirefoxSidebar}}

Firefox 11, basé sur Gecko 11.0, est sorti le 13 mars 2012. Cet article fournit des informations sur les nouvelles fonctionnalités et les principaux bugs corrigés, ainsi que des liens vers une documentation plus détaillée pour les développeurs web et d'extensions.

- -

Changements pour les développeurs Web

- -

HTML

- - - -

DOM

- - - -

CSS

- - - -

SVG

- - - -

WebSocket

- - - -

IndexedDB

- - - -

Réseau

- - - -

Outils de développement

- - - -

Changements pour les développeurs de Mozilla et de modules complémentaires

- -

Module de code JavaScript

- -

NetUtil.jsm

- - - -

Nouveau module de code JavaScript

- -
-
source-editor.jsm
-
Offre un moyen pratique facile d'éditeur de code source que vous pouvez utiliser dans vos add-ons. C'est le même éditeur utilisé par l'Ardoise et les autres outils de développement intégrés dans Firefox.
-
- -

Changements dans les interfaces

- - - -

Interface supprimées

- -

Les interfaces suivantes ont été supprimées car elles n'étaient plus indispensables :

- - - -

Changement lié au thème

- - - -

Changement dans les préférences

- -
-
{{Pref("ui.tooltipDelay")}}
-
Définit le délai, en millisecondes, entre le moment où le curseur de la souris s'arrête et l'affichage d'une info-bulle.
-
- -

Changement dans le système de compilation

- - - -

Autre changement

- - - -

Voir également

- -

{{Firefox_for_developers('10')}}

diff --git a/files/fr/mozilla/firefox/versions/12/index.html b/files/fr/mozilla/firefox/versions/12/index.html deleted file mode 100644 index dbb7811cb7..0000000000 --- a/files/fr/mozilla/firefox/versions/12/index.html +++ /dev/null @@ -1,162 +0,0 @@ ---- -title: Firefox 12 pour les développeurs -slug: Mozilla/Firefox/Versions/12 -tags: - - Firefox - - Firefox 12 -translation_of: Mozilla/Firefox/Releases/12 ---- -
{{FirefoxSidebar}}
- -

Firefox 12, basé sur Gecko 12.0, est sorti le 24 avril 2012. Cette page résume les principaux changements dans Firefox 12 qui sont utiles aux développeurs.

- -

Changements pour les développeurs Web

- -

HTML

- - - -

CSS

- - - -

JavaScript

- - - -

DOM

- - - -

Nouvelles WebAPIs

- - - -

SVG

- - - -

MathML

- - - -

Réseau

- - - -

Outils de développement

- - - -

Mozilla travaille sur l'intégration des ses propres outils de développement Web qui complètent l'add-on populaire Firebug. Vous pouvez obtenir plus d'informations sur ces outils et également voir une liste de ressources externes à Firefox qui vous aideront dans le développement Web. La liste se trouve dans les outils de développement Web.

- -

Changements divers

- - - -

Changements pour les développeurs de Mozilla et de modules complémentaires

- -

Modules de code JavaScript

- -

source-editor.jsm

- - - -

XUL

- - - -

XPCOM

- - - -

XPConnect

- - - -

Changements dans les interfaces

- - - -

SpiderMonkey

- - - -

Compilation

- - - -

Autres changements

- - - -

Voir également

- -

{{Firefox_for_developers('11')}}

diff --git a/files/fr/mozilla/firefox/versions/13/index.html b/files/fr/mozilla/firefox/versions/13/index.html deleted file mode 100644 index df1af7aca1..0000000000 --- a/files/fr/mozilla/firefox/versions/13/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: Firefox 13 pour les développeurs -slug: Mozilla/Firefox/Versions/13 -tags: - - Firefox - - Firefox 13 -translation_of: Mozilla/Firefox/Releases/13 ---- -
{{FirefoxSidebar}}

Firefox 13, basé sur Gecko 13.0, est sorti le 5 juin 2012. Cette page résume les principaux changements dans Firefox 13 qui sont utiles aux développeurs.

- -

Changements pour les développeurs Web

- -

HTML

- - - -

CSS

- - - -

JavaScript

- - - -

DOM

- - - -

UA string

- - - -

SVG

- - - -

WebGL

- - - -

MathML

- - - -

Réseau

- - - -

Outils de développement

- -

Amélioration de la vue 3D

- - - -

Améliorations du panneau de style

- - - -

Amélioration de l'Ardoise

- - - -

Changements pour les développeurs de Mozilla et de modules complémentaires

- -

Note de compatibilité

- -

A partir de Firefox 13, Firefox pour Windows requiert au minimum Windows XP Service Pack 2, il ne pourra plus s'exécuter sur Windows 2000 ou les versions antérieures de Windows XP.

- -

Modules de code JavaScript

- -

source-editor.jsm

- - - -

ARIA

- - - -

Interfaces

- - - -

Voir également

- -

{{Firefox_for_developers('12')}}

diff --git a/files/fr/mozilla/firefox/versions/15/index.html b/files/fr/mozilla/firefox/versions/15/index.html deleted file mode 100644 index e4ed3d90ea..0000000000 --- a/files/fr/mozilla/firefox/versions/15/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: Firefox 15 pour les développeurs -slug: Mozilla/Firefox/Versions/15 -tags: - - Firefox - - Firefox 15 -translation_of: Mozilla/Firefox/Releases/15 ---- -
{{FirefoxSidebar}}

Firefox 15, basé sur Gecko 15.0, est sorti le 28 août 2012. Cette page résume les principaux changements dans Firefox 15 qui sont utiles aux développeurs.

- -

Changements pour les développeurs Web

- -

HTML

- - - -

CSS

- - - -

DOM

- - - -

JavaScript

- - - -

WebGL

- - - -

MathML

- - - -

Réseau

- - - -

Changements pour les développeurs de Mozilla et de modules complémentaires

- -

Changements dans les interfaces

- -
-
{{interface("nsIDOMWindowUtils")}}
-
aModifiers de sendMouseEvent(), sendTouchEvent(), sendMouseEventToWindow(), sendMouseScrollEvent() et sendKeyEvent() supporte toutes les touches de modification qui sont supportées par KeyboardEvent.getModifierState(). Utiliser les valeurs MODIFIER_*. Et désormais le 5ème paramètre de sendKeyEvent() est changé d'un boolean vers un unsigned long. Pour la compatibilité ascendante, si l'appelant passe true ou false, le comportement n'est pas changé. Ce changement permet aux appelants d'indiquer l'emplacement de la touche.
-
{{interface("nsIBrowserHistory")}}
-
La méthode hidePage() n'a jamais été implémentée, et a été entièrement supprimée dans cette version. La méthode addPageWithDetails() a également été supprimée dans le cadre des travaux pour faire une API Places asynchrone ; à la place, utilisez plutôt {{ifmethod("mozIAsyncHistory", "updatePlaces")}}. De plus, l'attribut count a été retiré, il ne renvoyé pas un comptage réel à certain moment (à la place, il indiqué simplement si les entrées existées). Vous pouvez utiliser à la place {{ifattribute("nsINavHistoryService", "hasHistoryEntries")}}.
-
- -
-
{{interface("inIDOMUtils")}}
-
La méthode parseStyleSheet() permet d'ajouter et d'analyser des feuilles de style.
-
- -

Nouvelles interfaces

- -
-
{{interface("nsISpeculativeConnect")}}
-
Fournit un moyen de suggérer la couche réseau que vous allez être susceptibles de demander l'ouverture d'une connexion à un URI donné dans un futur proche. Cela permet à la couche réseau d'entamer le processus, qui a parfois une forte latence, d'ouvrir une nouvelle connexion réseau à l'avance.
-
- -

Interfaces supprimées

- -

Les interfaces suivantes ont été supprimées.

- - - -

Voir également

- -

{{Firefox_for_developers('14')}}

diff --git a/files/fr/mozilla/firefox/versions/16/index.html b/files/fr/mozilla/firefox/versions/16/index.html deleted file mode 100644 index 0d9335ab6b..0000000000 --- a/files/fr/mozilla/firefox/versions/16/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: Firefox 16 pour les développeurs -slug: Mozilla/Firefox/Versions/16 -tags: - - Firefox - - Firefox 16 -translation_of: Mozilla/Firefox/Releases/16 ---- -
{{FirefoxSidebar}}

Firefox 16, basé sur Gecko 16.0, est sorti le 9 octobre 2012. Cette page résume les principaux changements dans Firefox 15 qui sont utiles aux développeurs.

- -

Changements pour les développeurs Web

- -

HTML

- - - -

CSS

- - - -

DOM

- - - -

JavaScript

- - - -

MathML

- - - -

Outils de développement

- - - -

Changements pour les développeurs de Mozilla et de modules complémentaires

- -

Changements dans les interfaces

- -

{{interface("nsIPrivateDOMEvent")}} a été fusionné dans {{interface("nsIDOMEvent")}}. ({{bug("761613")}})

- -

Nouvelles interfaces

- -

Interfaces supprimées

- -

Les interfaces suivantes ont été supprimées.

- -

Voir également

- -

{{Firefox_for_developers('15')}}

diff --git a/files/fr/mozilla/firefox/versions/17/index.html b/files/fr/mozilla/firefox/versions/17/index.html deleted file mode 100644 index b8c77bfa66..0000000000 --- a/files/fr/mozilla/firefox/versions/17/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: Firefox 17 pour les développeurs -slug: Mozilla/Firefox/Versions/17 -tags: - - Firefox - - Firefox 17 -translation_of: Mozilla/Firefox/Releases/17 ---- -
{{FirefoxSidebar}}
- -

Firefox 17, basé sur Gecko 17.0, est sorti le 20 novembre 2012. Cette page résume les principaux changements dans Firefox 17 qui sont utiles aux développeurs.

- -

Changements pour les développeurs Web

- -

HTML

- - - -

CSS

- - - -

DOM

- - - - -

JavaScript

- - - -

MathML

- - - -

XUL

- - - -

Agent Utilisateur

- -

La partie de Gecko sur la chaine de l'agent utilisateur a changée. La date de compilation (qui n’avait pas été mise à jour depuis 2010) a été retirée, et c'est le numéro de version de Gecko qui a été mis en place. Donc Gecko/20100101 -> Gecko/17.0. Cela peut vous affecter si vous faites du reniflement.

- -

Changements pour les développeurs de Mozilla et de modules complémentaires

- -

Changements dans les interfaces

- -
-
{{interface("nsIInputStream")}}
-
La méthode available() retourne une longueur de 64-bit au lieu de 32-bit. ({{bug(215450)}})
-
{{interface("nsIDOMWindowUtils")}}
-
La méthode sendMouseScrollEvent() a été remplacée par sendWheelEvent(). ({{bug(719320)}})
-
{{interface("nsIFilePicker")}}
-
La méthode open(), pour ouvrir la boîte de dialogue d'un fichier de façon asynchrone, a été ajoutée et la méthode show() a été dépréciée. ({{bug("731307")}})
-
{{interface("nsIScriptSecurityManager")}}
-
Les méthodes checkLoadURIStr() et checkLoadURI() ont été retirées. ({{bug(327244)}})
-
{{interface("nsIRefreshURI")}}
-
La méthode setupRefreshURIFromHeader() a un paramètre principal en plus.
-
- -

Voir également

- -

{{Firefox_for_developers('16')}}

diff --git a/files/fr/mozilla/firefox/versions/17/site_compatibility/index.html b/files/fr/mozilla/firefox/versions/17/site_compatibility/index.html deleted file mode 100644 index 5f4d2359da..0000000000 --- a/files/fr/mozilla/firefox/versions/17/site_compatibility/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Compatibilité des sites avec Firefox 17 -slug: Mozilla/Firefox/Versions/17/Site_compatibility -tags: - - Compatibilité - - Développement Web - - Firefox - - Firefox 17 - - FxSiteCompat -translation_of: Mozilla/Firefox/Releases/17/Site_compatibility ---- -
{{FirefoxSidebar}}

Cette page a été déplacée vers FxSiteCompat.com.

diff --git a/files/fr/mozilla/firefox/versions/18/index.html b/files/fr/mozilla/firefox/versions/18/index.html deleted file mode 100644 index 7ed2e61e84..0000000000 --- a/files/fr/mozilla/firefox/versions/18/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: Firefox 18 pour les développeurs -slug: Mozilla/Firefox/Versions/18 -tags: - - Firefox - - Firefox 18 -translation_of: Mozilla/Firefox/Releases/18 ---- -
{{FirefoxSidebar}}

Firefox 18, basé sur Gecko 18.0, est sorti le 8 janvier 2013. Cette page résume les principaux changements dans Firefox 18 qui sont utiles aux développeurs.

- -

Changements pour les développeurs Web

- -

HTML

- - - -

CSS

- - - -

DOM

- - - -

JavaScript

- - - -

Réseau

- - - -

Changements pour les développeurs de Mozilla et de modules complémentaires

- -

Changements dans les interfaces

- -
-
{{interface("nsIStreamListener")}}
-
Le 4ème paramètre (aOffset) de la méthode onDataAvailable() modifie unsigned long long. ({{bug("784912")}})
-
{{interface("nsIUploadChannel")}}
-
setUploadStream() supporte plus de 2 Go de content-length. ({{bug("790617")}})
-
{{interface("nsIEditor")}}
-
addEditorObserver() a été supprimé, utilisez setEditorObserver() à la place, removeEditorObserver() ne prend plus le paramètre {{interface("nsIEditorObserver")}}. ({{bug("785091")}})
-
{{interface("nsIHttpProtocolHandler")}}
-
Il n'y a plus de garantie que les observateurs http-on-modify-request soit appelés de manière synchrone au cours de nsIChannel.asyncOpen(). Pour les observateurs qui ont besoin d'être appelés pendant asyncOpen(), le nouvel observateur http-on-opening-request a été ajouté. {{bug("800799")}}
-
{{interface("nsIProtocolProxyService")}}
-
La méthode resolve a été retirée. Maintenant, seule la méthode asyncResolve peut être utilisée. Voir ({{bug("769764")}}).
-
- -

Interfaces supprimées

- -

Les interfaces suivantes ont été supprimées.

- - - -

Voir également

- - - -

Anciennes versions

- -

{{Firefox_for_developers('17')}}

diff --git a/files/fr/mozilla/firefox/versions/18/site_compatibility/index.html b/files/fr/mozilla/firefox/versions/18/site_compatibility/index.html deleted file mode 100644 index 40090de357..0000000000 --- a/files/fr/mozilla/firefox/versions/18/site_compatibility/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Compatibilité des sites avec Firefox 18 -slug: Mozilla/Firefox/Versions/18/Site_compatibility -tags: - - Compatibilité - - Développement Web - - Firefox - - Firefox 18 - - FxSiteCompat -translation_of: Mozilla/Firefox/Releases/18/Site_compatibility ---- -
{{FirefoxSidebar}}

Cette page a été déplacée vers FxSiteCompat.com.

diff --git a/files/fr/mozilla/firefox/versions/19/index.html b/files/fr/mozilla/firefox/versions/19/index.html deleted file mode 100644 index 8ece44bb72..0000000000 --- a/files/fr/mozilla/firefox/versions/19/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: Firefox 19 pour les développeurs -slug: Mozilla/Firefox/Versions/19 -tags: - - Firefox - - Firefox 19 -translation_of: Mozilla/Firefox/Releases/19 ---- -
{{FirefoxSidebar}}

{{ draft() }}

- -

Firefox 19, basé sur Gecko 19.0, est sorti le 19 février 2013. Cette page résume les principaux changements dans Firefox 19 qui sont utiles aux développeurs.

- -

Vous voulez aider à documenter Firefox 19 ? Regardez la liste des bugs qui ont besoin de rédaction et lancez-vous !

- -

Changements pour les développeurs web

- -

JavaScript

- - - -

CSS

- - - -

DOM

- - - -

XForms

- -

Le support des XForms a été retiré dans Firefox 19.

- -

Changements pour les développeurs d'add-ons et les développeurs Mozilla

- -
-

Note:  nsresult est maintenant fortement typé, c'est un changement majeur dans Firefox 19. Cela permet de détecter plus facilement les bugs causés par la mauvaise gestion des valeurs retournées mais peut empêcher des codes actuels de fonctionner si nsresult fait de mauvaises suppositions concernant ces valeurs.

-
- - - -

Changements dans les intefaces

- -
-
{{interface("nsIImgLoadingContent")}}
-
Le paramètre (aObserver) de la méthode addObserver() change de {{interface("imgIDecoderObserver")}} pour {{interface("imgINotificationObserver")}}. La méthode notify() de {{interface("imgINotificationObserver")}} n'est pas scriptable, vous devez donc utiliser createScriptedObserver() à partir de {{interface("imgITools")}}.
-
{{interface("nsIChannel")}}
-
La propriété contentLength a changée de long à int64_t
-
- -

A voir également

- - - -

Anciennes versions

- -

{{Firefox_for_developers('18')}}

diff --git a/files/fr/mozilla/firefox/versions/19/site_compatibility/index.html b/files/fr/mozilla/firefox/versions/19/site_compatibility/index.html deleted file mode 100644 index bf8fd61a81..0000000000 --- a/files/fr/mozilla/firefox/versions/19/site_compatibility/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Compatibilité des sites avec Firefox 19 -slug: Mozilla/Firefox/Versions/19/Site_compatibility -tags: - - Compatibilité - - Développement Web - - Firefox - - Firefox 19 - - FxSiteCompat -translation_of: Mozilla/Firefox/Releases/19/Site_compatibility ---- -
{{FirefoxSidebar}}

Cette page a été déplacée vers FxSiteCompat.com.

diff --git a/files/fr/mozilla/firefox/versions/2/index.html b/files/fr/mozilla/firefox/versions/2/index.html deleted file mode 100644 index c0027bed2d..0000000000 --- a/files/fr/mozilla/firefox/versions/2/index.html +++ /dev/null @@ -1,149 +0,0 @@ ---- -title: Firefox 2 pour les développeurs -slug: Mozilla/Firefox/Versions/2 -tags: - - Firefox - - Firefox 2 -translation_of: Mozilla/Firefox/Releases/2 ---- -
{{FirefoxSidebar}}

''Une grande partie du contenu de cette page est juste là pour boucher les trous. Voyez la version anglaise de cette page pour savoir comment la compléter.''

- -

Nouvelles fonctionnalités pour les développeurs dans Firefox 2

- -

Firefox 2 propose un grand nombre de nouvelles fonctionnalités et de nouvelles possibilités. Cet article fournit des liens vers des articles couvrant les nouvelles fonctionnalités.

- -

Pour les développeurs Web et les développeurs d'applications

- -
-
Microrésumés
-
Les microrésumés sont de courtes compilations, régulièrement mises à jour, des plus importantes informations présentes sur des pages Web. Ils peuvent être fournis tant par les sites eux-mêmes que par des développeurs tiers. Lorsque les utilisateurs marquent des pages présentant des microrésumés, ils peuvent choisir d'afficher ceux-ci en lieu et place de titres statiques.
-
- -
-
Création d'un générateur de microrésumé
-
Un tutoriel sur la création d'un générateur de microrésumés.
-
- -
-
Référence grammaticale XML d'un microrésumé
-
Un guide de référence sur la grammaire XML utilisée pour la création de générateurs de microrésumés.
-
- -
-
Création de plugins MozSearch
-
Firefox 2 utilise MozSearch, un format de plugins de recherche basé sur OpenSearch.
-
- -
-
Création de plugins OpenSearch pour Firefox
-
Firefox 2 support le format de moteur de recherche OpenSearch.
-
- -
-
Gestion de suggestions dans les plugins de recherche
-
Comment permettre à votre plugin MozSearch de proposer des suggestions, qui apparaîtront dans une liste déroulante au fur et à mesure de la frappe dans la Barre de recherche.
-
- -
-
Nouveautés dans JavaScript 1.7
-
Firefox 2 fournit JavaScript 1.7, qui comprend de nouvelles fonctionnalités comme let, des assignations déstructurantes, des générateurs et itérateurs, et la définition de tableaux par compréhension.
-
- -
-
WHATWG Client-side session and persistent storage (ou DOM Storage)
-
Le stockage de session et le stockage persistant côté client permet aux applications Web de conserver des données structurées du côté du client.
-
- -
-
SVG dans Firefox
-
Firefox 2 améliore le support du SVG (Scalable Vector Graphics) en implémentant l'élément <textPath> et en ajoutant le support de quelques attributs non encore supportés.
-
- -
-
Contrôle du correcteur d'orthographe dans les formulaires HTML
-
Firefox 2 contient un correcteur d'orthographe des zones de texte et des champs de saisie. Cet article décrit comment écrire votre HTML pour activer et désactiver ce correcteur d'orthographe sur des éléments individuels de formulaires.
-
- -
-
La sécurité dans Firefox 2
-
Firefox 2 a modifié les protocoles de sécurité activés par défaut.
-
- -

Pour les développeurs XUL et les développeurs d'extensions

- -
-
Mise à jour des extensions pour Firefox 2
-
Comment migrer vos extensions existantes pour qu'elles fonctionnent avec Firefox 2.
-
- -
-
API de restauration de session
-
Ajout d'élément à enregistrer et à restaurer d'une session à l'autre dans Firefox.
-
- -
-
API d'accès au contenu de flux
-
API permettant aux développeurs d'accéder et de traiter des flux RSS et Atom.
-
- -
-
Support SAX
-
API de parcours XML basé sur les évènements.
-
- -
-
Ajout de moteurs de recherche depuis des pages Web
-
Un code JavaScript peut demander à Firefox d'installer un nouveau plugin de moteur de recherche, qui peut être fourni au format OpenSearch ou au format Sherlock.
-
- -
-
Utilisation du correcteur orthographique dans XUL
-
Explique comment vérifier l'orthographe de certains mots et comment obtenir une liste de suggestions de corrections depuis le code.
-
- -
-
Ajout de fournisseurs de données de protection anti-phishing
-
Il est possible d'améliorer la protection de Firefox contre le phishing (hameçonnage) en ajoutant des fournisseurs de données pour le système de navigation sécurisée.
-
- -
-
Storage
-
Firefox 2 propose mozStorage, une architecture de base de données basée sur sqlite.
-
- -
-
Changements dans les thèmes graphiques pour Firefox 2
-
Discussion autour des changements à apporter au thèmes graphiques existants pour qu'ils fonctionnent avec Firefox 2.
-
- -
-
Améliorations de Textbox (à partir de Firefox 2.0.0.1 uniquement)
-
L'élément <textbox> dispose à présent d'une méthode reset() pour réinitialiser la valeur de la boîte de texte à sa valeur par défaut. La propriété defaultValue peut être utilisée pour récupérer et modifier cette valeur par défaut ({{ Bug(312867) }}).
-
Support d'une propriété editor permettant d'obtenir l'interface interne nsIEditor pour le champ texte ({{ Bug(312867) }}).
-
- -

Nouvelles fonctionnalités pour les utilisateurs

- -

Firefox 2 offre une version améliorée de l'agréable interface utilisateur par rapport à ses versions précédentes, avec un niveau accru de sécurité pour rendre votre expérience de navigation encore plus sûre et plus pratique que jamais.

- -

Apparence et comportement

- - - -

Sécurité et vie privée

- - - -

Voir aussi

- -

{{Firefox_for_developers('1')}}

diff --git a/files/fr/mozilla/firefox/versions/20/index.html b/files/fr/mozilla/firefox/versions/20/index.html deleted file mode 100644 index d9bf6ebdd7..0000000000 --- a/files/fr/mozilla/firefox/versions/20/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: Firefox 20 pour les développeurs -slug: Mozilla/Firefox/Versions/20 -tags: - - Firefox - - Firefox 20 -translation_of: Mozilla/Firefox/Releases/20 ---- -
{{FirefoxSidebar}}

Firefox 20 est sorti le 2 avril 2013. Cette page résume les principaux changements dans Firefox 20 qui sont utiles aux développeurs.

- -

Changements pour les développeurs Web

- -

HTML

- - - -

JavaScript

- - - -

CSS

- - - -

DOM

- - - -

MathML

- - - -

Changements pour les add-ons et les développeurs Mozilla

- - - -

Voir également

- - - -

Anciennes versions

- -

{{Firefox_for_developers('19')}}

diff --git a/files/fr/mozilla/firefox/versions/20/site_compatibility/index.html b/files/fr/mozilla/firefox/versions/20/site_compatibility/index.html deleted file mode 100644 index b126ee10ba..0000000000 --- a/files/fr/mozilla/firefox/versions/20/site_compatibility/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Compatibilité des sites avec Firefox 20 -slug: Mozilla/Firefox/Versions/20/Site_compatibility -tags: - - Compatibilité - - Développement Web - - Firefox - - Firefox 20 - - FxSiteCompat -translation_of: Mozilla/Firefox/Releases/20/Site_compatibility ---- -
{{FirefoxSidebar}}

Cette page a été déplacée vers FxSiteCompat.com.

diff --git a/files/fr/mozilla/firefox/versions/21/index.html b/files/fr/mozilla/firefox/versions/21/index.html deleted file mode 100644 index 5b31107b63..0000000000 --- a/files/fr/mozilla/firefox/versions/21/index.html +++ /dev/null @@ -1,141 +0,0 @@ ---- -title: Firefox 21 pour les développeurs -slug: Mozilla/Firefox/Versions/21 -tags: - - Firefox - - Firefox 21 -translation_of: Mozilla/Firefox/Releases/21 ---- -
{{FirefoxSidebar}}
- -

Firefox 21 est sorti le 14 mai 2013. Cette page résume les principaux changements dans Firefox 21 qui sont utiles aux développeurs, que vous soyez développeur web, développeur Firefox et Gecko, ou développeur d'add-ons.

- -

Changement pour les développeurs Web

- -

HTML

- - - -

JavaScript

- - - -

CSS

- - - -

DOM

- - - -

SVG

- - - -

Networking

- - - -

Worker

- - - -

Changement pour les add-ons et les développeurs Mozilla

- - - -

Voir également

- - - -

Anciennes versions

- -
{{Firefox_for_developers('20')}}
diff --git a/files/fr/mozilla/firefox/versions/21/site_compatibility/index.html b/files/fr/mozilla/firefox/versions/21/site_compatibility/index.html deleted file mode 100644 index 0baf393fc3..0000000000 --- a/files/fr/mozilla/firefox/versions/21/site_compatibility/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Compatibilité des sites avec Firefox 21 -slug: Mozilla/Firefox/Versions/21/Site_compatibility -tags: - - Compatibilité - - Développement Web - - Firefox - - Firefox 21 - - FxSiteCompat -translation_of: Mozilla/Firefox/Releases/21/Site_compatibility ---- -
{{FirefoxSidebar}}

Cette page a été déplacée vers FxSiteCompat.com.

diff --git a/files/fr/mozilla/firefox/versions/22/index.html b/files/fr/mozilla/firefox/versions/22/index.html deleted file mode 100644 index d772c8108d..0000000000 --- a/files/fr/mozilla/firefox/versions/22/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: Firefox 22 pour les développeurs -slug: Mozilla/Firefox/Versions/22 -translation_of: Mozilla/Firefox/Releases/22 ---- -
{{FirefoxSidebar}}

Vous voulez aider à documenter Firefox 22 ? Parcourez la liste des bugs qui ont besoin d'être documentés et lancez-vous !

- -

Changements pour les développeurs Web

- -

HTML

- - - -

JavaScript

- - - -

DOM

- - - -

CSS

- - - -

Changements pour les développeurs Mozilla et développeurs d'add-on

- - - -

Outils pour développeurs de Firefox

- - - -

A voir aussi

- - - -

Versions

- -
{{Firefox_for_developers('21')}}
diff --git a/files/fr/mozilla/firefox/versions/22/site_compatibility/index.html b/files/fr/mozilla/firefox/versions/22/site_compatibility/index.html deleted file mode 100644 index d58f2a06c8..0000000000 --- a/files/fr/mozilla/firefox/versions/22/site_compatibility/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Compatibilité des sites avec Firefox 22 -slug: Mozilla/Firefox/Versions/22/Site_compatibility -tags: - - Compatibilité - - Développement Web - - Firefox - - Firefox 22 - - FxSiteCompat -translation_of: Mozilla/Firefox/Releases/22/Site_compatibility ---- -
{{FirefoxSidebar}}

Cette page a été déplacée vers FxSiteCompat.com.

diff --git a/files/fr/mozilla/firefox/versions/23/index.html b/files/fr/mozilla/firefox/versions/23/index.html deleted file mode 100644 index 6d9da9604c..0000000000 --- a/files/fr/mozilla/firefox/versions/23/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: Firefox 23 pour les développeurs -slug: Mozilla/Firefox/Versions/23 -translation_of: Mozilla/Firefox/Releases/23 ---- -
{{FirefoxSidebar}}
Changements pour les développeurs Web
- -

Sécurité

- - - -

Outils de développement

- - - -

HTML

- - - -

JavaScript

- - - -

DOM

- - - -

CSS

- - - -

MathML

- - - -

Changements pour les développeurs Mozilla et développeurs d'add-on

- -

Outils pour développeurs de Firefox

- -

Les add-ons qui ont recourt à chrome://browser/content/debugger.xul doivent désormais utiliser chrome://browser/content/devtools/debugger.xul. Vous pouvez ajouter des références à ces deux fichiers dans chrome.manifest pour la compatibilité.

- -

Voir aussi

- - - -

Anciennes versions

- -

{{Firefox_for_developers('22')}}

diff --git a/files/fr/mozilla/firefox/versions/23/site_compatibility/index.html b/files/fr/mozilla/firefox/versions/23/site_compatibility/index.html deleted file mode 100644 index ee40cc83d3..0000000000 --- a/files/fr/mozilla/firefox/versions/23/site_compatibility/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Compatibilité des sites avec Firefox 23 -slug: Mozilla/Firefox/Versions/23/Site_compatibility -tags: - - Compatibilité - - Développement Web - - Firefox - - Firefox 23 - - FxSiteCompat -translation_of: Mozilla/Firefox/Releases/23/Site_compatibility ---- -
{{FirefoxSidebar}}

Cette page a été déplacée vers FxSiteCompat.com.

diff --git a/files/fr/mozilla/firefox/versions/24/index.html b/files/fr/mozilla/firefox/versions/24/index.html deleted file mode 100644 index 7aa78478c5..0000000000 --- a/files/fr/mozilla/firefox/versions/24/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: Firefox 24 pour les développeurs -slug: Mozilla/Firefox/Versions/24 -translation_of: Mozilla/Firefox/Releases/24 ---- -
{{FirefoxSidebar}}

Changements pour les développeurs Web

- -

CSS

- - - -

HTML

- - - -

JavaScript

- - - -

DOM

- - - -

Outils de développement

- - - -

MathML

- - - -

Changements pour les développeurs Mozilla et développeurs d'add-on

- - - -

Voir aussi

- - - -

Anciennes versions

- -

{{Firefox_for_developers('23')}}

diff --git a/files/fr/mozilla/firefox/versions/24/site_compatibility/index.html b/files/fr/mozilla/firefox/versions/24/site_compatibility/index.html deleted file mode 100644 index 7cacf2fae5..0000000000 --- a/files/fr/mozilla/firefox/versions/24/site_compatibility/index.html +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Compatibilité des sites avec Firefox 24 -slug: Mozilla/Firefox/Versions/24/Site_compatibility -tags: - - Compatibilité - - Développement Web - - Firefox - - Firefox 24 - - FxSiteCompat - - Guide -translation_of: Mozilla/Firefox/Releases/24/Site_compatibility ---- -
{{FirefoxSidebar}}

Cette page a été déplacée vers FxSiteCompat.com.

diff --git a/files/fr/mozilla/firefox/versions/3.5/index.html b/files/fr/mozilla/firefox/versions/3.5/index.html deleted file mode 100644 index 375c8488d7..0000000000 --- a/files/fr/mozilla/firefox/versions/3.5/index.html +++ /dev/null @@ -1,233 +0,0 @@ ---- -title: Firefox 3.5 pour les développeurs -slug: Mozilla/Firefox/Versions/3.5 -tags: - - Firefox - - Firefox 3.5 -translation_of: Mozilla/Firefox/Releases/3.5 ---- -
{{FirefoxSidebar}}

Firefox 3.5 introduit un certain nombre de nouvelles fonctionnalités, ainsi qu'une gestion améliorée d'une grande variété de standards du Web. Cet article en fournit une longue liste, avec des liens vers des articles décrivant les améliorations majeures.

- -

Nouvelles fonctionnalités pour les développeurs dans Firefox 3.5

- -

Pour les développeurs de sites et d'applications web

- -

HTML5

- -
-
Utilisation d'audio et video dans Firefox
-
Firefox 3.5 ajoute la gestion des éléments HTML5 audio et video.
-
Ressources hors ligne dans Firefox
-
Firefox 3.5 gère entièrement la spécification de ressources hors ligne d'HTML5.
-
Glisser et déposer
-
L'API de glisser/déposer d'HTML5 permet de gérer le glisser/déposer d'éléments à l'intérieur et entre des sites web. Elle fournit également une API plus simple pour les extensions et applications basées sur Mozilla.
-
- -

Nouvelles fonctionnalités CSS

- -
-
Gestion des polices téléchargeables
-
La nouvelle règle-@ @font-face permet aux pages web de fournir des polices téléchargeables, afin qu'elles puissent être affichées exactement telles que l'auteur de la page les attend.
-
Media queries
-
Firefox 3.5 gère les requêtes de médias, qui améliorent le traitement des feuilles de style destinées à des médias particuliers.
-
Mise à jour de {{ cssxref(":before") }} et {{ cssxref(":after") }} pour CSS 2.1
-
Les pseudo-éléments :before et :after ont été mis à jour pour respecter complètement CSS 2.1, avec l'ajout des propriétés position, float et list-style-*, ainsi que de certaines valeurs de display.
-
Unité de longueur ch
-
L'unité ch peut à présent être utilisée à tout endroit où peut être indiquée une unité de longueur. 1ch est la largeur du caractère « 0 » (zéro).
-
{{ cssxref("opacity") }}
-
L'extension à CSS -moz-opacity de Mozilla a été supprimée en faveur de la propriété standard opacity.
-
{{ cssxref("text-shadow") }}
-
La propriété text-shadow, qui permet à du contenu web de spécifier des effets d'ombres sur le texte et les décorations de texte est à présent gérée.
-
{{ cssxref("word-wrap") }}
-
Cette nouvelle propriété permet au contenu d'indiquer si oui ou non les lignes de texte peuvent être coupées au milieu d'un mot afin d'empêcher un débordement lorsqu'une chaîne normalement insécable est trop longue pour rentrer dans une seule ligne.
-
Valeur pre-line pour la propriété white-space
-
La propriété {{ cssxref("white-space") }} accepte à présent la valeur pre-line.
-
{{ cssxref("-moz-box-shadow") }}
-
{{ cssxref("-moz-border-image") }}
-
{{ cssxref("-moz-column-rule") }}
-
{{ cssxref("-moz-column-rule-width") }}
-
{{ cssxref("-moz-column-rule-style") }}
-
{{ cssxref("-moz-column-rule-color") }}
-
La gestion de ces extensions à CSS de Mozilla a été ajoutée dans Firefox 3.5.
-
La {{ cssxref("valeur_de_couleur#Extensions_spécifiques_à_Mozilla","-moz-nativehyperlinktext") }}
-
Cette nouvelle valeur de couleur représente la couleur de lien hypertexte par défaut de l'utilisateur du système.
-
La nouvelle propriété {{ cssxref("-moz-window-shadow") }} et la pseudo-classe {{ cssxref(":-moz-system-metric(mac-graphite-theme)") }}
-
Ces nouvelles fonctionnalités CSS ont été ajoutées pour faciliter la mise en place de thèmes.
-
Nouvelles valeurs pour {{ cssxref("-moz-appearance") }}
-
Les valeurs -moz-win-glass et -moz-mac-unified-toolbar ont été ajoutées à -moz-appearance.
-
Utilisation des transformations CSS
-
Firefox 3.5 gère les transformations CSS. Consultez {{ cssxref("-moz-transform") }} et {{ cssxref("-moz-transform-origin") }} pour plus de détails.
-
{{ cssxref(":nth-child") }}
-
{{ cssxref(":nth-last-child") }}
-
{{ cssxref(":nth-of-type") }}
-
{{ cssxref(":nth-last-of-type") }}
-
{{ cssxref(":first-of-type") }}
-
{{ cssxref(":last-of-type") }}
-
{{ cssxref(":only-of-type") }}
-
Ces sélecteurs sont nouvellement gérés dans Firefox 3.5
-
- -

Nouvelles fonctionnalités DOM

- -
-
localStorage
-
Firefox 3.5 ajoute la gestion de la propriété localStorage pour le stockage web, fournissant ainsi une manière pour les applications web de stocker des données localement sur l'ordinateur du client.
-
Utilisation de workers DOM
-
Firefox 3.5 gère les workers DOM afin de permettre une gestion multithreadée dans les applications web.
-
Utilisation de la géolocalisation
-
Firefox 3.5 gère l'API Geolocation, qui permet aux applications web d'obtenir des informations concernant l'emplacement actuel de l'utilisateur si cette information est fournie et activée dans le système.
-
Identification d'éléments DOM à l'aide de sélecteurs
-
L'API Selectors permet d'interroger un document afin d'identifier les éléments correspondant à une règle de sélection donnée.
-
Évènements de mouvement de souris
-
Firefox 3.5 gère les évènements de mouvements de souris dont les glissades sur un trackpad.
-
L'objet NodeIterator
-
L'objet NodeIterator permet de parcourir la liste de nœuds dans un sous-arbre DOM.
-
L'évènement MozAfterPaint
-
Ce nouvel évènement DOM est envoyé après les mises à jour de l'affichage dans les fenêtres.
-
L'évènement MozMousePixelScroll
-
Ce nouvel évènement DOM permet de détecter les évènements de défilement à la souris par pixels plutôt que par ligne.
-
- -

Nouvelles fonctionnalités JavaScript

- -
-
Nouveautés dans JavaScript 1.8.1
-
Un aperçu de tous les changements dans JavaScript 1.8.1.
-
Object.getPrototypeOf()
-
Cette nouvelle méthode renvoie le prototype d'un objet spécifié.
-
Utilisation de JSON dans Firefox
-
La gestion de JSON est à présent intégrée dans le DOM.
-
Nouvelles méthodes de nettoyage des espaces sur l'objet String
-
L'objet String dispose à présent des méthodes trim(), trimLeft() et trimRight().
-
- -

Réseau

- -
-
Contrôle d'accès entre sites pour HTTP
-
Dans Firefox 3.5, il devient possible pour les requêtes HTTP, notamment celles faites au travers d'XMLHttpRequest, de fonctionne entre différents domaines si le serveur le permet.
-
Évènements de progression pour XMLHttpRequest
-
Des évènements de progression sont à présent émis pour permettre aux extensions de surveiller l'état des requêtes.
-
Amélioration des appels XMLHttpRequest synchrones
-
Les timeouts DOM et les évènements d'entrée sont à présent supprimés pendant un appel XMLHttpRequest synchrone.
-
Contrôle du préchargement DNS
-
Firefox 3.5 permet le préchargement DNS, par lequel il effectue la résolution des noms de domaines à l'avance pour les liens présents dans la page courante, afin de gagner du temps lorsque l'on clique effectivement sur ces liens. Cet article explique comment adapter votre site pour désactiver le préchargement, ou contrôler le comportement de ce préchargement.
-
- -

Nouvelles fonctionnalités de Canvas

- -
-
API HTML5 text pour les éléments canvas
-
Les éléments canvas gèrent à présent l'API texte d'HTML5.
-
Effets d'ombres dans un canvas
-
Les effets d'ombrages sont à présent gérés dans canvas.
-
createImageData()
-
La méthode createImageData() de canvas est à présent gérée, ce qui permet à du code de créer spécifiquement un objet ImageData plutôt que demander que ce soit fait automatiquement. Les performances d'autres méthodes d'ImageData peuvent en être améliorées puisqu'elles n'ont pas à créer l'objet.
-
Attribut moz-opaque
-
L'attribut DOM moz-opaque a été ajouté, ce qui permet à canvas de savoir si oui ou non la transparence devra être prise en compte. Si le canvas sait qu'il n'y a pas de transparence, les performances de dessin peuvent être optimisées.
-
- -

Nouvelles fonctionnalités SVG

- -
-
Application d'effets SVG à du contenu HTML
-
Vous pouvez à présent appliquer des effets SVG à du contenu HTML et XHTML ; cet article explique comment.
-
- -

Autres nouvelles fonctionnalités

- -
-
Correction de couleurs ICC dans Firefox
-
Firefox 3.5 gère à présent la correction de couleurs ICC pour les images balisées.
-
L'attribut defer est géré sur les éléments script
-
Cet attribut indique au navigateur qu'il peut décider de continuer d'analyser et d'afficher la page sans attendre que le script ait terminé son exécution.
-
- -

Autres améliorations

- - - -

Pour les développeurs XUL et développeurs d'applications

- -

Si vous développez des extensions, vous devriez tout d'abord lire Mise à jour des extensions pour Firefox 3.5 qui fournit un aperçu pratique des changements qui pourraient affecter vos extensions.

- -

Nouveaux composants et nouvelles fonctionnalités

- -
-
Gestion du mode de navigation privée
-
Firefox 3.5 offre un mode de navigation privée, qui n'enregistre pas les activités de l'utilisateur. Les extensions peuvent gérer la navigation privée en suivant les conseils donnés dans cet article.
-
Changements liés à la sécurité dans Firefox 3.5
-
Cet article détaille les changements liés à la sécurité dans Firefox 3.5.
-
Changements dans les thèmes pour Firefox 3.5
-
Cet article détaille les changements liés aux thèmes dans Firefox 3.5.
-
Surveillance des points d'accès WiFi
-
Le code disposant des privilèges UniversalXPConnect peut à présent surveiller la liste des points d'accès disponibles, et obtenir des informations concernant leurs SSID, adresses MAC et force du signal. Ceci peut être utilisé couplé avec la géolocalisaiton pour fournir des services locaux basés sur la présence d'un WiFi.
-
- -

Changements et améliorations notables

- - - -

Nouvelles fonctionnalités pour les utilisateurs

- -

Interface

- -
-
Navigation en fonction de sa localisation
-
Si vous le désirez, vous pouvez permettre à Firefox 3.5 de partager des informations concernant votre localisation géographique avec des sites web. Firefox 3.5 peut utiliser des informations sur le réseau auquel votre machine est connectée pour partager votre localisation. Bien évidemment, votre permission sera demandée au préalable afin de préserver votre vie privée.
-
Gestion de la vidéo et de l'audio ouverts
-
Firefox 3.5 gère l'intégration de vidéos et d'extraits audio à l'aide du format ouvert Ogg, ainsi qu'au format WAV pour l'audio. Aucun plugin nécessaire, pas de messages d'erreurs incompréhensibles vous demandant d'installer quelque chose qui n'est en fait pas disponible sur votre plateforme.
-
Stockage local de données
-
Les applications web peuvent à présent utiliser les possibilités de stockage local pour conserver des données sur votre ordinateur. Cela peut servir pour conserver des préférences ou d'autres données plus complexes.
-
- -

Sécurité et vie privée

- -
-
Navigation privée
-
Besoin d'utiliser l'ordinateur de quelqu'un d'autre ? Activez la navigation privée et rien ne sera enregistré concernant votre session, ni cookies, ni historique, ni aucune autre information privée.
-
Meilleurs contrôles sur la vie privée
-
Le panneau de préférences Vie privée a été complètement revu pour disposer d'un meilleur contrôle sur vos informations privées. Les utilisateurs peuvent choisir de conserver ou d'effacer tout ce qui concerne l'historique, les cookies, les téléchargements et les informations de formulaire enregistrées. De plus, il est possible d'indiquer si l'historique et/ou les marque-pages doivent faire partie des suggestions automatiques de la Barre d'adresse, afin d'empêcher des adresses privées d'apparaître par inadvertance en saisissant des informations dans la Barre d'adresse.
-
- -

Performances

- -
-
Du JavaScript plus rapide
-
Le code JavaScript est exécuté nettement plus rapidement dans Firefox 3.5 grâce à son nouveau moteur TraceMonkey. Les applications web sont ainsi beaucoup plus rapides que dans Firefox 3.
-
Rendu plus rapide des pages
-
Le contenu web est affiché plus rapidement dans Firefox 3.5, grâce à des technologies telles que l'« analyse spéculative ». Vos utilisateurs n'ont pas besoin de savoir de quoi il s'agit, simplement que ça rend les choses plus rapides.
-
- -

Voir également

- -

{{Firefox_for_developers('3')}}

diff --git a/files/fr/mozilla/firefox/versions/3.6/index.html b/files/fr/mozilla/firefox/versions/3.6/index.html deleted file mode 100644 index 6e27affe9d..0000000000 --- a/files/fr/mozilla/firefox/versions/3.6/index.html +++ /dev/null @@ -1,297 +0,0 @@ ---- -title: Firefox 3.6 pour les développeurs -slug: Mozilla/Firefox/Versions/3.6 -tags: - - Firefox - - Firefox 3.6 -translation_of: Mozilla/Firefox/Releases/3.6 ---- -

Firefox 3.6 (nom de code Namoroka) est sorti le 21 janvier 2010 et est basé sur Gecko 1.9.2. Cette page fournit des liens vers des articles qui décrivent les nouvelles fonctionnalités de Firefox 3.6.

- -

Pour les développeurs de sites et d'applications Web

- -

CSS

- -
-
Utilisation de dégradés
-
Firefox 3.6 ajoute le support de -moz-linear-gradient et -moz-radial-gradient pour la propriété background.
-
Fonds multiples
-
La propriété background (ainsi que background-attachmentbackground-color, background-image, background-position et background-repeat) peuvent gérer des fonds multiples. Ceux-ci seront affichés par couches, les uns au dessus des autres.
-
Fonctionnalités de médias spécifiques à Mozilla
-
Des fonctionnalités de médias ont été ajoutées pour des mesures spécifiques à Mozilla, afin de pouvoir utiliser des media queries pour vérifier plus aisément la disponibilité de fonctionnalités comme un écran tactile.
-
Redimensionnement d'images de fond
-
La propriété background-size du brouillon CSS 3 Backgrounds and Borders est gérée sous le nom de -moz-background-size.
-
Support des polices WOFF
-
@font-face supporte désormais le format de polices Web téléchargeables WOFF
-
Evènements pointeurs
-
La propriété pointer-events si le contenu d'un élément peut être ou non la cible d'évènements pointeur avec la souris.
-
- -

Autres changements CSS

- - - -

HTML

- -
-
Utilisation de fichiers à partir d'applications Web
-
Le support de la nouvelle API de fichier HTML5 a été ajouté à Gecko, ce qui permet à des applications Web d'accéder à des fichiers locaux sélectionnés par l'utilisateur.
-
Support des affiches pour les vidéos HTML5
-
L'attribut poster est pris en charge pour l'élément <video>, ce qui permet au contenu de choisir une image à afficher tant que la vidéo n'a pas commencée.
-
Support de la propriété indeterminate pour les cases à cocher et boutons radio
-
Les éléments HTML <input> des types checkbox et radio supportent désormais la propriété indeterminate qui permet d'avoir un troisième état « indéterminé ».
-
Contrôle du lissage d'images dans canvas
-
La nouvelle propriété mozImageSmoothingEnabled peut être utilisée pour activer et désactiver le lissage lors d'un redimensionnement dans les éléments <canvas>.
-
Exécution d'un script asynchrone
-
En définissant l'attribut async sur un élément <script>, le script ne bloquera pas le chargement ou l'affichage du reste de la page. En revanche, le script s'exécutera dès qu'il sera téléchargé.
-
- -

JavaScript

- -

Gecko 1.9.2 introduit JavaScript 1.8.2, qui ajoute un certain nombre de fonctionnalités de langage de la norme ECMAScript 5 :

- - - -

DOM

- -
-
Terminaison des web workers par eux-mêmes
-
Les web workers prennent désormais en charge la méthode nsIWorkerScope.close(), qui leur permet de se terminer d'eux-mêmes.
-
Glisser-déposer de fichiers
-
L'objet DataTransfer fournit à présent aux observateurs de glisser-déposer une liste des fichiers glissés.
-
Vérification pour voir si un élément correspond à un sélecteur CSS
-
La nouvelle méthode element.mozMatchesSelector permet de déterminer si un élément correspond bien à un sélecteur CSS. Voir bug 518003.
-
Dispositf de détection de l'orientation
-
Le contenu peut à présent détecter l'orientation de l'appareil s'il dispose d'un accéléromètre, à l'aide de l'évènement MozOrientation. Firefox 3.6 gère notamment l'accéléromètre des ordinateurs portables Mac.
-
Détection des changements de largeur et hauteur d'un document
-
Le nouvel évènement MozScrollAreaChanged est déclenché lorsqu'une des propriétés scrollWidth ou scrollHeight d'un document change.
-
- - - -

XPath

- -
-
Gestion de la méthode XPath choose()
-
La méthode choose() est à présent gérée par notre implémentation de XPath.
-
- -

Pour les développeurs XUL et les développeurs d'extensions

- -

Si vous êtes un développeur d'extensions, vous devriez commencer par lire Updating extensions for Firefox 3.6, qui offre une vue d'ensemble sur les changements qui pourraient affecter vos extensions. Les développeurs de Plug-in devraient lire Updating plug-ins for Firefox 3.6.

- -

Nouvelles fonctionnalités

- -
-
Détection de l'orientation de l'appareil
-
Le contenu peut maintenant détecter l'orientation de l'appareil si il possède un accéléromètre, en utilisant l'évènement MozOrientation. Firefox 3.6 supporte l'accéléromètre des ordinateurs portables Mac.
-
Surveillance de l'activité HTTP
-
Vous pouvez maintenant surveiller en temps réel les données HTTP demandées et reçues.
-
Intégration à la Barre des tâches de Windows
-
Il est maintenant possible de personnaliser l'apparence des fenêtres dans la barre des tâches sous Windows 7 ou plus récent. C'est désactivé par défaut dans Firefox 3.6.
-
- -

Places

- - - -

Storage

- -
-
Tri des données locales avec l'API Storage
-
Gecko 1.9.2 ajoute plusieurs nouvelles méthodes pour offrir une collecte (tri) optimisée des résulats en utilisant les techniques de localisation.
-
Énumération des propriétés d'une requête
-
Vous pouvez maintenant utiliser for...in pour énumérer toutes les propriétés d'une déclaration.
-
mozIStorageStatement's getParameterIndex a changé de comportement entre Firefox 3.5 et 3.6.
-
Voir bug 528166 pour plus de détails.
-
Liaison asynchrone de plusieurs ensembles de paramètres pour exécution d'une requête.
-
Voir bug 490085 pour plus de détails.
-
- -

Préférences

- - - -

Thèmes

- -

Voir Updating themes for Firefox 3.6 pour la liste des changements liés aux thèmes.

- -
-
Thèmes légers
-
Firefox 3.6 supporte les thèmes légers ; ce sont des thèmes faciles à créer et qui sont simplement appliqué sur le fond de la fenêtre du navigateur, en haut (barre d'adresses et boutons) et en bas (barre d'état). Il s'agit d'une intégration de l'architecture de thèmes Personas dans Firefox.
-
- -

Divers

- - - -

Pours les développeurs de Firefox/Gecko

- -

Certains changements sont vraiment intéressant si vous travaillez sur le fonctionnement interne de Firefox.

- -

Interfaces fusionnées

- -

Les interfaces suivantes ont été fusionnées :

- - - -

Interfaces supprimées

- -

Les interfaces suivantes ont été entièrement supprimées car elles étaient inutilisées, non implémentées ou obsolètes :

- - - -

Interfaces déplacées

- -

Les interfaces suivantes ont été déplacées de leurs précédents fichiers IDL vers leurs nouveaux :

- - - -

Un grand nombre d'interfaces ont été déplacées. Voir Interfaces moved in Firefox 3.6 pour la liste complète.

- -

Autres changements dans les interfaces

- -

Les modifications suivantes ont été faites :

- - - -

Changements dans l'accessibilitée du code

- - - -

Voir également

- -
- -
diff --git a/files/fr/mozilla/firefox/versions/3/index.html b/files/fr/mozilla/firefox/versions/3/index.html deleted file mode 100644 index 79519fa181..0000000000 --- a/files/fr/mozilla/firefox/versions/3/index.html +++ /dev/null @@ -1,272 +0,0 @@ ---- -title: Firefox 3 pour les développeurs -slug: Mozilla/Firefox/Versions/3 -tags: - - Firefox - - Firefox 3 -translation_of: Mozilla/Firefox/Releases/3 ---- -
{{FirefoxSidebar}}

Pour les développeurs qui désirent prendre connaissance de toutes les nouvelles fonctionnalités de Firefox 3, c'est ici qu'il convient de commencer. Cet article fournit la liste des nouveaux articles couvrant les fonctionnalités qui ont été ajoutées à Firefox 3. Même s'il ne couvre pas nécessairement chaque petite modification, il vous aidera à découvrir les améliorations majeures.

- -

Nouvelles fonctionnalités pour les développeurs dans Firefox 3

- -

Pour les développeurs de sites et d'applications Web

- -
-
Mise à jour des applications Web pour Firefox 3
-
Fournit des informations concernant les changements que vous devrez éventuellement prendre en compte pour permettre à votre site ou application Web de profiter des nouvelles fonctionnalités de Firefox 3.
-
- -
-
Évènements online et offline
-
Firefox 3 gère les évènements online et offline définis par le WHATWG, qui permettent aux applications et extensions de détecter si une connexion Internet active est disponible, ainsi que de détecter l'activation et la désactivation de la connexion.
-
- -
-
Gestionnaires de protocoles web
-
Il est à présent possible d'enregistrer des applications Web en tant que gestionnaires de protocoles à l'aide de la méthode navigator.registerProtocolHandler().
-
- -
-
Dessin de texte avec canvas
-
Il est possible de dessiner du texte dans un élément canvas dans Firefox 3 avec une API non normalisée.
-
- -
-
Support des transformations pour canvas
-
Firefox gère à présent les méthodes transform() et setTransform() sur les éléments canvas.
-
- -
-
Utilisation de microformats
-
Firefox dispose à présent d'API permettant de travailler avec des microformats.
-
- -
-
Évènements de glisser-déposer
-
Firefox 3 gère de nouveaux évènements envoyés au nœud source d'une opération de glisser-déposer lorsque le glisser débute et se termine.
-
- -
-
Gestion du focus en HTML
-
Les nouveaux attributs activeElement et hasFocus de HTML 5 sont gérés.
-
- -
-
Ressources hors ligne dans Firefox
-
Firefox permet applications Web de demander que des ressources soient mises en cache pour permettre leur utilisation en mode hors ligne.
-
- -
-
Améliorations CSS dans Firefox 3
-
Firefox 3 propose un certain nombre d'améliorations dans son support CSS.
-
- -
-
Améliorations DOM dans Firefox 3
-
Firefox 3 propose un certain nombre de nouvelles fonctionnalités dans son implémentation DOM, comme la gestion de plusieurs extensions d'Internet Explorer au DOM.
-
- -
-
Support de JavaScript 1.8
-
JavaScript 1.8 est fourni avec Firefox 3.
-
- -
-
Support d'EXSLT
-
Firefox 3 permet d'utiliser une partie importante des extensions EXSLT à XSLT.
-
- -
-
Améliorations SVG dans Firefox 3
-
La gestion du SVG dans Firefox 3 a été mise à jour de manière substantielle, avec plus d'une vingtaine de nouveaux filtres, plusieurs nouveaux éléments et attributs, et quelques autres améliorations.
-
- -
-
Images PNG animées
-
Firefox 3 gère le format d'images PNG animées (APNG).
-
- -

Pour les développeurs XUL et d'extensions

- -

Améliorations et modifications notables

- -
-
Mise à jour des extensions pour Firefox 3
-
Un guide fournissant tout ce qu'il faut savoir pour mettre à jour une extension afin de la faire fonctionner avec Firefox 3.
-
- -
-
Améliorations XUL dans Firefox 3
-
Firefox 3 offre un certain nombre de nouveaux éléments XUL, dont de nouvelles échelles coulissantes, des sélecteurs de date et d'heure, et des boîtes d'incrément (spin buttons).
-
- -
-
Templates dans Firefox 3
-
Les templates ont été notablement améliorés dans Firefox 3. Le plus remarquable est la possibilité d'utiliser des processeur de requêtes personnalisés permettant d'utiliser d'autres sources de données que RDF.
-
- -
-
Mises à jour sécurisées
-
Afin que le processus de mise à jour soit plus sûr pour les utilisateurs, les modules complémentaires doivent à présent fournir une méthode sécurisée de distribution des mises à jour avant de pouvoir être installés. Les modules hébergés sur AMO fournissent ceci automatiquement. Tout module installé ne fournissant pas une méthode de mise à jour sécurisée lorsque l'utilisateur migrera vers Firefox 3 sera désactivé automatiquement. Firefox continuera cependant à vérifier si des mises à jour sont disponibles au travers du chemin non sécurisé et essayera d'installer toute mise à jour proposée (l'installation échouera si la mise à jour ne propose pas non plus de méthode de mise à jour sécurisée).
-
- -
-
Guide de migration vers Places
-
Un article concernant la migration d'une application existante pour utiliser l'API Places.
-
- -
-
Améliorations du gestionnaire de téléchargement dans Firefox 3
-
Le gestionnaire de téléchargement de Firefox 3 comprend de nouvelles API et d'autres améliorations, comme la gestion de plusieurs écouteurs de progression.
-
- -
-
Utilisation de nsILoginManager
-
Le gestionnaire de mots de passe a été remplacé par le nouveau gestionnaire d'identification.
-
- -
-
Intégration de liaisons XBL
-
Il est à présent possible d'utiliser le schéma d'URL data: depuis du code chrome pour intégrer des liaisons XBL directement au lieu de devoir les placer dans des fichiers XML séparés.
-
- -
-
Localisation des descriptions d'extensions
-
Firefox 3 propose une nouvelle méthode de localisation des métadonnées des modules complémentaires. Ceci permet de disposer des détails localisés dès le téléchargement du module, et même s'il est désactivé.
-
- -
-
Localisation et pluriels
-
Firefox 3 ajout un nouveau module PluralForm fournissant des outils pour aider à mettre des mots correctement au pluriel dans diverses localisations.
-
- -
-
Changements dans les thèmes pour Firefox 3
-
Notes et informations pour ceux qui voudraient créer des thèmes pour Firefox 3.
-
- -

Nouveaux composants et fonctionnalités

- -
-
Bibliothèque FUEL
-
FUEL sert à améliorer la productivité des développeurs d'extensions en minimisant certaines des formalités XPCOM et en ajoutant certaines idées « modernes » de JavaScript.
-
- -
-
Places
-
Les API d'historique et de marque-pages ont été entièrement remplacés par la nouvelle API Places.
-
- -
-
Service Idle
-
Firefox 3 propose une nouvelle interface {{ Interface("nsIIdleService") }} qui permet aux extensions de savoir depuis quand l'utilisateur n'a plus appuyé sur une touche ou déplacé la souris.
-
- -
-
ZIP writer
-
La nouvelle interface {{ Interface("nsIZipWriter") }} permet aux extensions de pouvoir créer des archives ZIP.
-
- -
-
Zoom pleine page
-
Firefox 3 améliore l'expérience utilisateur en offrant un zoom complet des pages en plus du simple zoom de texte.
-
- -
-
Interfaçage avec le collecteur de cycles XPCOM
-
XPCOM peut à présent bénéficier du collecteur de cycles, qui permet de s'assurer que la mémoire inutilisée est libérée et d'éviter les fuites mémoire.
-
- -
-
Le gestionnaire de threads
-
Firefox 3 propose une nouvelle interface {{ Interface("nsIThreadManager") }}, accompagnée de nouvelles interfaces pour les threads et les évènements liés, qui offre une manière pratique de créer et gérer des threads dans votre code.
-
- -
-
Modules JavaScript
-
Firefox 3 offre un mécanisme de modules de code partagés permettant de créer facilement des modules en JavaScript qui pourront être chargés par des extensions et applications, de manière similaire à des bibliothèques partagées.
-
- -
-
L'interface nsIJSON
-
Firefox 3 propose la nouvelle interface {{ Interface("nsIJSON") }}, qui offre des chaînes de caractères JSON de codage et décodage en haute performance.
-
- -
-
L'interface nsIParentalControlsService
-
Firefox 3 gère à présent la fonctionnalité de contrôle parental de Microsoft Windows Vista, et permet au code d'interagir directement avec elle.
-
- -
-
Utilisation des préférences de contenu
-
Firefox 3 fournit un nouveau service permettant de définir et de lire des préférences particulières à un site, que des extensions ou le programme peuvent utiliser pour conserver des informations sur les préférences de l'utilisateur concernant certains sites.
-
- -
-
Surveillance des plugins
-
Un nouveau composant du système de plugins est à présent disponible pour mesurer le temps mis par les plugins (par exemple Macromedia Flash) pour exécuter leurs appels.
-
- -

Bugs corrigés

- -
-
Bugs importants corrigés dans Firefox 3
-
Cet article fournit des informations concernant les bugs corrigés dans Firefox 3.
-
- -

Nouvelles fonctionnalités pour les utilisateurs

- -

Expérience utilisateur

- - - -

Sécurité et vie privée

- - - -

Performances

- - - -

Voir également

- -

{{Firefox_for_developers('2')}}

diff --git a/files/fr/mozilla/firefox/versions/35/index.html b/files/fr/mozilla/firefox/versions/35/index.html deleted file mode 100644 index 12ed5c06b2..0000000000 --- a/files/fr/mozilla/firefox/versions/35/index.html +++ /dev/null @@ -1,197 +0,0 @@ ---- -title: Firefox 35 pour les développeurs -slug: Mozilla/Firefox/Versions/35 -tags: - - Firefox - - Guide - - Mozilla -translation_of: Mozilla/Firefox/Releases/35 ---- -

Changement concernant les développeurs

- -

Outils de développement

- -

Liens:

- - - -

Tous les bugs des outils de développement résolus entre Firefox 34 et Firefox 35.

- -

CSS

- - - -

HTML

- - - -

JavaScript

- - - -

Interfaces/APIs/DOM

- - - -

 MathML

- - - -

SVG

- -

Aucun changement.

- -

Audio/Video

- -

Aucun changement.

- -

Réseau & Sécurité

- - - -

Changements pour les modules et les développeurs Mozilla

- -

XUL & Modules

- - - -

Module SDK

- -

Titres

- - - -

Détails

- -

Commits de GitHub effectués entre Firefox 34 et Firefox 35. Ceci ne comprendra pas les évolutions après la sortie officielle.

- -

Bugs corrigés entre Firefox 34 et Firefox 35. Ceci ne comprendra pas les évolutions après la sortie officielle.

- -

Voir aussi

- - - -

Anciennes versions

- -
- -
diff --git a/files/fr/mozilla/firefox/versions/35/site_compatibility/index.html b/files/fr/mozilla/firefox/versions/35/site_compatibility/index.html deleted file mode 100644 index 326b53a4b0..0000000000 --- a/files/fr/mozilla/firefox/versions/35/site_compatibility/index.html +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Compatibilité des sites avec Firefox 35 -slug: Mozilla/Firefox/Versions/35/Site_Compatibility -tags: - - Compatibilité - - Développement Web - - Firefox - - Firefox 35 - - FxSiteCompat - - Guide -translation_of: Mozilla/Firefox/Releases/35/Site_Compatibility ---- -
{{FirefoxSidebar}}

Cette page a été déplacée vers FxSiteCompat.com.

diff --git a/files/fr/mozilla/firefox/versions/4/index.html b/files/fr/mozilla/firefox/versions/4/index.html deleted file mode 100644 index 050e4cfe06..0000000000 --- a/files/fr/mozilla/firefox/versions/4/index.html +++ /dev/null @@ -1,640 +0,0 @@ ---- -title: Firefox 4 pour les développeurs -slug: Mozilla/Firefox/Versions/4 -tags: - - Firefox - - Firefox 4 -translation_of: Mozilla/Firefox/Releases/4 ---- -
- -

Firefox 4, est sorti le 22 mars 2011, améliore les performances, le support d'HTML5 et d'autres technologies du web et aussi la sécurité. Cet article fournit des informations sur cette version et sur les fonctionnalités qui sont disponibles pour les développeurs Web, les développeurs de modules complémentaires et les développeurs de la plate-forme Gecko.

- -

Fonctionnalités pour les développeurs Web

- -

Gecko utilise maintenant le parseur HTML5, qui corrige des bugs, améliore l'interopérabilité et les performances. Il permet également d'intégrer du contenu SVG et MathML directement dans le code HTML.

- -

HTML

- -
-
Rencontrez le parseur HTML5
-
Un aperçu sur ce que le parseur HTML5 représente pour vous et comment intégrer du contenu SVG et MathML dans votre code.
-
Les formulaires en HTML5
-
Un aperçu de l'amélioration de formulaires Web en HTML5. Parmi les changements on ajoute les types d'entrée dans l'élément <input>, la validation des données et d'autres modifications.
-
Sections HTML5
-
Gecko supporte à présent les nouveaux éléments HTML5 liés aux sections dans un document : <article>, <section>, <nav>, <aside>, <hgroup>, <header> et <footer>.
-
Attribut HTML5 hidden
-
Cet attribut, commun à tous les éléments, est utilisé pour cacher le contenu d'une page Web qui n'est pas encore pertinent pour l'utilisateur.
-
Autres éléments HTML5
-
Gecko supporte les nouveaux éléments HTML5 suivants : <mark>, <figure>, et <figcaption>.
-
WebSockets
-
Un guide pour utiliser la nouvelle API WebSockets pour la communication entre une application web et un serveur en temps réel. A noter que WebSockets tel qu'implémenté dans Firefox 4 n'est pas compatible avec la norme finale, et ne devrait pas être utilisé.
-
- -

Améliorations de Canvas

- -

Les modifications suivantes ont étés apportées à l'interface CanvasRenderingContext2D pour permettre à l'implémentation de <canvas> d'être en conformité avec la spécification :

- - - -
-
- -

Autres changements HTML

- - - -

CSS

- -
-
Transitions CSS
-
Le support des transitions CSS est disponible dans Firefox 4.
-
Les valeurs calculées en CSS
-
Le support de -moz-calc a été ajouté. Cela permet de spécifier des valeurs de <length> comme des expressions mathématiques.
-
Groupement de sélecteurs
-
Le support de :-moz-any pour grouper les sélecteurs et factoriser des combinateurs.
-
Support subrectangle pour background-image
-
La propriété -moz-image-rect permet d'utiliser des subrectangles en tant que background-image.
-
Propriétés CSS tactile
-
Le support des propriétés tactiles a été ajouté. Plus de détails plus tard.
-
Utilisation arbitraires d'élements comme fond
-
Vou pouvez utiliser la fonction CSS -moz-element et la fonction DOM document.mozSetImageElement() pour une utilisation arbitraire des éléments HTML comme fond.
-
Sélecteur :visited et confidentialité
-
Des modifications ont étés apportées sur les informations qui peuvent être obtenues sur le style des liens visités en utilisant les sélecteurs CSS. Certaines applications Web peuvent être affectées.
-
- -

Nouvelles propriétés CSS

- - - - - - - - - - - - - - - - - - - - -
PropriétéDescription
-moz-font-feature-settingsPermet de personnaliser les fonctionnalités avancées des polices OpenType.
-moz-tab-sizeSpécifie la largeur d'un espace de tabulation (U+0009) lors du rendu du texte.
resizePermet de modifier les dimensions d'un élément.
- -
-
- -

Nouvelles pseudo-classes CSS

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Pseudo-classDescription
:-moz-handler-crashedUtilisé pour le style d'un élément dont le plugin a planté.
:-moz-placeholderAppliquée à l'espace texte réservé dans les champs des formulaires.
:-moz-submit-invalidAppliquée au bouton d'envoi des formulaires quand un ou plusieurs des champs ne sont pas valides.
:-moz-window-inactiveAppliquée aux éléments d'une fenêtre inactive.
:invalidAutomatiquement appliquée aux champs <input> dont le contenu est invalide.
:optionalAutomatiquement appliquée aux champs <input> qui ne spécifient pas l'attribut required.
:requiredAutomatiquement appliquée aux champs <input> qui spécifient l'attribut required.
:validAutomatiquement appliquée aux champs <input> dont le contenu a été validé avec succès.
- -

Nouveaux pseudo-selectors CSS

- - - - - - - - - - - - -
Pseudo-selectorDescription
:-moz-focusringPermet de spécifier l'apparence d'un élément lorsque Gecko estime que l'on doit se fixer dessus.
- -

Nouvelles fonctions CSS

- - - - - - - - - - - - - - - - - - - - - - - - -
FonctionDescription
:-moz-anyPermet de grouper les sélecteurs et de factoriser les combinateurs.
-moz-calcPermet de spécifier des valeurs de <length> comme des expressions mathématiques.
-moz-elementPermet d'utiliser un élément arbritaire de fond pour background-image and background.
-moz-image-rectPermet d'utiliser un subrectangle d'une image comme background-image or background.
- -

Propriétés CSS renommées

- - - - - - - - - - - - - - - - - - - - - - - - - - -
Ancien nomNouveau nomNotes
-moz-background-sizebackground-sizeLe nom -moz-background-size n'est plus supporté.
-moz-border-radiusborder-radiusL'ancien nom est encore pris en charge pour une durée limitée, le temps de mettre vos sites à jour. Le changement du rendu a été fait pour correspondre à la dernière version de la spécification.
-moz-box-shadowbox-shadow
- -

Divers changements CSS

- - - -

Graphisme et vidéo

- -
-
-
WebGL
-
La norme WebGL (encore en développement) est maintenant supportée par Firefox.
-
Optimisation des performances graphique
-
Trucs et astuces pour profiter le maximum des performances graphiques et vidéo dans Firefox 4.
-
Support de WebM
-
Le nouveau format vidéo ouvert WebM est supporté par Gecko 2.0.
-
Animation SVG avec SMIL
-
Les animations SVG avec SMIL sont désomais supportées.
-
Utilisation de SVG comme image ou arrière-plan CSS
-
Vous pouvez maintenant utilisez SVG avec l'élément <img>, ainsi qu'avec CSS background-image.
-
Attribut Media buffered
-
L'attribut buffered sur les éléments <video> and <audio> est maintenant supporté, vous permettant de déterminer quel fichier multimédia a été tamponné. L'interface DOM TimeRanges a été mise en place pour ce support.
-
Attribut Media preload
-
L'attribut preload de la spécification HTML5 a été implémenté, remplaçant l'attribut autobuffer précédemment mis en place (et qui n'est plus pris en charge). Cela affecte les éléments <video> et <audio> ainsi que l'interface nsIDOMHTMLMediaElement.
-
Amélioration du positionnement du texte SVG
-
Vous pouvez maintenant spécifier des listes des valeurs pour les propriétés x, y, dx, and dy sur les éléments SVG <text> et <tspan>. Cela vous permet de contrôler le positionnement de chaque caractère d'une chaîne, individuellement.
-
- -

DOM

- -
-
Tableaux JavaScript typés
-
Ajout du support pour les tableaux JavaScript typés, cela vous permet de manipuler des tampons contenant des données brutes en utilisant des types de données natives. Plusieurs API utilisent ça, y compris l'API File, WebGL et WebSockets.
-
Obtention des limites des rectangles limites
-
L'objet Range a désormais les méthodes range.getClientRects() et range.getBoundingClientRect().
-
Capture des évènements de la souris sur des éléments quelconques
-
Ajout du support des APIs setCapture() et releaseCapture() originaires d'Internet Explorer. Voir bug 503943.
-
Manipulation de l'historique du navigateur
-
L'objet de l'historique déjà existant et disponible via l'objet window.history, supporte maintenant les nouvelles méthodes HTML5 pushState() et replaceState().
-
Animations utilisant MozBeforePaint
-
Un nouvel évènement a été ajouté, qui, avec l'aide de la méthode window.mozRequestAnimationFrame() et de la propriété window.mozAnimationStartTime, offre un moyen de créer des animations qui sont synchronisées avec les autres.
-
Evènements touch et multi-touch
-
Ajout du support des évènements touch et multi-touch.
-
- -

Changement des interfaces DOM d'éléments HTML

- -

Plusieurs éléments HTML ont vu leur interface DOM modifier, conformément à la spécification HTML5.

- - - - - - - - - - - - - - - - - - - - - - - - - - -
Interface dans Firefox 3.6Interface dans Firefox 4Elements HTML
HTMLSpanElementHTMLElement<abbr>, <acronym>, <address>, <b>, <bdo>, <big>, <blink>, <center>, <cite>, <code>, <dd>, <dfn>, <dt>, <em>, <i>, <kbd>, <listing>, <nobr>, <plaintext>, <s>, <samp>, <small>, <strike>, <strong>, <sub>, <sup>, , <tt>, <u>, <var>, <xmp>
HTMLDivElementHTMLElement<noembed>, <noframes>, <noscript>
HTMLWBRElementHTMLElement<wbr>
- -
-
- -

Divers changements DOM

- - - -

Securité

- -
-
Content Security Policy (CSP)
-
Content Security Policy (CSP) est une proposition de Mozilla, conçu pour aider les concepteurs de sites Web et les administrateurs de serveur en spécifiant comment le contenu sur leurs sites Web agit. L'objectif est d'aider à détecter et à atténuer les attaques incluant le cross-site scripting et des attaques par injection de données.
-
HTTP Strict Transport Security
-
HTTP Strict Transport Security est un dispositif de sécurité qui permet à un site web d'indiquer au navigateur d'utiliser une connexion sécurisée (HTTPS) à la place du protocole HTTP.
-
L'en-tête de réponse X-FRAME-OPTIONS
-
L'en-tête de réponse X-FRAME-OPTIONS HTTP introduite dans Internet Explorer 8 est désormais supportée par Firefox. Cela permet aux sites d'indiquer si leurs pages peuvent être utilisées dans des frames ou si l'utilisation de la page doit être restreint.
-
Changement de la chaîne de l'agent utilisateur
-
C'est un moyen de réduire la quantité et l'entropie des données envoyées dans les requêts HTPP (voir bug 572650), le niveau de cryptage et le signe de la langue ont été enlevés de la chaîne de l'agent utilisateur.
-
- -

JavaScript

- -

Pour un aperçu des changements effectués dans JavaScript 1.8.5, voir New in JavaScript 1.8.5. Dans Firefox 4, JavaScript a un plus grand respect de la norme ECMAScript 5.

- -

Outils pour les développeurs

- -
-
Utilisation de la Console Web
-
La Console Web est un outil qui aide le débogage.
-
- -
-
-Gecko 2.0 note -
(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)
-
- -

A partir de Firefox 4, la Console d'erreurs est désactivée par défaut. Vous pouvez la ré-activer en modifiant la préférence devtools.errorconsole.enabled à true et en redémarrant le navigateur.

-
- -

Changements pour les développeurs de Mozilla et de modules complémentaires

- -

Pour des conseils utiles sur la mise à jour des extensions existantes pour Firefox 4, voir Updating extensions for Firefox 4. Il y a plusieurs changements importants qui cassent la compatibilité avec les add-ons, donc n'oubliez pas de lire cet article.

- -

Si vous développez des thèmes, vous devez lire Theme changes in Firefox 4 afin de connaître certains changements importants.

- -

Modules de code JavaScript

- -
-
Services.jsm
-
Le module de code Services.jsm fournit des accesseurs qui font qu'il est facile d'obtenir des références sur les services couramment utilisés, tels que le service de préférences ou le médiateur fenêtre.
-
API JS-ctypes
-
L'API JS-ctypes permet d'appeler une bibliothèque de fonctions étrangère C-compatible sans utiliser XPCOM.
-
Gestionnaire de modules complémentaires
-
Le nouveau gestionnaire de modules complémentaires fournit des informations sur les modules, permet la modifications des options, l'installation et la suppression des modules.
-
PopupNotifications.jsm
-
Le nouveau module des notifications popup facilite la présentation des notifications non-modales. Vous pouvez voir comment utiliser cette API dans Using popup notifications.
-
Chargement des modules de code à partir des URLs chrome:
-
Vous pouvez maintenant charger des modules de code à partir d'URLs chrome:, même à l'intérieur de fichiers JAR.
-
DownloadLastDir.jsm
-
Le module de code DownloadLastDir.jsm fournit la variable gDownloadLastDir qui contient une chaîne qui permet de connaître le chemin du répertoire dans lequel le dernier téléchargement s'est produit. Ce module gère les questions liées à la navigation privée.
-
Mesurer les performances en utilisant le module de code PerfMeasurement.jsm code module
-
Le module de code PerfMeasurement.jsm propose une API qui mesure les performances au niveau du CPU dans du code JavaScript.
-
- -

Divers changements dans les modules de code

- - - - - -

Changements DOM

- -
-
ChromeWorker
-
Un nouveau type de travailleur pour du code privilégié, ce qui permet l'utilisation de choses comme js-ctypes à partir des travailleurs dans les extensions et le code d'une application.
-
Evènements tactile
-
Ajout du support de l'évènement tactile (non-standard), cela permet de pouvoir suivre plusieurs doigts qui se déplacent en même temps sur un écran tactile.
-
- -

Autres changements DOM

- - - -
-
- -

XUL

- -

Changements pour l'élément tabbrowser

- -

Plusieurs changements ont été apportés à l'élément <xul:tabbrowser> ce qui impacte les extensions qui interagissent avec les onglets. En plus du support de app tabs, ces changements on aussi modifiés la barre d'onglet en une barre d'outils standard, ce qui permet à l'utilisateur de faire glisser les boutons dans la barre d'outils.

- - - -

Changements pour les popups

- - - -

Suppression du support à distance de XUL

- -

Le support à distance de XUL n'est plus supporté, cela affecte les documents XUL qui étaient servis par HTTP, en outre, vous ne pouvez plus charger des documents XUL en utilisant l'URL file:// sauf en créant une préférence dom.allow_XUL_XBL_for_file avec la valeur true. Cependant, il y a une fonctionnalité de liste blanche qui peut être utilisée pour permettre à des domaines spécifiques de charger XUL à distance. L'extension Remote XUL Manager vous permet de gérer cette liste blanche.

- -

Divers changements XUL

- - - -

Changements dans l'UI affectant les développeurs

- -
-
La barre d'add-on
-
La barre d'état a été supprimée en faveur de la nouvelle barre d'add-on. Vous devrez mettre à jour votre extension l'utiliser cette option si vous aviez ajouté l'UI de la barre d'état avant.
-
Cacher le chrome du navigateur
-
Vous pouvez désormais cacher le chrome du navigateur quand il est souhaitable de le faire, par exemple, about:addons le fait.
-
- -

Storage

- -

Divers changement dans l'API Storage

- - - -

XPCOM

- -

En plus des changements spécifiques référencés ci-dessous, il est important de noter qu'il n'y a plus aucune interfaces gelées. Elles sont toutes dégelées maintenant, indépendamment de ce que peut indiquer la documentation. Nous mettrons à jour la documentation au fil du temps.

- -
-
Changements d'XPCOM dans Gecko 2.0
-
Détails sur les modifications d'XPCOM qui impactent la compatibilité dans Firefox 4.
-
Components.utils.getGlobalForObject()
-
Cette nouvelle méthode retourne l'objet global avec lequel un objet est associé, ce qui remplace un cas d'utilisation commun de __parent__ qui est désormais retiré.
-
- -

Places

- - - -

Changements dans les interfaces

- - - -

Gestion de la mémoire

- -
-
Allocation infaillible de la mémoire
-
Mozilla propose désormais des répartiteur de mémoire infaillible qui sont garantis de ne pas retouner null. Vous devriez lire cet article pour connaitre leur fonctionnement et savoir comment demander l'allocation de la mémoire.
-
- -

Autres changements

- - - -

Autres changements

- -
-
Seul le fichier chrome.manifest racine est chargé
-
maintenant seul le fichier chrome.manifest racine est chargé ; si vous avez besoin de fichiers manifestes secondaires à charger, vous pouvez utilisez la commande manifest dans votre fichier chrome.manifest racine pour les charger.
-
Suppression du support de Gopher
-
Le protocole Gopher n'est plus supporté nativement. L'extension OverbiteFF permet de continuer à le supporter.
-
Gestion des évènement du processus Content
-
Pour le support des plugins hors du processus et les multiples processus caractéristiques, une nouvelle API a été mise en place pour permettre l'envoi de messages dans les processus.
-
Bootstrap des extensions
-
Vous pouvez désormais créer des extensions qui peuvent être installées, désinstallées et mises à jour sans nécessiter le redémarrage du navigateur.
-
Suppression des plugins par défaut
-
The default plugin has been removed. The application plugins folder has also been removed by default, however support for installing plugins via this folder still exists. Voir bug 533891.
-
Extension Manager remplacé par Addon Manager
-
nsIExtensionManager a été remplacée par AddonManager.
-
Child HWNDs n'est plus utilisé
-
Firefox ne créé plus de child HWNDs pour son usage interne sous Windows. Si vous avez codé une extension qui utilise du code natif pour manipuler ces HWNDs, votre extensions ne fonctionnera pas dans Firefox 4. Soit vous devez arrêter l'utilisation de HWND ou soit mettre votre code reposant sur HWND dans un plugin NPAPI. C'est un gros travail, alors si vous pouviez éviter d'utiliser HWND directement.
-
Changements dans les gestes
-
Les gestes par défaut ont été changés, en faisant glisser trois doigts de haut en bas sur le trackpad cela ouvrira ou fermera Firefox Panorama. Pour modifier les éléments précédents, afin d'avoir les commandes de défilement haut et défilement bas, ouvrez about:config et mettez cmd_scrollBottom pour browser.gesture.swipe.down et cmd_scrollTop pour browser.gesture.swipe.up.
-
- -

Voir également

- -
- -
diff --git a/files/fr/mozilla/firefox/versions/40/index.html b/files/fr/mozilla/firefox/versions/40/index.html deleted file mode 100644 index 82eb7fa6a7..0000000000 --- a/files/fr/mozilla/firefox/versions/40/index.html +++ /dev/null @@ -1,198 +0,0 @@ ---- -title: Firefox 40 pour développeurs -slug: Mozilla/Firefox/Versions/40 -translation_of: Mozilla/Firefox/Releases/40 ---- -
{{FirefoxSidebar}}
To test the latest developer features of Firefox,
-install Firefox Developer Edition Firefox 40 was released on August 11, 2015. This article lists key changes that are useful not only for web developers, but also Firefox and Gecko developers as well as add-on developers.
- -

Changements pour les développeurs Web

- -

Outils pour Développeurs

- -

Nouveautés:

- - - -

More:

- - - -

Autres: Tous les bugs devtools corrigés depuis Firefox 39 et Firefox 40.

- -

 

- -

CSS

- - - -

HTML

- -

pas de changement.

- -

JavaScript

- - - -

Interfaces/APIs/DOM

- -

Nouvelles APIs

- - - -

Web Animations API

- -

Amélioration de notre implémentation des animations Web expérimentales, principalement mostley to match latest spec changes:

- - - -

CSSOM

- - - -

WebRTC

- - - -

DOM & HTML DOM

- - - -

Web Audio API

- -

Nouvelles extensions pour l'API Web Audio:

- - - -

Web Workers

- - - -

IndexedDB

- - - -

Dev Tools

- - - -

MathML

- -

pas de changement.

- -

SVG

- -

pas de changement.

- -

Audio/Video

- -

pas de changement.

- -

Networking

- -

pas de changement.

- -

Security

- - - -

Changes for add-on and Mozilla developers

- -

XUL

- -

pas de changement.

- -

JavaScript code modules

- - - -

XPCOM

- -

No change.

- -

Other

- - - -

See also

- - - -

Older versions

- -

{{Firefox_for_developers('39')}}

diff --git a/files/fr/mozilla/firefox/versions/40/site_compatibility/index.html b/files/fr/mozilla/firefox/versions/40/site_compatibility/index.html deleted file mode 100644 index cbe82d4b21..0000000000 --- a/files/fr/mozilla/firefox/versions/40/site_compatibility/index.html +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Compatibilité des sites avec Firefox 40 -slug: Mozilla/Firefox/Versions/40/Site_Compatibility -tags: - - Compatibilité - - Développement Web - - Firefox - - Firefox 40 - - FxSiteCompat - - Guide -translation_of: Mozilla/Firefox/Releases/40/Site_Compatibility ---- -
{{FirefoxSidebar}}

Cette page a été déplacée vers FxSiteCompat.com.

diff --git a/files/fr/mozilla/firefox/versions/41/index.html b/files/fr/mozilla/firefox/versions/41/index.html deleted file mode 100644 index 8ad0302211..0000000000 --- a/files/fr/mozilla/firefox/versions/41/index.html +++ /dev/null @@ -1,198 +0,0 @@ ---- -title: Firefox 41 pour développeurs -slug: Mozilla/Firefox/Versions/41 -tags: - - Firefox - - Versions -translation_of: Mozilla/Firefox/Releases/41 ---- -
{{FirefoxSidebar}}
To test the latest developer features of Firefox,
-install Firefox Developer Edition Firefox 41 was released on September 22, 2015. This article lists key changes that are useful not only for web developers, but also Firefox and Gecko developers as well as add-on developers.
- -

Changements pour les développeurs Web

- -

Outils pour Développeurs

- -

Nouveautés:

- - - -

All devtools bugs fixed between Firefox 40 and Firefox 41: note that many of these bugs, especially those relating to the performance tools, were uplifted to Firefox 40.

- -

CSS

- - - -

HTML

- - - -

JavaScript

- - - -

Interfaces/APIs/DOM

- -

HTML Editing API

- - - -

Events

- - - -

Web Crypto

- - - -

Canvas API

- - - -

Service Workers

- - - -

Miscellaneous

- - - -

MathML

- -

New default and fallback font handling

- -

Mathematical formulas require special fonts. So far, these fonts were hard-coded in the mathml.css user agent stylesheet (which sets the font-family on {{MathMLElement("math")}} tag) and in the preference option font.mathfont-family (which sets the fallback fonts to use for stretchy and large operators). Firefox 41 introduces, an internal x-math language that is automatically set on the <math> tag as well as corresponding preference options (e.g. font.name.serif.x-math). The user agent stylesheet now sets font-family to serif on the <math> tag and the preference option font.mathfont-family is replaced with font.name.serif.x-math.  All platforms now essentially use the same list of fallback fonts, with "Latin Modern Math" as first one. The default/fallback fonts can be configured from the standard per-language font preference menu. For more details, see {{bug(947654)}} and {{bug(1160456)}}.

- -

SVG

- - - -

Audio/Video

- - - -

HTTP

- - - -

Networking

- -

pas de changement.

- -

Security

- - - -

Changes for add-on and Mozilla developers

- -

XUL

- -

pas de changement.

- -

JavaScript code modules

- -

pas de changement.

- -

XPCOM

- -

Interfaces

- -

pas de changement.

- -

Other

- -

pas de changement.

- -

See also

- - - -

Older versions

- -

{{Firefox_for_developers('40')}}

diff --git a/files/fr/mozilla/firefox/versions/41/site_compatibility/index.html b/files/fr/mozilla/firefox/versions/41/site_compatibility/index.html deleted file mode 100644 index 2c89135474..0000000000 --- a/files/fr/mozilla/firefox/versions/41/site_compatibility/index.html +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Compatibilité des sites avec Firefox 41 -slug: Mozilla/Firefox/Versions/41/Site_Compatibility -tags: - - Compatibilité - - Développement Web - - Firefox - - Firefox 41 - - FxSiteCompat - - Guide -translation_of: Mozilla/Firefox/Releases/41/Site_Compatibility ---- -
{{FirefoxSidebar}}

Cette page a été déplacée vers FxSiteCompat.com.

diff --git a/files/fr/mozilla/firefox/versions/5/index.html b/files/fr/mozilla/firefox/versions/5/index.html deleted file mode 100644 index 18020bc53e..0000000000 --- a/files/fr/mozilla/firefox/versions/5/index.html +++ /dev/null @@ -1,168 +0,0 @@ ---- -title: Firefox 5 pour les développeurs -slug: Mozilla/Firefox/Versions/5 -tags: - - Firefox - - Firefox 5 -translation_of: Mozilla/Firefox/Releases/5 ---- -
{{FirefoxSidebar}}
- -

Firefox 5, basé sur Gecko 5.0, est sorti le 21 juin 2011. Cet article fournit des informations à propos des changements qui affectent les développeurs dans cette version.

- -

Changements pour les développeurs Web

- -

HTML

- - - -

Améliorations de Canvas

- - - -

CSS

- -
-
Animations CSS
-
Le support pour les animations CSS a été ajouté, pour l'instant il faut utilisé le préfixe -moz-.
-
- -

DOM

- - - -

JavaScript

- - - -

SVG

- - - -

HTTP

- - - -

MathML

- - - -

Outils pour les développeurs

- - - -

Changements pour les développeurs de Mozilla et de modules complémentaires

- -

Pour des conseils utiles sur la mise à jour des extensions pour Firefox 5, voir Updating add-ons for Firefox 5.

- -
Note : Firefox 5 requiert que les composants binaires soient recompilés, comme pour toutes les versions majeures de Firefox. Pour plus de détails, voir Interfaces Binaires.
- -

Changements dans les modules de code JavaScript

- -

Nouveau module de code JavaScript

- - - -

NetUtil.jsm

- - - -

Changements dans les interfaces

- - - -

Nouvelle interface

- - - -

Interfaces supprimées

- -

Les interfaces suivantes ont été supprimées car elles n'étaient plus indispensables :

- - - -

Aide au débogage

- - - -

API JavaScript (SpiderMonkey)

- - - -

Changement dans le système de compilation

- - - -

Voir également

- -

{{Firefox_for_developers('4')}}

diff --git a/files/fr/mozilla/firefox/versions/50/index.html b/files/fr/mozilla/firefox/versions/50/index.html deleted file mode 100644 index 557addb508..0000000000 --- a/files/fr/mozilla/firefox/versions/50/index.html +++ /dev/null @@ -1,198 +0,0 @@ ---- -title: Firefox 50 for developers -slug: Mozilla/Firefox/Versions/50 -translation_of: Mozilla/Firefox/Releases/50 ---- -
{{FirefoxSidebar}}

Pour tester les dernières fonctionnalités développeur de Firefox,
- installez Firefox Edition DeveloppeurFirefox 50 a été publié le 15 November 2016. Cet article relate les changements clés utiles non seulement aux développeurs web mais aussi aux développeurs travaillant sur Firefox et Gecko, ainsi que pour les développeurs d'extensions.

- -

Changes pour les développeurs Web

- - - -

HTML

- - - -

CSS

- - - -

JavaScript

- - - -

Developer Tools

- - - -

All devtools bugs fixed between Firefox 49 and Firefox 50.

- -

HTTP

- - - -

Security

- - - -

Networking

- - - -

DOM

- - - -

SVG

- - - -

Drag and Drop API

- - - -

Pointer Lock API

- - - -

IndexedDB

- - - -

Service Workers

- - - -

WebGL

- - - -

WebRTC

- - - -

Web Audio API

- - - -

Audio/Video

- - - -

Battery API

- - - -

Files and directories

- - - -

See also

- - - -

Older versions

- -

{{Firefox_for_developers(49)}}

diff --git a/files/fr/mozilla/firefox/versions/59/index.html b/files/fr/mozilla/firefox/versions/59/index.html deleted file mode 100644 index 715432166e..0000000000 --- a/files/fr/mozilla/firefox/versions/59/index.html +++ /dev/null @@ -1,204 +0,0 @@ ---- -title: Firefox 59 for developers -slug: Mozilla/Firefox/Versions/59 -translation_of: Mozilla/Firefox/Releases/59 ---- -
{{FirefoxSidebar}}

This article provides information about the changes in Firefox 59 that will affect developers. Firefox 59 was released on March 13, 2018.

- -

Changes for web developers

- -

Developer tools

- - - -

HTML

- -

The {{HTMLElement("textarea")}} element's {{htmlattrxref("autocomplete", "textarea")}} attribute has been implemented. This lets you enable or disable form auto-fill for the element.

- -

CSS

- - - -

SVG

- -

No changes.

- -

JavaScript

- -

No changes.

- -

APIs

- -

New APIs

- -

{{domxref("PointerEvent","PointerEvents")}} have been enabled in Firefox Desktop ({{bug(1411467)}}).

- -

DOM

- - - -

DOM events

- -

The {{domxref("Event.composedPath()")}} method has been implemented ({{bug(1412775)}}).

- -

Service workers

- - - -

Media and WebRTC

- - - -

Canvas and WebGL

- -

No changes.

- -

CSSOM

- -

The {{domxref("CSSNamespaceRule")}} interface and its namespaceURL and prefix properties have been implemented ({{bug(1326514)}}).

- -

HTTP

- -

No changes.

- -

Security

- - - -

Plugins

- -

No changes.

- -

Other

- -

No changes.

- -

Removals from the web platform

- -

HTML

- -

The non-standard version parameter of the {{htmlelement("script")}} element's {{htmlattrxref("type","script")}} attribute (e.g.  type="application/javascript;version=1.8") has been removed ({{bug(1428745)}}).

- -

CSS

- - - -

JavaScript

- - - -

APIs

- - - -

SVG

- -

Support for SMIL's accessKey feature has been removed ({{bug(1423098)}}).

- -

Other

- -

Support for the non-standard pcast: and feed: protocols has been removed from Firefox ({{bug(1420622)}}).

- -

Changes for add-on and Mozilla developers

- -

WebExtensions

- - - -

See also

- -

Site compatibility for Firefox 59

- -

Older versions

- -

{{Firefox_for_developers(58)}}

diff --git a/files/fr/mozilla/firefox/versions/6/index.html b/files/fr/mozilla/firefox/versions/6/index.html deleted file mode 100644 index 2ee16dc40b..0000000000 --- a/files/fr/mozilla/firefox/versions/6/index.html +++ /dev/null @@ -1,290 +0,0 @@ ---- -title: Firefox 6 pour les développeurs -slug: Mozilla/Firefox/Versions/6 -tags: - - Firefox - - Firefox 6 -translation_of: Mozilla/Firefox/Releases/6 ---- -

Firefox 6, basé sur Gecko 6.0, est sorti le 16 août 2011. Cet article fournit des informations à propos des changements qui affectent les développeurs dans cette version.

- -

Changements pour les développeurs web

- -

HTML

- - - -

CSS

- -
-
-moz-text-decoration-color
-
Cette nouvelle propriété vous permet de définir la couleur utilisée par les décorations du texte, comme le soulignement, le surlignement et le texte barré.
-
-moz-text-decoration-line
-
Cette nouvelle propriété vous permet de définir le type de décorations du texte ajoutée à un élément.
-
-moz-text-decoration-style
-
Cette nouvelle propriété vous permet de définir le style de décorations du texte, comme le soulignement, le surlignement et le texte barré. Les styles incluent les simples lignes, les lignes doubles, les lignes ondulées, les lignes pointillées, etc.
-
-moz-hyphens
-
Cette nouvelle propriété vous permet de contrôler la façon dont la césure des mots lors de retours à la ligne est gérée.
-
-moz-orient
-
Une nouvelle propriété (pour l'instant spécifique à Mozilla) qui vous permet de contrôler l'orientation verticale ou horizontale de certains éléments (en particulier <progress>).
-
::-moz-progress-bar
-
Un pseudo-élément spécifique à Mozilla qui vous permet de définir le style de la zone d'un élément <progress> représentant la fraction d'une tâche.
-
- -

Autres changements

- - - -

DOM

- -
-
Utilisation de media queries à partir de code
-
Vous pouvez désormais tester le résultat d'une chaîne media query en programmant la méthode window.matchMedia() et l'interface MediaQueryList.
-
Evènements tactile
-
Firefox 6 ajout le support du standard W3C sur les évènements tactile, cela facilite l'interprétation d'une ou plusieurs touches à la fois sur les surfaces tactiles comme les écrans tactiles et pavés tactiles.
-
Evènements server-sent
-
Les évènements server-sent permettent à une application Web de demander à un serveur pour envoyer des événements comme n'importe quel événement DOM localement créé.
-
- - - -

JavaScript

- - - -

SVG

- - - -

MathML

- - - -

Accessibilité (ARIA)

- - - -

Réseau

- -
-
WebSockets
-
Pour Firefox 6, WebSockets a été mis à jour à la version 07 du protocole. De plus, l'objet WebSocket a été renommé en MozWebSocket pour l'empêcher d'être utilisé de façon incorrecte pour détecter la disponibilité des WebSockets sans préfixe.
-
- - - -

Autres changements

- - - -

Changements pour les développeurs de Mozilla et de modules complémentaires

- -

Pour des conseils utiles sur la mise à jour des extensions pour Firefox 6, voir Updating add-ons for Firefox 6.

- -
Note: Firefox 6 requiert que les composants binaires soient recompilés, comme pour toutes les versions majeures de Firefox. Pour plus de détails, voir Interfaces Binaires.
- -

Modules de code JavaScript

- -

FileUtils.jsm

- - - -

XPCOMUtils.jsm

- - - -

XPCOM

- - - -

Utilisation du DOM depuis le chrome

- -
-
Utilisation de l'API DOM File dans du code chrome
-
Bien que vous avez toujours pu utiliser l'API DOM File à partir du code chrome, le constructeur File supporte désormais la spécification d'un chemin d'accès local lorsqu'il est utilisé depuis le chrome. De plus, vous pouvez également spécifier le fichier pour accéder à l'aide de l'API DOM File en utilisant un objet nsIFile.
-
- -

Changements dans les interfaces

- - - -

Nouvelles interfaces

- -
-
mozIAsyncFavicons
-
Un nouveau service qui vous permet d'accéder au service favicon de façon asynchrone.
-
nsIEventSource
-
Détails à venir.
-
nsIGSettingsCollection
-
Détails à venir.
-
nsIGSettingsService
-
Détails à venir.
-
nsIHttpUpgradeListener
-
L'interface de rappel pour le traitement des demandes de mise à niveau HTTP via la méthode nsIHttpChannelInternal.HTTPUpgrade().
-
nsIStructuredCloneContainer
-
Un conteneur pour les objets qui ont été sérialisé à l'aide de l'algorithme de clonage structuré.
-
nsITelemetry
-
Implémentation du support de la télémétrie permettant d'enregistrer des données de télémétrie pour être utilisé pour présenter des histogrammes à des fins de suivi des performances. Voir bug 649502 et bug 585196.
-
nsITimedChannel
-
Voir bug 576006.
-
nsIWebSocketListener
-
Voir bug 640003.
-
nsIWebSocketProtocol
-
Voir bug 640003.
-
- -

Interfaces supprimées

- -

Les interfaces suivantes ont été supprimées car elles n'étaient plus indispensables :

- - - -

Autres changements

- -
-
Utilisation des préférences à partir du code d'application
-
Une nouvelle API statique est disponible pour accéder facilement aux préférences, ce n'est disponible que pour le code d'application et ne peut pas être utilisé par les modules complémentaires.
-
- -

Voir également

- -
- -
diff --git a/files/fr/mozilla/firefox/versions/63/index.html b/files/fr/mozilla/firefox/versions/63/index.html deleted file mode 100644 index 06ad714a2a..0000000000 --- a/files/fr/mozilla/firefox/versions/63/index.html +++ /dev/null @@ -1,275 +0,0 @@ ---- -title: Firefox 63 for developers -slug: Mozilla/Firefox/Versions/63 -tags: - - '63' - - Firefox - - Mise à jour - - Mozilla -translation_of: Mozilla/Firefox/Releases/63 ---- -
{{FirefoxSidebar}}
- -

Cet article fournit des informations à propos des changements dans Firefox 63 qui affecteront les développeurs. Firefox 63 a été publié le 23 octobre 2018.

- -

Changements pour les développeurs web

- -

Outils de développeurs

- - - -

HTML

- - - -

Suppressions

- - - -

CSS

- - - -

Suppressions

- - - -

SVG

- -

Aucun changement.

- -

JavaScript

- - - -

Suppressions

- - - -

APIs

- -

Nouvelles APIs

- - - -

DOM

- - - -

Evénements du DOM

- - - -

Media, Web Audio, et WebRTC

- - - -

Canvas et WebGL

- - - -

Suppressions

- - - -

CSSOM

- -

Aucun changement.

- -

HTTP

- - - -

Sécurité

- - - -

Plugins

- -

Aucun changement.

- -

Conformités WebDriver (Marionette)

- -

Nouvelles fonctionnalités

- - - -

Changements API

- - - -

Corrections de bugs

- - - -

Autre

- - - -

Changements des add-on développeurs

- -

Changements API

- -

Thèmes

- - - -

Recherche

- - - -

Onglets

- - - - - - - -

Autre

- - - -

Voir aussi

- - - -

Anciennes versions

- -

{{Firefox_for_developers(62)}}

diff --git a/files/fr/mozilla/firefox/versions/65/index.html b/files/fr/mozilla/firefox/versions/65/index.html deleted file mode 100644 index 98979a74b9..0000000000 --- a/files/fr/mozilla/firefox/versions/65/index.html +++ /dev/null @@ -1,249 +0,0 @@ ---- -title: Firefox 65 pour développeurs -slug: Mozilla/Firefox/Versions/65 -translation_of: Mozilla/Firefox/Releases/65 ---- -
{{FirefoxSidebar}}
- -

Cet article fournit des informations au sujet de changements introduits dans Firefox 65 qui vont concerner les développeurs. Firefox 65 a été publié le 29 janvier 2019.

- -

Changes for web developers

- -

Outils de développement

- - - -

HTML

- - - -

CSS

- - - -

Removals

- - - -

SVG

- -

No changes.

- -

JavaScript

- - - -

APIs

- -

New APIs

- - - -

DOM

- - - -

DOM events

- - - -

Web workers

- - - -

Fetch and Service workers

- - - -

Media, Web Audio, and WebRTC

- - - -

Canvas and WebGL

- - - -

Removals

- - - -

Security

- - - -

Networking

- -

No changes.

- -

Plugins

- -

No changes.

- -

WebDriver conformance (Marionette)

- -

API changes

- - - -

Bug fixes

- - - -

Others

- - - -

Other

- - - -

Changes for add-on developers

- -

API changes

- - - -

Tabs

- - - -

Manifest changes

- -

No changes.

- -

Other

- - - -

See also

- - - -

Older versions

- -

{{Firefox_for_developers(65)}}

diff --git a/files/fr/mozilla/firefox/versions/68/index.html b/files/fr/mozilla/firefox/versions/68/index.html deleted file mode 100644 index 037d582ad8..0000000000 --- a/files/fr/mozilla/firefox/versions/68/index.html +++ /dev/null @@ -1,245 +0,0 @@ ---- -title: Firefox 68 pour développeurs -slug: Mozilla/Firefox/Versions/68 -tags: - - '68' - - FRANCAIS - - Firefox - - Mozilla - - Release -translation_of: Mozilla/Firefox/Releases/68 ---- -

{{FirefoxSidebar}}

- -

Cet article fournit des informations à destination des développeurs à propos des changements dans Firefox 68. Firefox 68 a été lancée le 9 Juillet 2019.

- -

Changements pour développeurs web

- -

Outils développeur

- - - - - -

Le débuggeur JavaScript

- - - -

Le moniteur réseau

- - - -

L'inspecteur de styles et du DOM

- - - -

Storage inspector

- - - -

Other

- - - -

Removals

- - - -

HTML

- - - -

 Removals

- - - -

CSS

- - - -

Removals

- - - -

SVG

- -

No changes.

- -

JavaScript

- - - -

APIs

- -

CSS Object Model (CSSOM)

- - - -

DOM

- - - -

DOM events

- - - -

Media, Web Audio, and WebRTC

- - - -

Removals

- - - -

HTTP

- - - -

Removals

- - - -

Security

- - - -

WebDriver conformance (Marionette)

- -

Bug fixes

- - - -

Other

- - - -

Plugins

- -

No changes.

- -

Changes for add-on developers

- -

API changes

- - - -

Manifest changes

- -

No changes.

- -

See also

- - - -

Older versions

- -

{{Firefox_for_developers(67)}}

diff --git a/files/fr/mozilla/firefox/versions/69/index.html b/files/fr/mozilla/firefox/versions/69/index.html deleted file mode 100644 index 5a5ad086a5..0000000000 --- a/files/fr/mozilla/firefox/versions/69/index.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: Firefox 69 for developers -slug: Mozilla/Firefox/Versions/69 -translation_of: Mozilla/Firefox/Releases/69 ---- -

{{FirefoxSidebar}}{{Draft}}

- -

This article provides information about the changes in Firefox 69 that will affect developers. Firefox 69 is the current Beta version of Firefox, and will ship on September 3, 2019.

- -

Changes for web developers

- -

Developer tools

- - - -

Removals

- -

HTML

- - - -

 Removals

- - - -

CSS

- - - -

Removals

- -

SVG

- - - -

Removals

- -

JavaScript

- - - -

Removals

- -

HTTP

- - - -

APIs

- -

No changes.

- -

New APIs

- -

DOM

- - - -

DOM events

- -

Service workers

- -

Media, Web Audio, and WebRTC

- - - -

Canvas and WebGL

- -

Removals

- -

Security

- -

No changes.

- -

Removals

- -

Plugins

- -

No changes.

- -

Removals

- -

Other

- -

No changes.

- -

Removals

- -

Changes for add-on developers

- -

API changes

- -

No changes.

- -

Removals

- -

Manifest changes

- -

No changes.

- -

Removals

- -

See also

- - - -

Older versions

- -

{{Firefox_for_developers(68)}}

diff --git a/files/fr/mozilla/firefox/versions/7/index.html b/files/fr/mozilla/firefox/versions/7/index.html deleted file mode 100644 index 16936f3f8d..0000000000 --- a/files/fr/mozilla/firefox/versions/7/index.html +++ /dev/null @@ -1,239 +0,0 @@ ---- -title: Firefox 7 pour les développeurs -slug: Mozilla/Firefox/Versions/7 -tags: - - Firefox - - Firefox 7 -translation_of: Mozilla/Firefox/Releases/7 ---- -
{{FirefoxSidebar}}

Firefox 7, basé sur Gecko 7.0, est sorti le 27 september 2011. Cet article fournit des informations à propos des changements qui affectent les développeurs dans cette version.

- -

Changements pour les développeurs Web

- -

HTML

- - - -

Canvas

- - - -

CSS

- - - -

MathML

- - - -

DOM

- - - -

JavaScript

- - - -

WebSockets

- - - -

Console API

- - - -
-

Web timing

- - - -

XML

- - -
- -

Changements pour les développeurs de Mozilla et de modules complémentaires

- -

Ces changements affectent les développeurs d'extensions ainsi que les développeurs qui travaillent sur ​​ou avec le code de Mozilla lui-même. Les developpeurs d'extensions doivent voir Updating extensions for Firefox 7 pour plus d'informations.

- -
Note: Firefox 7 requiert que les composants binaires soient recompilés, comme pour toutes les versions majeures de Firefox. Pour plus de détails, voir Interfaces Binaires.
- -

Modules de code JavaScript

- -

FileUtils.jsm

- - - -

AddonManager.jsm

- - - -

XUL

- - - -

XPCOM

- - - -

Rapporteur de mémoire

- -

Ajout du support pour le multi-reporters, c'est le rapporteur de mémoire qui rassemble des données sur demande et effectue un rappel pour chaque résultat généré. Voir {{interface("nsIMemoryMultiReporter")}} et {{interface("nsIMemoryMultiReporterCallback")}} pour les interfaces nécessaires, ainsi que les méthodes {{ifmethod("nsIMemoryReporterManager", "registerMultiReporter")}} et {{ifmethod("nsIMemoryReporterManager", "unregisterMultiReporter")}}.

- -

Changements de l'expérience utilisateur

- - - -

Changements dans le système de compilation

- - - -

Changements dans les interfaces

- - - -

Nouvelles interfaces

- -
-
{{interface("nsIDOMFontFace")}}
-
Décrit une seule police de caractères.
-
{{interface("nsIDOMFontFaceList")}}
-
Décrit une liste de polices de caractères, chacune représentée par {{interface("nsIDOMFontFace")}}.
-
- -

Interfaces supprimées

- -

Les interfaces suivantes ont été supprimées car elles n'étaient plus indispensables :

- - - -

Les interfaces suivantes ont été supprimées dans le cadre du retrait de l'API ActiveX :

- - - -

Autres changements

- - - -

Voir également

- -

{{Firefox_for_developers('6')}}

diff --git a/files/fr/mozilla/firefox/versions/70/index.html b/files/fr/mozilla/firefox/versions/70/index.html deleted file mode 100644 index e104829d70..0000000000 --- a/files/fr/mozilla/firefox/versions/70/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: Firefox 70 for developers -slug: Mozilla/Firefox/Versions/70 -translation_of: Mozilla/Firefox/Releases/70 ---- -

{{FirefoxSidebar}}{{Draft}}

- -

This article provides information about the changes in Firefox 70 that will affect developers. Firefox 70 is the current Nightly version of Firefox, and will ship on October 22, 2019.

- -

Changes for web developers

- -

Developer tools

- - - -

Removals

- -

HTML

- -

No changes.

- -

 Removals

- -

CSS

- - - -

Removals

- -

SVG

- -

No changes.

- -

Removals

- -

JavaScript

- - - -

Removals

- -

APIs

- -

New APIs

- -

DOM

- - - -

DOM events

- -

Service workers

- -

Media, Web Audio, and WebRTC

- -

Canvas and WebGL

- -

Removals

- -

Security

- -

No changes.

- -

Removals

- -

Plugins

- -

No changes.

- -

Removals

- -

Other

- -

No changes.

- -

Removals

- -

Changes for add-on developers

- -

API changes

- -

No changes.

- -

Removals

- -

Manifest changes

- -

No changes.

- -

Removals

- -

See also

- - - -

Older versions

- -

{{Firefox_for_developers(69)}}

diff --git a/files/fr/mozilla/firefox/versions/76/index.html b/files/fr/mozilla/firefox/versions/76/index.html deleted file mode 100644 index efa1538412..0000000000 --- a/files/fr/mozilla/firefox/versions/76/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: Firefox 76 for developers -slug: Mozilla/Firefox/Versions/76 -tags: - - '76' - - Firefox - - Mozilla - - Release -translation_of: Mozilla/Firefox/Releases/76 ---- -

{{FirefoxSidebar}}

- -

Cet article fournit des informations sur les modifications apportées à Firefox 76 qui affecteront les développeurs. Firefox 76 a été publié le 5 Mai 2020.

- -

Voir aussi le post d'accompagnement du blog hacks — Firefox 76: Audio worklets and other tricks.

- -

Changements pour les développeurs web

- -

Outils pour les développeurs

- -

Débogueur

- - - -

Moniteur de réseau

- - - -

Console web

- - - -

Débogage à distance

- - - -

HTML

- - - -

CSS

- - - -

SVG

- -

No changes.

- -

JavaScript

- - - -

APIs

- -

Nouvelles APIs

- - - -

DOM

- - - -

Suppressions

- - - -

HTTP

- -

Aucun changements.

- -

Sécurité

- -

Aucun changements.

- -

Changements pour les développeurs de modules complémentaires

- -

Aucun changements.

- -

Voir aussi

- - - -

Anciennes versions

- -

{{Firefox_for_developers(75)}}

diff --git a/files/fr/mozilla/firefox/versions/77/index.html b/files/fr/mozilla/firefox/versions/77/index.html deleted file mode 100644 index 073ca22e4b..0000000000 --- a/files/fr/mozilla/firefox/versions/77/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: Firefox 77 for developers -slug: Mozilla/Firefox/Versions/77 -tags: - - '77' - - Firefox - - Mozilla - - Sorties -translation_of: Mozilla/Firefox/Releases/77 ---- -

{{FirefoxSidebar}}{{Draft}}

- -

Cet article fournit des informations sur les modifications apportées à Firefox 77 qui affecteront les développeurs. Firefox 77 est l'actuel version de Firefox Bêta, et sera livrée le 2 Juin 2020.

- -

Changements pour les développeurs web

- -

Outils pour les développeurs

- -

Aucun changement.

- -

Suppressions

- -

HTML

- -

Aucun changement.

- -

 Suppressions

- -

CSS

- -

Aucun changement.

- -

 Suppressions

- -

SVG

- -

Aucun changement.

- -

Suppressions

- -

JavaScript

- -

Aucun changement.

- -

APIs

- -

Nouvelles APIs

- -

DOM

- -

Événements DOM

- -

Service workers

- -

Médias, Web Audio et WebRTC

- -

Canevas et WebGL

- -

Suppressions

- -

HTTP

- -

Aucun changement.

- -

Securité

- -

Aucun changement.

- -

Suppressions

- -

Plugins

- -

Aucun changement.

- -

Suppressions

- -

Securité

- -

Enlèvements

- -

Autres

- -

Aucun changement.

- -

Suppressions

- -

Changements pour les développeurs de modules complémentaires

- -

Modifications de l'API

- -

Aucun changement.

- -

Suppressions

- -

Changements manifestes

- - - -

Suppressions

- -

Autres

- - - -

Voir aussi

- - - -

Anciennes versions

- -

{{Firefox_for_developers(76)}}

diff --git a/files/fr/mozilla/firefox/versions/8/index.html b/files/fr/mozilla/firefox/versions/8/index.html deleted file mode 100644 index b1e7b31fa7..0000000000 --- a/files/fr/mozilla/firefox/versions/8/index.html +++ /dev/null @@ -1,255 +0,0 @@ ---- -title: Firefox 8 pour les développeurs -slug: Mozilla/Firefox/Versions/8 -tags: - - Firefox - - Firefox 8 -translation_of: Mozilla/Firefox/Releases/8 ---- -

Firefox 8, basé sur Gecko 8.0, est sorti le 8 novembre 2011. Cet article fournit des informations à la fois pour les developpeurs Web et pour les développeurs d'extensions et de projets liés à Mozilla pour aider à tirer pleinement parti des fonctionnalités de cette version.

- -

Changements pour les développeurs Web

- -

HTML

- - - -

DOM

- - - -

JavaScript

- - - -

CSS

- - - -

Réseau

- - - -

WebSockets

- - - -

WebGL

- - - -

MathML

- - - -

Outils de développement

- - - -

Changements pour les développeurs de Mozilla et de modules complémentaires

- -

Voir Updating add-ons for Firefox 8 pour vous guidez dans les modifications que vous êtes susceptibles d'avoir à faire pour rendre vos extensions compatibles avec Firefox 8.

- -
Note: Firefox 8 requiert que les composants binaires soient recompilés, comme pour toutes les versions majeures de Firefox. Pour plus de détails, voir Interfaces Binaires.
- -

XPCOM

- -
-
Components.utils
-
Les nouvelles méthodes Components.utils.createObjectIn() et Components.utils.makeObjectPropsNormal() ont été créées pour faciliter la création d'objets dans des compartiments spécifiques.
-
- -

Autres changements relatifs à XPCOM

- - - -

Workers

- -

Il n'est plus possible d'accéder à des objets XPCOM depuis ChromeWorkers. XPConnect a été désactivé dans le contexte des travailleurs comme indiqué par le bug 649537.

- -

XUL

- - - -

Changements dans le système de compilation

- - - -

Enregistrement du chrome

- - - -

Changements dans les interfaces

- - - -

Interfaces supprimées

- -

Les interfaces suivantes ont été supprimées car elles n'étaient plus indispensables :

- - - -

L'interface nsIWorkerFactory a également été retirée. WLes travailleurs peuvent encore être créés à l'aide des constructeurs Worker et ChromeWorker.

- -

Autres changements

- - - -

Voir également

- -
- -
diff --git a/files/fr/mozilla/firefox/versions/9/index.html b/files/fr/mozilla/firefox/versions/9/index.html deleted file mode 100644 index 3ee33465b7..0000000000 --- a/files/fr/mozilla/firefox/versions/9/index.html +++ /dev/null @@ -1,233 +0,0 @@ ---- -title: Firefox 9 pour les développeurs -slug: Mozilla/Firefox/Versions/9 -tags: - - Firefox - - Firefox 9 -translation_of: Mozilla/Firefox/Releases/9 ---- -
- -

Firefox 9, basé sur Gecko 9.0, est sorti le 20 décembre 2011 sur Windows. La version 9.0.1, qui corrige un problème de plantage découvert au dernier moment, est sortie le 21 décembre 2011, sur Mac et Linux.

- -

Changements pour les développeurs Web

- -

HTML

- - - -

CSS

- - - -

DOM

- -
-
Utilisation du mode plein écran
-
La nouvelle API pour le plein écran offre un moyen de présenter le contenu en utilisant la totalité de l'écran, sans l'interface du navigateur. C'est très bien pour les vidéos et les jeux. Cette API est encore expérimentale et préfixée.
-
- - - -

Workers

- - - -

WebGL

- - - -

MathML

- - - -

Réseau

- - - -

Outils de développement

- - - -

Changements pour les développeurs de Mozilla et de modules complémentaires

- -

Voir Updating add-ons for Firefox 9 pour un aperçu des modifications que vous devriez apporter pour rendre vos extensions compatibles avec Firefox 9.

- -

XUL

- - - -

Changements dans le module de code JavaScript

- - - -

Changement dans le service

- - - -

NSPR

- - - -

Changements dans les interfaces

- -

Interface supprimée

- - - -

Divers changements dans les interfaces

- - - -

Parseur IDL

- -

Le parseur IDL ne supporte plus la notion de pointeurs unique qui n'a jamais été entièrement implémentée.

- -

Changements dans le système de compilation

- - - -

Autres changements

- - - -

Voir également

- -
- -
diff --git a/files/fr/mozilla/firefox/versions/index.html b/files/fr/mozilla/firefox/versions/index.html deleted file mode 100644 index 711c761192..0000000000 --- a/files/fr/mozilla/firefox/versions/index.html +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Notes de version Firefox pour développeurs -slug: Mozilla/Firefox/Versions -tags: - - Firefox - - TopicStub -translation_of: Mozilla/Firefox/Releases ---- -
{{FirefoxSidebar}}
- -

Cette page regroupe les liens vers les articles « Firefox X pour les développeurs » pour chacune des versions de Firefox. Ces notes vous permettent de connaître quelles fonctions ont été ajoutées et les bogues éliminées à chacune des versions de Firefox.

- -
{{ListSubpages("",1,0,1)}}
-- cgit v1.2.3-54-g00ecf