web_accessible_resources

Manchmal möchten Sie Ressourcen – zum Beispiel Bilder, HTML, CSS oder JavaScript – mit Ihrer Erweiterung paketieren und sie Webseiten und anderen Erweiterungen zugänglich machen.

Zum Beispiel ersetzt die Beastify-Beispielerweiterung eine Webseite mit einem von der Nutzerin oder dem Nutzer ausgewählten Bild eines Biests. Die Biest-Bilder sind in der Erweiterung enthalten. Um das ausgewählte Bild sichtbar zu machen, fügt die Erweiterung <img>-Elemente hinzu, deren src-Attribut auf das Bild des Biests verweist. Damit die Webseite die Bilder laden kann, müssen sie webbasiert zugänglich gemacht werden.

Mit dem Schlüssel web_accessible_resources können Sie alle gepackten Ressourcen auflisten, die Sie Webseiten zugänglich machen möchten. Sie geben sie als Pfade relativ zur manifest.json-Datei an.

Beachten Sie, dass Content-Skripte nicht als webbasierte Ressourcen aufgelistet werden müssen.

Wenn eine Erweiterung webRequest oder declarativeNetRequest verwenden möchte, um eine öffentliche URL (z.B. HTTPS) auf eine in der Erweiterung gepackte Seite umzuleiten, dann muss die Erweiterung die Seite im Schlüssel web_accessible_resources auflisten.

In Manifest V2 werden webbasierte Ressourcen als Array unter dem Schlüssel hinzugefügt, wie folgt:

"web_accessible_resources": [
  "images/my-image.png"
]

In Manifest V3 ist der Schlüssel web_accessible_resources ein Array von Objekten, wie folgt:

{
  // …
  "web_accessible_resources": [
    {
      "resources": ["test1.png", "test2.png"],
      "matches": ["https://web-accessible-resources-1.glitch.me/*"]
    },
    {
      "resources": ["test3.png", "test4.png"],
      "matches": ["https://web-accessible-resources-2.glitch.me/*"],
      "use_dynamic_url": true
    }
  ]
  // …
}

Jedes Objekt muss eine "resources"-Eigenschaft und entweder eine "matches"- oder "extension_ids"-Eigenschaft aus den folgenden Eigenschaften enthalten:

Angenommen, Ihre Erweiterung enthält eine Bilddatei unter images/my-image.png, wie folgt:

my-extension-files/
    manifest.json
    my-background-script.js
    images/
        my-image.png

Um einer Webseite zu ermöglichen, ein <img>-Element zu verwenden, dessen src-Attribut auf dieses Bild verweist, würden Sie web_accessible_resources wie folgt spezifizieren:

"web_accessible_resources": ["images/my-image.png"]

Die Datei ist dann unter Verwendung einer URL wie folgt verfügbar:

moz-extension://<extension-UUID>/images/my-image.png"

<extension-UUID> ist nicht die ID Ihrer Erweiterung. Diese ID wird zufällig für jede Instanz des Browsers generiert. Dadurch wird verhindert, dass Webseiten einen Browser über die installierten Erweiterungen fingerabdrucken.

Der empfohlene Ansatz, um die URL der Ressource zu erhalten, ist die Verwendung von runtime.getURL, wobei der Pfad relativ zur manifest.json übergeben wird, zum Beispiel:

browser.runtime.getURL("images/my-image.png");
// something like:
// moz-extension://944cfddf-7a95-3c47-bd9a-663b3ce8d699/images/my-image.png

Dieser Ansatz liefert Ihnen die korrekte URL unabhängig vom Browser, auf dem Ihre Erweiterung läuft.

Einträge in web_accessible_resources können Platzhalter enthalten. Zum Beispiel würde der folgende Eintrag ebenfalls funktionieren, um die Ressource bei "images/my-image.png" einzuschließen:

  "web_accessible_resources": ["images/*.png"]

Wenn Sie eine Seite webbasiert zugänglich machen, kann jede Webseite auf diese Seite verlinken oder umleiten. Die Seite sollte dann jede Eingabe (zum Beispiel POST-Daten) so behandeln, als kämen sie von einer nicht vertrauenswürdigen Quelle, genau wie eine normale Webseite.

Webbasierte Erweiterungsressourcen werden nicht durch CORS oder CSP blockiert. Aufgrund dieser Fähigkeit, Sicherheitschecks zu umgehen, sollten Erweiterungen nach Möglichkeit die Verwendung von webbasierten Skripten vermeiden. Ein webbasiertes Erweiterungsskript kann unerwartet von böswilligen Webseiten missbraucht werden, um die Sicherheit anderer Webseiten zu schwächen. Befolgen Sie die Best Practices zur Sicherheit, indem Sie die Injektion von moz-extension:-URLs in Webseiten vermeiden und sicherstellen, dass Drittanbieter-Bibliotheken auf dem neuesten Stand sind.

"web_accessible_resources": ["images/my-image.png"]

Machen Sie die Datei bei "images/my-image.png" webbasiert zugänglich für jede Webseite und Erweiterung.

"web_accessible_resources": [
  {
    "resources": [ "images/my-image.png" ],
    "extension_ids": ["*"],
    "matches": [ "*://*/*" ]
  }
]

Machen Sie die Datei bei "images/my-image.png" webbasiert zugänglich für jede Webseite und Erweiterung.

Es wird empfohlen, nur extension_ids oder matches zu spezifizieren, wenn nötig. Zum Beispiel, wenn die Ressource nur für Webseiten bei example.com zugänglich sein muss:

"web_accessible_resources": [
  {
    "resources": [ "images/my-image.png" ],
    "matches": [ "https://example.com/*" ]
  }
]

• beastify
• dnr-redirect-url