diff options
Diffstat (limited to 'files/fr/mozilla/add-ons/webextensions/user_interface')
12 files changed, 103 insertions, 119 deletions
diff --git a/files/fr/mozilla/add-ons/webextensions/user_interface/browser_action/index.html b/files/fr/mozilla/add-ons/webextensions/user_interface/browser_action/index.html index 0809481f28..862dfee482 100644 --- a/files/fr/mozilla/add-ons/webextensions/user_interface/browser_action/index.html +++ b/files/fr/mozilla/add-ons/webextensions/user_interface/browser_action/index.html @@ -6,7 +6,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Browser_action <div>{{AddonSidebar}}</div> <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="https://mdn.mozillademos.org/files/15751/browser-action.png" style="display: block; height: 182px; margin-left: auto; margin-right: auto; width: 350px;"></p> + <img alt="" src="browser-action.png"></p> <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> @@ -14,19 +14,19 @@ translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Browser_action <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> -<pre class="brush: json line-numbers language-json"><code class="language-json"><span class="key token">"browser_action":</span> <span class="punctuation token">{</span> - <span class="key token">"default_icon":</span> <span class="punctuation token">{</span> - <span class="key token">"19":</span> <span class="string token">"button/geo-19.png"</span><span class="punctuation token">,</span> - <span class="key token">"38":</span> <span class="string token">"button/geo-38.png"</span> - <span class="punctuation token">}</span><span class="punctuation token">,</span> - <span class="key token">"default_title":</span> <span class="string token">"Whereami?"</span> -<span class="punctuation token">}</span></code></pre> +<pre class="brush: 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> -<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="https://developer.mozilla.org/fr//Add-ons/WebExtensions/API/BrowserAction/onClicked" title="Fired when a browser action icon is clicked. This event will not fire if the browser action has a popup."><code>browserAction.onClicked</code></a> :</p> +<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> -<pre class="brush: js line-numbers language-js"><code class="language-js">browser<span class="punctuation token">.</span>browserAction<span class="punctuation token">.</span>onClicked<span class="punctuation token">.</span><span class="function token">addListener</span><span class="punctuation token">(</span>handleClick<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +<pre class="brush: js">browser.browserAction.onClicked.addListener(handleClick);</pre> <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> @@ -36,7 +36,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Browser_action <h2 id="Icônes">Icônes</h2> -<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 class="grey-90 no-underline hover-no-underline" href="https://design.firefox.com/photon/index.html">Photon Design System</a>.</p> +<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> <h2 id="Exemples">Exemples</h2> diff --git a/files/fr/mozilla/add-ons/webextensions/user_interface/browser_styles/index.html b/files/fr/mozilla/add-ons/webextensions/user_interface/browser_styles/index.html index 9f327221dc..68f3bb2b82 100644 --- a/files/fr/mozilla/add-ons/webextensions/user_interface/browser_styles/index.html +++ b/files/fr/mozilla/add-ons/webextensions/user_interface/browser_styles/index.html @@ -18,19 +18,19 @@ translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles <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> -<div class="blockIndicator warning"> -<p>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 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> -<div class="blockIndicator note"> -<p><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 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> <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> -<p>La plupart des styles sont automatiquement appliqués, mais certains éléments nécessitent que vous ajoutiez la classe <code style="white-space: nowrap;">browser-style</code> non standard pour obtenir leur style, comme indiqué dans le tableau ci-dessous :</p> +<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> -<table class="fullwidth-table standard-table"> +<table class="standard-table"> <thead> <tr> <th scope="col">Element</th> @@ -41,7 +41,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles <tr> <td><code><a href="/fr/docs/Web/HTML/Element/button"><button></a></code></td> <td> - <pre class="brush: html no-line-numbers"> + <pre class="brush: html"> <button class="browser-style">Click me</button>{{non-standard_inline}}</pre> </td> </tr> @@ -50,7 +50,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles <p><code><a href="/fr/docs/Web/HTML/Element/select"><select></a></code></p> </td> <td> - <pre class="brush: html no-line-numbers"> + <pre class="brush: html"> <select class="browser-style" name="select"> <option value="value1">Value 1</option> <option value="value2" selected>Value 2</option> @@ -61,14 +61,14 @@ translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles <tr> <td><code><a href="/fr/docs/Web/HTML/Element/textarea"><textarea></a></code></td> <td> - <pre class="brush: html no-line-numbers"> + <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 no-line-numbers"> + <pre class="brush: html"> <div class="browser-style"> <input type="radio" id="op1" name="choices" value="op1"> <label for="op1">Option 1</label> @@ -81,8 +81,8 @@ translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles </tbody> </table> -<div class="blockIndicator note"> -<p>Voir le {{bug(1465256)}} pour la suppression de cette exigence inutile.</p> +<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> @@ -93,16 +93,15 @@ translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles <h2 id="Composants_du_panneau_Firefox">Composants du panneau Firefox</h2> -<div class="overheadIndicator nonStandard"> -<p><strong>Non-Standard</strong><br> - Cette fonctionnalité est non standard et ne fonctionne que dans Firefox.</p> +<div class="warning"> +<p><strong>Attention :</strong> Cette fonctionnalité est non standard et ne fonctionne que dans Firefox.</p> </div> <p>La feuille de style <code>chrome://browser/content/extension.css</code> contient également les styles des composants du panneau Firefox.</p> <p>L'<a href="https://firefoxux.github.io/StyleGuide/#/navigation">ancien guide de style de Firefox</a> documente l'utilisation appropriée.</p> -<table class="fullwidth-table standard-table"> +<table class="standard-table"> <thead> <tr> <th scope="col">Element</th> @@ -264,10 +263,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles <button class="panel-section-footer-button default">Confirm</button> </footer></pre> -<div class="hidden"> -<h4 id="CSS">CSS</h4> - -<pre class="brush: css">/* Global */ +<pre class="brush: css hidden">/* Global */ html, body { background: white; @@ -435,7 +431,6 @@ button.panel-section-tabs-button { z-index: 99; }</pre> -<hr> <pre class="brush: css">/* Example specific – not part of chrome://browser/content/extension.css */ body { background: #fcfcfc; @@ -458,7 +453,6 @@ html > body { .icon-section-header { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj48Y2lyY2xlIGZpbGw9IiMzNjM5NTkiIGN4PSIxNSIgY3k9IjE1IiByPSIxNSIvPjwvc3ZnPg=="); }</pre> -</div> <h4 id="Resultat">Resultat</h4> diff --git a/files/fr/mozilla/add-ons/webextensions/user_interface/context_menu_items/index.html b/files/fr/mozilla/add-ons/webextensions/user_interface/context_menu_items/index.html index 3a73d669b9..85fa7a82fc 100644 --- a/files/fr/mozilla/add-ons/webextensions/user_interface/context_menu_items/index.html +++ b/files/fr/mozilla/add-ons/webextensions/user_interface/context_menu_items/index.html @@ -8,18 +8,16 @@ original_slug: Mozilla/Add-ons/WebExtensions/user_interface/elements_menu_contex --- <div>{{AddonSidebar}}</div> -<div> -<p><span class="seoSummary">Cette option d'interface utilisateur ajoute un ou plusieurs éléments à un menu contextuel du navigateur.</span> 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> +<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> -<p><img alt="Example of content menu items added by a WebExtension, from the context-menu-demo example" src="https://mdn.mozillademos.org/files/15756/context_menu_example.png" style="display: block; height: 382px; margin-left: auto; margin-right: auto; width: 350px;"></p> +<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> <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> -<p><img alt="" src="https://mdn.mozillademos.org/files/16554/extension_context_menu.png" style="border: 1px solid black; display: block; height: 637px; margin: 0px auto; width: 505px;"></p> +<p><img alt="" src="extension_context_menu.png"></p> -<div> <h2 id="Spécification_des_éléments_du_menu_contextuel">Spécification des éléments du menu contextuel</h2> <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> @@ -46,15 +44,13 @@ Vous pouvez ensuite ajouter (mettre à jour ou supprimer) les éléments du menu <h2 id="Icônes">Icônes</h2> -<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 class="grey-90 no-underline hover-no-underline" href="https://design.firefox.com/photon/index.html">Systeme de conception de Photon</a>.</p> +<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> <h2 id="Exemples">Exemples</h2> -<p>Le depot <a class="external external-icon" 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> +<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> <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> -</div> -</div> +</ul>
\ No newline at end of file diff --git a/files/fr/mozilla/add-ons/webextensions/user_interface/devtools_panels/index.html b/files/fr/mozilla/add-ons/webextensions/user_interface/devtools_panels/index.html index 8dd84fbdf0..3b2b241705 100644 --- a/files/fr/mozilla/add-ons/webextensions/user_interface/devtools_panels/index.html +++ b/files/fr/mozilla/add-ons/webextensions/user_interface/devtools_panels/index.html @@ -12,12 +12,12 @@ original_slug: Mozilla/Add-ons/WebExtensions/user_interface/panneaux_devtools <div>{{AddonSidebar}}</div> <div class="note"> -<p>Cette fonctionnalité deviendra disponible dans Firefox 54.</p> +<p><strong>Note :</strong> Cette fonctionnalité deviendra disponible dans Firefox 54.</p> </div> <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> -<p><img alt='Simple example showing the addition of "My panel" to the Developer Tools tabs.' src="https://mdn.mozillademos.org/files/15746/developer_panel_tab.png" style="display: block; height: 112px; margin-left: auto; margin-right: auto; width: 350px;"></p> +<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> @@ -25,7 +25,7 @@ original_slug: Mozilla/Add-ons/WebExtensions/user_interface/panneaux_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> -<pre class="brush: json line-numbers language-json"><code class="language-json"><span class="key token">"devtools_page":</span> <span class="string token">"devtools-page.html"</span></code></pre> +<pre class="brush: json">"devtools_page": "devtools-page.html"</pre> <p>Dans la page des devtools, appelez un script qui ajoutera un panneau dans devtools:</p> @@ -52,15 +52,15 @@ browser.devtools.panels.create( newPanel.onHidden.addListener(handleHidden); });</pre> -<p>L'extension peut maintenant exécuter un code dans la fenêtre inspectée à l'aide de <code><a href="/fr/Add-ons/WebExtensions/API/devtools.inspectedWindow/eval"><code>devtools</code>.inspectedWindow.eval()</a></code> 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> +<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> <h2 id="Conception_du_panneau_de_développement">Conception du panneau de développement</h2> -<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 class="grey-90 no-underline hover-no-underline" href="https://design.firefox.com/photon/index.html">Photon Design System</a>.</p> +<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> <h2 id="Icônes">Icônes</h2> -<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 class="grey-90 no-underline hover-no-underline" href="https://design.firefox.com/photon/index.html">Photon Design System</a>.</p> +<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> diff --git a/files/fr/mozilla/add-ons/webextensions/user_interface/extension_pages/index.html b/files/fr/mozilla/add-ons/webextensions/user_interface/extension_pages/index.html index 4ffba78bdb..7ddf8b03fd 100644 --- a/files/fr/mozilla/add-ons/webextensions/user_interface/extension_pages/index.html +++ b/files/fr/mozilla/add-ons/webextensions/user_interface/extension_pages/index.html @@ -11,11 +11,11 @@ original_slug: Mozilla/Add-ons/WebExtensions/user_interface/pages_web_incluses --- <div>{{AddonSidebar()}}</div> -<p><span class="seoSummary">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.</span></p> +<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> -<p><img alt="Example of a simple bundled page displayed as a detached panel." src="https://mdn.mozillademos.org/files/15752/bundled_page_as_panel_small.png" style="display: block; height: 216px; margin-left: auto; margin-right: auto; width: 350px;"></p> +<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<span>‐</span>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> +<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> <p>Pensez à la page d'arrière-plan comme une « page cachée d’extension ».</p> @@ -23,7 +23,7 @@ original_slug: Mozilla/Add-ons/WebExtensions/user_interface/pages_web_incluses <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> -<pre class="notranslate">/my-extension +<pre>/my-extension /manifest.json /my-page.html /my-page.js</pre> @@ -34,7 +34,7 @@ original_slug: Mozilla/Add-ons/WebExtensions/user_interface/pages_web_incluses <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> -<pre class="brush: js notranslate">var createData = { +<pre class="brush: js">var createData = { type: "detached_panel", url: "panel.html", width: 250, @@ -46,7 +46,7 @@ var creating = browser.windows.create(createData);</pre> <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> -<pre class="brush: js notranslate">document.getElementById("closeme").addEventListener("click", function(){ +<pre class="brush: js">document.getElementById("closeme").addEventListener("click", function(){ let winId = browser.windows.WINDOW_ID_CURRENT; let removing = browser.windows.remove(winId); });</pre> @@ -55,7 +55,7 @@ var creating = browser.windows.create(createData);</pre> <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> -<pre class="brush: js notranslate" id="ct-4">function onVisited(historyItem) { +<pre class="brush: js">function onVisited(historyItem) { if (historyItem.url == browser.extension.getURL(myPage)) { browser.history.deleteUrl({url: historyItem.url}); } @@ -67,12 +67,12 @@ browser.history.onVisited.addListener(onVisited);</pre> <h2 id="Conception_des_pages_Web">Conception des pages Web</h2> -<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 class="grey-90 no-underline hover-no-underline" 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> +<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> <h2 id="Exemples">Exemples</h2> <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> <ul> - <li><a class="external external-icon" href="https://github.com/mdn/webextensions-examples/tree/master/window-manipulator">window-manipulator</a> utilise les options pour créer une fenêtre</li> + <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> diff --git a/files/fr/mozilla/add-ons/webextensions/user_interface/index.html b/files/fr/mozilla/add-ons/webextensions/user_interface/index.html index b6e44ec3e7..a77c53928b 100644 --- a/files/fr/mozilla/add-ons/webextensions/user_interface/index.html +++ b/files/fr/mozilla/add-ons/webextensions/user_interface/index.html @@ -12,7 +12,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/user_interface <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> <div class="note"> -<p>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> +<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> <table class="standard-table"> @@ -29,77 +29,77 @@ translation_of: Mozilla/Add-ons/WebExtensions/user_interface <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 alt="Example showing a toolbar button (browser action)." src="https://mdn.mozillademos.org/files/15751/browser-action.png" style="height: 364px; width: 700px;"></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 alt="Example of the pop-up on a toolbar button" src="https://mdn.mozillademos.org/files/15753/popup-shadow.png" style="height: 624px; width: 700px;"></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 alt="Example showing an address bar button (page action) " src="https://mdn.mozillademos.org/files/15745/address_bar_button.png" style="height: 348px; width: 700px;"></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 alt="Example of a popup on the address bar button" src="https://mdn.mozillademos.org/files/15747/page_action_popup.png" style="height: 524px; width: 700px;"></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 alt="Example of content menu items added by a WebExtension, from the context-menu-demo example" src="https://mdn.mozillademos.org/files/15756/context_menu_example.png" style="height: 942px; width: 864px;"></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 dir="ltr">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> + <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 alt="Example of a sidebar" src="https://mdn.mozillademos.org/files/15755/bookmarks-sidebar.png" style="height: 846px; width: 700px;"></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 alt="Example showing the options page content added in the favorite colors example." src="https://mdn.mozillademos.org/files/15748/options_page.png"></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 alt="Example of a simple bundled page displayed as a detached panel." src="https://mdn.mozillademos.org/files/15752/bundled_page_as_panel_small.png" style="height: 432px; width: 700px;"></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 alt="Example of an extension triggered system notification" src="https://mdn.mozillademos.org/files/15754/notify-shadowed.png" style="height: 294px; width: 780px;"></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 alt="Example showing the result of the firefox_code_search WebExtension's customization of the address bar suggestions." src="https://mdn.mozillademos.org/files/15749/omnibox_example_small.png" style="height: 464px; width: 700px;"></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 alt="Example showing the result of the firefox_code_search WebExtension's customization of the address bar suggestions." src="https://mdn.mozillademos.org/files/15746/developer_panel_tab.png" style="height: 224px; width: 700px;"></td> + <td><img src="developer_panel_tab.png"></td> </tr> </tbody> </table> diff --git a/files/fr/mozilla/add-ons/webextensions/user_interface/notifications/index.html b/files/fr/mozilla/add-ons/webextensions/user_interface/notifications/index.html index 40dbdb303c..e0106d3b7d 100644 --- a/files/fr/mozilla/add-ons/webextensions/user_interface/notifications/index.html +++ b/files/fr/mozilla/add-ons/webextensions/user_interface/notifications/index.html @@ -7,17 +7,16 @@ translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Notifications --- <div>{{AddonSidebar}}</div> -<div> -<p><span class="seoSummary">Les notifications vous permettent d'afficher des informations sur votre extension ou son contenu en utilisant le système d'exploitation sous-jacent</span></p> +<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> -<p><img alt="" src="https://mdn.mozillademos.org/files/15754/notify-shadowed.png" style="display: block; height: 147px; margin-left: auto; margin-right: auto; width: 390px;"></p> +<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> <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> -<pre class="brush: json"><span class="pl-s"><span class="pl-pds">"</span>permissions<span class="pl-pds">"</span></span>: [<span class="pl-s"><span class="pl-pds">"</span>notifications<span class="pl-pds">"</span></span>]</pre> +<pre class="brush: json">"permissions": ["notifications"]</pre> <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> @@ -34,14 +33,13 @@ browser.notifications.create({ <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> -<pre class="brush: js line-numbers language-js"><code class="language-js">browser<span class="punctuation token">.</span>notifications<span class="punctuation token">.</span>onClicked<span class="punctuation token">.</span><span class="function token">addListener</span><span class="punctuation token">(</span>handleClick<span class="punctuation token">)</span><span class="punctuation token">;</span> -</code></pre> +<pre class="brush: js">browser.notifications.onClicked.addListener(handleClick);</pre> <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> <h2 id="Icônes">Icônes</h2> -<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 class="grey-90 no-underline hover-no-underline" href="https://design.firefox.com/photon/index.html">Photon Design System</a>.</p> +<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> <h2 id="Exemples">Exemples</h2> @@ -49,5 +47,4 @@ browser.notifications.create({ <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> -</div> +</ul>
\ No newline at end of file diff --git a/files/fr/mozilla/add-ons/webextensions/user_interface/omnibox/index.html b/files/fr/mozilla/add-ons/webextensions/user_interface/omnibox/index.html index 23520c7da0..4419f2465b 100644 --- a/files/fr/mozilla/add-ons/webextensions/user_interface/omnibox/index.html +++ b/files/fr/mozilla/add-ons/webextensions/user_interface/omnibox/index.html @@ -10,7 +10,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Omnibox <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> -<p><img alt="Example showing the result of the firefox_code_search WebExtension's customization of the address bar suggestions." src="https://mdn.mozillademos.org/files/15749/omnibox_example_small.png" style="display: block; height: 232px; margin-left: auto; margin-right: auto; width: 350px;"></p> +<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> @@ -18,16 +18,16 @@ translation_of: Mozilla/Add-ons/WebExtensions/user_interface/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> -<pre class="brush: json line-numbers language-json"> "omnibox": { "keyword" : "cs" }</pre> +<pre class="brush: json"> "omnibox": { "keyword" : "cs" }</pre> <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> -<pre class="brush: js line-numbers language-js">browser.omnibox.setDefaultSuggestion({ +<pre class="brush: js">browser.omnibox.setDefaultSuggestion({ description: `Search the firefox codebase (e.g. "hello world" | "path:omnibox.js onInputChanged")` });</pre> -<article id="wikiArticle"> + <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) => { @@ -71,6 +71,5 @@ translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Omnibox <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> <ul> - <li><a class="external external-icon" href="https://github.com/mdn/webextensions-examples/tree/master/firefox-code-search">firefox-code-search</a> utilise la personnalisation de omnibox</li> -</ul> -</article> + <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 diff --git a/files/fr/mozilla/add-ons/webextensions/user_interface/options_pages/index.html b/files/fr/mozilla/add-ons/webextensions/user_interface/options_pages/index.html index cd81456555..6b38ccb5aa 100644 --- a/files/fr/mozilla/add-ons/webextensions/user_interface/options_pages/index.html +++ b/files/fr/mozilla/add-ons/webextensions/user_interface/options_pages/index.html @@ -14,7 +14,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Options_pages <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> -<p>Vous pouvez ouvrir la page en programmant en appelant <a href="/fr/Add-ons/WebExtensions/API/Runtime/openOptionsPage" title="If your add-on does not have an options page, or the browser failed to create one for some other reason, runtime.lastError will be set."><code>runtime.openOptionsPage()</code></a>.</p> +<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> <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> @@ -40,7 +40,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Options_pages </html></pre> -<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" title="Enables WebExtensions to store and retrieve data, and listen for changes to stored items."><code>storage</code></a> pour conserver les préférences.</p> +<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> <p>Insérez les fichiers de la page dans votre extension.</p> diff --git a/files/fr/mozilla/add-ons/webextensions/user_interface/page_actions/index.html b/files/fr/mozilla/add-ons/webextensions/user_interface/page_actions/index.html index b16b7b0284..843266e618 100644 --- a/files/fr/mozilla/add-ons/webextensions/user_interface/page_actions/index.html +++ b/files/fr/mozilla/add-ons/webextensions/user_interface/page_actions/index.html @@ -12,7 +12,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Page_actions <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> -<p><img alt="" src="https://mdn.mozillademos.org/files/15745/address_bar_button.png" style="display: block; height: 174px; margin-left: auto; margin-right: auto; width: 350px;"></p> +<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> @@ -30,7 +30,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Page_actions </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="https://developer.mozilla.org/en-US/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="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/PageAction/show" title="Shows the page action for a given tab. The page action is shown whenever the given tab is the active tab."><code>pageAction.show()</code></a> et <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/PageAction/hide" title="Hides the page action for a given tab."><code>pageAction.hide()</code></a> pour l'afficher ou la masquer dans des onglets spécifiques.</li> + <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> @@ -38,7 +38,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Page_actions <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> -<table class="fullwidth-table standard-table"> +<table class="standard-table"> <thead> <tr> <th scope="row">Type</th> @@ -67,36 +67,36 @@ translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Page_actions <h2 id="Spécification_de_l'action_de_la_page">Spécification de l'action de la page</h2> -<p>Vous définissez les propriétés de la clé de l'<code><a href="https://developer.mozilla.org/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/page_action">action de page</a></code> dans le manifest.json:</p> +<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> -<pre class="brush: json line-numbers language-json"><code class="language-json"><span class="key token">"page_action":</span> <span class="punctuation token">{</span> - <span class="key token">"browser_style":</span> <span class="keyword token">true</span><span class="punctuation token">,</span> - <span class="key token">"default_icon":</span> <span class="punctuation token">{</span> - <span class="key token">"19":</span> <span class="string token">"button/geo-19.png"</span><span class="punctuation token">,</span> - <span class="key token">"38":</span> <span class="string token">"button/geo-38.png"</span> - <span class="punctuation token">}</span><span class="punctuation token">,</span> - <span class="key token">"default_title":</span> <span class="string token">"Whereami?"</span><span class="punctuation token">,</span> -<span class="punctuation token">}</span></code></pre> +<pre class="brush: 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="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Popups">popup</a>.</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="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/pageAction/onClicked" title="Fired when a browser action icon is clicked. This event will not fire if the browser action has a popup."><code>pageAction.onClicked</code></a>:</li> + <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 line-numbers language-js"><code class="language-js">browser<span class="punctuation token">.</span>pageAction<span class="punctuation token">.</span>onClicked<span class="punctuation token">.</span><span class="function token">addListener</span><span class="punctuation token">(</span>handleClick<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + <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="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Popups">Popup </a>pour plus de détails sur la création et la gestion des popups.</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> <p>Notez que votre extension ne peut avoir qu'une seule page action.</p> -<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="https://developer.mozilla.org/fr/docs/Mozilla/Add-ons/WebExtensions/API/pageAction">pageAction</a></code>.</p> +<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> <h2 id="Icônes">Icônes</h2> -<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 class="grey-90 no-underline hover-no-underline" href="https://design.firefox.com/photon/index.html">Photon Design System</a>.</p> +<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> diff --git a/files/fr/mozilla/add-ons/webextensions/user_interface/popups/index.html b/files/fr/mozilla/add-ons/webextensions/user_interface/popups/index.html index 437939ec70..eca8a96e38 100644 --- a/files/fr/mozilla/add-ons/webextensions/user_interface/popups/index.html +++ b/files/fr/mozilla/add-ons/webextensions/user_interface/popups/index.html @@ -11,11 +11,11 @@ translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Popups <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> -<p><img alt="" src="https://mdn.mozillademos.org/files/15747/page_action_popup.png" style="display: block; height: 282px; margin-left: auto; margin-right: auto; width: 350px;"></p> +<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="https://developer.mozilla.org/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> +<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> -<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><span class="hidden"> </span> de la documentation du manifest.json.</p> +<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> <h2 id="Spécification_dune_fenêtre_contextuelle">Spécification d'une fenêtre contextuelle</h2> @@ -35,7 +35,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Popups <h2 id="Déboguer_des_fenêtres_pop-up">Déboguer des fenêtres pop-up</h2> -<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="https://developer.mozilla.org/fr/Add-ons/WebExtensions/Debugging#Debugging_popups">En savoir plus sur le débogage des fenêtres pop-up</a>.</p> +<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> <h2 id="Redimensionnement_contextuel">Redimensionnement contextuel</h2> @@ -50,7 +50,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Popups <h2 id="Design_de_la_popup">Design de la popup</h2> -<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 class="grey-90 no-underline hover-no-underline" href="https://design.firefox.com/photon/index.html">Photon Design System</a>.</p> +<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> <h2 id="Exemples">Exemples</h2> diff --git a/files/fr/mozilla/add-ons/webextensions/user_interface/sidebars/index.html b/files/fr/mozilla/add-ons/webextensions/user_interface/sidebars/index.html index 0528ae24a3..11854f7eba 100644 --- a/files/fr/mozilla/add-ons/webextensions/user_interface/sidebars/index.html +++ b/files/fr/mozilla/add-ons/webextensions/user_interface/sidebars/index.html @@ -9,19 +9,18 @@ original_slug: Mozilla/Add-ons/WebExtensions/user_interface/barres_laterales --- <div>{{AddonSidebar}}</div> -<div> -<p><span class="seoSummary">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.</span></p> +<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> <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="https://mdn.mozillademos.org/files/15755/bookmarks-sidebar.png" style="display: block; height: 423px; margin-left: auto; margin-right: auto; width: 350px;">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> +<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> <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> <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> -<pre class="brush: js notranslate">// sidebar.js +<pre class="brush: js">// sidebar.js browser.windows.getCurrent({populate: true}).then((windowInfo) => { myWindowId = windowInfo.id; });</pre> @@ -38,7 +37,7 @@ browser.windows.getCurrent({populate: true}).then((windowInfo) => { <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> -<pre class="brush: json notranslate">"sidebar_action": { +<pre class="brush: json">"sidebar_action": { "default_title": "My sidebar", "default_panel": "sidebar.html", "default_icon": "sidebar_icon.png" @@ -50,7 +49,7 @@ browser.windows.getCurrent({populate: true}).then((windowInfo) => { <h2 id="Concept_de_la_barre_latérale">Concept de la barre latérale</h2> -<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 class="grey-90 no-underline hover-no-underline" href="https://design.firefox.com/photon/index.html">Système de conception Photon</a>.</p> +<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> <h2 id="Exemple">Exemple</h2> @@ -59,4 +58,3 @@ browser.windows.getCurrent({populate: true}).then((windowInfo) => { <ul> <li><a href="https://github.com/mdn/webextensions-examples/tree/master/annotate-page">annotate-page</a> utilise la barre latérale</li> </ul> -</div> |