path: root/files/fr/mozilla/add-ons/webextensions/modify_a_web_page/index.html

---
title: Modifier une page web
slug: Mozilla/Add-ons/WebExtensions/Modify_a_web_page
tags:
  - WebExtensions
translation_of: Mozilla/Add-ons/WebExtensions/Modify_a_web_page
---
<div>{{AddonSidebar}}</div>

<p>L'un des cas d'utilisation les plus courants pour un complément de navigateur est de modifier une page Web. Par exemple, une extension pourrait vouloir modifier le style appliqué à une page, cacher des nœuds DOM particuliers ou injecter des nœuds DOM supplémentaires dans la page.</p>

<p>Il existe deux façons de le faire avec WebExtensions :</p>

<ul>
 <li><strong>Déclarativement </strong>: Définissez un modèle qui correspond à un ensemble d'URL et chargez un ensemble de scripts dans des pages dont l'URL correspond à ce modèle</li>
 <li><strong>Par programme </strong>: en utilisant une API JavaScript, chargez un script dans la page hébergée par un onglet particulier.</li>
</ul>

<p>Quoi qu'il en soit, ces scripts sont appelés <em>scripts de contenu</em>, et sont différents des autres scripts qui forment un WebExtension :</p>

<ul>
 <li>Ils n'ont accès qu'à un petit sous-ensemble des API WebExtension.</li>
 <li>Ils ont un accès direct à la page Web dans laquelle ils sont chargés.</li>
 <li>Ils communiquent avec le reste de WebExtension en utilisant une API de messagerie.</li>
</ul>

<p>Dans cet article, nous examinerons les deux méthodes de chargement d'un script.</p>

<h2 id="Modification_des_pages_qui_correspondent_à_un_modèle_dURL">Modification des pages qui correspondent à un modèle d'URL</h2>

<p>Tout d'abord, créez un nouveau répertoire intitulé "modify-page". Dans ce répertoire, créez un fichier appelé "manifest.json", avec le contenu suivant :</p>

<pre class="brush: json">{

  "manifest_version": 2,
  "name": "modify-page",
  "version": "1.0",

  "content_scripts": [
    {
      "matches": ["https://developer.mozilla.org/*"],
      "js": ["page-eater.js"]
    }
  ]

}</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/</a>.</p>

<div class="note">
<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><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>

<pre class="brush: js">document.body.textContent = "";

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/</a>:</p>

<p>{{EmbedYouTube("lxf2Tkg6U1M")}}</p>

<div class="note">
  <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>

<p>Que faire si vous voulez toujours consommer des pages, mais seulement lorsque l'utilisateur vous le demande? Mettons à jour cet exemple afin d'injecter le script de contenu lorsque l'utilisateur clique sur un élément de menu contextuel.</p>

<p>Tout d'abord, mettez à jour "manifest.json" pour qu'il contienne les contenus suivants:</p>

<pre class="brush: json">{

  "manifest_version": 2,
  "name": "modify-page",
  "version": "1.0",

  "permissions": [
    "activeTab",
    "contextMenus"
  ],

  "background": {
    "scripts": ["background.js"]
  }

}</pre>

<p>Ici, nous avons supprimé la clé content_scripts et ajouté deux nouvelles clés:</p>

<ul>
 <li><code><a href="/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permissions</a></code>: Pour injecter dans des pages, nous avons besoin de permissions pour la page que nous modifions. La <a href="/fr/Add-ons/WebExtensions/manifest.json/permissions#activeTab_permission"><code>permission activeTab</code></a> est un moyen d'obtenir ceci temporaiement pour l'onglet actuellement actif. Nous avons également besoin de la permission contextMenus pour pouvoir ajouter des éléments du menu contextuel.</li>
 <li><code><a href="/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/background">background</a></code>: Nous utilisons ceci pour charger un <a href="/fr/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts">"script de fond"</a> persistant appelé "background.js", dans lequel nous configurons le menu contextuel et injectons le script de contenu.</li>
</ul>

<p>Créons ce fichier, pour cela nous créons un fichier appelé "background.js" dans le dossier "modify-page", et donnez-lui le contenu suivant :</p>

<pre class="brush: js">browser.contextMenus.create({
  id: "eat-page",
  title: "Eat this page"
});

browser.contextMenus.onClicked.addListener(function(info, tab) {
  if (info.menuItemId == "eat-page") {
    browser.tabs.executeScript({
      file: "page-eater.js"
    });
  }
});
</pre>

