From f36cc6a7639a8f1adff02bc7a152bd7f54ceae6d Mon Sep 17 00:00:00 2001 From: julieng Date: Mon, 15 Nov 2021 21:45:09 +0100 Subject: move *.html to *.md --- .../user_interface/browser_action/index.html | 48 --- .../user_interface/browser_action/index.md | 48 +++ .../user_interface/browser_styles/index.html | 459 --------------------- .../user_interface/browser_styles/index.md | 459 +++++++++++++++++++++ .../user_interface/context_menu_items/index.html | 56 --- .../user_interface/context_menu_items/index.md | 56 +++ .../user_interface/devtools_panels/index.html | 75 ---- .../user_interface/devtools_panels/index.md | 75 ++++ .../user_interface/extension_pages/index.html | 78 ---- .../user_interface/extension_pages/index.md | 78 ++++ .../webextensions/user_interface/index.html | 115 ------ .../add-ons/webextensions/user_interface/index.md | 115 ++++++ .../user_interface/notifications/index.html | 50 --- .../user_interface/notifications/index.md | 50 +++ .../user_interface/omnibox/index.html | 75 ---- .../webextensions/user_interface/omnibox/index.md | 75 ++++ .../user_interface/options_pages/index.html | 71 ---- .../user_interface/options_pages/index.md | 71 ++++ .../user_interface/page_actions/index.html | 109 ----- .../user_interface/page_actions/index.md | 109 +++++ .../webextensions/user_interface/popups/index.html | 62 --- .../webextensions/user_interface/popups/index.md | 62 +++ .../user_interface/sidebars/index.html | 60 --- .../webextensions/user_interface/sidebars/index.md | 60 +++ 24 files changed, 1258 insertions(+), 1258 deletions(-) delete mode 100644 files/fr/mozilla/add-ons/webextensions/user_interface/browser_action/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/user_interface/browser_action/index.md delete mode 100644 files/fr/mozilla/add-ons/webextensions/user_interface/browser_styles/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/user_interface/browser_styles/index.md delete 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/context_menu_items/index.md delete mode 100644 files/fr/mozilla/add-ons/webextensions/user_interface/devtools_panels/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/user_interface/devtools_panels/index.md delete mode 100644 files/fr/mozilla/add-ons/webextensions/user_interface/extension_pages/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/user_interface/extension_pages/index.md delete mode 100644 files/fr/mozilla/add-ons/webextensions/user_interface/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/user_interface/index.md delete mode 100644 files/fr/mozilla/add-ons/webextensions/user_interface/notifications/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/user_interface/notifications/index.md delete mode 100644 files/fr/mozilla/add-ons/webextensions/user_interface/omnibox/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/user_interface/omnibox/index.md delete mode 100644 files/fr/mozilla/add-ons/webextensions/user_interface/options_pages/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/user_interface/options_pages/index.md delete mode 100644 files/fr/mozilla/add-ons/webextensions/user_interface/page_actions/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/user_interface/page_actions/index.md delete mode 100644 files/fr/mozilla/add-ons/webextensions/user_interface/popups/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/user_interface/popups/index.md delete mode 100644 files/fr/mozilla/add-ons/webextensions/user_interface/sidebars/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/user_interface/sidebars/index.md (limited to 'files/fr/mozilla/add-ons/webextensions/user_interface') diff --git a/files/fr/mozilla/add-ons/webextensions/user_interface/browser_action/index.html b/files/fr/mozilla/add-ons/webextensions/user_interface/browser_action/index.html deleted file mode 100644 index 862dfee482..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/user_interface/browser_action/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: Bouton de la barre d'outils -slug: Mozilla/Add-ons/WebExtensions/user_interface/Browser_action -translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Browser_action ---- -
{{AddonSidebar}}
- -

Généralement appelé comme une action de navigateur, cette option d'interface utilisateur est un bouton ajouté à la barre d'outils du navigateur. Les utilisateurs cliquent sur le bouton pour interagir avec votre extension.
-

- -

Le bouton de la barre d'outils (action du navigateur) est très similaire au bouton de la barre d'adresse (action de la page). Pour connaître les différences et savoir quand utiliser quoi, voir les actions de page et les actions du navigateur.

- -

Spécification de l'action du navigateur

- -

Vous définissez les propriétés de l'action du navigateur à l'aide de la clé  browser_action dans manifest.json:

- -
"browser_action": {
-  "default_icon": {
-    "19": "button/geo-19.png",
-    "38": "button/geo-38.png"
-  },
-  "default_title": "Whereami?"
-}
- -

La seule clé obligatoire est default_icon.

- -

Il existe deux façons de spécifier une action du navigateur: avec ou sans popup. Si vous ne spécifiez pas de popup, lorsque l'utilisateur clique sur le bouton, un événement est envoyé à l'extension, que celle-ci attend pour utiliser  browserAction.onClicked :

- -
browser.browserAction.onClicked.addListener(handleClick);
- -

Si vous spécifiez une fenêtre contextuelle, l'événement de clic n'est pas envoyé : A la place, le popup s'affiche lorsque l'utilisateur clique sur le bouton. L'utilisateur peut interagir avec le popup et il se ferme automatiquement lorsque l'utilisateur clique à l'extérieur. Consulter l'article Popup pour plus de détails sur la création et la gestion des fenêtres pop-up.

- -

Notez que votre extension ne peut avoir qu'une seule action de navigateur.

- -

Vous pouvez modifier plusieurs propriétés d'action du navigateur de manière programmée à l'aide de l'API action du navigateur.

- -

Icônes

- -

Pour plus d'informations sur la création d'icônes à utiliser avec l'action de votre navigateur, voir Iconographie dans la documentation Photon Design System.

- -

Exemples

- -

Le dépôt webextensions-examples sur GitHub contient plusieurs exemples de WebExtensions qui utilisent les actions du navigateur:

- - diff --git a/files/fr/mozilla/add-ons/webextensions/user_interface/browser_action/index.md b/files/fr/mozilla/add-ons/webextensions/user_interface/browser_action/index.md new file mode 100644 index 0000000000..862dfee482 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/user_interface/browser_action/index.md @@ -0,0 +1,48 @@ +--- +title: Bouton de la barre d'outils +slug: Mozilla/Add-ons/WebExtensions/user_interface/Browser_action +translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Browser_action +--- +
{{AddonSidebar}}
+ +

Généralement appelé comme une action de navigateur, cette option d'interface utilisateur est un bouton ajouté à la barre d'outils du navigateur. Les utilisateurs cliquent sur le bouton pour interagir avec votre extension.
+

+ +

Le bouton de la barre d'outils (action du navigateur) est très similaire au bouton de la barre d'adresse (action de la page). Pour connaître les différences et savoir quand utiliser quoi, voir les actions de page et les actions du navigateur.

+ +

Spécification de l'action du navigateur

+ +

Vous définissez les propriétés de l'action du navigateur à l'aide de la clé  browser_action dans manifest.json:

+ +
"browser_action": {
+  "default_icon": {
+    "19": "button/geo-19.png",
+    "38": "button/geo-38.png"
+  },
+  "default_title": "Whereami?"
+}
+ +

La seule clé obligatoire est default_icon.

+ +

Il existe deux façons de spécifier une action du navigateur: avec ou sans popup. Si vous ne spécifiez pas de popup, lorsque l'utilisateur clique sur le bouton, un événement est envoyé à l'extension, que celle-ci attend pour utiliser  browserAction.onClicked :

+ +
browser.browserAction.onClicked.addListener(handleClick);
+ +

Si vous spécifiez une fenêtre contextuelle, l'événement de clic n'est pas envoyé : A la place, le popup s'affiche lorsque l'utilisateur clique sur le bouton. L'utilisateur peut interagir avec le popup et il se ferme automatiquement lorsque l'utilisateur clique à l'extérieur. Consulter l'article Popup pour plus de détails sur la création et la gestion des fenêtres pop-up.

+ +

Notez que votre extension ne peut avoir qu'une seule action de navigateur.

+ +

Vous pouvez modifier plusieurs propriétés d'action du navigateur de manière programmée à l'aide de l'API action du navigateur.

+ +

Icônes

+ +

Pour plus d'informations sur la création d'icônes à utiliser avec l'action de votre navigateur, voir Iconographie dans la documentation Photon Design System.

+ +

Exemples

+ +

Le dépôt webextensions-examples sur GitHub contient plusieurs exemples de WebExtensions qui utilisent les actions du navigateur:

+ + diff --git a/files/fr/mozilla/add-ons/webextensions/user_interface/browser_styles/index.html b/files/fr/mozilla/add-ons/webextensions/user_interface/browser_styles/index.html deleted file mode 100644 index 68f3bb2b82..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/user_interface/browser_styles/index.html +++ /dev/null @@ -1,459 +0,0 @@ ---- -title: Styles des navigateurs -slug: Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles -translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles ---- -
{{AddonSidebar}}
- -

