Eine Webseite modifizieren

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

Der content_scripts Schlüssel ist die Methode, mit der Sie Skripte in Seiten laden, 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 eine Datei namens "page-eater.js" innerhalb des Verzeichnisses "modify-page" und fügen Sie den folgenden Inhalt ein:

document.body.textContent = "";

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

Nun installieren Sie die Erweiterung, und besuchen Sie https://developer.mozilla.org/. Die Seite sollte so aussehen:

Was ist, wenn Sie trotzdem Seiten "essen" möchten, aber nur, wenn der Benutzer Sie dazu auffordert? Aktualisieren wir dieses Beispiel, sodass wir das Content-Skript injizieren, wenn der Benutzer einen Kontextmenüpunkt anklickt.

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

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

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

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

Hier haben wir den content_scripts Schlüssel entfernt und zwei neue Schlüssel hinzugefügt:

• permissions: Um Skripte in Seiten zu injizieren, benötigen wir Berechtigungen für die Seite, die wir modifizieren. Die activeTab Berechtigung ist eine Möglichkeit, diese temporär für den aktuell aktiven Tab zu erhalten. Wir benötigen auch die contextMenus Berechtigung, um Kontextmenüeinträge hinzufügen zu können.
• background: Wir verwenden dies, um ein persistentes "Background Script" namens background.js zu laden, in dem wir das Kontextmenü einrichten und das Content-Skript injizieren werden.

Lassen Sie uns diese Datei erstellen. Erstellen Sie eine neue Datei namens background.js im Verzeichnis modify-page und fügen Sie den folgenden Inhalt ein:

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, vergeben ihm eine spezifische ID und einen Titel (der Text, der im Kontextmenü angezeigt wird). Dann richten wir einen Event-Listener ein, sodass, wenn der Benutzer einen Kontextmenüpunkt anklickt, wir prüfen, ob es sich um unseren eat-page Eintrag handelt. Wenn ja, injizieren wir "page-eater.js" in den aktuellen Tab mit der tabs.executeScript() API. Diese API nimmt optional eine Tab-ID als Argument: wir haben die Tab-ID weggelassen, was bedeutet, dass das Skript in den aktuell aktiven Tab injiziert wird.

An diesem Punkt sollte die Erweiterung so aussehen:

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

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

Content-Skripte und Hintergrund-Skripte können nicht direkt auf den Zustand des jeweils anderen zugreifen. Sie können jedoch kommunizieren, indem sie Nachrichten senden. Ein Ende richtet einen Nachrichten-Listener ein, und das andere Ende kann ihm dann eine Nachricht senden. Die folgende Tabelle fasst die auf jeder Seite verwendeten APIs zusammen:

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

Bearbeiten Sie zuerst background.js, sodass es 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);
  }
});

Jetzt verwenden wir nach dem Injizieren von page-eater.js tabs.query(), um den derzeit aktiven Tab zu erhalten, und anschließend tabs.sendMessage(), um eine Nachricht an die in diesen Tab geladenen Content-Skripte zu senden. Die Nachricht hat die Nutzlast {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);

Jetzt hört das Content-Skript, anstatt die Seite sofort zu "essen", auf eine Nachricht mit runtime.onMessage. Wenn eine Nachricht eintrifft, führt das Content-Skript im Wesentlichen denselben Code wie zuvor aus, außer dass der Ersetzungstext aus request.replacement stammt.

Da tabs.executeScript() eine asynchrone Funktion ist und um sicherzustellen, dass wir die Nachricht nur senden, nachdem der Listener in page-eater.js hinzugefügt wurde, verwenden wir onExecuted(), das nach der Ausführung von page-eater.js aufgerufen wird.

Wenn wir Nachrichten vom Content-Skript zurück zur Hintergrundseite senden möchten, würden wir runtime.sendMessage() anstelle von tabs.sendMessage() verwenden, z.B.:

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

• Content-Skripte Leitfaden

• content_scripts Manifest Schlüssel

• permissions Manifest Schlüssel

• 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