在chrome扩展中插入图像

Question

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

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

我正在将html标签正确插入网站,但自然无法加载logo.png图像.

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

Answer 1

这个问题有两种可能的原因.

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

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

要解决此问题,请将资源添加到白名单,即"web_accessible_resources"清单文件中:
```
  ...,
  "web_accessible_resources": ["logo.png"]
}
```
Run Code Online (Sandbox Code Playgroud)

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

自Chrome 58以来已弃用.请使用runtime.getURL.

@jacktrades你把`web_accessible_resources`**放在``content_scripts'`里面.这是错的,它必须是根对象的关键.我试图在我的回答中明确说明,添加一个无缩尾的尾部`}`. (7认同)
谢谢。我不断收到“不允许...”错误。仍在检查我是否做错了什么。 (2认同)