Certains composants de l'interface utilisateur - les fenêtres contextuelles, fenêtres latérales, et les pages d'options du navigateur et de la page - sont spécifiés par votre extension de la même manière  :

- -
    -
  1. créer un fichier HTML définissant la structure de l'élément d'interface utilisateur
    2. -
  2. ajoutez une clé manifest.json (browser_action, page_action, sidebar_action, ou options_ui) pointant vers ce fichier HTML.
    3. -
- -

L'un des défis de cette approche est de styliser l'élément de telle sorte qu'il s'intègre au style du navigateur.
- Pour aider à cela, les clés manifest.json keys incluent une propriété optionnelle supplémentaire : browser_style.
- Si cela est inclus et défini sur true, votre document obtiendra une ou plusieurs feuilles de style supplémentaires qui le rendront cohérent avec l'interface utilisateur du navigateur et avec d'autres extensions utilisant la propriété browser_style.

- -

Lorsque vous envisagez d'utiliser le browser_style: true, vous devez tester votre extension avec différents thèmes (intégrés ou AMO) pour vous assurer que l'interface d'extension se comporte comme vous l'attendez..

- -
-

Attention : Quand browser_style: true est inclus dans le manifest de votre extension web, la sélection de texte dans l'interface utilisateur de votre extension est désactivée sauf dans les contrôles de saisie. Si cela pose un problème, incluez plutôt browser_style:false.

-
- -
-

Note : Google Chrome et Opera utilisent chrome_style au lieu de browser_style, donc si vous souhaitez les prendre en charge, vous devez ajouter les deux clés.

-
- -

Dans Firefox, la feuille de style peut être vue sur chrome://browser/content/extension.css. La feuille de style peut être vue sur chrome://browser/content/extension-mac.css est également incluse sur OS X.

- -

La plupart des styles sont automatiquement appliqués, mais certains éléments nécessitent que vous ajoutiez la classe  browser-style non standard pour obtenir leur style, comme indiqué dans le tableau ci-dessous :

- - - - - - - - - - - - - - - - - - - - - - - - - - -
ElementExemple
<button> - 
-<button class="browser-style">Click me</button>{{non-standard_inline}}
-
-

<select>

- 		- 
-<select class="browser-style" name="select">
-  <option value="value1">Value 1</option>
-  <option value="value2" selected>Value 2</option>
-  <option value="value3">Value 3</option>
-</select>
-
<textarea> - 
-<textarea class="browser-style">Write here</textarea>
-
Parent d'un <input> - 
-<div class="browser-style">
-  <input type="radio" id="op1" name="choices" value="op1">
-  <label for="op1">Option 1</label>
-
-  <input type="radio" id="op2" name="choices" value="op2">
-  <label for="op2">Option 2</label>
-</div>
-
- -
-

Note : Voir le {{bug(1465256)}} pour la suppression de cette exigence inutile.

-
- -

Compatibilité du navigateur

- - - -

{{Compat("webextensions.browser_style")}}

- -

Composants du panneau Firefox

- -
-

Attention : Cette fonctionnalité est non standard et ne fonctionne que dans Firefox.

-
- -

La feuille de style chrome://browser/content/extension.css contient également les styles des composants du panneau Firefox.

- -

L'ancien guide de style de Firefox documente l'utilisation appropriée.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ElementExemple
Header - 
-<header class="panel-section panel-section-header">
-  <div class="icon-section-header"><img src="image.svg"/></div>
-  <div class="text-section-header">Header</div>
-</header>
-
Footer - 
-<footer class="panel-section panel-section-footer">
-  <button class="panel-section-footer-button">Cancel</button>
-  <div class="panel-section-footer-separator"></div>
-  <button class="panel-section-footer-button default">Confirm</button>
-</footer>
-
Tabs - 
-<div class="panel-section panel-section-tabs">
-  <button class="panel-section-tabs-button selected">Tab</button>
-  <div class="panel-section-tabs-separator"></div>
-  <button class="panel-section-tabs-button">Tab</button>
-  <div class="panel-section-tabs-separator"></div>
-  <button class="panel-section-tabs-button">Tab</button>
-</div>
-
Form - 
-<div class="panel-section panel-section-formElements">
-  <div class="panel-formElements-item">
-    <label for="name01">Label:</label>
-    <input type="text" value="Name" id="name01" />
-  </div>
-  <div class="panel-formElements-item">
-    <label for="picker01">Label:</label>
-    <select id="picker01">
-      <option value="value1" selected="true">Dropdown</option>
-      <option value="value2">List Item</option>
-      <option value="value3">List Item</option>
-    </select>
-  </div>
-  <div class="panel-formElements-item">
-    <label for="placeholder01">Label:</label>
-    <input type="text" placeholder="Placeholder" id="placeholder01" />
-    <button name="expander" class="expander"></button>
-  </div>
-</div>
-
Menu - 
-<div class="panel-section panel-section-list">
-  <div class="panel-list-item">
-    <div class="icon"></div>
-    <div class="text">List Item</div>
-    <div class="text-shortcut">Ctrl-L</div>
-  </div>
-
-  <div class="panel-list-item">
-    <div class="icon"></div>
-    <div class="text">List Item</div>
-    <div class="text-shortcut"></div>
-  </div>
-
-  <div class="panel-section-separator"></div>
-
-  <div class="panel-list-item disabled">
-    <div class="icon"></div>
-    <div class="text">Disabled List Item</div>
-    <div class="text-shortcut"></div>
-  </div>
-
-  <div class="panel-section-separator"></div>
-
-  <div class="panel-list-item">
-    <div class="icon"></div>
-    <div class="text">List Item</div>
-    <div class="text-shortcut"></div>
-  </div>
-
-  <div class="panel-list-item">
-    <div class="icon"></div>
-    <div class="text">List Item</div>
-    <div class="text-shortcut"></div>
-  </div>
-</div>
-
- -

Exemple

- -

HTML

- -
<header class="panel-section panel-section-header">
-  <div class="icon-section-header"><!-- An image goes here. --></div>
-  <div class="text-section-header">Header</div>
-</header>
-
-<div class="panel-section panel-section-list">
-  <div class="panel-list-item">
-    <div class="icon"></div>
-    <div class="text">List Item</div>
-    <div class="text-shortcut">Ctrl-L</div>
-  </div>
-
-  <div class="panel-list-item">
-    <div class="icon"></div>
-    <div class="text">List Item</div>
-    <div class="text-shortcut"></div>
-  </div>
-
-  <div class="panel-section-separator"></div>
-
-  <div class="panel-list-item disabled">
-    <div class="icon"></div>
-    <div class="text">Disabled List Item</div>
-    <div class="text-shortcut"></div>
-  </div>
-
-  <div class="panel-section-separator"></div>
-
-  <div class="panel-list-item">
-    <div class="icon"></div>
-    <div class="text">List Item</div>
-    <div class="text-shortcut"></div>
-  </div>
-
-  <div class="panel-list-item">
-    <div class="icon"></div>
-    <div class="text">List Item</div>
-    <div class="text-shortcut"></div>
-  </div>
-</div>
-
-<footer class="panel-section panel-section-footer">
-  <button class="panel-section-footer-button">Cancel</button>
-  <div class="panel-section-footer-separator"></div>
-  <button class="panel-section-footer-button default">Confirm</button>
-</footer>
- - - -
/* Example specific – not part of chrome://browser/content/extension.css */
-body {
-  background: #fcfcfc;
-  background-clip: padding-box;
-  border: 1px solid rgba(24,26,27,.2);
-  box-shadow: 0 3px 5px rgba(24,26,27,.1),0 0 7px rgba(24,26,27,.1);
-  box-sizing: content-box;
-  margin: 2em auto .5em;
-  width: 384px;
-}
-
-html {
-  min-height: 100vh;
-}
-
-html > body {
-  margin: auto;
-}
-
-.icon-section-header {
-  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj48Y2lyY2xlIGZpbGw9IiMzNjM5NTkiIGN4PSIxNSIgY3k9IjE1IiByPSIxNSIvPjwvc3ZnPg==");
-}
- -

Resultat

- -

{{EmbedLiveSample("Exemple","640","360")}}

diff --git a/files/fr/mozilla/add-ons/webextensions/user_interface/browser_styles/index.md b/files/fr/mozilla/add-ons/webextensions/user_interface/browser_styles/index.md new file mode 100644 index 0000000000..68f3bb2b82 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/user_interface/browser_styles/index.md @@ -0,0 +1,459 @@ +--- +title: Styles des navigateurs +slug: Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles +translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles +--- +
{{AddonSidebar}}
+ +

