web_accessible_resources
Typ | Array |
---|---|
Erforderlich | Nein |
Manifest-Version | 2 oder höher |
Beispiel |
json
|
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:
"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:
{
// …
"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:
|
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:
"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:
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:
"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
"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
"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:
"web_accessible_resources": [
{
"resources": [ "images/my-image.png" ],
"matches": [ "https://example.com/*" ]
}
]
Beispielerweiterungen
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | ||||||
---|---|---|---|---|---|---|---|
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.