Chrome 扩展：将图像添加到 DOM答案

【问题标题】：Chrome extension: add image to DOMChrome 扩展：将图像添加到 DOM
【发布时间】：2020-05-13 07:42:46
【问题描述】：

据我检查，我找不到答案（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 上！那么我怎样才能让它在扩展而不是网络服务器中找到呢？

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

【问题讨论】：

stackoverflow.com/questions/11804332/…
图片 src url 必须指向有效的地方。
@sney20002：看到那个问题链接很有趣。它之前没有弹出。但这并没有帮助，图像仍然损坏。
@evolutionxbox：图像在扩展根目录中。是否需要在代码中指定特定路径？

标签： javascript image google-chrome-extension inject

【解决方案1】：

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

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

manifest.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);

【讨论】：

【解决方案2】：

好的，我找到了答案！ 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/ 页面上）和您的网站以测试扩展。
你的图片应该会显示出来。

【讨论】：

这不是正确的方法 - 请参阅@urvianoob 答案