通过chrome扩展（JS）将图像添加到HTML

Question

我做了一个扩展，需要在每个页面上放置一个固定的图像。 内容脚本为：

imgTop = chrome.extension.getURL('top.png');
var top = document.createElement("img");
top.src=imgTop;
top.position='fixed';
top.zIndex='2353445';
top.top='200';
top.left='20';
document.getElementsByTagName('body')[0].appendChild(top);

我收到错误： Uncaught Error: NotFoundError: DOM Exception 8

我试过但不起作用的内容：

• 添加样式，例如top.style.position 。
• 使用document.body 。

我知道我可以使用innerHTML ，但是确实很乱...

知道有什么问题吗？ 还是注入图像的另一种方法？

Answer 1

这里的问题似乎是您的变量名为top ，Chrome浏览器将其与window.top属性混淆了。 将变量名更改为其他名称，它应该可以正常工作，如下所示：

var topImage = document.createElement('img');
topImage.src = chrome.extension.getURL('top.png');
topImage.style.position = 'fixed';
topImage.style.zIndex = '2353445';
topImage.style.top = '200px';
topImage.style.left = '20px';
document.body.appendChild(topImage);

其他一些事情：样式属性是通过element.style.property访问的，如果要对正文执行操作，请使用document.body 。 同样，不需要为图像URL设置单独的变量，只需像在这里那样直接为topImage.src调用它，尤其是如果您只调用一次的话。

Answer 2

您将top.png添加到manifest.json吗？

您需要定义web_accessible_resources属性并列出资源（以及可选的针对这些资源的单独的内容安全策略）。

chrome扩展名文档网址： https ： //developer.chrome.com/extensions/manifest.html#web_accessible_resources