Eine Webseite ändern

Seiten ändern, die einem URL-Muster entsprechen

Erstellen Sie zunächst ein neues Verzeichnis namens „modify-page“. Erstellen Sie darin 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"]
    }
  ]
}

Mit dem Schlüssel content_scripts laden Sie Skripte in Seiten, die bestimmten URL-Mustern entsprechen. In diesem Fall weist content_scripts den Browser an, ein Skript namens „page-eater.js“ in alle Seiten unter https://developer.mozilla.org/ zu laden.

Erstellen Sie als Nächstes im Verzeichnis „modify-page“ eine Datei namens „page-eater.js“ mit folgendem Inhalt:

document.body.textContent = "";

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

Installieren Sie nun die Erweiterung und besuchen Sie https://developer.mozilla.org/. Die Seite sollte so aussehen:

Seiten programmatisch ändern

Was ist, wenn Sie Seiten nur dann „auffressen“ möchten, wenn die Benutzerin oder der Benutzer dies anfordert? Passen wir das Beispiel so an, dass das Content Script eingefügt wird, wenn ein Kontextmenüeintrag angeklickt wird.

Aktualisieren Sie zunächst „manifest.json“, sodass die Datei folgenden Inhalt hat:

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

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

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

Hier haben wir den Schlüssel content_scripts 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 ändern. Mit der Berechtigung activeTab erhalten wir diese vorübergehend für den aktiven Tab. Außerdem benötigen wir die Berechtigung contextMenus, um Kontextmenüeinträge hinzuzufügen.
• background: Damit laden wir ein dauerhaft aktives Hintergrundskript namens background.js, in dem wir das Kontextmenü einrichten und das Content Script einfügen.

Erstellen wir diese Datei. Erstellen Sie im Verzeichnis modify-page eine neue Datei namens background.js mit folgendem 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 einen Kontextmenüeintrag und geben ihm eine bestimmte ID sowie einen Titel – den Text, der im Kontextmenü angezeigt wird. Anschließend richten wir einen Event Listener ein. Wenn ein Kontextmenüeintrag angeklickt wird, prüfen wir damit, ob es sich um unseren Eintrag eat-page handelt. Ist das der Fall, fügen wir „page-eater.js“ mithilfe der API tabs.executeScript() in den aktuellen Tab ein. Diese API nimmt optional eine Tab-ID als Argument entgegen. Wir haben die Tab-ID weggelassen, sodass das Skript in den derzeit aktiven Tab eingefügt wird.

Die Erweiterung sollte jetzt so aussehen:

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

Laden Sie nun die Erweiterung neu, öffnen Sie eine beliebige Seite, rufen Sie das Kontextmenü auf und wählen Sie „Eat this page“:

Messaging

Content Scripts und Hintergrundskripte können nicht direkt auf den Zustand des jeweils anderen zugreifen. Sie können jedoch über Nachrichten miteinander kommunizieren. Eine Seite richtet einen Listener für Nachrichten ein; die andere kann ihr daraufhin eine Nachricht senden. Die folgende Tabelle fasst die APIs für beide Seiten zusammen:

Passen wir unser Beispiel an, um zu zeigen, wie das Hintergrundskript eine Nachricht sendet.

Bearbeiten Sie zunächst background.js, sodass die Datei folgenden 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 wir page-eater.js eingefügt haben, ermitteln wir mit tabs.query() den derzeit aktiven Tab. Anschließend senden wir mit tabs.sendMessage() eine Nachricht an die Content Scripts, die in diesem Tab geladen sind. Die Nachricht enthält die Nutzdaten {replacement: "Message from the extension!"}.

Aktualisieren Sie als Nächstes page-eater.js wie folgt:

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

Anstatt die Seite sofort „aufzufressen“, wartet das Content Script nun mithilfe von runtime.onMessage auf eine Nachricht. Wenn eine Nachricht eintrifft, führt das Content Script im Wesentlichen denselben Code wie zuvor aus. Der Ersatztext wird nun jedoch aus request.replacement übernommen.

Da tabs.executeScript() eine asynchrone Funktion ist, verwenden wir onExecuted(). Diese Funktion wird aufgerufen, nachdem page-eater.js ausgeführt wurde. So stellen wir sicher, dass wir die Nachricht erst senden, nachdem der Listener in page-eater.js eingerichtet wurde.

Wenn wir Nachrichten vom Content Script an die Hintergrundseite zurücksenden möchten, verwenden wir runtime.sendMessage() statt tabs.sendMessage(), zum Beispiel:

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

Weitere Informationen

• Leitfaden zu Content Scripts

• Manifest-Schlüssel content_scripts

• Manifest-Schlüssel permissions

• tabs.executeScript()

• tabs.insertCSS()

• tabs.sendMessage()

• runtime.sendMessage()

• runtime.onMessage

• Beispiele für die Verwendung von content_scripts:

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

• Beispiele für die Verwendung von tabs.executeScript():

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