javascript - Chrome 扩展程序在当前文档中植入图像

Question

我正在尝试编写一个 Chrome 扩展程序，作为其工作的一部分，它需要将图像添加到当前显示的 html 中。我想我需要使用 document.createElement 然后将其插入某处，但我不确定两件事:

1. 图像作为扩展的一部分出现，即在任何地方都没有直接链接，所以简单地添加 img 标签是行不通的。除非我遗漏了什么。

2. 根本与 Chrome 无关:如果 html 元素没有任何 id，将 img 标签添加到特定位置的最佳方法是什么？我可以使用正则表达式找到我想要将 img 添加到的位置，并且可以在需要时重写整个 html，但也许我缺少一种更微妙的方式。

Answer 1

您可以通过运行以下命令从您的扩展文件夹中获取图像 url:

var imgUrl = chrome.extension.getURL("image.png");

(看起来像这样:chrome-extension://<extension_id>/image.png)

如果您使用的是 manifest-version:2，您需要将扩展​​中注入(inject)其他文档的所有资源列入白名单。参见 this question了解更多信息。

关于你的第二个问题——你需要提供更多的细节。它有课吗？你知道里面是什么标签吗(li，div)？您可能最好为此使用 jQuery - 它有很多非常高级的选择器。我不知道您要使用什么搜索条件，所以我无法提出具体的解决方案。