13

HTMLを実際のWebページに挿入するGoogleChrome拡張機能を構築しています。インジェクションには画像も含まれているので、拡張機能内の画像をどのように参照するのか疑問に思います。これまでのところ、 http：//example.com/myimage.pngを使用してサーバー上でのみそれらを参照することができました。しかし、ロードされるまで、これには目立った時間がかかります。

拡張機能内に画像をパックして、ブラウザのどこからでもそれらを参照することは可能ですか？どのように？

助けてくれてありがとう。

4

2 に答える 2

16

chrome.runtime.getURL()（docs ）を使用して、内部拡張フォルダーのURLを取得できます。画像の相対パスを渡すと、その完全なURLが取得されます。

たとえば、「images」という名前のフォルダと「profile.jpg」という名前の画像が両方とも拡張フォルダにある場合は、次のようにしてページの本文に挿入できます。

var image = document.createElement("img");
image.src = chrome.runtime.getURL("images/profile.jpg");
document.getElementsByTagName("body")[0].appendChild(image);

また、ここに記載web_accessible_resourcesされているマニフェストプロパティを確認してください。このメソッドで使用できるように、リソースを宣言する必要がある場合があります。

于 2012-06-02T22:43:00.077 に答える
8

人々がコメントを読む必要がないように、これをここに残します。

マニフェスト.jsonにこれを含めます：

"web_accessible_resources": ["RELATIVE_PATH_TO_RESOURCE.EXTENTION"] // can be more than one

例

{
  ...
  "web_accessible_resources": [
    "images/*.png",
    "style/double-rainbow.css",
    "script/double-rainbow.js",
    "script/main.js",
    "templates/*"
  ],
  ...
}

次に、この画像またはファイルを使用するWebページで使用する場合

chrome.extension.getURL("images/new-HDSB-logo.png"); // absolute path
于 2018-09-02T02:50:27.133 に答える