Modifier une page web

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 :

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

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

La clé content_scripts est la façon dont vous chargez les scripts dans des pages qui correspondent aux modèles d'URL. Dans ce cas, les instructions content_scripts demandent au navigateur de charger un script appelé "page-eater.js" dans toutes les pages sous https://developer.mozilla.org/.

Ensuite, créez un fichier appelé "page-eater.js" dans le dossier "modify-page" et donnez-lui le contenu suivant :

document.body.textContent = "";

var header = document.createElement("h1");
header.textContent = "This page has been eaten";
document.body.appendChild(header);

Maintenant installer la WebExtension, et visiter https://developer.mozilla.org/:

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.

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

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

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

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

Ici, nous avons supprimé la clé content_scripts et ajouté deux nouvelles clés:

• permissions: Pour injecter dans des pages, nous avons besoin de permissions pour la page que nous modifions. La permission activeTab 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.
• background: Nous utilisons ceci pour charger un "script de fond" persistant appelé "background.js", dans lequel nous configurons le menu contextuel et injectons le script de contenu.

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 :

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",
    });
  }
});

Dans ce script, nous créons un élément de menu contextuel, 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 tabs.executeScript(). 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.

A ce stade, l'extension devrait ressembler à ceci :

modify-page/
    background.js
    manifest.json
    page-eater.js

Maintenant rechargeons la WebExtension, Ouvrez une page (n'importe quelle page, cette fois) activez le menu contextuel et sélectionnez "Eat this page":

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

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

Mettons à jour notre exemple pour montrer comment envoyer un message à partir du script en arrière-plan.

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

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);
  }
});

Maintenant, après avoir injecté "page-eater.js", nous utilisons tabs.query() pour obtenir l'onglet actuellement actif, puis utilisez tabs.sendMessage() pour envoyer un message aux scripts de contenu chargés dans cet onglet. Le message comporte la charge utile {remplacement: "Message from the add-on!"}.

Ensuite, mettez à jour "page-eater.js" comme ceci :

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

Maintenant, au lieu de simplement d'afficher la page tout de suite, le script de contenu écoute un message en utilisant runtime.onMessage. 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 request.replacement.

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 runtime.sendMessage() dans le script de contenu.

• Content scripts guide

• content_scripts manifest key

• permissions manifest key

• tabs.executeScript()

• tabs.insertCSS()

• tabs.sendMessage()

• runtime.sendMessage()

• runtime.onMessage

• Examples using content_scripts:

  • borderify
  • emoji-substitution
  • notify-link-clicks-i18n
  • page-to-extension-messaging

• Examples using tabs.executeScript():

  • beastify
  • context-menu-copy-link-with-types