Eine der häufigsten Anwendungsfälle für eine Erweiterung ist die Modifikation einer Webseite. Zum Beispiel möchte eine Erweiterung möglicherweise den Stil einer Seite ändern, bestimmte DOM-Knoten ausblenden oder zusätzliche DOM-Knoten in die Seite einfügen.

Es gibt zwei Möglichkeiten, dies mit den WebExtensions-APIs zu tun:

• Deklarativ: Definieren Sie ein Muster, das eine Reihe von URLs abgleicht, und laden Sie eine Reihe von Skripten in Seiten, deren URL diesem Muster entspricht.
• Programmatisch: Verwenden Sie eine JavaScript-API, um ein Skript in die von einem bestimmten Tab gehostete Seite zu laden.

In beiden Fällen werden diese SkripteContent Scripts genannt, und sie unterscheiden sich von den anderen Skripten, die eine Erweiterung ausmachen:

• Sie erhalten nur Zugriff auf einen kleinen Teil der WebExtension-APIs.
• Sie erhalten direkten Zugriff auf die Webseite, in die sie geladen werden.
• Sie kommunizieren mit dem Rest der Erweiterung über eine Messaging-API.

In diesem Artikel betrachten wir beide Methoden zum Laden eines Skripts.

Seiten modifizieren, die einem URL-Muster entsprechen

Erstellen Sie zunächst ein neues Verzeichnis namens "modify-page". In diesem Verzeichnis erstellen Sie eine Datei namens "manifest.json" mit folgendem Inhalt:

{  "manifest_version": 2,  "name": "modify-page",  "version": "1.0",  "content_scripts": [    {      "matches": ["https://developer.mozilla.org/*"],      "js": ["page-eater.js"]    }  ]}

Dercontent_scripts-Schlüssel ist, wie Sie Skripte in Seiten laden, die URL-Mustern entsprechen. In diesem Fall weistcontent_scripts den Browser an, ein Skript namens "page-eater.js" in alle Seiten unterhttps://developer.mozilla.org/ zu laden.

Erstellen Sie als Nächstes eine Datei namens "page-eater.js" im Verzeichnis "modify-page" und geben Sie ihr den folgenden Inhalt:

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

Nuninstallieren Sie die Erweiterung, und besuchen Siehttps://developer.mozilla.org/. Die Seite sollte so aussehen:

Seiten programmatisch modifizieren

Was, wenn Sie weiterhin Seiten fressen möchten, aber nur, wenn der Benutzer Sie dazu auffordert? Lassen Sie uns dieses Beispiel so aktualisieren, dass wir das Content Script einfügen, wenn der Benutzer auf ein Kontextmenüelement klickt.

Aktualisieren Sie zunächst "manifest.json", sodass es den folgenden Inhalt hat:

{  "manifest_version": 2,  "name": "modify-page",  "version": "1.0",  "permissions": ["activeTab", "contextMenus"],  "background": {    "scripts": ["background.js"]  }}

Hier haben wir dencontent_scripts-Schlüssel entfernt und zwei neue Schlüssel hinzugefügt:

• permissions: Um Skripte in Seiten einzufügen, benötigen wir Berechtigungen für die Seite, die wir modifizieren. DieactiveTab-Berechtigung bietet eine Möglichkeit, diese vorübergehend für den aktuell aktiven Tab zu erhalten. Wir benötigen auch diecontextMenus-Berechtigung, um Kontextmenüelemente hinzufügen zu können.
• background: Wir verwenden dies, um ein dauerhaftes"Background Script" namensbackground.js zu laden, in dem wir das Kontextmenü einrichten und das Content Script einfügen werden.

Lassen Sie uns diese Datei erstellen. Erstellen Sie eine neue Datei namensbackground.js immodify-page-Verzeichnis und geben Sie ihr den folgenden Inhalt:

browser.contextMenus.create({  id: "eat-page",  title: "Eat this page",});browser.contextMenus.onClicked.addListener((info, tab) => {  if (info.menuItemId === "eat-page") {    browser.tabs.executeScript({      file: "page-eater.js",    });  }});

