Chrome扩展程序：将图像添加到DOM

Question

据我检查，我没有找到答案（Internet和stackoverflow）：当您拥有chrome扩展名并且content.js中的代码将一些HTML代码插入网页/ DOM时，如何添加图像？

我尝试了以下操作，但不起作用-图像出现了，但是损坏了（必须加载吗？如果可以，怎么办？）。

document.getElementById("header").insertAdjacentHTML("afterend", "<div><img src='myimage.jpg'>This text has been added</div>"); 

编辑：（刚刚注意到）

1-在Chrome中使用Inspect测试扩展程序时，IMG标签已被很好地注入，但是问题出在图片URL类似于http://www.example.com/myimage.jpg很明显，myimage不在example.com上！那么如何在扩展程序而不是Web服务器中找到它？

2-在下面的答案之一中，runtime.getURL会出现在哪里，您可以在哪里看到其输出？

Answer 1

好，我找到了答案！ content.js IMG标签中缺少扩展路径。解决方案在这里说明：http://superuser.com/questions/224500/how-to-display-local-images-in-chrome-using-file-protocol

正确的代码是：

<img src='chrome-extension://EXTENSION_ID/myimage.jpg'>

您的chrome扩展程序的EXTENSION_ID显示在chrome：// extensions /页面上的扩展程序中。因此，恢复：-将图片添加到manifest.json的“ web_accessible_resources”中-在content.js中使用上述IMG语法标记-您可以在chrome：// extensions /页面上找到您的chrome扩展程序ID-重新加载扩展程序（在chrome：// extensions /页面上）和您的网站以测试扩展程序。您的图像应显示。