ここでは、 Chrome拡張 から ローカル のリソースにアクセスする方法を解説します。
Chrome拡張機能は非常に簡単に作れる強力なツールの一つです。
社内利用や個人利用に限ったものであれば、ストアに提出しなくても使用できます。
しかし、安全に利用するためにいくつかのルールがあります。
たとえば、リソースは予め指定されたものしか利用することが出来ません。
それでは順を追って見ていきましょう。
まず、manifest.jsonに利用するリソースを定義しておきます。
ワイルドカードも使えるので以下のようにどうぞ。
|
1 2 3 |
"web_accessible_resources": [ "dir/*.png" ], |
Javascriptからは以下のようにアクセスします。
|
1 |
chrome.extension.getURL('dirname/filename.png') |
CSSからは以下のようにアクセスします。
JSからのアクセスとCSSからのアクセスは異なるので注意が必要です。
|
1 2 3 |
.sample { background-image: url("chrome-extension://__MSG_@@extension_id__/dirname/filename.png"); } |
CSSからのほうがちょっと難しいんですよね。