In diesem Skript erstellen wir einKontextmenüelement, geben ihm eine spezifische ID und einen Titel (den Text, der im Kontextmenü angezeigt werden soll). Dann richten wir einen Ereignislistener ein, sodass wir überprüfen, ob das angeklickte Kontextmenüelement unsereat-page-Element ist. Wenn dem so ist, fügen wir "page-eater.js" in den aktuellen Tab mithilfe dertabs.executeScript()-API ein. Diese API nimmt optional eine Tab-ID als Argument entgegen: Wir haben die Tab-ID weggelassen, was bedeutet, dass das Skript in den aktuell aktiven Tab eingefügt wird.

Zu diesem Zeitpunkt sollte die Erweiterung so aussehen:

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

Jetztladen Sie die Erweiterung neu, öffnen Sie eine Seite (dieses Mal irgendeine Seite) aktivieren Sie das Kontextmenü und wählen Sie "Eat this page":

Messaging

Content Scripts und Background Scripts können nicht direkt auf den Zustand des jeweils anderen zugreifen. Sie können jedoch durch das Senden von Nachrichten kommunizieren. Ein Ende richtet einen Nachrichtenlistener ein, und das andere Ende kann ihm dann eine Nachricht senden. Die folgende Tabelle fasst die beteiligten APIs auf beiden Seiten zusammen:

Lassen Sie uns unser Beispiel aktualisieren, um zu zeigen, wie man eine Nachricht vom Background Script sendet.

Bearbeiten Sie zuerstbackground.js, sodass es diesen Inhalt hat:

browser.contextMenus.create({  id: "eat-page",  title: "Eat this page",});function messageTab(tabs) {  browser.tabs.sendMessage(tabs[0].id, {    replacement: "Message from the extension!",  });}function onExecuted(result) {  let querying = browser.tabs.query({    active: true,    currentWindow: true,  });  querying.then(messageTab);}browser.contextMenus.onClicked.addListener((info, tab) => {  if (info.menuItemId === "eat-page") {    let executing = browser.tabs.executeScript({      file: "page-eater.js",    });    executing.then(onExecuted);  }});

Nachdem wirpage-eater.js eingefügt haben, verwenden wirtabs.query(), um den derzeit aktiven Tab zu bekommen, und dann verwenden wirtabs.sendMessage(), um eine Nachricht an die in diesem Tab geladenen Content Scripts zu senden. Die Nachricht hat die Nutzlast{replacement: "Message from the extension!"}.

Aktualisieren Sie als Nächstespage-eater.js so:

function eatPageReceiver(request, sender, sendResponse) {  document.body.textContent = "";  let header = document.createElement("h1");  header.textContent = request.replacement;  document.body.appendChild(header);}browser.runtime.onMessage.addListener(eatPageReceiver);

Nun, anstatt die Seite sofort zu fressen, wartet das Content Script auf eine Nachricht mithilfe vonruntime.onMessage. Wenn eine Nachricht ankommt, führt das Content Script im Wesentlichen denselben Code wie zuvor aus, mit dem Unterschied, dass der Ersetzungstext vonrequest.replacement stammt.

Databs.executeScript() eine asynchrone Funktion ist, und um sicherzustellen, dass wir eine Nachricht nur senden, nachdem der Listener inpage-eater.js hinzugefügt wurde, verwenden wironExecuted(), das aufgerufen wird, nachdempage-eater.js ausgeführt wurde.

Wenn wir Nachrichten von dem Content Script zur Hintergrundseite zurücksenden möchten, würden wirruntime.sendMessage() anstelle vontabs.sendMessage() verwenden, z.B.:

browser.runtime.sendMessage({  title: "from page-eater.js",});

Mehr erfahren

• Content Scripts Leitfaden

• content_scripts Manifest-Schlüssel

• permissions Manifest-Schlüssel

• tabs.executeScript()

• tabs.insertCSS()

• tabs.sendMessage()

• runtime.sendMessage()

• runtime.onMessage

• Beispiele mitcontent_scripts:

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

• Beispiele mittabs.executeScript():

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