Chrome 拡張ディレクトリ内の画像にアクセスする方法

意外と手数が必要だったのでメモ。

やること

• manifest.json に読み込みたい画像を web_accessible_resources として指定する
• chrome.runtime.getURL を使う

ここに書いてあるように web_accessible_resources を指定する必要がある。
https://developer.chrome.com/docs/extensions/mv2/manifest/web_accessible_resources/

例えば images 配下の画像全部を読み込み可能にしたければ

{
  ...
  "web_accessible_resources": [
    "images/*"
  ],
  ...
}

を指定する。

また、画像へのパスを指定する時は chrome.runtime.getURL を使う
https://developer.chrome.com/docs/extensions/reference/runtime/#method-getURL

この関数を実行すると src="chrome-extension://feaidmblogpmbjpnndnmhngiiiiiiiiiiii/cat_images/1.jpeg" のような Chrome 拡張内の画像に対するパスを返してくれます。

利用イメージ図

// chrome.runtime.getURL(images/cat.png) の部分は JS で頑張ってください。
<img src="chrome.runtime.getURL(images/cat.png)" alt="cat" />