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"]
    }
  ]
}

Über den Schlüssel content_scripts laden Sie Skripte in Seiten, die 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 programmgesteuert ändern

Was ist, wenn Sie Seiten weiterhin „auffressen“ möchten, aber nur, wenn der Benutzer dies anfordert? Passen wir das Beispiel so an, dass das Content Script eingefügt wird, wenn der Benutzer auf einen Eintrag im Kontextmenü klickt.

Ändern Sie zunächst „manifest.json“ so, dass 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 Sie nun diese Datei. Legen Sie im Verzeichnis modify-page eine neue Datei namens background.js mit folgendem Inhalt an:

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 weisen ihm eine bestimmte ID sowie einen Titel zu (den Text, der im Kontextmenü angezeigt wird). Anschließend richten wir einen Event-Listener ein: Wenn der Benutzer auf einen Kontextmenüeintrag klickt, prüfen wir, ob es sich um unseren Eintrag eat-page handelt. Falls ja, fügen wir „page-eater.js“ mithilfe der API tabs.executeScript() in den aktuellen Tab ein. Diese API akzeptiert optional eine Tab-ID als Argument. Da wir die Tab-ID weggelassen haben, wird das Skript in den derzeit aktiven Tab eingefügt.

Die Erweiterung sollte jetzt so aussehen:

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

Laden Sie nun die Erweiterung neu, öffnen Sie eine Seite (diesmal eine beliebige), öffnen Sie das Kontextmenü 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 durch das Senden von Nachrichten miteinander kommunizieren. Eine Seite richtet einen Listener für Nachrichten ein; die andere kann ihr anschließend eine Nachricht senden. Die folgende Tabelle fasst die jeweiligen APIs zusammen:

Passen wir unser Beispiel an, um zu zeigen, wie eine Nachricht vom Hintergrundskript gesendet wird.

Ändern 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 in diesen Tab geladenen Content Scripts. Die Nachricht enthält die Nutzlast {replacement: "Message from the extension!"}.

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

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

Da tabs.executeScript() eine asynchrone Funktion ist, verwenden wir onExecuted(), um sicherzustellen, dass die Nachricht erst gesendet wird, nachdem der Listener in page-eater.js hinzugefügt wurde. onExecuted() wird aufgerufen, nachdem page-eater.js ausgeführt wurde.

Wenn wir Nachrichten vom Content Script an das Hintergrundskript 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 mit content_scripts:

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

• Beispiele mit tabs.executeScript():

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