ChromeExtension(拡張機能)で画像を表示する/呼び出す

ちょっとだけ
Chrome拡張機能を作るにあたって手こずったのでメモを書いておく.

表示される画像は拡張機能に付属して配布する画像.なので拡張機能のディレクトリの中に当然含まれている.

  1. 拡張機能のトップディレクトリにimagesディレクトリを作る(ここである必要はありません)
  2. そのimagesの中に置きたい画像をおく(ここではtarget.png)
  3. manifest.jsonに以下を記述

{
“web_accessible_resources”: [
“images/target.png”
]
}

4. あとは拡張機能を使いたいスクリプトから呼び出すだけ.

画像の呼び出し方

HTMLから画像を呼び出す.

先頭の\は消してください.表示上の問題で以下のように書いています.

<\ img src=”images/target.png” />

CSSから画像を呼び出す.

background-image:url(‘chrome-extension://__MSG_@@extension_id__/images/target.png’);

JSから画像を呼び出す.

var img = chrome.extension.getURL(“images/target.png”);

 

結局こんな感じ.

正しいといいけど…

拡張機能作っている人少ないみたいなので、基本英語でググっている気がする…気のせい?

About the author

コメントを残す