拡張内に入れた画像などのファイルを読み込む [Chrome Extensions を作ってみる：第十回]

例えば Chrome 拡張を作っているとき、画像などのファイルを使いたいっていう場合があると思います。しかし他のサーバのを読み込むよりも、拡張内に格納したファイルを読み込んだ方が当然速いので、こっちを使いたいところですね。

まず、manifest.json 内で記述します。

★manifest.json

"web_accessible_resources": [
"img/sample.png"
]

次に、読み込むファイル側で定義します。ここでは css で定義してみます。

★background_page 内の Javascript

#sample {
background: url(chrome-extension://xxxxxx/img/sample.png);
}

※「xxxxxx」の部分には拡張の ID を入れます。
同じように JavaScript 内でも読み込ませることができます。

Formats: Manifest Files - Google Chrome