listen head load event in chrome extension

Question

I'm trying to inject a css file before user can view (first style is blank, second is black, so you see the change) .

To do this, I load my content js on document_start.

But I can't add a listener on the head element because it doesn't exist (=null) .

So I am searching a way to catch the onload event of the head tag .

Thank you,

score 0 · Answer 1 · edited May 23 '17 at 10:33

Take a look at this question and it's accepted answer. The DOM content isn't loaded already on document_start, but the document object of JavaScript is.

So what you can do is listen on the DOMContentLoaded event, which fires as soon as the DOM is loaded.

This is an example how your content script could look like:

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

score 0 · Answer 2 · edited Aug 10 '22 at 18:22

0

You could use document.documentElement instead, which can be accessed at the time of document_start, see this thread for more details: 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);

edited Aug 10 '22 at 18:22

Philippe Fanaro

6,148
6
38
76

answered Apr 19 '16 at 00:26

Haibara Ai

10,703
2
31
47

and how to add script tag in the head ? The document.head object is null ... I'm trying with MutationObserver for the moment – thib3113 Apr 19 '16 at 06:40
@thib3113, maybe I misunderstood that, so you want to insert a css into current web page while the page is not under your control? I thought the page is yours so you can include a script tag directly in the html – Haibara Ai Apr 19 '16 at 08:28
@thib3113, you could use `document.documentElement` instead, see updated answer. – Haibara Ai Apr 19 '16 at 08:35
I can't update the html file, I'm not the owner of the website . I don't undestand your answer .... I'had found a way, so I will update – thib3113 Apr 19 '16 at 09:38
1

@thib3113, I have updated my answer, `content.js` would be loaded before the dom is constructed, and just use `document.documentElement.appendChild(your css tag)` to inject your css, which happens before "user can view" – Haibara Ai Apr 19 '16 at 11:10

score 0 · Answer 3 · answered Apr 19 '16 at 09:47

I use this :

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

listen head load event in chrome extension

3 Answers3