Certains composants de l'interface utilisateur - les fenêtres contextuelles, fenêtres latérales, et les pages d'options du navigateur et de la page - sont spécifiés par votre extension de la même manière  :

+ +
    +
  1. créer un fichier HTML définissant la structure de l'élément d'interface utilisateur
    2. +
  2. ajoutez une clé manifest.json (browser_action, page_action, sidebar_action, ou options_ui) pointant vers ce fichier HTML.
    3. +
+ +

L'un des défis de cette approche est de styliser l'élément de telle sorte qu'il s'intègre au style du navigateur.
+ Pour aider à cela, les clés manifest.json keys incluent une propriété optionnelle supplémentaire : browser_style.
+ Si cela est inclus et défini sur true, votre document obtiendra une ou plusieurs feuilles de style supplémentaires qui le rendront cohérent avec l'interface utilisateur du navigateur et avec d'autres extensions utilisant la propriété browser_style.

+ +

Lorsque vous envisagez d'utiliser le browser_style: true, vous devez tester votre extension avec différents thèmes (intégrés ou AMO) pour vous assurer que l'interface d'extension se comporte comme vous l'attendez..

+ +
+

Attention : Quand browser_style: true est inclus dans le manifest de votre extension web, la sélection de texte dans l'interface utilisateur de votre extension est désactivée sauf dans les contrôles de saisie. Si cela pose un problème, incluez plutôt browser_style:false.

+
+ +
+

Note : Google Chrome et Opera utilisent chrome_style au lieu de browser_style, donc si vous souhaitez les prendre en charge, vous devez ajouter les deux clés.

+
+ +

Dans Firefox, la feuille de style peut être vue sur chrome://browser/content/extension.css. La feuille de style peut être vue sur chrome://browser/content/extension-mac.css est également incluse sur OS X.

+ +

La plupart des styles sont automatiquement appliqués, mais certains éléments nécessitent que vous ajoutiez la classe  browser-style non standard pour obtenir leur style, comme indiqué dans le tableau ci-dessous :

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
ElementExemple
<button> + 
+<button class="browser-style">Click me</button>{{non-standard_inline}}
+
+

<select>

+ 		+ 
+<select class="browser-style" name="select">
+  <option value="value1">Value 1</option>
+  <option value="value2" selected>Value 2</option>
+  <option value="value3">Value 3</option>
+</select>
+
<textarea> + 
+<textarea class="browser-style">Write here</textarea>
+
Parent d'un <input> + 
+<div class="browser-style">
+  <input type="radio" id="op1" name="choices" value="op1">
+  <label for="op1">Option 1</label>
+
+  <input type="radio" id="op2" name="choices" value="op2">
+  <label for="op2">Option 2</label>
+</div>
+
+ +
+

Note : Voir le {{bug(1465256)}} pour la suppression de cette exigence inutile.

+
+ +

Compatibilité du navigateur

+ + + +

{{Compat("webextensions.browser_style")}}

+ +

Composants du panneau Firefox

+ +
+

Attention : Cette fonctionnalité est non standard et ne fonctionne que dans Firefox.

+
+ +

La feuille de style chrome://browser/content/extension.css contient également les styles des composants du panneau Firefox.

+ +

L'ancien guide de style de Firefox documente l'utilisation appropriée.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ElementExemple
Header + 
+<header class="panel-section panel-section-header">
+  <div class="icon-section-header"><img src="image.svg"/></div>
+  <div class="text-section-header">Header</div>
+</header>
+
Footer + 
+<footer class="panel-section panel-section-footer">
+  <button class="panel-section-footer-button">Cancel</button>
+  <div class="panel-section-footer-separator"></div>
+  <button class="panel-section-footer-button default">Confirm</button>
+</footer>
+
Tabs + 
+<div class="panel-section panel-section-tabs">
+  <button class="panel-section-tabs-button selected">Tab</button>
+  <div class="panel-section-tabs-separator"></div>
+  <button class="panel-section-tabs-button">Tab</button>
+  <div class="panel-section-tabs-separator"></div>
+  <button class="panel-section-tabs-button">Tab</button>
+</div>
+
Form + 
+<div class="panel-section panel-section-formElements">
+  <div class="panel-formElements-item">
+    <label for="name01">Label:</label>
+    <input type="text" value="Name" id="name01" />
+  </div>
+  <div class="panel-formElements-item">
+    <label for="picker01">Label:</label>
+    <select id="picker01">
+      <option value="value1" selected="true">Dropdown</option>
+      <option value="value2">List Item</option>
+      <option value="value3">List Item</option>
+    </select>
+  </div>
+  <div class="panel-formElements-item">
+    <label for="placeholder01">Label:</label>
+    <input type="text" placeholder="Placeholder" id="placeholder01" />
+    <button name="expander" class="expander"></button>
+  </div>
+</div>
+
Menu + 
+<div class="panel-section panel-section-list">
+  <div class="panel-list-item">
+    <div class="icon"></div>
+    <div class="text">List Item</div>
+    <div class="text-shortcut">Ctrl-L</div>
+  </div>
+
+  <div class="panel-list-item">
+    <div class="icon"></div>
+    <div class="text">List Item</div>
+    <div class="text-shortcut"></div>
+  </div>
+
+  <div class="panel-section-separator"></div>
+
+  <div class="panel-list-item disabled">
+    <div class="icon"></div>
+    <div class="text">Disabled List Item</div>
+    <div class="text-shortcut"></div>
+  </div>
+
+  <div class="panel-section-separator"></div>
+
+  <div class="panel-list-item">
+    <div class="icon"></div>
+    <div class="text">List Item</div>
+    <div class="text-shortcut"></div>
+  </div>
+
+  <div class="panel-list-item">
+    <div class="icon"></div>
+    <div class="text">List Item</div>
+    <div class="text-shortcut"></div>
+  </div>
+</div>
+
+ +

Exemple

+ +

HTML

+ +
<header class="panel-section panel-section-header">
+  <div class="icon-section-header"><!-- An image goes here. --></div>
+  <div class="text-section-header">Header</div>
+</header>
+
+<div class="panel-section panel-section-list">
+  <div class="panel-list-item">
+    <div class="icon"></div>
+    <div class="text">List Item</div>
+    <div class="text-shortcut">Ctrl-L</div>
+  </div>
+
+  <div class="panel-list-item">
+    <div class="icon"></div>
+    <div class="text">List Item</div>
+    <div class="text-shortcut"></div>
+  </div>
+
+  <div class="panel-section-separator"></div>
+
+  <div class="panel-list-item disabled">
+    <div class="icon"></div>
+    <div class="text">Disabled List Item</div>
+    <div class="text-shortcut"></div>
+  </div>
+
+  <div class="panel-section-separator"></div>
+
+  <div class="panel-list-item">
+    <div class="icon"></div>
+    <div class="text">List Item</div>
+    <div class="text-shortcut"></div>
+  </div>
+
+  <div class="panel-list-item">
+    <div class="icon"></div>
+    <div class="text">List Item</div>
+    <div class="text-shortcut"></div>
+  </div>
+</div>
+
+<footer class="panel-section panel-section-footer">
+  <button class="panel-section-footer-button">Cancel</button>
+  <div class="panel-section-footer-separator"></div>
+  <button class="panel-section-footer-button default">Confirm</button>
+</footer>
+ + + +
/* Example specific – not part of chrome://browser/content/extension.css */
+body {
+  background: #fcfcfc;
+  background-clip: padding-box;
+  border: 1px solid rgba(24,26,27,.2);
+  box-shadow: 0 3px 5px rgba(24,26,27,.1),0 0 7px rgba(24,26,27,.1);
+  box-sizing: content-box;
+  margin: 2em auto .5em;
+  width: 384px;
+}
+
+html {
+  min-height: 100vh;
+}
+
+html > body {
+  margin: auto;
+}
+
+.icon-section-header {
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj48Y2lyY2xlIGZpbGw9IiMzNjM5NTkiIGN4PSIxNSIgY3k9IjE1IiByPSIxNSIvPjwvc3ZnPg==");
+}
+ +

Resultat

+ +

