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

やり方

manifest.jsonでweb_accessible_resourcesで使用する画像を設定する。

manifest.json

{
    "web_accessible_resources": [{
        "resources": ["img/*"],
        "matches": ["<all_urls>"]
    }]
}

content.js (manifest.jsonにてcontent_scriptsに指定しているjsなりtsなり)でchrome.runtime.getURL("img/hoge.jpg");をして取得。

content.js

var image = document.createElement("img");
image.src = chrome.runtime.getURL("img/hoge.jpg");

おわり

軽く解説

web_aacessible_resourcesについて

webから拡張機能内のリソースにアクセスできるようにしたいときに設定する。
ここを設定していなければ、webからアクセスすることはできない。
v3から書き方もちょっと変わっているみたい。
詳しくは公式を見ると良さそう。