web_accessible_resources

Beschreibung

Manchmal möchten Sie Ressourcen wie Bilder, HTML, CSS oder JavaScript mit Ihrer Erweiterung paketieren und sie für Webseiten und andere Erweiterungen verfügbar machen.

Zum Beispiel ersetzt die Beastify-Beispielerweiterung eine Webseite durch ein vom Benutzer ausgewähltes Bild einer Bestie. Die Bestienbilder sind mit der Erweiterung gepackt. Um das ausgewählte Bild sichtbar zu machen, fügt die Erweiterung <img>-Elemente hinzu, deren src-Attribut auf das Bild der Bestie verweist. Damit die Webseite die Bilder laden kann, müssen sie webzugänglich gemacht werden.

Mit dem Schlüssel web_accessible_resources listen Sie alle gepackten Ressourcen auf, die Sie für Webseiten verfügbar machen möchten. Sie geben sie als Pfade relativ zur manifest.json-Datei an.

Beachten Sie, dass Inhalts-Skripte nicht als webzugängliche Ressourcen aufgeführt werden müssen.

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

Manifest V2 Syntax

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

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

Manifest V3 Syntax

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.example.com/*"]
    },
    {
      "resources": ["test3.png", "test4.png"],
      "matches": ["https://web-accessible-resources-2.example.com/*"],
      "use_dynamic_url": true
    }
  ]
  // …
}

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

Verwendung von web_accessible_resources

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 die Verwendung eines <img>-Elements zu ermöglichen, 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 über eine URL wie folgt verfügbar:

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

<extension-UUID> ist nicht die ID Ihrer Erweiterung. Diese ID wird für jede Browser-Instanz zufällig generiert. Dies verhindert, dass Webseiten einen Browser durch Untersuchung der installierten Erweiterungen fingerabdrücken.

Die empfohlene Methode, die URL der Ressource zu erhalten, besteht darin, runtime.getURL zu verwenden, wobei der Pfad relativ zu 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 davon, auf welchem Browser Ihre Erweiterung läuft.

Platzhalter

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

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

Sicherheit

Wenn Sie eine Seite webzugänglich machen, kann jede Webseite auf diese Seite verlinken oder umleiten. Die Seite sollte dann jede Eingabe (z.B. POST-Daten) so behandeln, als kämen sie aus einer nicht vertrauenswürdigen Quelle, genau wie eine normale Webseite es tun sollte.

Webzugängliche Erweiterungsressourcen werden nicht durch CORS oder CSP blockiert. Aufgrund dieser Fähigkeit, Sicherheitsprüfungen zu umgehen, sollten Erweiterungen vermeiden, webzugängliche Skripte zu verwenden, wenn möglich. Ein webzugängliches Erweiterungsskript kann unerwartet von bösartigen Webseiten missbraucht werden, um die Sicherheit anderer Webseiten zu schwächen. Befolgen Sie die Sicherheitsbest-Praktiken, indem Sie die Einspeisung von moz-extension:-URLs in Webseiten vermeiden und sicherstellen, dass Drittanbieter-Bibliotheken auf dem neuesten Stand sind.

Beispiel

Manifest V2 Beispiel

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

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

Manifest V3 Beispiel

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

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

Es wird empfohlen, extension_ids oder matches nur anzugeben, wenn erforderlich. 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/*" ]
  }
]

Beispielerweiterungen

• beastify
• dnr-redirect-url

Browser-Kompatibilität