javascript - Chrome 扩展程序 : add image to DOM

Question

据我检查，我找不到答案(互联网和 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 标签被很好地注入(inject)，但问题来自于图像 URL 类似于 http://www.example.com/myimage.jpg 很明显 myimage 不在 example.com 上!那么我怎样才能让它在扩展程序而不是网络服务器中找到呢？

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

Answer 1

在尝试将图像添加到 DOM 时，我遇到了同样的问题。执行以下操作修复了它:

假设我想将 icon_128.png 添加到 DOM

list .json

{
  "web_accessible_resources": ["icon_128.png"]
}

js文件:

const img = document.createElement("img");
img.src = chrome.runtime.getURL("./icon_128.png");
document.body.appendChild(img);