diff options
Diffstat (limited to 'files/fr/mozilla/add-ons/webextensions/modify_a_web_page/index.html')
| -rw-r--r-- | files/fr/mozilla/add-ons/webextensions/modify_a_web_page/index.html | 38 |
1 files changed, 19 insertions, 19 deletions
diff --git a/files/fr/mozilla/add-ons/webextensions/modify_a_web_page/index.html b/files/fr/mozilla/add-ons/webextensions/modify_a_web_page/index.html index 704c8ae972..18587b3b34 100644 --- a/files/fr/mozilla/add-ons/webextensions/modify_a_web_page/index.html +++ b/files/fr/mozilla/add-ons/webextensions/modify_a_web_page/index.html @@ -45,14 +45,14 @@ translation_of: Mozilla/Add-ons/WebExtensions/Modify_a_web_page }</pre> -<p>La clé <code><a href="/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code> est la façon dont vous chargez les scripts dans des pages qui correspondent aux modèles d'URL. Dans ce cas, les instructions <code>content_scripts demandent au navigateur de charger un script appelé</code> "page-eater.js" dans toutes les pages sous <a href="https://developer.mozilla.org/">https://developer.mozilla.org/</a>.</p> +<p>La clé <code><a href="/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code> est la façon dont vous chargez les scripts dans des pages qui correspondent aux modèles d'URL. Dans ce cas, les instructions <code>content_scripts demandent au navigateur de charger un script appelé</code> "page-eater.js" dans toutes les pages sous <a href="/">https://developer.mozilla.org/</a>.</p> <div class="note"> -<p>Puisque la propriété "js" de content_scripts est un tableau, vous pouvez l'utiliser pour injecter plus d'un script dans des pages correspondantes. Si vous faites cela, les pages partagent la même portée, tout comme les scripts multiples chargés par une page, et ils sont chargés dans l'ordre dans lequel ils sont répertoriés dans le tableau.</p> +<p><strong>Note :</strong> Puisque la propriété "js" de content_scripts est un tableau, vous pouvez l'utiliser pour injecter plus d'un script dans des pages correspondantes. Si vous faites cela, les pages partagent la même portée, tout comme les scripts multiples chargés par une page, et ils sont chargés dans l'ordre dans lequel ils sont répertoriés dans le tableau.</p> </div> <div class="note"> -<p><span id="result_box" lang="fr"><span>La clé content_scripts possède également une propriété "css" que vous pouvez utiliser pour injecter des feuilles de style CSS.</span></span></p> +<p><strong>Note :</strong> La clé content_scripts possède également une propriété "css" que vous pouvez utiliser pour injecter des feuilles de style CSS.</p> </div> <p>Ensuite, créez un fichier appelé "page-eater.js" dans le dossier "modify-page" et donnez-lui le contenu suivant :</p> @@ -63,12 +63,12 @@ var header = document.createElement('h1'); header.textContent = "This page has been eaten"; document.body.appendChild(header);</pre> -<p>Maintenant <a href="/fr/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">installer la WebExtension</a>, et visiter <a href="https://developer.mozilla.org/">https://developer.mozilla.org/</a>:</p> +<p>Maintenant <a href="/fr/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">installer la WebExtension</a>, et visiter <a href="/">https://developer.mozilla.org/</a>:</p> <p>{{EmbedYouTube("lxf2Tkg6U1M")}}</p> <div class="note"> -<p>Notez bien que cette vidéo montre le script de contenu fonctionnant dans <a href="/fr/firefox/">addons.mozilla.org</a>, les scripts de contenu sont actuellement bloqués pour ce site.</p> + <p><strong>Note :</strong> Cette vidéo montre le script de contenu fonctionnant dans <a href="/fr/firefox/">addons.mozilla.org</a>, les scripts de contenu sont actuellement bloqués pour ce site.</p> </div> <h2 id="Modification_des_pages_par_programme">Modification des pages par programme</h2> @@ -121,17 +121,17 @@ browser.contextMenus.onClicked.addListener(function(info, tab) { <p>A ce stade, l'extension devrait ressembler à ceci :</p> -<pre class="line-numbers language-html"><code class="language-html">modify-page/ +<pre class="brush: html">modify-page/ background.js manifest.json - page-eater.js</code></pre> + page-eater.js</pre> <p>Maintenant <a href="/fr/Add-ons/WebExtensions/Temporary_Installation_in_Firefox#Reloading_a_temporary_add-on">rechargeons la WebExtension</a>, Ouvrez une page (n'importe quelle page, cette fois) activez le menu contextuel et sélectionnez "Eat this page":</p> <p>{{EmbedYouTube("zX4Bcv8VctA")}}</p> <div class="note"> -<p>Notez que bien que cette vidéo montre le script de contenu fonctionnant dans <a href="/fr/firefox/">addons.mozilla.org</a>, les scripts de contenu sont actuellement bloqués pour ce site.</p> + <p><strong>Note :</strong> Bien que cette vidéo montre le script de contenu fonctionnant dans <a href="/fr/firefox/">addons.mozilla.org</a>, les scripts de contenu sont actuellement bloqués pour ce site.</p> </div> <h2 id="Messagerie">Messagerie</h2> @@ -140,7 +140,7 @@ browser.contextMenus.onClicked.addListener(function(info, tab) { <p>Cependant, ils peuvent communiquer en envoyant des messages. Une extrémité met en place un message auditeur, et l'autre extrémité peut lui envoyer un message. Le tableau suivant résume les API impliquées de chaque côté:</p> -<table class="fullwidth-table standard-table"> +<table class="standard-table"> <thead> <tr> <th scope="row"></th> @@ -160,8 +160,8 @@ browser.contextMenus.onClicked.addListener(function(info, tab) { </thead> </table> -<div class="blockIndicator note"> -<p>En ajoutant à cette méthode de communication, qui envoie des messages uniques, vous pouvez également utiliser une <a href="/fr/docs/Mozilla/Add-ons/WebExtensions/Content_scripts#Communication_avec_les_scripts_darri%C3%A8re-plan">approche basée sur la connexion pour échanger des messages</a>.</p> +<div class="note"> + <p><strong>Note :</strong> En ajoutant à cette méthode de communication, qui envoie des messages uniques, vous pouvez également utiliser une <a href="/fr/docs/Mozilla/Add-ons/WebExtensions/Content_scripts#Communication_avec_les_scripts_darri%C3%A8re-plan">approche basée sur la connexion pour échanger des messages</a>.</p> </div> <p>Mettons à jour notre exemple pour montrer comment envoyer un message à partir du script en arrière-plan.</p> @@ -214,14 +214,14 @@ browser.runtime.onMessage.addListener(eatPage); <p>Si nous voulions envoyer des messages du script de contenu à la page d'arrière-plan, la configuration serait inverse de cet exemple, sauf que nous utiliserions <code><a href="/fr/docs/Mozilla/Add-ons/WebExtensions/API/runtime/sendMessage">runtime.sendMessage()</a></code> dans le script de contenu.</p> <div class="note"> -<p>Ces exemples injectent JavaScript; Vous pouvez également injecter CSS par programme en utilisant la fonction <code><a href="/fr/docs/Mozilla/Add-ons/WebExtensions/API/tabs/insertCSS">tabs.insertCSS()</a></code>.</p> + <p><strong>Note :</strong> Ces exemples injectent JavaScript; Vous pouvez également injecter CSS par programme en utilisant la fonction <code><a href="/fr/docs/Mozilla/Add-ons/WebExtensions/API/tabs/insertCSS">tabs.insertCSS()</a></code>.</p> </div> <h2 id="Apprendre_plus">Apprendre plus</h2> <ul> <li><a href="/fr/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">Content scripts</a> guide</li> - <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code> manifest key</li> + <li><code><a href="/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code> manifest key</li> <li><code><a href="/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permissions</a></code> manifest key</li> <li><code><a href="/fr/docs/Mozilla/Add-ons/WebExtensions/API/tabs/executeScript">tabs.executeScript()</a></code></li> <li><code><a href="/fr/docs/Mozilla/Add-ons/WebExtensions/API/tabs/insertCSS">tabs.insertCSS()</a></code></li> @@ -230,16 +230,16 @@ browser.runtime.onMessage.addListener(eatPage); <li><code><a href="/fr/docs/Mozilla/Add-ons/WebExtensions/API/runtime/onMessage">runtime.onMessage</a></code></li> <li>Examples using <code>content_scripts</code>: <ul> - <li><a class="external external-icon" href="https://github.com/mdn/webextensions-examples/tree/master/borderify">borderify</a></li> - <li><a class="external external-icon" href="https://github.com/mdn/webextensions-examples/tree/master/emoji-substitution" rel="noopener">emoji-substitution</a></li> - <li><a class="external external-icon" href="https://github.com/mdn/webextensions-examples/tree/master/notify-link-clicks-i18n">notify-link-clicks-i18n</a></li> - <li><a class="external external-icon" href="https://github.com/mdn/webextensions-examples/tree/master/page-to-extension-messaging">page-to-extension-messaging</a></li> + <li><a href="https://github.com/mdn/webextensions-examples/tree/master/borderify">borderify</a></li> + <li><a href="https://github.com/mdn/webextensions-examples/tree/master/emoji-substitution" rel="noopener">emoji-substitution</a></li> + <li><a href="https://github.com/mdn/webextensions-examples/tree/master/notify-link-clicks-i18n">notify-link-clicks-i18n</a></li> + <li><a href="https://github.com/mdn/webextensions-examples/tree/master/page-to-extension-messaging">page-to-extension-messaging</a></li> </ul> </li> <li>Examples using <code>tabs.executeScript()</code>: <ul> - <li><a class="external external-icon" href="https://github.com/mdn/webextensions-examples/tree/master/beastify">beastify</a></li> - <li><a class="external external-icon" href="https://github.com/mdn/webextensions-examples/tree/master/context-menu-copy-link-with-types">context-menu-copy-link-with-types</a></li> + <li><a href="https://github.com/mdn/webextensions-examples/tree/master/beastify">beastify</a></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></li> </ul> </li> </ul> |