読者です 読者をやめる 読者になる 読者になる

Chrome拡張のcssで画像のパスを指定するときの注意点

Chrome拡張のcssで背景画像を指定するような場合に、普通の書き方だと画像を読み込むことができません。

NG

#hoge {
  background: url(img/hoge.png);
}

OK

以下のように chrome-extension://__MSG_@@extension_id__/ を先頭に付与します。

#hoge {
  background: url(chrome-extension://__MSG_@@extension_id__/img/hoge.png);
}

また、 manifest.json に以下のような記述も加えて画像の読み込みを許可してください。

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