diff options
Diffstat (limited to 'files/fr/mozilla/add-ons/webextensions/user_interface')
12 files changed, 780 insertions, 667 deletions
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 index 862dfee482..dd0234db4c 100644 --- 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 @@ -3,46 +3,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 --- -<div>{{AddonSidebar}}</div> +{{AddonSidebar}} -<p>Généralement appelé comme une <a href="/fr/Add-ons/WebExtensions/API/browserAction">action de navigateur</a>, 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.<br> - <img alt="" src="browser-action.png"></p> +Généralement appelé comme une [action de navigateur](/fr/Add-ons/WebExtensions/API/browserAction), 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. + -<p>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 <a href="/fr/Add-ons/WebExtensions/user_interface/Page_actions#Page_actions_and_browser_actions">les actions de page et les actions du navigateur</a>.</p> +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](/fr/Add-ons/WebExtensions/user_interface/Page_actions#Page_actions_and_browser_actions). -<h2 id="Spécification_de_l'action_du_navigateur">Spécification de l'action du navigateur</h2> +## Spécification de l'action du navigateur -<p>Vous définissez les propriétés de l'action du navigateur à l'aide de la clé <code><a href="/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code> dans manifest.json:</p> +Vous définissez les propriétés de l'action du navigateur à l'aide de la clé [`browser_action`](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action) dans manifest.json: -<pre class="brush: json">"browser_action": { +```json +"browser_action": { "default_icon": { "19": "button/geo-19.png", "38": "button/geo-38.png" }, "default_title": "Whereami?" -}</pre> +} +``` -<p>La seule clé obligatoire est <code>default_icon</code>.</p> +La seule clé obligatoire est `default_icon`. -<p>Il existe deux façons de spécifier une action du navigateur: avec ou sans <a href="/fr/Add-ons/WebExtensions/Popups">popup</a>. 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 <a href="/fr//Add-ons/WebExtensions/API/BrowserAction/onClicked"><code>browserAction.onClicked</code></a> :</p> +Il existe deux façons de spécifier une action du navigateur: avec ou sans [popup](/fr/Add-ons/WebExtensions/Popups). 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`](/fr//Add-ons/WebExtensions/API/BrowserAction/onClicked) : -<pre class="brush: js">browser.browserAction.onClicked.addListener(handleClick);</pre> +```js +browser.browserAction.onClicked.addListener(handleClick); +``` -<p>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 <a href="/fr/Add-ons/WebExtensions/Popups">Popup </a>pour plus de détails sur la création et la gestion des fenêtres pop-up.</p> +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 ](/fr/Add-ons/WebExtensions/Popups)pour plus de détails sur la création et la gestion des fenêtres pop-up. -<p>Notez que votre extension ne peut avoir qu'une seule action de navigateur.</p> +Notez que votre extension ne peut avoir qu'une seule action de navigateur. -<p>Vous pouvez modifier plusieurs propriétés d'action du navigateur de manière programmée à l'aide de l'API <code><a href="/fr/Add-ons/WebExtensions/API/browserAction">action du navigateur</a></code>.</p> +Vous pouvez modifier plusieurs propriétés d'action du navigateur de manière programmée à l'aide de l'API [`action du navigateur`](/fr/Add-ons/WebExtensions/API/browserAction). -<h2 id="Icônes">Icônes</h2> +## Icônes -<p>Pour plus d'informations sur la création d'icônes à utiliser avec l'action de votre navigateur, voir <a href="https://design.firefox.com/photon/visuals/iconography.html">Iconographie </a>dans la documentation <a href="https://design.firefox.com/photon/index.html">Photon Design System</a>.</p> +Pour plus d'informations sur la création d'icônes à utiliser avec l'action de votre navigateur, voir [Iconographie ](https://design.firefox.com/photon/visuals/iconography.html)dans la documentation [Photon Design System](https://design.firefox.com/photon/index.html). -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Le dépôt <a href="https://github.com/mdn/webextensions-examples">webextensions-examples</a> sur GitHub contient plusieurs exemples de WebExtensions qui utilisent les actions du navigateur:</p> +Le dépôt [webextensions-examples](https://github.com/mdn/webextensions-examples) sur GitHub contient plusieurs exemples de WebExtensions qui utilisent les actions du navigateur: -<ul> - <li><a href="https://github.com/mdn/webextensions-examples/blob/master/bookmark-it/">bookmark-it</a> utilise il utilise une action de navigateur sans popup</li> - <li><a href="https://github.com/mdn/webextensions-examples/tree/master/beastify">beastify</a> utilise une action de navigateur avec un popup.</li> -</ul> +- [bookmark-it](https://github.com/mdn/webextensions-examples/blob/master/bookmark-it/) utilise il utilise une action de navigateur sans popup +- [beastify](https://github.com/mdn/webextensions-examples/tree/master/beastify) utilise une action de navigateur avec un popup. 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 index 68f3bb2b82..cc0ed97da4 100644 --- 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 @@ -3,267 +3,286 @@ title: Styles des navigateurs slug: Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles --- -<div>{{AddonSidebar}}</div> +{{AddonSidebar}} -<p>Certains composants de l'interface utilisateur - les <a href="/fr/Add-ons/WebExtensions/user_interface/Popups">fenêtres contextuelles</a>, <a href="/fr/Add-ons/WebExtensions/user_interface/Sidebars">fenêtres latérales</a>, et les <a href="/fr/Add-ons/WebExtensions/user_interface/Options_pages">pages d'options</a> du navigateur et de la page - sont spécifiés par votre extension de la même manière :</p> +Certains composants de l'interface utilisateur - les [fenêtres contextuelles](/fr/Add-ons/WebExtensions/user_interface/Popups), [fenêtres latérales](/fr/Add-ons/WebExtensions/user_interface/Sidebars), et les [pages d'options](/fr/Add-ons/WebExtensions/user_interface/Options_pages) du navigateur et de la page - sont spécifiés par votre extension de la même manière : -<ol> - <li>créer un fichier HTML définissant la structure de l'élément d'interface utilisateur</li> - <li>ajoutez une clé manifest.json (<code><a href="/fr/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code>, <code><a href="/fr/Add-ons/WebExtensions/manifest.json/page_action">page_action</a></code>, <code><a href="/fr/Add-ons/WebExtensions/manifest.json/sidebar_action">sidebar_action</a></code>, ou <code><a href="/fr/Add-ons/WebExtensions/manifest.json/options_ui">options_ui</a></code>) pointant vers ce fichier HTML.</li> -</ol> +1. créer un fichier HTML définissant la structure de l'élément d'interface utilisateur +2. ajoutez une clé manifest.json ([`browser_action`](/fr/Add-ons/WebExtensions/manifest.json/browser_action), [`page_action`](/fr/Add-ons/WebExtensions/manifest.json/page_action), [`sidebar_action`](/fr/Add-ons/WebExtensions/manifest.json/sidebar_action), ou [`options_ui`](/fr/Add-ons/WebExtensions/manifest.json/options_ui)) pointant vers ce fichier HTML. -<p>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.<br> - Pour aider à cela, les clés manifest.json keys incluent une propriété optionnelle supplémentaire : <code>browser_style</code>.<br> - Si cela est inclus et défini sur <code>true</code>, 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é <code>browser_style</code>.</p> +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`. -<p>Lorsque vous envisagez d'utiliser le <code>browser_style: true</code>, 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..</p> +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.. -<div class="warning"> -<p><strong>Attention :</strong> Quand <code>browser_style: true</code> 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.</p> -</div> +> **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. -<div class="note"> -<p><strong>Note :</strong> <strong>Google Chrome</strong> et <strong>Opera</strong> utilisent <code>chrome_style</code> au lieu de <code>browser_style</code>, donc si vous souhaitez les prendre en charge, vous devez ajouter les deux clés.</p> -</div> +> **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. -<p>Dans Firefox, la feuille de style peut être vue sur <code>chrome://browser/content/extension.css</code>. La feuille de style peut être vue sur <code>chrome://browser/content/extension-mac.css</code> est également incluse sur OS X.</p> +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. -<p>La plupart des styles sont automatiquement appliqués, mais certains éléments nécessitent que vous ajoutiez la classe <code>browser-style</code> non standard pour obtenir leur style, comme indiqué dans le tableau ci-dessous :</p> +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 : <table class="standard-table"> - <thead> - <tr> - <th scope="col">Element</th> - <th scope="col">Exemple</th> - </tr> - </thead> - <tbody> - <tr> - <td><code><a href="/fr/docs/Web/HTML/Element/button"><button></a></code></td> - <td> - <pre class="brush: html"> -<button class="browser-style">Click me</button>{{non-standard_inline}}</pre> - </td> - </tr> - <tr> - <td> - <p><code><a href="/fr/docs/Web/HTML/Element/select"><select></a></code></p> - </td> - <td> - <pre class="brush: html"> -<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></pre> - </td> - </tr> - <tr> - <td><code><a href="/fr/docs/Web/HTML/Element/textarea"><textarea></a></code></td> - <td> - <pre class="brush: html"> -<textarea class="browser-style">Write here</textarea></pre> - </td> - </tr> - <tr> - <td>Parent d'un <code><a href="/fr/docs/Web/HTML/Element/input"><input></a></code></td> - <td> - <pre class="brush: html"> -<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></pre> - </td> - </tr> - </tbody> + <thead> + <tr> + <th scope="col">Element</th> + <th scope="col">Exemple</th> + </tr> + </thead> + <tbody> + <tr> + <td> + <code + ><a href="/fr/docs/Web/HTML/Element/button"><button></a></code + > + </td> + <td> + <pre class="brush: html"> +<button class="browser-style">Click me</button>{{non-standard_inline}}</pre + > + </td> + </tr> + <tr> + <td> + <p> + <code + ><a href="/fr/docs/Web/HTML/Element/select"><select></a></code + > + </p> + </td> + <td> + <pre class="brush: html"> +<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></pre + > + </td> + </tr> + <tr> + <td> + <code + ><a href="/fr/docs/Web/HTML/Element/textarea" + ><textarea></a + ></code + > + </td> + <td> + <pre class="brush: html"> +<textarea class="browser-style">Write here</textarea></pre + > + </td> + </tr> + <tr> + <td> + Parent d'un + <code><a href="/fr/docs/Web/HTML/Element/input"><input></a></code> + </td> + <td> + <pre class="brush: html"> +<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></pre + > +</td> +</tr> + + </tbody> </table> -<div class="note"> -<p><strong>Note :</strong> Voir le {{bug(1465256)}} pour la suppression de cette exigence inutile.</p> -</div> - -<h2 id="Compatibilité_du_navigateur">Compatibilité du navigateur</h2> - +> **Note :** Voir le {{bug(1465256)}} pour la suppression de cette exigence inutile. +## Compatibilité du navigateur -<p>{{Compat("webextensions.browser_style")}}</p> +{{Compat("webextensions.browser_style")}} -<h2 id="Composants_du_panneau_Firefox">Composants du panneau Firefox</h2> +## Composants du panneau Firefox -<div class="warning"> -<p><strong>Attention :</strong> Cette fonctionnalité est non standard et ne fonctionne que dans Firefox.</p> -</div> +> **Attention :** Cette fonctionnalité est non standard et ne fonctionne que dans Firefox. -<p>La feuille de style <code>chrome://browser/content/extension.css</code> contient également les styles des composants du panneau Firefox.</p> +La feuille de style `chrome://browser/content/extension.css` contient également les styles des composants du panneau Firefox. -<p>L'<a href="https://firefoxux.github.io/StyleGuide/#/navigation">ancien guide de style de Firefox</a> documente l'utilisation appropriée.</p> +L'[ancien guide de style de Firefox](https://firefoxux.github.io/StyleGuide/#/navigation) documente l'utilisation appropriée. <table class="standard-table"> - <thead> - <tr> - <th scope="col">Element</th> - <th scope="col">Exemple</th> - </tr> - </thead> - <tbody> - <tr> - <td>Header</td> - <td> - <pre class="brush: html"> -<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></pre> - </td> - </tr> - <tr> - <td>Footer</td> - <td> - <pre class="brush: html"> -<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></pre> - </td> - </tr> - <tr> - <td>Tabs</td> - <td> - <pre class="brush: html"> -<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></pre> - </td> - </tr> - <tr> - <td>Form</td> - <td> - <pre class="brush: html"> -<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></pre> - </td> - </tr> - <tr> - <td>Menu</td> - <td> - <pre class="brush: html"> -<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></pre> - </td> - </tr> - </tbody> + <thead> + <tr> + <th scope="col">Element</th> + <th scope="col">Exemple</th> + </tr> + </thead> + <tbody> + <tr> + <td>Header</td> + <td> + <pre class="brush: html"> +<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></pre + > + </td> + </tr> + <tr> + <td>Footer</td> + <td> + <pre class="brush: html"> +<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></pre + > + </td> + </tr> + <tr> + <td>Tabs</td> + <td> + <pre class="brush: html"> +<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></pre + > + </td> + </tr> + <tr> + <td>Form</td> + <td> + <pre class="brush: html"> +<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></pre + > + </td> + </tr> + <tr> + <td>Menu</td> + <td> + <pre class="brush: html"> +<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></pre + > +</td> +</tr> + + </tbody> </table> -<h3 id="Exemple">Exemple</h3> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: 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></pre> - -<pre class="brush: css hidden">/* Global */ +### Exemple + +#### HTML + +```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> +``` + +```css hidden +/* Global */ html, body { background: white; @@ -312,7 +331,7 @@ button.panel-section-tabs-button { padding: 16px; } -.panel-section-header > .icon-section-header { +.panel-section-header > .icon-section-header { background-position: center center; background-repeat: no-repeat; height: 32px; @@ -321,7 +340,7 @@ button.panel-section-tabs-button { width: 32px; } -.panel-section-header > .text-section-header { +.panel-section-header > .text-section-header { align-self: center; font-size: 1.385em; font-weight: lighter; @@ -355,16 +374,16 @@ button.panel-section-tabs-button { color: #999; } -.panel-list-item > .icon { +.panel-list-item > .icon { flex-grow: 0; flex-shrink: 0; } -.panel-list-item > .text { +.panel-list-item > .text { flex-grow: 10; } -.panel-list-item > .text-shortcut { +.panel-list-item > .text-shortcut { color: #808080; font-family: "Lucida Grande", caption; font-size: .847em; @@ -395,7 +414,7 @@ button.panel-section-tabs-button { text-align: center; } -.panel-section-footer-button > .text-shortcut { +.panel-section-footer-button > .text-shortcut { color: #808080; font-family: "Lucida Grande", caption; font-size: .847em; @@ -429,9 +448,11 @@ button.panel-section-tabs-button { background-color: rgba(0, 0, 0, 0.1); width: 1px; z-index: 99; -}</pre> +} +``` -<pre class="brush: css">/* Example specific – not part of chrome://browser/content/extension.css */ +```css +/* Example specific – not part of chrome://browser/content/extension.css */ body { background: #fcfcfc; background-clip: padding-box; @@ -446,14 +467,15 @@ html { min-height: 100vh; } -html > body { +html > body { margin: auto; } .icon-section-header { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj48Y2lyY2xlIGZpbGw9IiMzNjM5NTkiIGN4PSIxNSIgY3k9IjE1IiByPSIxNSIvPjwvc3ZnPg=="); -}</pre> +} +``` -<h4 id="Resultat">Resultat</h4> +#### Resultat -<p>{{EmbedLiveSample("Exemple","640","360")}}</p> +{{EmbedLiveSample("Exemple","640","360")}} 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 index 85fa7a82fc..8ae281a364 100644 --- 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 @@ -6,51 +6,56 @@ tags: translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items original_slug: Mozilla/Add-ons/WebExtensions/user_interface/elements_menu_contextuel --- -<div>{{AddonSidebar}}</div> +{{AddonSidebar}} -<p>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 <a href="/fr/Add-ons/WebExtensions/API/menus">browser.menus</a>.</p> +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](/fr/Add-ons/WebExtensions/API/menus). -<p><img src="context_menu_example.png"></p> + -<p>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")}}.</p> +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")}}. -<p>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 "<a href="https://github.com/Rob--W/bookmark-container-tab">Open bookmark in Container Tab</a>" ajoute un élément de menu qui permet à l'utilisateur d'ouvrir une URL de signet dans un nouvel onglet de conteneur :</p> +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](https://github.com/Rob--W/bookmark-container-tab)" ajoute un élément de menu qui permet à l'utilisateur d'ouvrir une URL de signet dans un nouvel onglet de conteneur : -<p><img alt="" src="extension_context_menu.png"></p> + -<h2 id="Spécification_des_éléments_du_menu_contextuel">Spécification des éléments du menu contextuel</h2> +## Spécification des éléments du menu contextuel -<p>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.</p> +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. + +```json +"permissions": ["contextMenus"] +``` -<pre class="brush: json">"permissions": ["contextMenus"]</pre> 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: -<pre class="brush: js">browser.contextMenus.create({ +```js +browser.contextMenus.create({ id: "log-selection", title: browser.i18n.getMessage("contextMenuItemSelectionLogger"), contexts: ["selection"] -}, onCreated);</pre> +}, onCreated); +``` -<p>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.</p> +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. -<pre class="brush: js">browser.contextMenus.onClicked.addListener(function(info, tab) { +```js +browser.contextMenus.onClicked.addListener(function(info, tab) { switch (info.menuItemId) { case "log-selection": console.log(info.selectionText); break; ... } -})</pre> +}) +``` -<h2 id="Icônes">Icônes</h2> +## Icônes -<p>Pour plus de détails sur la création d'icônes à utiliser avec votre menu contextuel, voir <a href="https://design.firefox.com/photon/visuals/iconography.html">Iconography</a> dans la documentation du <a href="https://design.firefox.com/photon/index.html">Systeme de conception de Photon</a>.</p> +Pour plus de détails sur la création d'icônes à utiliser avec votre menu contextuel, voir [Iconography](https://design.firefox.com/photon/visuals/iconography.html) dans la documentation du [Systeme de conception de Photon](https://design.firefox.com/photon/index.html). -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Le depot <a href="https://github.com/mdn/webextensions-examples">webextensions-examples</a> sur GitHub contient plusieurs exemples de WebExtensions qui utilise les élements du menu contextuel :</p> +Le depot [webextensions-examples](https://github.com/mdn/webextensions-examples) sur GitHub contient plusieurs exemples de WebExtensions qui utilise les élements du menu contextuel : -<ul> - <li><a href="https://github.com/mdn/webextensions-examples/tree/master/menu-demo">menu-demo</a> ajoute différents éléments au menu contextuel.</li> - <li><a href="https://github.com/mdn/webextensions-examples/tree/master/context-menu-copy-link-with-types">context-menu-copy-link-with-types</a> ajoute un élément de menu contextuel aux liens qui copient l'URL vers le presse-papiers, comme un texte brut et HTML enrichi.</li> -</ul>
\ No newline at end of file +- [menu-demo](https://github.com/mdn/webextensions-examples/tree/master/menu-demo) ajoute différents éléments au menu contextuel. +- [context-menu-copy-link-with-types](https://github.com/mdn/webextensions-examples/tree/master/context-menu-copy-link-with-types) ajoute un élément de menu contextuel aux liens qui copient l'URL vers le presse-papiers, comme un texte brut et HTML enrichi. diff --git a/files/fr/mozilla/add-ons/webextensions/user_interface/devtools_panels/index.md b/files/fr/mozilla/add-ons/webextensions/user_interface/devtools_panels/index.md index 3b2b241705..9c5c3c79ff 100644 --- 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 @@ -9,33 +9,36 @@ tags: translation_of: Mozilla/Add-ons/WebExtensions/user_interface/devtools_panels original_slug: Mozilla/Add-ons/WebExtensions/user_interface/panneaux_devtools --- -<div>{{AddonSidebar}}</div> +{{AddonSidebar}} -<div class="note"> -<p><strong>Note :</strong> Cette fonctionnalité deviendra disponible dans Firefox 54.</p> -</div> +> **Note :** Cette fonctionnalité deviendra disponible dans Firefox 54. -<p>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.</p> +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. -<p><img src="developer_panel_tab.png"></p> + -<h2 id="Spécification_d'un_panneau_d'outils_de_développement">Spécification d'un panneau d'outils de développement</h2> +## Spécification d'un panneau d'outils de développement -<p>Un panneau d'outils de développement est ajouté à l'aide de l'API <code><a href="/fr/Add-ons/WebExtensions/API/devtools.panels">devtools.panels</a></code>, qui, à son tour, doit être exécutée à partir d'une page spéciale devtools.</p> +Un panneau d'outils de développement est ajouté à l'aide de l'API [`devtools.panels`](/fr/Add-ons/WebExtensions/API/devtools.panels), qui, à son tour, doit être exécutée à partir d'une page spéciale devtools. -<p>Ajoutez la page devtools en incluant la clé <code><a href="/fr/Add-ons/WebExtensions/manifest.json/devtools_page">devtools_page</a></code> dans l'extension <a href="/fr/Add-ons/WebExtensions/manifest.json">manifest.json</a> et fournissez l'emplacement du fichier de la page HTML dans l'extension :</p> +Ajoutez la page devtools en incluant la clé [`devtools_page`](/fr/Add-ons/WebExtensions/manifest.json/devtools_page) dans l'extension [manifest.json](/fr/Add-ons/WebExtensions/manifest.json) et fournissez l'emplacement du fichier de la page HTML dans l'extension : -<pre class="brush: json">"devtools_page": "devtools-page.html"</pre> +```json +"devtools_page": "devtools-page.html" +``` -<p>Dans la page des devtools, appelez un script qui ajoutera un panneau dans devtools:</p> +Dans la page des devtools, appelez un script qui ajoutera un panneau dans devtools: -<pre class="brush: html"><body> - <script src="devtools.js"></script> -</body></pre> +```html +<body> + <script src="devtools.js"></script> +</body> +``` -<p>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:</p> +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: -<pre class="brush: js">function handleShown() { +```js +function handleShown() { console.log("panel is being shown"); } @@ -47,29 +50,24 @@ browser.devtools.panels.create( "My Panel", // title "icons/star.png", // icon "devtools/panel/panel.html" // content -).then((newPanel) => { +).then((newPanel) => { newPanel.onShown.addListener(handleShown); newPanel.onHidden.addListener(handleHidden); -});</pre> +}); +``` -<p>L'extension peut maintenant exécuter un code dans la fenêtre inspectée à l'aide de <a href="/fr/Add-ons/WebExtensions/API/devtools.inspectedWindow/eval"><code>devtools</code>.inspectedWindow.eval()</a> 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'<a href="/fr/Add-ons/WebExtensions/Extending_the_developer_tools">Extension des outils de développement.</a></p> +L'extension peut maintenant exécuter un code dans la fenêtre inspectée à l'aide de [`devtools`.inspectedWindow.eval()](/fr/Add-ons/WebExtensions/API/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.](/fr/Add-ons/WebExtensions/Extending_the_developer_tools) -<h2 id="Conception_du_panneau_de_développement">Conception du panneau de développement</h2> +## Conception du panneau de développement -<p>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 <a href="https://design.firefox.com/photon/index.html">Photon Design System</a>.</p> +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](https://design.firefox.com/photon/index.html). -<h2 id="Icônes">Icônes</h2> +## Icônes -<p>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 <a href="https://design.firefox.com/photon/index.html">Photon Design System</a>.</p> +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](https://design.firefox.com/photon/index.html). +## Exemples +Le depot [webextensions-examples](https://github.com/mdn/webextensions-examples) sur GitHub contient plusieurs exemples de WebExtensions qui utilisent les panneaux devtools: -<h2 id="Exemples">Exemples</h2> - -<p>Le depot <a href="https://github.com/mdn/webextensions-examples">webextensions-examples</a> sur GitHub contient plusieurs exemples de WebExtensions qui utilisent les panneaux devtools:</p> - -<ul> - <li> - <p><a href="https://github.com/mdn/webextensions-examples/blob/master/devtools-panels/">devtools-panels</a> utilise la création d'un panneau dans devtools</p> - </li> -</ul> +- [devtools-panels](https://github.com/mdn/webextensions-examples/blob/master/devtools-panels/) utilise la création d'un panneau dans devtools 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 index 7ddf8b03fd..30a0ce87c4 100644 --- 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 @@ -9,70 +9,74 @@ tags: translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Extension_pages original_slug: Mozilla/Add-ons/WebExtensions/user_interface/pages_web_incluses --- -<div>{{AddonSidebar()}}</div> +{{AddonSidebar()}} -<p>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.</p> +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. -<p><img src="bundled_page_as_panel_small.png"></p> + -<p>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.</p> +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. -<p>Pensez à la page d'arrière-plan comme une « page cachée d’extension ».</p> +Pensez à la page d'arrière-plan comme une « page cachée d’extension ». -<h2 id="Spécification_des_pages_d’extension">Spécification des pages d’extension</h2> +## Spécification des pages d’extension -<p>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.***</p> +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.\*\*\* -<pre>/my-extension - /manifest.json - /my-page.html - /my-page.js</pre> + /my-extension + /manifest.json + /my-page.html + /my-page.js -<h2 id="Affichage_des_pages_d’extension">Affichage des pages d’extension</h2> +## Affichage des pages d’extension -<p>Il existe deux options pour afficher des pages d'extension : {{WebExtAPIRef("windows.create()")}} et {{WebExtAPIRef("tabs.create()")}}.</p> +Il existe deux options pour afficher des pages d'extension : {{WebExtAPIRef("windows.create()")}} et {{WebExtAPIRef("tabs.create()")}}. -<p>À l’aide de <code>windows.create()</code>, 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 :</p> +À 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 : -<pre class="brush: js">var createData = { +```js +var createData = { type: "detached_panel", url: "panel.html", width: 250, height: 100 }; -var creating = browser.windows.create(createData);</pre> +var creating = browser.windows.create(createData); +``` -<p>Lorsque la fenêtre n'est plus nécessaire, elle peut être fermée par programme.</p> +Lorsque la fenêtre n'est plus nécessaire, elle peut être fermée par programme. -<p>Par exemple, après que l’utilisateur a cliqué sur un bouton, en passant l’ID de la fenêtre actuelle à {{WebExtAPIRef("windows.remove()")}} :</p> +Par exemple, après que l’utilisateur a cliqué sur un bouton, en passant l’ID de la fenêtre actuelle à {{WebExtAPIRef("windows.remove()")}} : -<pre class="brush: js">document.getElementById("closeme").addEventListener("click", function(){ +```js +document.getElementById("closeme").addEventListener("click", function(){ let winId = browser.windows.WINDOW_ID_CURRENT; let removing = browser.windows.remove(winId); -});</pre> +}); +``` -<h2 id="Pages_d’extension_et_historique">Pages d’extension et historique</h2> +## Pages d’extension et historique -<p>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 :</p> +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 : -<pre class="brush: js">function onVisited(historyItem) { +```js +function onVisited(historyItem) { if (historyItem.url == browser.extension.getURL(myPage)) { browser.history.deleteUrl({url: historyItem.url}); } } -browser.history.onVisited.addListener(onVisited);</pre> +browser.history.onVisited.addListener(onVisited); +``` -<p>Pour utiliser l’API historique, vous devez demander la <a href="/fr/Add-ons/WebExtensions/manifest.json/permissions">permission</a> « <code>history</code> » dans votre fichier <code><a href="/fr/Add-ons/WebExtensions/manifest.json">manifest.json</a></code>.</p> +Pour utiliser l’API historique, vous devez demander la [permission](/fr/Add-ons/WebExtensions/manifest.json/permissions) « `history` » dans votre fichier [`manifest.json`](/fr/Add-ons/WebExtensions/manifest.json). -<h2 id="Conception_des_pages_Web">Conception des pages Web</h2> +## Conception des pages Web -<p>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 <a href="https://design.firefox.com/photon/index.html">système de conception Photon</a> et les <a href="/fr/Add-ons/WebExtensions/user_interface/Browser_styles">styles de navigateur</a>.</p> +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](https://design.firefox.com/photon/index.html) et les [styles de navigateur](/fr/Add-ons/WebExtensions/user_interface/Browser_styles). -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Le dépôt <a href="https://github.com/mdn/webextensions-examples">webextensions-examples</a> sur GitHub contient plusieurs exemples de WebExtensions qui utilise une action de navigateur :</p> +Le dépôt [webextensions-examples](https://github.com/mdn/webextensions-examples) sur GitHub contient plusieurs exemples de WebExtensions qui utilise une action de navigateur : -<ul> - <li><a href="https://github.com/mdn/webextensions-examples/tree/master/window-manipulator">window-manipulator</a> utilise les options pour créer une fenêtre</li> -</ul> +- [window-manipulator](https://github.com/mdn/webextensions-examples/tree/master/window-manipulator) utilise les options pour créer une fenêtre diff --git a/files/fr/mozilla/add-ons/webextensions/user_interface/index.md b/files/fr/mozilla/add-ons/webextensions/user_interface/index.md index a77c53928b..0fd7af2ee0 100644 --- a/files/fr/mozilla/add-ons/webextensions/user_interface/index.md +++ b/files/fr/mozilla/add-ons/webextensions/user_interface/index.md @@ -7,109 +7,196 @@ tags: - WebExtensions translation_of: Mozilla/Add-ons/WebExtensions/user_interface --- -<div>{{AddonSidebar}}</div> +{{AddonSidebar}} -<p>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.</p> +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. -<div class="note"> -<p><strong>Note :</strong> 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 <a href="/fr/Add-ons/WebExtensions/User_experience_best_practices">bonnes pratiques de l'expérience utilisateur</a>.</p> -</div> +> **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](/fr/Add-ons/WebExtensions/User_experience_best_practices). <table class="standard-table"> - <thead> - <tr> - <th scope="col">UI option</th> - <th scope="col">Description</th> - <th scope="col" style="width: 350px;">Exemple</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="/fr/Add-ons/WebExtensions/user_interface/Browser_action">Bouton de la barre d'outils (action du navigateur)</a></td> - <td> - <p>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.</p> - </td> - <td><img src="browser-action.png"></td> - </tr> - <tr> - <td>Bouton de la barre d'outils du navigateur avec un <a href="/fr/Add-ons/WebExtensions/user_interface/Popups">popup</a></td> - <td> - <p>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.</p> - </td> - <td><img src="popup-shadow.png"></td> - </tr> - <tr> - <td><a href="/fr/Add-ons/WebExtensions/user_interface/Page_actions">Bouton de la barre d'addresse</a> (action page)</td> - <td> - <p>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.</p> - </td> - <td><img src="address_bar_button.png"></td> - </tr> - <tr> - <td>Bouton de la barre d'addresse avec un <a href="/fr/Add-ons/WebExtensions/user_interface/Popups">popup</a></td> - <td> - <p>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.</p> - </td> - <td><img src="page_action_popup.png"></td> - </tr> - <tr> - <td><a href="/fr/Add-ons/WebExtensions/user_interface/Context_menu_items">Elément du menu contextuel</a></td> - <td> - <p>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.</p> - </td> - <td><img src="context_menu_example.png"></td> - </tr> - <tr> - <td><a href="/fr/Add-ons/WebExtensions/user_interface/Sidebars">Barre latérale</a></td> - <td> - <p>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.</p> - </td> - <td><img src="bookmarks-sidebar.png"></td> - </tr> - <tr> - <td><a href="/fr/Add-ons/WebExtensions/user_interface/Options_pages">page d'options</a></td> - <td> - <p>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.</p> - </td> - <td><img src="options_page.png"></td> - </tr> - <tr> - <td><a href="/fr/Add-ons/WebExtensions/user_interface/extension_pages">Extension pages</a></td> - <td> - <p>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.</p> - </td> - <td><img src="bundled_page_as_panel_small.png"></td> - </tr> - <tr> - <td><a href="/fr/Add-ons/WebExtensions/user_interface/Notifications">Notifications</a></td> - <td> - <p>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).</p> - </td> - <td><img src="notify-shadowed.png"></td> - </tr> - <tr> - <td><a href="/fr/Add-ons/WebExtensions/user_interface/Omnibox">Suggestions de la barre d'addresse</a></td> - <td> - <p>Offrez des suggestions de barèmes d'adresses personnalisées lorsque l'utilisateur entre un mot-clé.</p> - </td> - <td><img src="omnibox_example_small.png"></td> - </tr> - <tr> - <td><a href="/fr/Add-ons/WebExtensions/user_interface/devtools_panels">Panneaux d'outils de développement</a></td> - <td> - <p>Un onglet avec un document HTML associé qui s'affiche dans les outils de développement du navigateur.</p> - </td> - <td><img src="developer_panel_tab.png"></td> - </tr> - </tbody> + <thead> + <tr> + <th scope="col">UI option</th> + <th scope="col">Description</th> + <th scope="col" style="width: 350px">Exemple</th> + </tr> + </thead> + <tbody> + <tr> + <td> + <a href="/fr/Add-ons/WebExtensions/user_interface/Browser_action" + >Bouton de la barre d'outils (action du navigateur)</a + > + </td> + <td> + <p> + 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. + </p> + </td> + <td><img src="browser-action.png" /></td> + </tr> + <tr> + <td> + Bouton de la barre d'outils du navigateur avec un + <a href="/fr/Add-ons/WebExtensions/user_interface/Popups">popup</a> + </td> + <td> + <p> + 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. + </p> + </td> + <td><img src="popup-shadow.png" /></td> + </tr> + <tr> + <td> + <a href="/fr/Add-ons/WebExtensions/user_interface/Page_actions" + >Bouton de la barre d'addresse</a + > + (action page) + </td> + <td> + <p> + 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. + </p> + </td> + <td><img src="address_bar_button.png" /></td> + </tr> + <tr> + <td> + Bouton de la barre d'addresse avec un + <a href="/fr/Add-ons/WebExtensions/user_interface/Popups">popup</a> + </td> + <td> + <p> + 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. + </p> + </td> + <td><img src="page_action_popup.png" /></td> + </tr> + <tr> + <td> + <a href="/fr/Add-ons/WebExtensions/user_interface/Context_menu_items" + >Elément du menu contextuel</a + > + </td> + <td> + <p> + 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. + </p> + </td> + <td><img src="context_menu_example.png" /></td> + </tr> + <tr> + <td> + <a href="/fr/Add-ons/WebExtensions/user_interface/Sidebars" + >Barre latérale</a + > + </td> + <td> + <p> + 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. + </p> + </td> + <td><img src="bookmarks-sidebar.png" /></td> + </tr> + <tr> + <td> + <a href="/fr/Add-ons/WebExtensions/user_interface/Options_pages" + >page d'options</a + > + </td> + <td> + <p> + 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. + </p> + </td> + <td><img src="options_page.png" /></td> + </tr> + <tr> + <td> + <a href="/fr/Add-ons/WebExtensions/user_interface/extension_pages" + >Extension pages</a + > + </td> + <td> + <p> + 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. + </p> + </td> + <td><img src="bundled_page_as_panel_small.png" /></td> + </tr> + <tr> + <td> + <a href="/fr/Add-ons/WebExtensions/user_interface/Notifications" + >Notifications</a + > + </td> + <td> + <p> + 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). + </p> + </td> + <td><img src="notify-shadowed.png" /></td> + </tr> + <tr> + <td> + <a href="/fr/Add-ons/WebExtensions/user_interface/Omnibox" + >Suggestions de la barre d'addresse</a + > + </td> + <td> + <p> + Offrez des suggestions de barèmes d'adresses personnalisées lorsque + l'utilisateur entre un mot-clé. + </p> + </td> + <td><img src="omnibox_example_small.png" /></td> + </tr> + <tr> + <td> + <a href="/fr/Add-ons/WebExtensions/user_interface/devtools_panels" + >Panneaux d'outils de développement</a + > + </td> + <td> + <p> + Un onglet avec un document HTML associé qui s'affiche dans les outils + de développement du navigateur. + </p> + </td> + <td><img src="developer_panel_tab.png" /></td> + </tr> + </tbody> </table> -<p>Les guides pratiques suivants fournissent des conseils étape par étape pour créer certaines options d'interface utilisateur:</p> +Les guides pratiques suivants fournissent des conseils étape par étape pour créer certaines options d'interface utilisateur: -<ul> - <li><a href="/fr/Add-ons/WebExtensions/user_interface/lignes_directrices_en_matiere_accessibilite">Lignes directrices en matière d'accessibilité</a></li> - <li><a href="/fr/Add-ons/WebExtensions/Add_a_button_to_the_toolbar">Ajouter un bouton à la barre d'outils</a></li> - <li><a href="/fr/Add-ons/WebExtensions/user_interface/Browser_styles">Styles des navigateurs</a></li> - <li><a href="/fr/Add-ons/WebExtensions/Extending_the_developer_tools">Extension des outils de développement</a></li> - <li><a href="/fr/Add-ons/WebExtensions/Implement_a_settings_page">Mettre en place une page de paramètres</a></li> -</ul> +- [Lignes directrices en matière d'accessibilité](/fr/Add-ons/WebExtensions/user_interface/lignes_directrices_en_matiere_accessibilite) +- [Ajouter un bouton à la barre d'outils](/fr/Add-ons/WebExtensions/Add_a_button_to_the_toolbar) +- [Styles des navigateurs](/fr/Add-ons/WebExtensions/user_interface/Browser_styles) +- [Extension des outils de développement](/fr/Add-ons/WebExtensions/Extending_the_developer_tools) +- [Mettre en place une page de paramètres](/fr/Add-ons/WebExtensions/Implement_a_settings_page) 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 index e0106d3b7d..60c1fe4ab4 100644 --- a/files/fr/mozilla/add-ons/webextensions/user_interface/notifications/index.md +++ b/files/fr/mozilla/add-ons/webextensions/user_interface/notifications/index.md @@ -5,46 +5,51 @@ tags: - WebExtensions translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Notifications --- -<div>{{AddonSidebar}}</div> +{{AddonSidebar}} -<p>Les notifications vous permettent d'afficher des informations sur votre extension ou son contenu en utilisant le système d'exploitation sous-jacent.</p> +Les notifications vous permettent d'afficher des informations sur votre extension ou son contenu en utilisant le système d'exploitation sous-jacent. + + -<p><img alt="" src="notify-shadowed.png"></p> 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. -<h2 id="Spécification_des_notifications">Spécification des notifications</h2> +## Spécification des notifications -<p>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 :</p> +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 : -<pre class="brush: json">"permissions": ["notifications"]</pre> +```json +"permissions": ["notifications"] +``` -<p>Vous utilisez ensuite {{WebExtAPIRef("notifications.create")}} pour créer vos notifications, comme dans cet exemple de <a href="https://github.com/mdn/webextensions-examples/tree/master/notify-link-clicks-i18n">notify-link-clicks-i18n</a> :</p> +Vous utilisez ensuite {{WebExtAPIRef("notifications.create")}} pour créer vos notifications, comme dans cet exemple de [notify-link-clicks-i18n](https://github.com/mdn/webextensions-examples/tree/master/notify-link-clicks-i18n) : -<pre class="brush: js">var title = browser.i18n.getMessage("notificationTitle"); +```js +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 -});</pre> +}); +``` -<p>Ce code crée une notification avec un icône, un titre et un message.</p> +Ce code crée une notification avec un icône, un titre et un message. -<p>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:</p> +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: -<pre class="brush: js">browser.notifications.onClicked.addListener(handleClick);</pre> +```js +browser.notifications.onClicked.addListener(handleClick); +``` -<p>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é.</p> +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é. -<h2 id="Icônes">Icônes</h2> +## Icônes -<p>Pour plus d'informations sur la création d'icônes à utiliser avec votre notification, reportez-vous à la section <a href="https://design.firefox.com/photon/visuals/iconography.html">Iconography</a> dans la documentation <a href="https://design.firefox.com/photon/index.html">Photon Design System</a>.</p> +Pour plus d'informations sur la création d'icônes à utiliser avec votre notification, reportez-vous à la section [Iconography](https://design.firefox.com/photon/visuals/iconography.html) dans la documentation [Photon Design System](https://design.firefox.com/photon/index.html). -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Le dépôt <a href="https://github.com/mdn/webextensions-examples">webextensions-examples</a> sur GitHub contient plusieurs exemples de WebExtensions qui utilise la création de notifications :</p> +Le dépôt [webextensions-examples](https://github.com/mdn/webextensions-examples) sur GitHub contient plusieurs exemples de WebExtensions qui utilise la création de notifications : -<ul> - <li><a href="https://github.com/mdn/webextensions-examples/tree/master/notify-link-clicks-i18n">notify-link-clicks-i18n</a> utilise la création de notifications.</li> -</ul>
\ No newline at end of file +- [notify-link-clicks-i18n](https://github.com/mdn/webextensions-examples/tree/master/notify-link-clicks-i18n) utilise la création de notifications. 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 index 4419f2465b..b665d29060 100644 --- a/files/fr/mozilla/add-ons/webextensions/user_interface/omnibox/index.md +++ b/files/fr/mozilla/add-ons/webextensions/user_interface/omnibox/index.md @@ -6,31 +6,35 @@ tags: - WebExtensions translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Omnibox --- -<div>{{AddonSidebar()}}</div> +{{AddonSidebar()}} -<p>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é.</p> +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é. -<p><img src="omnibox_example_small.png"></p> + -<p>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.</p> +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. -<h2 id="Spécification_de_la_personnalisation_Omnibox">Spécification de la personnalisation Omnibox</h2> +## Spécification de la personnalisation Omnibox -<p>Vous dites à votre extension qu'il va personnaliser les suggestions de la barre d'adresse en incluant la clé <a href="/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/omnibox">omnibox</a> et la définition du mot-clé de déclenchement dans son fichier <a href="/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a> :</p> +Vous dites à votre extension qu'il va personnaliser les suggestions de la barre d'adresse en incluant la clé [omnibox](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/omnibox) et la définition du mot-clé de déclenchement dans son fichier [manifest.json](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json) : -<pre class="brush: json"> "omnibox": { "keyword" : "cs" }</pre> +```json + "omnibox": { "keyword" : "cs" } +``` -<p>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 :</p> +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 : -<pre class="brush: js">browser.omnibox.setDefaultSuggestion({ +```js +browser.omnibox.setDefaultSuggestion({ description: `Search the firefox codebase (e.g. "hello world" | "path:omnibox.js onInputChanged")` -});</pre> +}); +``` +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 : -<p>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 :</p> - -<pre class="brush: js">browser.omnibox.onInputChanged.addListener((text, addSuggestions) => { +```js +browser.omnibox.onInputChanged.addListener((text, addSuggestions) => { let headers = new Headers({"Accept": "application/json"}); let init = {method: 'GET', headers}; let url = buildSearchURL(text); @@ -39,14 +43,15 @@ translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Omnibox fetch(request) .then(createSuggestionsFromResponse) .then(addSuggestions); -});</pre> - -<p>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.</p> +}); +``` +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. -<p>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:</p> +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: -<pre class="brush: js">browser.omnibox.onInputEntered.addListener((text, disposition) => { +```js +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. @@ -63,13 +68,11 @@ translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Omnibox browser.tabs.create({url, active: false}); break; } -});</pre> - +}); +``` -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Le depot <a href="https://github.com/mdn/webextensions-examples">webextensions-examples</a> sur GitHub contient plusieurs exemples de WebExtensions qui utilise la personnalisation de omnibox</p> +Le depot [webextensions-examples](https://github.com/mdn/webextensions-examples) sur GitHub contient plusieurs exemples de WebExtensions qui utilise la personnalisation de omnibox -<ul> - <li><a href="https://github.com/mdn/webextensions-examples/tree/master/firefox-code-search">firefox-code-search</a> utilise la personnalisation de omnibox</li> -</ul>
\ No newline at end of file +- [firefox-code-search](https://github.com/mdn/webextensions-examples/tree/master/firefox-code-search) utilise la personnalisation de omnibox 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 index 6b38ccb5aa..6757835009 100644 --- 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 @@ -5,67 +5,65 @@ tags: - WebExtensions translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Options_pages --- -<div>{{AddonSidebar}}</div> +{{AddonSidebar}} -<div> -<p>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:</p> +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: -<p>{{EmbedYouTube("eODy24csH5M")}}</p> +{{EmbedYouTube("eODy24csH5M")}} -<p>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.</p> +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. -<p>Vous pouvez ouvrir la page en programmant en appelant <a href="/fr/Add-ons/WebExtensions/API/Runtime/openOptionsPage"><code>runtime.openOptionsPage()</code></a>.</p> +Vous pouvez ouvrir la page en programmant en appelant [`runtime.openOptionsPage()`](/fr/Add-ons/WebExtensions/API/Runtime/openOptionsPage). -<p>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 <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/eval">eval()</a></code>. Voir la <a href="/fr/Add-ons/WebExtensions/Content_Security_Policy">politique de sécurité de contenu</a> pour plus de détails.</p> +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()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/eval). Voir la [politique de sécurité de contenu](/fr/Add-ons/WebExtensions/Content_Security_Policy) pour plus de détails. -<h2 id="Spécification_de_la_page_doptions">Spécification de la page d'options</h2> +## Spécification de la page d'options -<p>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 <a href="https://github.com/mdn/webextensions-examples/tree/master/favourite-colour">favourite-colour</a>, comprend un fichier :</p> +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](https://github.com/mdn/webextensions-examples/tree/master/favourite-colour), comprend un fichier : -<pre class="brush: html"><!DOCTYPE html> +```html +<!DOCTYPE html> -<html> - <head> - <meta charset="utf-8" /> - </head> +<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> +<body> + <form> + <label>Favourite colour</label> + <input type="text" id="colour" > + <button type="submit">Save</button> + </form> + <script src="options.js"></script> +</body> -</html></pre> +</html> +``` -<p>JavaScript en cours d'exécution dans la page peut utiliser toutes les <a href="/fr/Add-ons/WebExtensions/API">APIs des WebExtension</a> auxquelles l'extension a des <a href="/fr/Add-ons/WebExtensions/manifest.json/permissions">permissions</a>. En particulier, vous pouvez utiliser l'API <a href="/fr/Add-ons/WebExtensions/API/Storage"><code>storage</code></a> pour conserver les préférences.</p> +JavaScript en cours d'exécution dans la page peut utiliser toutes les [APIs des WebExtension](/fr/Add-ons/WebExtensions/API) auxquelles l'extension a des [permissions](/fr/Add-ons/WebExtensions/manifest.json/permissions). En particulier, vous pouvez utiliser l'API [`storage`](/fr/Add-ons/WebExtensions/API/Storage) pour conserver les préférences. -<p>Insérez les fichiers de la page dans votre extension.</p> +Insérez les fichiers de la page dans votre extension. -<p>Vous devez également inclure une clé <code><a href="/fr/Add-ons/WebExtensions/manifest.json/options_ui">options_ui</a></code> dans votre fichier manifest.json, en lui donnant l'URL de la page.</p> +Vous devez également inclure une clé [`options_ui`](/fr/Add-ons/WebExtensions/manifest.json/options_ui) dans votre fichier manifest.json, en lui donnant l'URL de la page. -<pre class="brush: json">"options_ui": { +```json +"options_ui": { "page": "options.html", "browser_style": true -},</pre> +}, +``` -<div class="note"> -<p><strong>Note:</strong> <strong>Google Chrome</strong> et <strong>Opera</strong> utilisent <code>chrome_style</code> au lieu de <code>browser_style</code>, donc si vous souhaitez les prendre en charge, vous devez ajouter les deux clés.</p> -</div> +> **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. -<p>Voir la page <code><a href="/fr/Add-ons/WebExtensions/manifest.json/options_ui">options_ui</a></code> pour les <strong>options de partage</strong> entre votre page d'options et les scripts d'arrière-plan ou de contenu.</p> +Voir la page [`options_ui`](/fr/Add-ons/WebExtensions/manifest.json/options_ui) pour les **options de partage** entre votre page d'options et les scripts d'arrière-plan ou de contenu. -<h2 id="Options_de_conception_de_contenu">Options de conception de contenu</h2> +## Options de conception de contenu -<p>Pour plus de détails sur la façon de concevoir le contenu de vos options en fonction du style de Firefox, voir le <a href="https://design.firefox.com/photon/index.html">system de conception Photon</a> et les <a href="/fr/Add-ons/WebExtensions/user_interface/Browser_styles">styles de navigateur</a> documentation.</p> +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](https://design.firefox.com/photon/index.html) et les [styles de navigateur](/fr/Add-ons/WebExtensions/user_interface/Browser_styles) documentation. -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Le depot <a href="https://github.com/mdn/webextensions-examples">webextensions-examples</a> sur GitHub contient plusieurs exemples de WebExtensions qui utilisent les options de page :</p> +Le depot [webextensions-examples](https://github.com/mdn/webextensions-examples) sur GitHub contient plusieurs exemples de WebExtensions qui utilisent les options de page : -<ul> - <li><a href="https://github.com/mdn/webextensions-examples/tree/master/favourite-colour">favourite-colour</a> utilise les options de page</li> -</ul> -</div> +- [favourite-colour](https://github.com/mdn/webextensions-examples/tree/master/favourite-colour) utilise les options de page 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 index 843266e618..ad6eb128f2 100644 --- 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 @@ -8,102 +8,90 @@ tags: - WebExtensions translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Page_actions --- -<div>{{AddonSidebar}}</div> +{{AddonSidebar}} -<p>Généralement appelée <a href="/fr/docs/Mozilla/Add-ons/WebExtensions/API/pageAction">action de page</a>, 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.</p> +Généralement appelée [action de page](/fr/docs/Mozilla/Add-ons/WebExtensions/API/pageAction), 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. -<p><img alt="" src="address_bar_button.png"></p> + -<h2 id="Actions_de_pages_et_actions_du_navigateur">Actions de pages et actions du navigateur</h2> +## Actions de pages et actions du navigateur -<p>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).</p> +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). -<p>Les différences sont :</p> +Les différences sont : -<ul> - <li><strong>L'emplacement du bouton :</strong> +- **L'emplacement du bouton :** - <ul> - <li>L'action de la page s'affiche dans la barre d'adresse du navigateur.</li> - <li>L'action du navigateur s'affiche en dehors de la barre d'adresse, dans la barre d'outils du navigateur.</li> - </ul> - </li> - <li>La visibilité du bouton <strong>:</strong> - <ul> - <li>L'action page est masquée par défaut (bien que cette valeur par défaut puisse être modifiée via les propriétés <a href="/fr/Add-ons/WebExtensions/manifest.json/page_action">manifest </a>des clés <code>show_matches</code> et <code>hide_matches</code>), et vous appelez <a href="/fr/docs/Mozilla/Add-ons/WebExtensions/API/PageAction/show"><code>pageAction.show()</code></a> et <a href="/fr/docs/Mozilla/Add-ons/WebExtensions/API/PageAction/hide"><code>pageAction.hide()</code></a> pour l'afficher ou la masquer dans des onglets spécifiques.</li> - <li>L'action du navigateur est toujours affichée.</li> - </ul> - </li> -</ul> + - L'action de la page s'affiche dans la barre d'adresse du navigateur. + - L'action du navigateur s'affiche en dehors de la barre d'adresse, dans la barre d'outils du navigateur. -<p>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 :</p> +- La visibilité du bouton **:** -<table class="standard-table"> - <thead> - <tr> - <th scope="row">Type</th> - <th scope="col">Bookmarks action</th> - <th scope="col">Content action</th> - <th scope="col">Tabs operation</th> - </tr> - </thead> - <tbody> - <tr> - <th scope="row">page action</th> - <td>Bookmark this page</td> - <td>Reddit enhancement</td> - <td>Send tab</td> - </tr> - <tr> - <th scope="row">browser action</th> - <td>Show all bookmarks</td> - <td>Enable ad-blocking</td> - <td>Sync all open tabs</td> - </tr> - </tbody> -</table> + - L'action page est masquée par défaut (bien que cette valeur par défaut puisse être modifiée via les propriétés [manifest ](/fr/Add-ons/WebExtensions/manifest.json/page_action)des clés `show_matches` et `hide_matches`), et vous appelez [`pageAction.show()`](/fr/docs/Mozilla/Add-ons/WebExtensions/API/PageAction/show) et [`pageAction.hide()`](/fr/docs/Mozilla/Add-ons/WebExtensions/API/PageAction/hide) pour l'afficher ou la masquer dans des onglets spécifiques. + - L'action du navigateur est toujours affichée. +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 : +<table class="standard-table"> + <thead> + <tr> + <th scope="row">Type</th> + <th scope="col">Bookmarks action</th> + <th scope="col">Content action</th> + <th scope="col">Tabs operation</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">page action</th> + <td>Bookmark this page</td> + <td>Reddit enhancement</td> + <td>Send tab</td> + </tr> + <tr> + <th scope="row">browser action</th> + <td>Show all bookmarks</td> + <td>Enable ad-blocking</td> + <td>Sync all open tabs</td> + </tr> + </tbody> +</table> -<h2 id="Spécification_de_l'action_de_la_page">Spécification de l'action de la page</h2> +## Spécification de l'action de la page -<p>Vous définissez les propriétés de la clé de l'<code><a href="/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/page_action">action de page</a></code> dans le manifest.json:</p> +Vous définissez les propriétés de la clé de l'[`action de page`](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/page_action) dans le manifest.json: -<pre class="brush: json">"page_action": { +```json +"page_action": { "browser_style": true, "default_icon": { "19": "button/geo-19.png", "38": "button/geo-38.png" }, "default_title": "Whereami?", -}</pre> - -<p>La seule clé obligatoire est <code>default_icon</code>.</p> - -<p>Il y a deux façons de spécifier une action de page : avec ou sans <a href="/fr/Add-ons/WebExtensions/Popups">popup</a>.</p> +} +``` -<ul> - <li><strong>Sans popup:</strong> Lorsque l'utilisateur clique sur le bouton, un événement est envoyé à l'extension, que l'extension écoute pour utiliser <a href="/fr/docs/Mozilla/Add-ons/WebExtensions/API/pageAction/onClicked"><code>pageAction.onClicked</code></a>:</li> - <li> - <pre class="brush: js">browser.pageAction.onClicked.addListener(handleClick);</pre> - </li> - <li><strong>Avec un popup:</strong> L'événement <code>click</code> n'est pas envoyé. Au lieu de cela, le popup apparaît lorsque l'utilisateur clique sur le bouton. L'utilisateur interagit alors avec le popup. Lorsque l'utilisateur clique à l'extérieur de la fenêtre contextuelle, celle-ci se ferme automatiquement. Voir l'article <a href="/fr/Add-ons/WebExtensions/Popups">Popup </a>pour plus de détails sur la création et la gestion des popups.</li> -</ul> +La seule clé obligatoire est `default_icon`. -<p>Notez que votre extension ne peut avoir qu'une seule page action.</p> +Il y a deux façons de spécifier une action de page : avec ou sans [popup](/fr/Add-ons/WebExtensions/Popups). -<p>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 <code><a href="/fr/docs/Mozilla/Add-ons/WebExtensions/API/pageAction">pageAction</a></code>.</p> +- **Sans popup:** Lorsque l'utilisateur clique sur le bouton, un événement est envoyé à l'extension, que l'extension écoute pour utiliser [`pageAction.onClicked`](/fr/docs/Mozilla/Add-ons/WebExtensions/API/pageAction/onClicked): +- ```js + browser.pageAction.onClicked.addListener(handleClick); + ``` +- **Avec un popup:** L'événement `click` n'est pas envoyé. Au lieu de cela, le popup apparaît lorsque l'utilisateur clique sur le bouton. L'utilisateur interagit alors avec le popup. Lorsque l'utilisateur clique à l'extérieur de la fenêtre contextuelle, celle-ci se ferme automatiquement. Voir l'article [Popup ](/fr/Add-ons/WebExtensions/Popups)pour plus de détails sur la création et la gestion des popups. -<h2 id="Icônes">Icônes</h2> +Notez que votre extension ne peut avoir qu'une seule page action. -<p>Pour plus de détails sur la création d'icônes à utiliser avec l'action de votre page, voir <a href="https://design.firefox.com/photon/visuals/iconography.html">Iconography</a> dans la documentation du <a href="https://design.firefox.com/photon/index.html">Photon Design System</a>.</p> +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`](/fr/docs/Mozilla/Add-ons/WebExtensions/API/pageAction). +## Icônes +Pour plus de détails sur la création d'icônes à utiliser avec l'action de votre page, voir [Iconography](https://design.firefox.com/photon/visuals/iconography.html) dans la documentation du [Photon Design System](https://design.firefox.com/photon/index.html). -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Le dépôt <a href="https://github.com/mdn/webextensions-examples">webextensions-examples</a> sur GitHub contient plusieurs exemples de WebExtensions qui utilisent la page action :</p> +Le dépôt [webextensions-examples](https://github.com/mdn/webextensions-examples) sur GitHub contient plusieurs exemples de WebExtensions qui utilisent la page action : -<ul> - <li><a href="https://github.com/mdn/webextensions-examples/tree/master/chill-out">chill-out</a> utilise une action de navigateur sans popup</li> -</ul> +- [chill-out](https://github.com/mdn/webextensions-examples/tree/master/chill-out) utilise une action de navigateur sans popup 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 index eca8a96e38..2ea60a0628 100644 --- a/files/fr/mozilla/add-ons/webextensions/user_interface/popups/index.md +++ b/files/fr/mozilla/add-ons/webextensions/user_interface/popups/index.md @@ -6,57 +6,55 @@ tags: - interface utilisateur translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Popups --- -<div>{{AddonSidebar}}</div> +{{AddonSidebar}} -<div> -<p>Une fenêtre contextuelle est une boîte de dialogue associée à un <a href="/fr/Add-ons/WebExtensions/Browser_action">bouton de la barre d'outils</a> ou à un <a href="/fr/Add-ons/WebExtensions/Page_actions">bouton de la barre d'adresse</a>. 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..</p> +Une fenêtre contextuelle est une boîte de dialogue associée à un [bouton de la barre d'outils](/fr/Add-ons/WebExtensions/Browser_action) ou à un [bouton de la barre d'adresse](/fr/Add-ons/WebExtensions/Page_actions). 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.. -<p><img alt="" src="page_action_popup.png"></p> + -<p>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 <code><a href="/fr/docs/Web/API/Window/close">window.close()</a></code> à 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.</p> +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()`](/fr/docs/Web/API/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. -<p>Vous pouvez définir un raccourci clavier qui ouvre la fenêtre contextuelle en utilisant les raccourcis <code>"_execute_browser_action"</code> et <code>"_execute_page_action"</code>. Consultez la clé de <code><a href="/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/commands">commande</a></code> de la documentation du manifest.json.</p> +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`](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/commands) de la documentation du manifest.json. -<h2 id="Spécification_dune_fenêtre_contextuelle">Spécification d'une fenêtre contextuelle</h2> +## Spécification d'une fenêtre contextuelle -<p>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 <a href="/fr/Add-ons/WebExtensions/API">APIs WebExtension</a> auxquelles l'extension possède des <a href="/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permissions</a>.</p> +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](/fr/Add-ons/WebExtensions/API) auxquelles l'extension possède des [permissions](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions). -<p>Le fichier HTML est inclus dans la WebExtension et spécifié en partie à la clé <code><a href="/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code> ou <a href="/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/page_action">page_action</a> par <code>"default_popup"</code> dans le manifest.json :</p> +Le fichier HTML est inclus dans la WebExtension et spécifié en partie à la clé [`browser_action`](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action) ou [page_action](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/page_action) par `"default_popup"` dans le manifest.json : -<pre class="brush: json"> "browser_action": { +```json + "browser_action": { "default_icon": "icons/beasts-32.png", "default_title": "Beastify", "default_popup": "popup/choose_beast.html" - }</pre> + } +``` -<p>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 <code>"browser_style": true</code> dans la clé <code><a href="/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code> ou <a href="/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/page_action">page_action</a>.</p> +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`](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action) ou [page_action](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/page_action). -<p>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 <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/eval">eval()</a></code>. Voir la <a href="/fr/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy">politique de sécurité du contenu</a> pour plus de détails à ce sujet.</p> +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()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/eval). Voir la [politique de sécurité du contenu](/fr/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy) pour plus de détails à ce sujet. -<h2 id="Déboguer_des_fenêtres_pop-up">Déboguer des fenêtres pop-up</h2> +## Déboguer des fenêtres pop-up -<p>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. <a href="/fr/Add-ons/WebExtensions/Debugging#Debugging_popups">En savoir plus sur le débogage des fenêtres pop-up</a>.</p> +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](/fr/Add-ons/WebExtensions/Debugging#Debugging_popups). -<h2 id="Redimensionnement_contextuel">Redimensionnement contextuel</h2> +## Redimensionnement contextuel -<p>Le redimensionnement automatique des fenêtres contextuelles correspond à leur contenu.<br> - L'algorithme pour cela peut être différent d'un navigateur à l'autre.</p> +Le redimensionnement automatique des fenêtres contextuelles correspond à leur contenu. +L'algorithme pour cela peut être différent d'un navigateur à l'autre. -<p>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 <code><a href="/fr/docs/Web/HTML/Element/body"><body></a></code>.</p> +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>`](/fr/docs/Web/HTML/Element/body). -<p>Pour le mode quirks, c'est l'élément <code><a href="/fr/docs/Web/HTML/Element/html"><html></a></code>. 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 <strong>800x600 pixels</strong> au maximum si cela correspond à l'écran de l'utilisateur. (Avant Firefox 60, c'était seulement 680px.) . Si l'utilisateur <a href="https://support.mozilla.org/en-US/kb/customize-firefox-controls-buttons-and-toolbars#w_customize-the-menu-or-the-toolbar">déplace le bouton du complément dans le menu</a> 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.</p> +Pour le mode quirks, c'est l'élément [`<html>`](/fr/docs/Web/HTML/Element/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](https://support.mozilla.org/en-US/kb/customize-firefox-controls-buttons-and-toolbars#w_customize-the-menu-or-the-toolbar) 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. -<p>Dans Firefox Android 57, la popup s'ouvre comme une page web dans un nouvel onglet.</p> +Dans Firefox Android 57, la popup s'ouvre comme une page web dans un nouvel onglet. -<h2 id="Design_de_la_popup">Design de la popup</h2> +## Design de la popup -<p>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 <a href="https://design.firefox.com/photon/index.html">Photon Design System</a>.</p> +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](https://design.firefox.com/photon/index.html). -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Le dépôt <a href="https://github.com/mdn/webextensions-examples">webextensions-examples</a> sur GitHub contient plusieurs exemples de WebExtensions qui utilisent l'action du navigateur :</p> +Le dépôt [webextensions-examples](https://github.com/mdn/webextensions-examples) sur GitHub contient plusieurs exemples de WebExtensions qui utilisent l'action du navigateur : -<ul> - <li><a href="https://github.com/mdn/webextensions-examples/tree/master/beastify">beastify</a> utilise l'action du navigateur.</li> -</ul> -</div> +- [beastify](https://github.com/mdn/webextensions-examples/tree/master/beastify) utilise l'action du navigateur. 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 index 11854f7eba..1f6b8d7fd2 100644 --- a/files/fr/mozilla/add-ons/webextensions/user_interface/sidebars/index.md +++ b/files/fr/mozilla/add-ons/webextensions/user_interface/sidebars/index.md @@ -7,54 +7,57 @@ tags: translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Sidebars original_slug: Mozilla/Add-ons/WebExtensions/user_interface/barres_laterales --- -<div>{{AddonSidebar}}</div> +{{AddonSidebar}} -<p>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.</p> +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. -<p>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.</p> 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: -<p><img alt="" src="bookmarks-sidebar.png">En utilisant la clé <code>sidebar_action</code> 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.</p> +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. -<p>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.</p> +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. -<p>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()")}} :</p> +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()")}} : -<pre class="brush: js">// sidebar.js -browser.windows.getCurrent({populate: true}).then((windowInfo) => { +```js +// sidebar.js +browser.windows.getCurrent({populate: true}).then((windowInfo) => { myWindowId = windowInfo.id; -});</pre> +}); +``` -<p>Ceci est utile si une barre latérale veut afficher différents contenus pour différentes fenêtres. Par exemple, regardez l'<a href="https://github.com/mdn/webextensions-examples/tree/master/annotate-page">exemple "annotate-page"</a>.</p> +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"](https://github.com/mdn/webextensions-examples/tree/master/annotate-page). -<p>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()")}}.</p> +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()")}}. -<p>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.</p> +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. -<p>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.</p> +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. -<h2 id="Spécification_des_barres_latérales">Spécification des barres latérales</h2> +## Spécification des barres latérales -<p>Pour spécifier une barre latérale, définissez le document par défaut avec la clé du manifest.json <code><a href="/fr/Add-ons/WebExtensions/manifest.json/sidebar_action">sidebar_action</a></code>, à côté d'un titre et d'une icône par défaut :</p> +Pour spécifier une barre latérale, définissez le document par défaut avec la clé du manifest.json [`sidebar_action`](/fr/Add-ons/WebExtensions/manifest.json/sidebar_action), à côté d'un titre et d'une icône par défaut : -<pre class="brush: json">"sidebar_action": { +```json +"sidebar_action": { "default_title": "My sidebar", "default_panel": "sidebar.html", "default_icon": "sidebar_icon.png" -}</pre> +} +``` -<p>Le titre, le panneau et l'icône peuvent être modifiés par programme en utilisant l'API {{WebExtAPIRef ("sidebarAction")}}.</p> +Le titre, le panneau et l'icône peuvent être modifiés par programme en utilisant l'API {{WebExtAPIRef ("sidebarAction")}}. -<p>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.</p> +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. -<h2 id="Concept_de_la_barre_latérale">Concept de la barre latérale</h2> +## Concept de la barre latérale -<p>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 <a href="https://design.firefox.com/photon/index.html">Système de conception Photon</a>.</p> +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](https://design.firefox.com/photon/index.html). -<h2 id="Exemple">Exemple</h2> +## Exemple -<p>Le dépôt <a href="https://github.com/mdn/webextensions-examples">webextensions-examples</a> sur GitHub contient plusieurs exemples de WebExtensions qu utilise une barre latérale:</p> +Le dépôt [webextensions-examples](https://github.com/mdn/webextensions-examples) sur GitHub contient plusieurs exemples de WebExtensions qu utilise une barre latérale: -<ul> - <li><a href="https://github.com/mdn/webextensions-examples/tree/master/annotate-page">annotate-page</a> utilise la barre latérale</li> -</ul> +- [annotate-page](https://github.com/mdn/webextensions-examples/tree/master/annotate-page) utilise la barre latérale |