web_accessible_resources

Typ Array
Erforderlich Nein
Manifest-Version 2 oder höher
Beispiel
json
"web_accessible_resources": [
  "images/my-image.png"
]

Beschreibung

Manchmal möchten Sie Ressourcen wie Bilder, HTML, CSS oder JavaScript mit Ihrer Erweiterung packen und sie Webseiten und anderen Erweiterungen zur Verfügung stellen.

Hinweis: Bis Firefox 105 konnten Erweiterungen standardmäßig auf Ressourcen zugreifen, die in anderen Erweiterungen verpackt waren. Ab Firefox 105 müssen die Ressourcen in diesem Schlüssel enthalten sein, damit andere Erweiterungen darauf zugreifen können.

Zum Beispiel ersetzt die Beastify-Beispielerweiterung eine Webseite mit einem Bild eines vom Benutzer ausgewählten Tieres. Die Tierbilder sind mit der Erweiterung verpackt. Um das ausgewählte Bild sichtbar zu machen, fügt die Erweiterung <img>-Elemente hinzu, deren src-Attribut auf das Bild des Tieres zeigt. Damit die Webseite die Bilder laden kann, müssen sie webbasiert zugänglich gemacht werden.

Mit dem web_accessible_resources-Schlüssel listen Sie alle verpackten Ressourcen auf, die Sie Webseiten zur Verfügung stellen möchten. Sie geben sie als Pfade relativ zur manifest.json-Datei an.

Beachten Sie, dass Inhalts-Skripte nicht als webbasiert zugä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 verpackt ist, muss die Seite im web_accessible_resources-Schlüssel aufgeführt sein.

Manifest V2-Syntax

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

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

Manifest V3-Syntax

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

json
{
  // …
  "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:

Name Typ Beschreibung
extension_ids Array von String Optional. Standardwert ist [], was bedeutet, dass andere Erweiterungen nicht auf die Ressource zugreifen können.

Eine Liste von Erweiterungs-IDs, die die Erweiterungen angeben, die auf die Ressourcen zugreifen können. "*" entspricht allen Erweiterungen.

matches Array von String Optional. Standardwert ist [], was bedeutet, dass andere Webseiten nicht auf die Ressource zugreifen können.

Eine Liste von URL-Übereinstimmungsmustern, die die Seiten angeben, die auf die Ressourcen zugreifen können. Es wird nur der Ursprung verwendet, um URLs abzugleichen. Ursprünge schließen Subdomain-Abgleich ein. Pfade müssen auf /* gesetzt werden.

resources Array von String Ein Array von Ressourcen, die offengelegt werden sollen. Ressourcen werden als Zeichenfolgen angegeben und können * für Platzhalter-Matches enthalten. Zum Beispiel, "/images/*" macht alles im /images-Verzeichnis der Erweiterung rekursiv zugänglich, während "*.png" alle PNG-Dateien freigibt.
use_dynamic_url Boolean Optional. Standardwert ist false.

Ob Ressourcen über die dynamische ID zugänglich sein sollen. Die dynamische ID wird pro Sitzung generiert und wird beim Neustart des Browsers oder beim Neuladen der Erweiterung neu generiert.

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 zeigt, würden Sie web_accessible_resources wie folgt spezifizieren:

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

Die Datei ist dann über eine URL verfügbar wie:

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. Dies verhindert, dass Websites den Browser durch Überprüfung der installierten Erweiterungen identifizieren.

Hinweis: In Chrome bei Manifest V2 ist die ID einer Erweiterung festgelegt. Wenn eine Ressource in web_accessible_resources aufgeführt ist, ist sie als chrome-extension://<your-extension-id>/<path/to/resource> zugänglich. In Manifest V3 kann Chrome eine dynamische URL verwenden, indem use_dynamic_url auf true gesetzt wird.

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

js
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, in welchem Browser Ihre Erweiterung ausgeführt wird.

Platzhalter

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

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

Sicherheit

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

Webbasierte Erweiterungsressourcen werden nicht durch CORS oder CSP blockiert. Aufgrund dieser Fähigkeit zur Umgehung von Sicherheitsüberprüfungen sollten Erweiterungen die Verwendung von webbasierten Skripten möglichst vermeiden. Ein webbasiertes Erweiterungsskript kann unerwartet von böswilligen Websites 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

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

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

Manifest V3 Beispiel

json
"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 Website 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:

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

Beispielerweiterungen

Browser-Kompatibilität

BCD tables only load in the browser