google-chrome - クロム拡張機能に画像を挿入する

Question

Chrome 拡張機能に画像を挿入する方法を知りたいです。

<img id="image" src="logo.png" />

そのhtmlタグをWebサイトに正しく挿入していますが、当然そのlogo.png画像をロードできません。

manifest.json を変更する方法についてのアイデアはありますか?

Answer 1

この問題には 2 つの原因が考えられます。

1. で画像を注入していますsrc="logo.png"。挿入された画像要素はページの一部になるため、ブラウザーは拡張機能から画像を読み込もうとしません。
   この問題を解決するには、 を使用chrome.extension.getURL('logo.png');してリソースの絶対 URL を取得します。

2. "manifest_version": 2マニフェスト ファイルで有効になっています。これにより、デフォルトで外部使用のすべてのリソースが無効になります。このエラーが発生すると、コンソールに次のメッセージが表示されます。

   ローカル リソースの読み込みが許可されていません: chrome://gbmfhbpbiibnbbgjcoankapcmcgdkkno/logo.png

   この問題を解決するには、リソースをホワイトリスト、つまり"web_accessible_resources"マニフェスト ファイルに追加します。

     ...,
     "web_accessible_resources": ["logo.png"]
   }
   

アップデート： chrome.extension.getURL('logo.png')

Chrome 58 以降は非推奨です。 を使用してくださいruntime.getURL。