在 Chrome/Firefox 扩展中加载 Javascript 之前将 HTML 插入页面答案

【问题标题】：Insert HTML into page before Javascript is loaded in Chrome/Firefox Extension在 Chrome/Firefox 扩展中加载 Javascript 之前将 HTML 插入页面
【发布时间】：2019-08-10 22:13:32
【问题描述】：

我正在尝试制作一个将特定 HTML 添加到页面中的扩展，但是必须在执行页面的任何 javascript 之前以及元素存在之后完成。

我打算在 body 标记上插入一些东西，所以使用 "run_at": "document_start" 使我无法向页面添加任何内容，因为此时一切都为空。

【问题讨论】：

在页面的任何 javascript 执行之前和元素存在之后。 这是矛盾的。脚本标签通常会在 HTML 解析器遇到它们时立即执行，除非它们具有 async 或 defer 属性。这就是为什么有些人会遇到这样的问题：stackoverflow.com/questions/14028959/…
...所以这个问题需要进一步澄清，什么时候需要你的代码进行干预。
这个问题完全有道理。你只需要 MutationObserver 等待body 出现的那一刻。示例：one - 将head 替换为body、two、three)。
这个问题怎么太宽泛了？我问的是一个特定问题的问题......

标签： google-chrome-extension firefox-addon firefox-addon-webextensions

【解决方案1】：

事实证明，我可以通过在 manifest.json run_at: "document_start" 和我的 content.js 中写入来完成此操作，而不是写入头部或正文，我可以使用 document.documentElement.appendChild。

【讨论】：