google-chrome - 在 chrome 扩展中插入图像

Question

我想知道如何在 Chrome 扩展程序中插入图像。

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

我将该 html 标记正确插入到网站中，但自然无法加载该 logo.png 图像。

关于如何修改 manifest.json 的任何想法？

score 104 · Accepted Answer

该问题有两个可能的原因。

您正在使用src="logo.png". 插入的图像元素成为页面的一部分，因此浏览器不会尝试从扩展加载图像。
要解决此问题，请使用chrome.extension.getURL('logo.png');获取资源的绝对 URL。
"manifest_version": 2在清单文件中启用。默认情况下，这会禁用所有资源供外部使用。发生此错误时，控制台中会显示以下消息：

不允许加载本地资源：chrome://gbmfhbpbiibnbbgjcoankapcmcgdkkno/logo.png

为了解决这个问题，将资源添加到白名单中，即"web_accessible_resources"在清单文件中：
```
  ...,
  "web_accessible_resources": ["logo.png"]
}
```

更新： chrome.extension.getURL('logo.png')

自 Chrome 58 起已弃用。请使用runtime.getURL.

score 0 · Accepted Answer

我找到的唯一实用的解决方案是：

<img id="icon" src="./icon.png">

let icon = document.getElementById("icon");
icon.src = chrome.runtime.getURL("icon.png");

"web_accessible_resources": [{
    "matches": ["<all_urls>"],
    "resources": ["icon.png"]
}]

score 0 · Accepted Answer

这个解决方案对我有用。

3 回答 3