在 chrome 扩展中监听 head load 事件答案

【问题标题】：listen head load event in chrome extension在 chrome 扩展中监听 head load 事件
【发布时间】：2016-04-18 13:51:33
【问题描述】：

我试图在用户查看之前注入一个 css 文件（第一个样式是空白，第二个是黑色，所以你看到了变化）。

为此，我在 document_start 上加载我的内容 js。

但我无法在 head 元素上添加侦听器，因为它不存在 (=null)。

所以我正在寻找一种方法来捕捉 head 标签的 onload 事件。

谢谢，

【问题讨论】：

标签： google-chrome-extension event-handling dom-events

【解决方案1】：

看看this 问题，它是公认的答案。 document_start 上尚未加载 DOM 内容，但 JavaScript 的 document 对象已加载。

所以你可以做的是监听 DOMContentLoaded 事件，该事件会在 DOM 加载后立即触发。

这是您的内容脚本的示例：

document.addEventListener("DOMContentLoaded", function(event) {
    console.log(document.getElementsByTagName("head")[0].innerHTML);
});

【讨论】：

【解决方案2】：

我用这个：

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (!mutation.addedNodes) return
    for (var i = 0; i < mutation.addedNodes.length; i++) {
      // do things to your newly added nodes here
      var node = mutation.addedNodes[i];
      if(node.nodeName == "HEAD"){
        //make stuff when head load

        //don't forget to stop listener
        observer.disconnect();        
      }
    }
  })
})

observer.observe(document, {
    childList: true
  , subtree: true
  , attributes: false
  , characterData: false
})

【讨论】：

【解决方案3】：

您可以使用document.documentElement 代替，可以在document_start 时访问，更多详细信息请参见此线程：https://groups.google.com/a/chromium.org/forum/#!topic/chromium-extensions/tyAm1GAY-I4

manifest.json

{
    "name": "36695983",
    "version": "0.1",
    "manifest_version": 2,
    "content_scripts": [
        {
            "js": [
                "content.js"
            ],
            "matches": [
                "<all_urls>"
            ],
            "run_at": "document_start"
        }
    ],
    "web_accessible_resources": [
        "content.css"
    ]
}

content.js

var link = document.createElement("link");
link.href = chrome.runtime.getURL("content.css");
link.type = "text/css";
link.rel = "stylesheet";
document.documentElement.appendChild(link);

【讨论】：

以及如何在头部添加脚本标签？ document.head 对象为 null ...我目前正在尝试使用 MutationObserver
@thib3113，也许我误解了这一点，所以您想在当前网页不受您控制的情况下将 css 插入到当前网页中？我认为该页面是您的，因此您可以直接在 html 中包含脚本标记
@thib3113，您可以改用document.documentElement，查看更新后的答案。
我无法更新 html 文件，我不是网站的所有者。我不明白你的回答....我找到了办法，所以我会更新
@thib3113，我已经更新了我的答案，content.js 将在构建 dom 之前加载，只需使用document.documentElement.appendChild(your css tag) 注入您的 css，这发生在“用户可以查看”之前跨度>