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

  • Z时代
  • 2024-01-10
  • 分类：问答

我做了一个扩展，需要在每个页面上放置一个固定的图像。 内容脚本是：通过Chrome扩展（JS）添加图像到HTML

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

我试过和不工作：

  • 增添风采e.g top.style.position。

  • 使用document.body。

我知道我可以使用innerHTML，但真的很乱......

任何想法有什么不好？或者另一种方式来注入图像？

回答：

这里的问题似乎是您的变量名为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就可以了，尤其是如果您只调用一次。

回答：

您是否将top.png添加到manifest.json中？

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

Chrome扩展文件的网址：https://developer.chrome.com/extensions/manifest.html#web_accessible_resources

以上是 通过Chrome扩展（JS）添加图像到HTML 的全部内容， 来源链接： utcz.com/qa/265503.html

回到顶部