2

Chrome拡張機能を構築していて、コンテンツスクリプトを介して背景画像を含むdivをDOMに追加しようとしています。CSSが正しく読み込まれ、DeveloperToolsインスペクターでCSSを見ると画像のURLが正しいようです。

$('.close-button').css('background', 'url('+chrome.extension.getURL('img/btn_close.png')+')');

URLはインスペクターに次のように表示されます

chrome-extension://fdghianmcdbcgihapgdbjkdoaaocmoco/img/btn_close.png

ただし、画像はバックグラウンドで読み込まれません。同じことをしますが、画像をimgタグのsrcとしてロードすると、画像はブラウザで壊れているようにはっきりと表示されます。

ただし、このURLをブラウザのURLバーに貼り付けて読み込むと、正常に表示されます。DOMにロードする際の問題は何ですか？

4

1 に答える 1

13

Chrome拡張機能のドキュメントで答えを見つけました。デフォルトでは、拡張ルートのファイルはWebページDOMからアクセスできません。開発者は、manifest.jsonファイルの「web_accessible_resources」設定でこれをオーバーライドできます。

http://code.google.com/chrome/extensions/manifest.html#web_accessible_resources

{
  ...
  "web_accessible_resources": [
    "images/my-awesome-image1.png",
    "images/my-amazing-icon1.png",
    "style/double-rainbow.css",
    "script/double-rainbow.js"
  ],
  ...
}

データURLの使用を提案するMattGreerのコメントにも、特別な叫び声があります。これも機能すると思います。

于 2012-04-22T03:04:46.327 に答える