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。此外，无需为图片网址添加单独的变量，只需在此处直接为topImage.src调用，特别是如果您只调用一次。

Answer 2

你是将top.png添加到manifest.json吗？

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

chrome extension doc url：https://developer.chrome.com/extensions/manifest.html#web_accessible_resources

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

2 个答案: