Google ChromeのChrome Extension(拡張機能)で画像を表示するのに少し手こずった.
なぜか指定しても出てこないってことであたふた.
結局以下の流れでできた.
参考にしたのはここらへん:
https://stackoverflow.com/questions/3559781/google-chrome-extensions-cant-load-local-images-with-css
手順
- 画像test.pngを[拡張機能のディレクトリ]/imagesに置く. images/test.pngとする.
- manifest.jsonに以下を記入
“manifest_version”:2,
“web_accessible_resources”: [
“images/test.png”
]
- cssに以下を記述
.img-pop{
background-image:url(‘chrome-extension://__MSG_@@extension_id__/images/test.png’);
} - 画像を表示するdivにclassとしてimg-popを指定する
“
“
以上で表示できる.これをやらないとinvalidとか出ている.