--- title: web_accessible_resources slug: Mozilla/Add-ons/WebExtensions/manifest.json/web_accessible_resources tags: - Add-ons - Extensions - WebExtensions translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/web_accessible_resources ---

{{AddonSidebar}}

型 Array
必須

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

説明

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

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

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

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

しかし、拡張機能が {{WebExtAPIRef("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" のファイルをウェブアクセス可能にしています。

ブラウザ実装状況

{{Compat("webextensions.manifest.web_accessible_resources")}}