Google ChromeのChrome Extension(拡張機能)で画像を表示するのに少し手こずった.

なぜか指定しても出てこないってことであたふた.
結局以下の流れでできた.

参考にしたのはここらへん:
https://stackoverflow.com/questions/3559781/google-chrome-extensions-cant-load-local-images-with-css

手順

1. 画像test.pngを[拡張機能のディレクトリ]/imagesに置く. images/test.pngとする.
2. manifest.jsonに以下を記入
   

   “manifest_version”:2,

   “web_accessible_resources”: [

           “images/test.png”

       ]

3. cssに以下を記述
   

   .img-pop{
   background-image:url(‘chrome-extension://__MSG_@@extension_id__/images/test.png’);
   }

4. 画像を表示するdivにclassとしてimg-popを指定する
   

   “

   “

以上で表示できる.これをやらないとinvalidとか出ている.