web_accessible_resources

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

説明

ときには、拡張機能に何らかのリソース - たとえば、画像や HTML、CSS、JavaScript - をパッケージして、ウェブページで使用できるようにしたい場合があります。

たとえば、2 つめの WebExtension で使われている "beastify" 例題エクステンションでは、<img> 要素の src 属性を設定することで、ウェブページの画像を動物に置き換えています。画像は拡張機能とともにパッケージ化されており、ウェブページがそれらをロードできるようにするには、ウェブアクセシブルにする必要があります。

web_accessible_resources キーは、この方法でウェブページで利用可能にしたいすべてのパッケージされたリソースをリストします。manifest.json ファイルを基準としたパスを指定します。

コンテンツスクリプトは、ウェブアクセシブルリソースとしてリストする必要がないことに注意してください。

しかし、拡張機能が webRequest API を使ってパブリックな (例 HTTPS) URL から拡張機能にパッケージされたページにリダイレクトする場合、拡張機能はweb_accessible_resources キーにリストしておく必要があります。

web_accessible_resources を使う

例えば、拡張機能に images/my-image.png にある画像ファイルを入れたい場合、このようにします:

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

ウェブページに、この画像を指す src 属性のある <img> 要素を入れるには、 "web_accessible_resources" で次のように指定します:

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

このファイルは次の URL で利用できます:

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

<extension-UUID> は拡張機能の ID ではありません。これは各ブラウザーインスタンス用にランダムに生成されます。これはウェブサイトがインストールしている拡張機能を調べることで指紋を取ることを防止します。

この URL を取得する最も簡単な方法は、browser.extension.getURL API を使用して、 manifest.json の相対パスとして渡すことです:

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

ワイルドカード

web_accessible_resourcesエントリーにはワイルドカードを含めることができます。たとえば下記のエントリーでも "images/my-image.png" のリソースを入れることができます:

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

セキュリティ

ページを web-accessible にすると、あらゆるウェブサイトからそのページにリンクやリダイレクトができます。このページは、通常のウェブページと同様に、あらゆる入力 (例えば POST データ) を、信頼のないソースから取っときたかのように扱うべきです。

例

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

"images/my-image.png" のファイルをウェブアクセス可能にしています。

ブラウザ実装状況

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.