{{EmbedLiveSample("Exemple","640","360")}}

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 deleted file mode 100644 index 85fa7a82fc..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/user_interface/context_menu_items/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: Elements du menu contextuel -slug: Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items -tags: - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items -original_slug: Mozilla/Add-ons/WebExtensions/user_interface/elements_menu_contextuel ---- -
{{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.

- -

- -

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 :

- - \ No newline at end of file diff --git a/files/fr/mozilla/add-ons/webextensions/user_interface/context_menu_items/index.md b/files/fr/mozilla/add-ons/webextensions/user_interface/context_menu_items/index.md new file mode 100644 index 0000000000..85fa7a82fc --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/user_interface/context_menu_items/index.md @@ -0,0 +1,56 @@ +--- +title: Elements du menu contextuel +slug: Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items +original_slug: Mozilla/Add-ons/WebExtensions/user_interface/elements_menu_contextuel +--- +
{{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.

+ +

+ +

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 :

+ + \ No newline at end of file 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 deleted file mode 100644 index 3b2b241705..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/user_interface/devtools_panels/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: panneaux devtools -slug: Mozilla/Add-ons/WebExtensions/user_interface/devtools_panels -tags: - - Débutant - - Guide - - WebExtensions - - interface utilisateur -translation_of: Mozilla/Add-ons/WebExtensions/user_interface/devtools_panels -original_slug: Mozilla/Add-ons/WebExtensions/user_interface/panneaux_devtools ---- -
{{AddonSidebar}}
- -
-

Note : 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.

- -

- -

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/devtools_panels/index.md b/files/fr/mozilla/add-ons/webextensions/user_interface/devtools_panels/index.md new file mode 100644 index 0000000000..3b2b241705 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/user_interface/devtools_panels/index.md @@ -0,0 +1,75 @@ +--- +title: panneaux devtools +slug: Mozilla/Add-ons/WebExtensions/user_interface/devtools_panels +tags: + - Débutant + - Guide + - WebExtensions + - interface utilisateur +translation_of: Mozilla/Add-ons/WebExtensions/user_interface/devtools_panels +original_slug: Mozilla/Add-ons/WebExtensions/user_interface/panneaux_devtools +--- +
{{AddonSidebar}}
+ +
+

Note : 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.

+ +

+ +

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/extension_pages/index.html b/files/fr/mozilla/add-ons/webextensions/user_interface/extension_pages/index.html deleted file mode 100644 index 7ddf8b03fd..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/user_interface/extension_pages/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: Extension pages -slug: Mozilla/Add-ons/WebExtensions/user_interface/Extension_pages -tags: - - Débutant - - User Interface - - WebExtensions - - interface utilisateur -translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Extension_pages -original_slug: Mozilla/Add-ons/WebExtensions/user_interface/pages_web_incluses ---- -
{{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.

- -

- -

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/extension_pages/index.md b/files/fr/mozilla/add-ons/webextensions/user_interface/extension_pages/index.md new file mode 100644 index 0000000000..7ddf8b03fd --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/user_interface/extension_pages/index.md @@ -0,0 +1,78 @@ +--- +title: Extension pages +slug: Mozilla/Add-ons/WebExtensions/user_interface/Extension_pages +tags: + - Débutant + - User Interface + - WebExtensions + - interface utilisateur +translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Extension_pages +original_slug: Mozilla/Add-ons/WebExtensions/user_interface/pages_web_incluses +--- +
{{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.

+ +

+ +

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/index.html b/files/fr/mozilla/add-ons/webextensions/user_interface/index.html deleted file mode 100644 index a77c53928b..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/user_interface/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: Interface utilisateur -slug: Mozilla/Add-ons/WebExtensions/user_interface -tags: - - Landing - - User Interface - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/user_interface ---- -
{{AddonSidebar}}
- -

Les WebExtensions disposent de plusieurs options d'interface utilisateur afin que leur fonctionnalité puisse être mise à la disposition de l'utilisateur. Un résumé de ces options est fourni ci-dessous, avec une introduction plus détaillée à chaque option d'interface utilisateur dans cette section.

- -
-

Note : Pour en revenir des conseils sur l'utilisation de ces composants d'interface utilisateur afin de créer une expérience utilisateur générale dans votre extension, consultez l'article sur les bonnes pratiques de l'expérience utilisateur.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
UI optionDescriptionExemple
Bouton de la barre d'outils (action du navigateur) -

Un bouton sur la barre d'outils du navigateur qui diffuse un événement sur l'add-on lorsqu'il est cliqué. Par défaut, le bouton est visible dans tous les onglets.

-
Bouton de la barre d'outils du navigateur avec un popup -

Un popup sur un bouton dans la barre d'outils du navigateur qui s'ouvre lorsque le bouton est cliqué. La fenêtre contextuelle est définie dans un document HTML qui gère l'interaction de l'utilisateur.

-
Bouton de la barre d'addresse (action page) -

Un bouton sur la barre d'adresse du navigateur qui distribue un événement à l'add-on lorsqu'il est cliqué. Par défaut, le bouton est caché dans tous les onglets.

-
Bouton de la barre d'addresse avec un popup -

Un popup sur un bouton dans la barre d'adresse du navigateur qui s'ouvre lorsque le bouton est cliqué. La fenêtre contextuelle est définie dans un document HTML qui gère l'interaction de l'utilisateur.

-
Elément du menu contextuel -

Les éléments de menu, les cases à cocher et les boutons radio sur un ou plusieurs des menus contextuels du navigateur. En outre, les menus peuvent être structurés en ajoutant des séparateurs. Lorsque les éléments du menu sont cliqués, un événement est envoyé à l'extension.

-
Barre latérale -

Un document HTML s'affiche à côté d'une page Web, avec l'option de contenu unique par page. La barre latérale s'ouvre lorsque l'extension est installée, puis obéit à la sélection de visibilité de la barre latérale de l'utilisateur. L'interaction de l'utilisateur dans la barre latérale est traitée par son document HTML.

-
page d'options -

Une page qui vous permet de définir les préférences pour votre WebExtension que vos utilisateurs peuvent modifier. L'utilisateur peut accéder à cette page dans le gestionnaire des extensions du navigateur.

-
Extension pages -

Utilisez les pages Web incluses dans votre WebExtension pour fournir des formulaires, de l'aide ou tout autre contenu requis, dans les fenêtres ou les onglets.

-
Notifications -

Notifications transitoires affichées à l'utilisateur par le mécanisme de notification du système d'exploitation sous-jacent. Déclenche un événement vers l'extension lorsque l'utilisateur clique sur une notification ou lorsque une notification se ferme (automatiquement ou à la demande de l'utilisateur).

-
Suggestions de la barre d'addresse -

Offrez des suggestions de barèmes d'adresses personnalisées lorsque l'utilisateur entre un mot-clé.

-
Panneaux d'outils de développement -

Un onglet avec un document HTML associé qui s'affiche dans les outils de développement du navigateur.

-
- -

Les guides pratiques suivants fournissent des conseils étape par étape pour créer certaines options d'interface utilisateur:

- - diff --git a/files/fr/mozilla/add-ons/webextensions/user_interface/index.md b/files/fr/mozilla/add-ons/webextensions/user_interface/index.md new file mode 100644 index 0000000000..a77c53928b --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/user_interface/index.md @@ -0,0 +1,115 @@ +--- +title: Interface utilisateur +slug: Mozilla/Add-ons/WebExtensions/user_interface +tags: + - Landing + - User Interface + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/user_interface +--- +
{{AddonSidebar}}
+ +

Les WebExtensions disposent de plusieurs options d'interface utilisateur afin que leur fonctionnalité puisse être mise à la disposition de l'utilisateur. Un résumé de ces options est fourni ci-dessous, avec une introduction plus détaillée à chaque option d'interface utilisateur dans cette section.

+ +
+

Note : Pour en revenir des conseils sur l'utilisation de ces composants d'interface utilisateur afin de créer une expérience utilisateur générale dans votre extension, consultez l'article sur les bonnes pratiques de l'expérience utilisateur.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
UI optionDescriptionExemple
Bouton de la barre d'outils (action du navigateur) +

Un bouton sur la barre d'outils du navigateur qui diffuse un événement sur l'add-on lorsqu'il est cliqué. Par défaut, le bouton est visible dans tous les onglets.

+
Bouton de la barre d'outils du navigateur avec un popup +

Un popup sur un bouton dans la barre d'outils du navigateur qui s'ouvre lorsque le bouton est cliqué. La fenêtre contextuelle est définie dans un document HTML qui gère l'interaction de l'utilisateur.

+
Bouton de la barre d'addresse (action page) +

Un bouton sur la barre d'adresse du navigateur qui distribue un événement à l'add-on lorsqu'il est cliqué. Par défaut, le bouton est caché dans tous les onglets.

+
Bouton de la barre d'addresse avec un popup +

Un popup sur un bouton dans la barre d'adresse du navigateur qui s'ouvre lorsque le bouton est cliqué. La fenêtre contextuelle est définie dans un document HTML qui gère l'interaction de l'utilisateur.

+
Elément du menu contextuel +

Les éléments de menu, les cases à cocher et les boutons radio sur un ou plusieurs des menus contextuels du navigateur. En outre, les menus peuvent être structurés en ajoutant des séparateurs. Lorsque les éléments du menu sont cliqués, un événement est envoyé à l'extension.

+
Barre latérale +

Un document HTML s'affiche à côté d'une page Web, avec l'option de contenu unique par page. La barre latérale s'ouvre lorsque l'extension est installée, puis obéit à la sélection de visibilité de la barre latérale de l'utilisateur. L'interaction de l'utilisateur dans la barre latérale est traitée par son document HTML.

+
page d'options +

Une page qui vous permet de définir les préférences pour votre WebExtension que vos utilisateurs peuvent modifier. L'utilisateur peut accéder à cette page dans le gestionnaire des extensions du navigateur.

+
Extension pages +

Utilisez les pages Web incluses dans votre WebExtension pour fournir des formulaires, de l'aide ou tout autre contenu requis, dans les fenêtres ou les onglets.

+
Notifications +

Notifications transitoires affichées à l'utilisateur par le mécanisme de notification du système d'exploitation sous-jacent. Déclenche un événement vers l'extension lorsque l'utilisateur clique sur une notification ou lorsque une notification se ferme (automatiquement ou à la demande de l'utilisateur).

+
Suggestions de la barre d'addresse +

Offrez des suggestions de barèmes d'adresses personnalisées lorsque l'utilisateur entre un mot-clé.

+
Panneaux d'outils de développement +

Un onglet avec un document HTML associé qui s'affiche dans les outils de développement du navigateur.

+
+ +

Les guides pratiques suivants fournissent des conseils étape par étape pour créer certaines options d'interface utilisateur:

+ + diff --git a/files/fr/mozilla/add-ons/webextensions/user_interface/notifications/index.html b/files/fr/mozilla/add-ons/webextensions/user_interface/notifications/index.html deleted file mode 100644 index e0106d3b7d..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/user_interface/notifications/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: Notifications -slug: Mozilla/Add-ons/WebExtensions/user_interface/Notifications -tags: - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Notifications ---- -
{{AddonSidebar}}
- -

Les notifications vous permettent d'afficher des informations sur votre extension ou son contenu en utilisant le système d'exploitation sous-jacent.

- -

-Les notifications peuvent inclure un appel d'action pour l'utilisateur, et votre extension peut écouter l'utilisateur en cliquant sur la notification ou la fermeture de la notification. - -

Spécification des notifications

- -

Vous gérez les notifications en programmant, en utilisant l'API {{WebExtAPIRef("notifications")}}. Pour utiliser cette API, vous devez demander la permission de notification dans votre manifest.json :

- -
"permissions": ["notifications"]
- -

Vous utilisez ensuite {{WebExtAPIRef("notifications.create")}} pour créer vos notifications, comme dans cet exemple de notify-link-clicks-i18n :

- -
var title = browser.i18n.getMessage("notificationTitle");
-var content = browser.i18n.getMessage("notificationContent", message.url);
-browser.notifications.create({
-  "type": "basic",
-  "iconUrl": browser.extension.getURL("icons/link-48.png"),
-  "title": title,
-  "message": content
-});
- -

Ce code crée une notification avec un icône, un titre et un message.

- -

Si la notification inclut un appel à l'action, vous pouvez écouter l'utilisateur en cliquant sur la notification pour appeler la fonction pour gérer l'action:

- -
browser.notifications.onClicked.addListener(handleClick);
- -

Si vous émettez des appels à l'action par le biais de notifications, vous souhaitez également définir l'ID de notification facultatif, afin de déterminer quel appel à l'action a sélectionné.

- -

Icônes

- -

Pour plus d'informations sur la création d'icônes à utiliser avec votre notification, reportez-vous à la section Iconography dans la documentation Photon Design System.

- -

Exemples

- -

Le dépôt webextensions-examples sur GitHub contient plusieurs exemples de WebExtensions qui utilise la création de notifications :

- - \ No newline at end of file diff --git a/files/fr/mozilla/add-ons/webextensions/user_interface/notifications/index.md b/files/fr/mozilla/add-ons/webextensions/user_interface/notifications/index.md new file mode 100644 index 0000000000..e0106d3b7d --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/user_interface/notifications/index.md @@ -0,0 +1,50 @@ +--- +title: Notifications +slug: Mozilla/Add-ons/WebExtensions/user_interface/Notifications +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Notifications +--- +
{{AddonSidebar}}
+ +

Les notifications vous permettent d'afficher des informations sur votre extension ou son contenu en utilisant le système d'exploitation sous-jacent.

+ +

+Les notifications peuvent inclure un appel d'action pour l'utilisateur, et votre extension peut écouter l'utilisateur en cliquant sur la notification ou la fermeture de la notification. + +

Spécification des notifications

+ +

Vous gérez les notifications en programmant, en utilisant l'API {{WebExtAPIRef("notifications")}}. Pour utiliser cette API, vous devez demander la permission de notification dans votre manifest.json :

+ +
"permissions": ["notifications"]
+ +

Vous utilisez ensuite {{WebExtAPIRef("notifications.create")}} pour créer vos notifications, comme dans cet exemple de notify-link-clicks-i18n :

+ +
var title = browser.i18n.getMessage("notificationTitle");
+var content = browser.i18n.getMessage("notificationContent", message.url);
+browser.notifications.create({
+  "type": "basic",
+  "iconUrl": browser.extension.getURL("icons/link-48.png"),
+  "title": title,
+  "message": content
+});
+ +

Ce code crée une notification avec un icône, un titre et un message.

+ +

Si la notification inclut un appel à l'action, vous pouvez écouter l'utilisateur en cliquant sur la notification pour appeler la fonction pour gérer l'action:

+ +
browser.notifications.onClicked.addListener(handleClick);
+ +

Si vous émettez des appels à l'action par le biais de notifications, vous souhaitez également définir l'ID de notification facultatif, afin de déterminer quel appel à l'action a sélectionné.

+ +

Icônes

+ +

Pour plus d'informations sur la création d'icônes à utiliser avec votre notification, reportez-vous à la section Iconography dans la documentation Photon Design System.

+ +

Exemples

+ +

Le dépôt webextensions-examples sur GitHub contient plusieurs exemples de WebExtensions qui utilise la création de notifications :

+ + \ No newline at end of file diff --git a/files/fr/mozilla/add-ons/webextensions/user_interface/omnibox/index.html b/files/fr/mozilla/add-ons/webextensions/user_interface/omnibox/index.html deleted file mode 100644 index 4419f2465b..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/user_interface/omnibox/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: Suggestions de la barre d'adresse -slug: Mozilla/Add-ons/WebExtensions/user_interface/Omnibox -tags: - - User Interface - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Omnibox ---- -
{{AddonSidebar()}}
- -

En utilisant l'API {{WebExtAPIRef("omnibox")}}, WebExtensions peut personnaliser les suggestions proposées dans la liste déroulante de la barre d'adresse du navigateur lorsque l'utilisateur entre un mot-clé.

- -

- -

Cela permet à votre extension, par exemple, de rechercher une bibliothèque d'ebooks gratuits ou comme dans l'exemple ci-dessus, un dépôt d'exemples de code.

- -

Spécification de la personnalisation Omnibox

- -

Vous dites à votre extension qu'il va personnaliser les suggestions de la barre d'adresse en incluant la clé omnibox et la définition du mot-clé de déclenchement dans son fichier manifest.json :

- -
  "omnibox": { "keyword" : "cs" }
- -

Dans le fichier JavaScript d'arrière-plan extension, en utilisant {{WebExtAPIRef("omnibox.setDefaultSuggestion()")}}, vous pouvez éventuellement définir la première suggestion à afficher dans la liste déroulante de la barre d'adresse. Utilisez ceci pour donner un indice sur l'utilisation de la fonction :

- -
browser.omnibox.setDefaultSuggestion({
-  description: `Search the firefox codebase
-    (e.g. "hello world" | "path:omnibox.js onInputChanged")`
-});
- - -

Vous pouvez ensuite ajouter le code pour fournir le contenu personnalisé en écoutant  {{WebExtAPIRef("omnibox.onInputStarted")}}, qui est envoyé lorsque l'utilisateur a tapé le mot-clé et un espace, et  {{WebExtAPIRef("omnibox.onInputChanged")}}, qui est expédié chaque fois que l'utilisateur met à jour l'entrée de la barre d'adresse. Vous pouvez ensuite remplir les suggestions, dans ce cas, créer une recherche de https://searchfox.org/mozilla-central utilisant le terme entré par l'utilisateur :

- -
browser.omnibox.onInputChanged.addListener((text, addSuggestions) => {
-  let headers = new Headers({"Accept": "application/json"});
-  let init = {method: 'GET', headers};
-  let url = buildSearchURL(text);
-  let request = new Request(url, init);
-
-  fetch(request)
-    .then(createSuggestionsFromResponse)
-    .then(addSuggestions);
-});
- -

Si la WebExtension définit une suggestion par défaut en utilisant {{WebExtAPIRef("omnibox.setDefaultSuggestion()")}}, alors cela apparaîtra en premier dans la liste déroulante.

- - -

L'extension peut ensuite écouter l'utilisateur en cliquant sur l'une des suggestions, en utilisant {{WebExtAPIRef("omnibox.onInputEntered")}}. Si la suggestion par défaut est cliquée, le terme personnalisé de l'utilisateur est renvoyé, sinon la chaîne de la suggestion est renvoyée. En outre, les informations sur les préférences du navigateur de l'utilisateur pour la gestion des nouveaux liens sont transmises. Dans le code ci-dessous, le terme personnalisé de l'utilisateur est employé pour créer une recherche différente, l'URL suggérée est ouverte:

- -
browser.omnibox.onInputEntered.addListener((text, disposition) => {
-  let url = text;
-  if (!text.startsWith(SOURCE_URL)) {
-    // Update the url if the user clicks on the default suggestion.
-    url = `${SEARCH_URL}?q=${text}`;
-  }
-  switch (disposition) {
-    case "currentTab":
-      browser.tabs.update({url});
-      break;
-    case "newForegroundTab":
-      browser.tabs.create({url});
-      break;
-    case "newBackgroundTab":
-      browser.tabs.create({url, active: false});
-      break;
-  }
-});
- - -

Exemples

- -

Le depot webextensions-examples sur GitHub contient plusieurs exemples de WebExtensions qui utilise la personnalisation de omnibox

- - \ No newline at end of file diff --git a/files/fr/mozilla/add-ons/webextensions/user_interface/omnibox/index.md b/files/fr/mozilla/add-ons/webextensions/user_interface/omnibox/index.md new file mode 100644 index 0000000000..4419f2465b --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/user_interface/omnibox/index.md @@ -0,0 +1,75 @@ +--- +title: Suggestions de la barre d'adresse +slug: Mozilla/Add-ons/WebExtensions/user_interface/Omnibox +tags: + - User Interface + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Omnibox +--- +
{{AddonSidebar()}}
+ +

En utilisant l'API {{WebExtAPIRef("omnibox")}}, WebExtensions peut personnaliser les suggestions proposées dans la liste déroulante de la barre d'adresse du navigateur lorsque l'utilisateur entre un mot-clé.

+ +

+ +

Cela permet à votre extension, par exemple, de rechercher une bibliothèque d'ebooks gratuits ou comme dans l'exemple ci-dessus, un dépôt d'exemples de code.

+ +

Spécification de la personnalisation Omnibox

+ +

Vous dites à votre extension qu'il va personnaliser les suggestions de la barre d'adresse en incluant la clé omnibox et la définition du mot-clé de déclenchement dans son fichier manifest.json :

+ +
  "omnibox": { "keyword" : "cs" }
+ +

Dans le fichier JavaScript d'arrière-plan extension, en utilisant {{WebExtAPIRef("omnibox.setDefaultSuggestion()")}}, vous pouvez éventuellement définir la première suggestion à afficher dans la liste déroulante de la barre d'adresse. Utilisez ceci pour donner un indice sur l'utilisation de la fonction :

+ +
browser.omnibox.setDefaultSuggestion({
+  description: `Search the firefox codebase
+    (e.g. "hello world" | "path:omnibox.js onInputChanged")`
+});
+ + +

Vous pouvez ensuite ajouter le code pour fournir le contenu personnalisé en écoutant  {{WebExtAPIRef("omnibox.onInputStarted")}}, qui est envoyé lorsque l'utilisateur a tapé le mot-clé et un espace, et  {{WebExtAPIRef("omnibox.onInputChanged")}}, qui est expédié chaque fois que l'utilisateur met à jour l'entrée de la barre d'adresse. Vous pouvez ensuite remplir les suggestions, dans ce cas, créer une recherche de https://searchfox.org/mozilla-central utilisant le terme entré par l'utilisateur :

+ +
browser.omnibox.onInputChanged.addListener((text, addSuggestions) => {
+  let headers = new Headers({"Accept": "application/json"});
+  let init = {method: 'GET', headers};
+  let url = buildSearchURL(text);
+  let request = new Request(url, init);
+
+  fetch(request)
+    .then(createSuggestionsFromResponse)
+    .then(addSuggestions);
+});
+ +

Si la WebExtension définit une suggestion par défaut en utilisant {{WebExtAPIRef("omnibox.setDefaultSuggestion()")}}, alors cela apparaîtra en premier dans la liste déroulante.

+ + +

L'extension peut ensuite écouter l'utilisateur en cliquant sur l'une des suggestions, en utilisant {{WebExtAPIRef("omnibox.onInputEntered")}}. Si la suggestion par défaut est cliquée, le terme personnalisé de l'utilisateur est renvoyé, sinon la chaîne de la suggestion est renvoyée. En outre, les informations sur les préférences du navigateur de l'utilisateur pour la gestion des nouveaux liens sont transmises. Dans le code ci-dessous, le terme personnalisé de l'utilisateur est employé pour créer une recherche différente, l'URL suggérée est ouverte:

+ +
browser.omnibox.onInputEntered.addListener((text, disposition) => {
+  let url = text;
+  if (!text.startsWith(SOURCE_URL)) {
+    // Update the url if the user clicks on the default suggestion.
+    url = `${SEARCH_URL}?q=${text}`;
+  }
+  switch (disposition) {
+    case "currentTab":
+      browser.tabs.update({url});
+      break;
+    case "newForegroundTab":
+      browser.tabs.create({url});
+      break;
+    case "newBackgroundTab":
+      browser.tabs.create({url, active: false});
+      break;
+  }
+});
+ + +

Exemples

+ +

Le depot webextensions-examples sur GitHub contient plusieurs exemples de WebExtensions qui utilise la personnalisation de omnibox

+ + \ No newline at end of file diff --git a/files/fr/mozilla/add-ons/webextensions/user_interface/options_pages/index.html b/files/fr/mozilla/add-ons/webextensions/user_interface/options_pages/index.html deleted file mode 100644 index 6b38ccb5aa..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/user_interface/options_pages/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: Options page -slug: Mozilla/Add-ons/WebExtensions/user_interface/Options_pages -tags: - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Options_pages ---- -
{{AddonSidebar}}
- -
-

Une page Option vous permet de définir des préférences pour votre WebExtension que vos utilisateurs peuvent modifier. Les utilisateurs peuvent accéder à la page d'options de l'extension à partir du gestionnaire des add-ons du navigateur:

- -

{{EmbedYouTube("eODy24csH5M")}}

- -

La façon dont les utilisateurs accèdent à la page et la manière dont elle est intégrée à l'interface utilisateur du navigateur varient d'un navigateur à l'autre.

- -

Vous pouvez ouvrir la page en programmant en appelant  runtime.openOptionsPage().

- -

Les pages d'options ont une politique de sécurité de contenu qui restreint les sources à partir de laquelle elles peuvent charger des ressources et interdit certaines pratiques dangereuses telles que l'utilisation eval(). Voir la politique de sécurité de contenu pour plus de détails.

- -

Spécification de la page d'options

- -

Pour créer une page d'options, écrivez un fichier HTML définissant la page. Cette page peut inclure des fichiers CSS et JavaScript, comme une page Web normale. Cette page, contine un exemple dans favourite-colour, comprend un fichier :

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

JavaScript en cours d'exécution dans la page peut utiliser toutes les APIs des WebExtension auxquelles l'extension a des permissions. En particulier, vous pouvez utiliser l'API storage pour conserver les préférences.

- -

Insérez les fichiers de la page dans votre extension.

- -

Vous devez également inclure une clé options_ui dans votre fichier manifest.json, en lui donnant l'URL de la page.

- -
"options_ui": {
-  "page": "options.html",
-  "browser_style": true
-},
- -
-

Note: Google Chrome et Opera utilisent chrome_style au lieu de browser_style, donc si vous souhaitez les prendre en charge, vous devez ajouter les deux clés.

-
- -

Voir la page options_ui pour les options de partage entre votre page d'options et les scripts d'arrière-plan ou de contenu.

- -

Options de conception de contenu

- -

Pour plus de détails sur la façon de concevoir le contenu de vos options en fonction du style de Firefox, voir le system de conception Photon et les styles de navigateur documentation.

- -

Exemples

- -

Le depot webextensions-examples sur GitHub contient plusieurs exemples de WebExtensions qui utilisent les options de page :

- - -
diff --git a/files/fr/mozilla/add-ons/webextensions/user_interface/options_pages/index.md b/files/fr/mozilla/add-ons/webextensions/user_interface/options_pages/index.md new file mode 100644 index 0000000000..6b38ccb5aa --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/user_interface/options_pages/index.md @@ -0,0 +1,71 @@ +--- +title: Options page +slug: Mozilla/Add-ons/WebExtensions/user_interface/Options_pages +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Options_pages +--- +
{{AddonSidebar}}
+ +
+

Une page Option vous permet de définir des préférences pour votre WebExtension que vos utilisateurs peuvent modifier. Les utilisateurs peuvent accéder à la page d'options de l'extension à partir du gestionnaire des add-ons du navigateur:

+ +

{{EmbedYouTube("eODy24csH5M")}}

+ +

La façon dont les utilisateurs accèdent à la page et la manière dont elle est intégrée à l'interface utilisateur du navigateur varient d'un navigateur à l'autre.

+ +

Vous pouvez ouvrir la page en programmant en appelant  runtime.openOptionsPage().

+ +

Les pages d'options ont une politique de sécurité de contenu qui restreint les sources à partir de laquelle elles peuvent charger des ressources et interdit certaines pratiques dangereuses telles que l'utilisation eval(). Voir la politique de sécurité de contenu pour plus de détails.

+ +

Spécification de la page d'options

+ +

Pour créer une page d'options, écrivez un fichier HTML définissant la page. Cette page peut inclure des fichiers CSS et JavaScript, comme une page Web normale. Cette page, contine un exemple dans favourite-colour, comprend un fichier :

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

JavaScript en cours d'exécution dans la page peut utiliser toutes les APIs des WebExtension auxquelles l'extension a des permissions. En particulier, vous pouvez utiliser l'API storage pour conserver les préférences.

+ +

Insérez les fichiers de la page dans votre extension.

+ +

Vous devez également inclure une clé options_ui dans votre fichier manifest.json, en lui donnant l'URL de la page.

+ +
"options_ui": {
+  "page": "options.html",
+  "browser_style": true
+},
+ +
+

Note: Google Chrome et Opera utilisent chrome_style au lieu de browser_style, donc si vous souhaitez les prendre en charge, vous devez ajouter les deux clés.

+
+ +

Voir la page options_ui pour les options de partage entre votre page d'options et les scripts d'arrière-plan ou de contenu.

+ +

Options de conception de contenu

+ +

Pour plus de détails sur la façon de concevoir le contenu de vos options en fonction du style de Firefox, voir le system de conception Photon et les styles de navigateur documentation.

+ +

Exemples

+ +

Le depot webextensions-examples sur GitHub contient plusieurs exemples de WebExtensions qui utilisent les options de page :

+ + +
diff --git a/files/fr/mozilla/add-ons/webextensions/user_interface/page_actions/index.html b/files/fr/mozilla/add-ons/webextensions/user_interface/page_actions/index.html deleted file mode 100644 index 843266e618..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/user_interface/page_actions/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: Bouton de la barre d'adresse -slug: Mozilla/Add-ons/WebExtensions/user_interface/Page_actions -tags: - - AddresseBarButton - - Page Action - - User Interface - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Page_actions ---- -
{{AddonSidebar}}
- -

Généralement appelée action de page, cette option d'interface utilisateur est un bouton ajouté à la barre d'adresse du navigateur. Les utilisateurs cliquent sur le bouton pour interagir avec votre extension.

- -

- -

Actions de pages et actions du navigateur

- -

Le bouton de la barre d'adresse (ou action de la page) est très semblable au bouton de la barre d'outils (ou action du navigateur).

- -

Les différences sont :

- - - -

Utilisez une action de page lorsque l'action est liée à la page en cours, et une action navigateur lorsque l'action est liée au navigateur dans son ensemble ou à trop de pages. Par exemple :

- - - - - - - - - - - - - - - - - - - - - - - - -
TypeBookmarks actionContent actionTabs operation
page actionBookmark this pageReddit enhancementSend tab
browser actionShow all bookmarksEnable ad-blockingSync all open tabs
- - - -

Spécification de l'action de la page

- -

Vous définissez les propriétés de la clé de l'action de page dans le manifest.json:

- -
"page_action": {
-  "browser_style": true,
-  "default_icon": {
-    "19": "button/geo-19.png",
-    "38": "button/geo-38.png"
-  },
-  "default_title": "Whereami?",
-}
- -

La seule clé obligatoire est default_icon.

- -

Il y a deux façons de spécifier une action de page : avec ou sans popup.

- - - -

Notez que votre extension ne peut avoir qu'une seule page action.

- -

Vous pouvez modifier l'une des propriétés d'action de la page de manière programmée en utilisant l'API de la pageAction.

- -

Icônes

- -

Pour plus de détails sur la création d'icônes à utiliser avec l'action de votre page, voir   Iconography dans la documentation du Photon Design System.

- - - -

Exemples

- -

Le dépôt webextensions-examples sur GitHub contient plusieurs exemples de WebExtensions qui utilisent la page action :

- - diff --git a/files/fr/mozilla/add-ons/webextensions/user_interface/page_actions/index.md b/files/fr/mozilla/add-ons/webextensions/user_interface/page_actions/index.md new file mode 100644 index 0000000000..843266e618 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/user_interface/page_actions/index.md @@ -0,0 +1,109 @@ +--- +title: Bouton de la barre d'adresse +slug: Mozilla/Add-ons/WebExtensions/user_interface/Page_actions +tags: + - AddresseBarButton + - Page Action + - User Interface + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Page_actions +--- +
{{AddonSidebar}}
+ +

Généralement appelée action de page, cette option d'interface utilisateur est un bouton ajouté à la barre d'adresse du navigateur. Les utilisateurs cliquent sur le bouton pour interagir avec votre extension.

+ +

+ +

Actions de pages et actions du navigateur

+ +

Le bouton de la barre d'adresse (ou action de la page) est très semblable au bouton de la barre d'outils (ou action du navigateur).

+ +

Les différences sont :

+ + + +

Utilisez une action de page lorsque l'action est liée à la page en cours, et une action navigateur lorsque l'action est liée au navigateur dans son ensemble ou à trop de pages. Par exemple :

+ + + + + + + + + + + + + + + + + + + + + + + + +
TypeBookmarks actionContent actionTabs operation
page actionBookmark this pageReddit enhancementSend tab
browser actionShow all bookmarksEnable ad-blockingSync all open tabs
+ + + +

Spécification de l'action de la page

+ +

Vous définissez les propriétés de la clé de l'action de page dans le manifest.json:

+ +
"page_action": {
+  "browser_style": true,
+  "default_icon": {
+    "19": "button/geo-19.png",
+    "38": "button/geo-38.png"
+  },
+  "default_title": "Whereami?",
+}
+ +

La seule clé obligatoire est default_icon.

+ +

Il y a deux façons de spécifier une action de page : avec ou sans popup.

+ + + +

Notez que votre extension ne peut avoir qu'une seule page action.

+ +

Vous pouvez modifier l'une des propriétés d'action de la page de manière programmée en utilisant l'API de la pageAction.

+ +

Icônes

+ +

Pour plus de détails sur la création d'icônes à utiliser avec l'action de votre page, voir   Iconography dans la documentation du Photon Design System.

+ + + +

Exemples

+ +

Le dépôt webextensions-examples sur GitHub contient plusieurs exemples de WebExtensions qui utilisent la page action :

+ + diff --git a/files/fr/mozilla/add-ons/webextensions/user_interface/popups/index.html b/files/fr/mozilla/add-ons/webextensions/user_interface/popups/index.html deleted file mode 100644 index eca8a96e38..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/user_interface/popups/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: Popups -slug: Mozilla/Add-ons/WebExtensions/user_interface/Popups -tags: - - WebExtensions - - interface utilisateur -translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Popups ---- -
{{AddonSidebar}}
- -
-

Une fenêtre contextuelle est une boîte de dialogue associée à un bouton de la barre d'outils ou à un bouton de la barre d'adresse. Cette page décrit les popups en général, leur spécification, leur débogage, leur redimensionnement et leur conception, ainsi que des exemples d'utilisation..

- -

- -

Lorsque l'utilisateur clique sur le bouton, la fenêtre contextuelle s'affiche. Lorsque l'utilisateur clique n'importe où en dehors de la fenêtre contextuelle, la fenêtre contextuelle est fermée. La fenêtre contextuelle peut être fermée par programmation en appelant window.close() à partir d'un script exécuté dans la fenêtre contextuelle. Cependant, vous ne pouvez pas ouvrir le menu contextuel à partir d'un JavaScript de le l'extension : il ne peut être ouvert qu'en réponse à une action de l'utilisateur.

- -

Vous pouvez définir un raccourci clavier qui ouvre la fenêtre contextuelle en utilisant les raccourcis "_execute_browser_action" et "_execute_page_action". Consultez la clé de commande de la documentation du manifest.json.

- -

Spécification d'une fenêtre contextuelle

- -

Le popup est spécifié comme un fichier HTML, qui peut inclure des fichiers CSS et JavaScript, comme le fait une page Web normale. Contrairement à une page normale, le JavaScript peut utiliser toutes les APIs WebExtension auxquelles l'extension possède des permissions.

- -

Le fichier HTML est inclus dans la WebExtension et spécifié en partie à la clé browser_action ou page_action par "default_popup" dans le manifest.json :

- -
  "browser_action": {
-    "default_icon": "icons/beasts-32.png",
-    "default_title": "Beastify",
-    "default_popup": "popup/choose_beast.html"
-  }
- -

Vous pouvez demander au navigateur d'inclure une feuille de style dans votre fenêtre contextuelle qui la rendra compatible avec l'interface utilisateur du navigateur. Pour ce faire, ajoutez "browser_style": true dans la clé browser_action ou page_action.

- -

Les popups ont une politique de sécurité de contenu qui restreint les sources à partir de laquelle ils peuvent charger des ressources et interdire certaines pratiques dangereuses telles que l'utilisation eval(). Voir la politique de sécurité du contenu  pour plus de détails à ce sujet.

- -

Déboguer des fenêtres pop-up

- -

Vous pouvez déboguer la balisage et le javaScript d'un popup en utilisant le débogueur de l'extension, mais vous devrez activer la fonction désactiver de la fonction d'occlusion automatique contextuelle pour éviter que les fenêtres contextuelles ne se cache lorsque vous cliquez à l'extérieur. En savoir plus sur le débogage des fenêtres pop-up.

- -

Redimensionnement contextuel

- -

Le redimensionnement automatique des fenêtres contextuelles correspond à leur contenu.
- L'algorithme pour cela peut être différent d'un navigateur à l'autre.

- -

Dans Firefox, la taille est calculée juste avant que le popup ne s'affiche, et au plus, 10 fois par seconde après les mutations DOM. Pour les documents de mode strict, la taille est calculée en fonction de la taille de l'élément <body>.

- -

Pour le mode quirks, c'est l'élément <html>. Firefox calcule la largeur préférée du contenu de cet élément, le renvoie à cette largeur, puis redimensionne de sorte qu'il n'y a pas de défilement vertical. Il atteindra une taille de 800x600 pixels au maximum si cela correspond à l'écran de l'utilisateur. (Avant Firefox 60, c'était seulement 680px.) . Si l'utilisateur déplace le bouton du complément dans le menu ou il apparaît dans le dépassement de la barre d'outils, la fenêtre apparaît dans le panneau du menu avec une largeur fixe.

- -

Dans Firefox Android 57, la popup s'ouvre comme une page web dans un nouvel onglet.

- -

Design de la popup

- -

Pour plus de détails sur la façon de concevoir la page Web de votre popup pour qu'elle corresponde au style de Firefox, voir la documentation de Photon Design System.

- -

Exemples

- -

Le dépôt webextensions-examples sur GitHub contient plusieurs exemples de WebExtensions qui utilisent l'action du navigateur :

- - -
diff --git a/files/fr/mozilla/add-ons/webextensions/user_interface/popups/index.md b/files/fr/mozilla/add-ons/webextensions/user_interface/popups/index.md new file mode 100644 index 0000000000..eca8a96e38 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/user_interface/popups/index.md @@ -0,0 +1,62 @@ +--- +title: Popups +slug: Mozilla/Add-ons/WebExtensions/user_interface/Popups +tags: + - WebExtensions + - interface utilisateur +translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Popups +--- +
{{AddonSidebar}}
+ +
+

Une fenêtre contextuelle est une boîte de dialogue associée à un bouton de la barre d'outils ou à un bouton de la barre d'adresse. Cette page décrit les popups en général, leur spécification, leur débogage, leur redimensionnement et leur conception, ainsi que des exemples d'utilisation..

+ +

+ +

Lorsque l'utilisateur clique sur le bouton, la fenêtre contextuelle s'affiche. Lorsque l'utilisateur clique n'importe où en dehors de la fenêtre contextuelle, la fenêtre contextuelle est fermée. La fenêtre contextuelle peut être fermée par programmation en appelant window.close() à partir d'un script exécuté dans la fenêtre contextuelle. Cependant, vous ne pouvez pas ouvrir le menu contextuel à partir d'un JavaScript de le l'extension : il ne peut être ouvert qu'en réponse à une action de l'utilisateur.

+ +

Vous pouvez définir un raccourci clavier qui ouvre la fenêtre contextuelle en utilisant les raccourcis "_execute_browser_action" et "_execute_page_action". Consultez la clé de commande de la documentation du manifest.json.

+ +

Spécification d'une fenêtre contextuelle

+ +

Le popup est spécifié comme un fichier HTML, qui peut inclure des fichiers CSS et JavaScript, comme le fait une page Web normale. Contrairement à une page normale, le JavaScript peut utiliser toutes les APIs WebExtension auxquelles l'extension possède des permissions.

+ +

Le fichier HTML est inclus dans la WebExtension et spécifié en partie à la clé browser_action ou page_action par "default_popup" dans le manifest.json :

+ +
  "browser_action": {
+    "default_icon": "icons/beasts-32.png",
+    "default_title": "Beastify",
+    "default_popup": "popup/choose_beast.html"
+  }
+ +

Vous pouvez demander au navigateur d'inclure une feuille de style dans votre fenêtre contextuelle qui la rendra compatible avec l'interface utilisateur du navigateur. Pour ce faire, ajoutez "browser_style": true dans la clé browser_action ou page_action.

+ +

Les popups ont une politique de sécurité de contenu qui restreint les sources à partir de laquelle ils peuvent charger des ressources et interdire certaines pratiques dangereuses telles que l'utilisation eval(). Voir la politique de sécurité du contenu  pour plus de détails à ce sujet.

+ +

Déboguer des fenêtres pop-up

+ +

Vous pouvez déboguer la balisage et le javaScript d'un popup en utilisant le débogueur de l'extension, mais vous devrez activer la fonction désactiver de la fonction d'occlusion automatique contextuelle pour éviter que les fenêtres contextuelles ne se cache lorsque vous cliquez à l'extérieur. En savoir plus sur le débogage des fenêtres pop-up.

+ +

Redimensionnement contextuel

+ +

Le redimensionnement automatique des fenêtres contextuelles correspond à leur contenu.
+ L'algorithme pour cela peut être différent d'un navigateur à l'autre.

+ +

Dans Firefox, la taille est calculée juste avant que le popup ne s'affiche, et au plus, 10 fois par seconde après les mutations DOM. Pour les documents de mode strict, la taille est calculée en fonction de la taille de l'élément <body>.

+ +

Pour le mode quirks, c'est l'élément <html>. Firefox calcule la largeur préférée du contenu de cet élément, le renvoie à cette largeur, puis redimensionne de sorte qu'il n'y a pas de défilement vertical. Il atteindra une taille de 800x600 pixels au maximum si cela correspond à l'écran de l'utilisateur. (Avant Firefox 60, c'était seulement 680px.) . Si l'utilisateur déplace le bouton du complément dans le menu ou il apparaît dans le dépassement de la barre d'outils, la fenêtre apparaît dans le panneau du menu avec une largeur fixe.

+ +

Dans Firefox Android 57, la popup s'ouvre comme une page web dans un nouvel onglet.

+ +

Design de la popup

+ +

Pour plus de détails sur la façon de concevoir la page Web de votre popup pour qu'elle corresponde au style de Firefox, voir la documentation de Photon Design System.

+ +

Exemples

+ +

Le dépôt webextensions-examples sur GitHub contient plusieurs exemples de WebExtensions qui utilisent l'action du navigateur :

+ + +
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 deleted file mode 100644 index 11854f7eba..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/user_interface/sidebars/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: Barres laterales -slug: Mozilla/Add-ons/WebExtensions/user_interface/Sidebars -tags: - - WebExtensions - - barre latérale -translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Sidebars -original_slug: Mozilla/Add-ons/WebExtensions/user_interface/barres_laterales ---- -
{{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/sidebars/index.md b/files/fr/mozilla/add-ons/webextensions/user_interface/sidebars/index.md new file mode 100644 index 0000000000..11854f7eba --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/user_interface/sidebars/index.md @@ -0,0 +1,60 @@ +--- +title: Barres laterales +slug: Mozilla/Add-ons/WebExtensions/user_interface/Sidebars +tags: + - WebExtensions + - barre latérale +translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Sidebars +original_slug: Mozilla/Add-ons/WebExtensions/user_interface/barres_laterales +--- +
{{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:

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