<p>Dans ce script, nous créons un <a href="/fr/Add-ons/WebExtensions/API/ContextMenus/create">élément de menu contextuel</a>, lui donnant un identifiant et un titre précis (le texte à afficher dans le menu contextuel). Ensuite, nous mettons en place une écoute d'événements afin que l'utilisateur clique sur un élément de menu contextuel, nous vérifions si c'est notre élément de la page. Si c'est le cas, nous injectons "page-eater.js" dans l'onglet actuel à l'aide de l'API <code><a href="/fr/docs/Mozilla/Add-ons/WebExtensions/API/tabs/executeScript">tabs.executeScript()</a></code>. Cette API prend facultativement un ID de tabulation en tant qu'argument: nous avons omis l'ID de l'onglet, ce qui signifie que le script est injecté dans l'onglet actuellement actif.</p>

<p>A ce stade, l'extension devrait ressembler à ceci :</p>

<pre class="brush: html">modify-page/
    background.js
    manifest.json
    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><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>

<p>Les scripts de contenu et les scripts de fond ne peuvent pas accéder directement à l'état de l'autre.</p>

<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="standard-table">
 <thead>
  <tr>
   <th scope="row"></th>
   <th scope="col">Dans le script de contenu</th>
   <th scope="col">Dans le script d'arrière plan</th>
  </tr>
  <tr>
   <th scope="row">Envoyer un message</th>
   <td><code><a href="/fr/Add-ons/WebExtensions/API/runtime#sendMessage()">browser.runtime.sendMessage()</a></code></td>
   <td><code><a href="/fr/Add-ons/WebExtensions/API/Tabs/sendMessage">browser.tabs.sendMessage()</a></code></td>
  </tr>
  <tr>
   <th scope="row">Reçevoir un message</th>
   <td><code><a href="/fr/Add-ons/WebExtensions/API/runtime/onMessage">browser.runtime.onMessage</a></code></td>
   <td><code><a href="/fr/Add-ons/WebExtensions/API/runtime#onMessage">browser.runtime.onMessage</a></code></td>
  </tr>
 </thead>
</table>

<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>

<p>D'abord, éditez "background.js" pour qu'il contienne ces contenus:</p>

<pre class="brush: js">browser.contextMenus.create({
  id: "eat-page",
  title: "Eat this page"
});

function messageTab(tabs) {
  browser.tabs.sendMessage(tabs[0].id, {
    replacement: "Message from the add-on!"
  });
}

browser.contextMenus.onClicked.addListener(function(info, tab) {
  if (info.menuItemId == "eat-page") {
    browser.tabs.executeScript({
      file: "page-eater.js"
    });

    var querying = browser.tabs.query({
      active: true,
      currentWindow: true
    });
    querying.then(messageTab);
  }
});
</pre>

<p>Maintenant, après avoir injecté "page-eater.js", nous utilisons <code><a href="/fr/docs/Mozilla/Add-ons/WebExtensions/API/tabs/query">tabs.query()</a></code> pour obtenir l'onglet actuellement actif, puis utilisez <code><a href="/fr/docs/Mozilla/Add-ons/WebExtensions/API/tabs/sendMessage">tabs.sendMessage()</a></code> pour envoyer un message aux scripts de contenu chargés dans cet onglet. Le message comporte la charge utile <code>{remplacement: "Message from the add-on!"}</code>.</p>

<p>Ensuite, mettez à jour "page-eater.js" comme ceci :</p>

<pre class="brush: js">function eatPage(request, sender, sendResponse) {
  document.body.textContent = "";

  var header = document.createElement('h1');
  header.textContent = request.replacement;
  document.body.appendChild(header);
}

browser.runtime.onMessage.addListener(eatPage);
</pre>

<p>Maintenant, au lieu de simplement d'afficher la page tout de suite, le script de contenu écoute un message en utilisant <code><a href="/fr/docs/Mozilla/Add-ons/WebExtensions/API/runtime/onMessage">runtime.onMessage</a></code>. Quand un message arrive, le script de contenu exécute essentiellement le même code que précédemment, sauf que le texte de remplacement est retiré de <code>request.replacement</code>.</p>

<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><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="/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>
 <li><code><a href="/fr/docs/Mozilla/Add-ons/WebExtensions/API/tabs/sendMessage">tabs.sendMessage()</a></code></li>
 <li><code><a href="/fr/docs/Mozilla/Add-ons/WebExtensions/API/runtime/sendMessage">runtime.sendMessage()</a></code></li>
 <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 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 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>