Question

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

为此，我将我的内容js加载到document_start。

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

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

谢谢，

Answer 1

您可以改为使用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);

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

看看this问题，这是接受的答案。尚未在document_start上加载DOM内容，但JavaScript的document对象是。

所以你可以做的就是监听DOMContentLoaded事件，一旦加载了DOM，它就会触发。

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

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

在chrome扩展中听头负载事件

3 个答案: