在chrome扩展中侦听head-load事件

Question

我试图在用户可以查看之前注入一个css文件（第一个样式是空白的，第二个样式是黑色的，所以您可以看到更改）。

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

但是我不能在head元素上添加监听器，因为它不存在（=null）。

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

谢谢你，

Answer 1

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

因此，您可以监听DOMContentLoaded事件，该事件在加载DOM后立即启动。

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

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

Answer 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
})

Answer 3

您可以使用document.documentElement，它可以在document_start时访问，有关更多详细信息，请参阅此线程：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);