型 | Array |
---|---|
必須 |
いいえ |
例 |
|
説明
ときには、拡張機能に何らかのリソース - たとえば、画像や 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 ではありません。これは各ブラウザーインスタンス用にランダムに生成されます。これはウェブサイトがインストールしている拡張機能を調べることで指紋を取ることを防止します。
Chrome では、拡張機能の ID は固定です。リソースを web_accessible_resouce
に指定すると、chrome-extension://<your-extension-id>/<path/to/resouce>
でアクセス可能です。
この URL を取得する推奨される方法は、browser.runtime.getURL
API を使用して、 manifest.json の相対パスとして渡すことです:
browser.runtime.getURL("images/my-image.png");
// something like:
// moz-extension://944cfddf-7a95-3c47-bd9a-663b3ce8d699/images/my-image.png
この方法は拡張機能が実行されているブラウザがなんであれ正しい URL を取得します。
ワイルドカード
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" のファイルをウェブアクセス可能にしています。
ブラウザ実装状況
BCD tables only load in the browser
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.