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 paketieren und diese für Webseiten und andere Erweiterungen zugänglich machen.

Hinweis: Bis Firefox 105 konnten Erweiterungen standardmäßig auf Ressourcen zugreifen, die in anderen Erweiterungen gepackt waren. Ab Firefox 105 müssen Sie, um Ressourcen Ihrer Erweiterung für andere Erweiterungen zugänglich zu machen, diese in diesem Schlüssel aufnehmen.

Zum Beispiel ersetzt die Beastify Beispiel-Erweiterung eine Webseite mit einem Bild eines Monsters, das vom Benutzer ausgewählt wurde. Die Monster-Bilder sind in der Erweiterung gepackt. Um das ausgewählte Bild sichtbar zu machen, fügt die Erweiterung <img>-Elemente hinzu, deren src-Attribut auf das Bild des Monsters zeigt. Damit die Webseite die Bilder laden kann, müssen diese webzugänglich gemacht werden.

Mit dem Schlüssel web_accessible_resources listen Sie alle gepackten Ressourcen auf, die für Webseiten verfügbar gemacht werden sollen. Sie geben diese als Pfade relativ zur Datei manifest.json an.

Beachten Sie, dass Content-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 diese Seite im Schlüssel web_accessible_resources aufführen.

Syntax von Manifest V2

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

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

Syntax von Manifest V3

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

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 von den folgenden Eigenschaften enthalten:

Name Typ Beschreibung
extension_ids Array von String Optional. Standardwert: [], 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. "*" erlaubt Zugriff für alle Erweiterungen.

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

Eine Liste von URL Match-Mustern, die die Seiten angeben, die auf die Ressourcen zugreifen können. Nur der Ursprung wird verwendet, um URLs abzugleichen. Allerdings:

  • In Firefox und Safari kann jeder Pfad eingeschlossen sein.
  • In Chrome muss der Pfad auf /* gesetzt werden.
Ursprünge beinhalten Subdomain-Abgleich.
resources Array von String Ein Array von Ressourcen, die freigegeben werden sollen. Ressourcen werden als Strings angegeben und können * für Wildcard-Abgleiche enthalten. Zum Beispiel gibt "/images/*" alle Dateien im Verzeichnis /images der Erweiterung rekursiv frei, während "*.png" alle PNG-Dateien freigibt.
use_dynamic_url Boolean Optional. Standardwert: false.

Gibt an, ob Ressourcen durch die dynamische ID zugänglich gemacht werden sollen. Die dynamische ID wird pro Sitzung generiert und bei jedem Browser-Neustart oder Erweiterungs-Neuladen neu erstellt.

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 zu erlauben, ein <img>-Element zu verwenden, dessen src-Attribut auf dieses Bild zeigt, würden Sie web_accessible_resources wie folgt angeben:

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

Die Datei ist dann unter einer URL wie dieser 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 Browser-Instanz generiert. Dies verhindert, dass Webseiten einen Browser durch Prüfung der installierten Erweiterungen identifizieren können.

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

Der empfohlene Weg, die URL der Ressource zu erhalten, ist die Verwendung von runtime.getURL und die Übergabe des relativen Pfades 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 gibt Ihnen die korrekte URL, unabhängig davon, auf welchem Browser Ihre Erweiterung läuft.

Wildcards

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

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

Sicherheit

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

Webzugängliche Erweiterungsressourcen werden nicht durch CORS oder CSP blockiert. Aufgrund dieser Möglichkeit, Sicherheitsprüfungen zu umgehen, sollten Erweiterungen möglichst keine webzugänglichen Skripte verwenden. Ein webzugängliches Erweiterungsskript kann unerwartet von bösartigen Webseiten missbraucht werden, um die Sicherheit anderer Webseiten zu schwächen. Befolgen Sie die Sicherheits-Best-Practices, indem Sie die Einbettung von moz-extension:-URLs in Webseiten vermeiden und sicherstellen, dass Drittanbieter-Bibliotheken aktuell sind.

Beispiel

Beispiel für Manifest V2

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

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

Beispiel für Manifest V3

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

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

Es wird empfohlen, nur dann extension_ids oder matches anzugeben, wenn es nötig ist. Zum Beispiel, wenn die Ressource nur für Webseiten unter example.com zugänglich sein soll:

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

Beispielerweiterungen

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Firefox for Android
Safari on iOS
web_accessible_resources
extension_ids
matches
resources
use_dynamic_url

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.