使用 iframe 通过 Chrome 扩展将本地 HTML 文件注入网页？

Question

我有一个 HTML 文件，我想从 Chrome 扩展程序将其注入到 Google 搜索结果页面的每个结果旁边。

我想知道是否可以使用 iframe 来加载 HTML 文件？

这代替了我当前在内容脚本中使用

insertAdjacentHTML()

以及可怕的长 HTML 字符串和内联 CSS 的实现。我更喜欢有一个单独的 HTML 文件及其自己的 CSS，我可以直接插入它。

我尝试过：

chosenElements[i].insertAdjacentHTML('afterbegin', `<iframe src="/inject.html"></iframe>`);

但只是获得一个带有 404 页面的 iframe，因为它正在查找“https://www.google.com/index.html”目录而不是文件所在的位置。

inject.html 文件与我的扩展构建文件夹中的index.html 文件位于同一位置。我如何访问它？我可以访问吗？

Answer 1

你有没有尝试过

src="inject.html"

而不是

src="/inject.html"

Answer 2

我迟到了 5 年，但如果其他人遇到这个问题，如果您想引用项目目录中的文件，则需要使用 浏览器运行时模块。像这样的东西应该有效：

const htmlURL = chrome.runtime.getURL('index.html');
renderedContent.src = htmlURL