Greasemonkey: document.head is null when @run-at document-start

Created on 15 Jun 2017 · 9Comments · Source: greasemonkey/greasemonkey

Environment

Test user script:

// ==UserScript==
// @name        HeadTest
// @namespace   HeadTest
// @include     *
// @run-at      document-start
// @version     1
// @grant       none
// ==/UserScript==
AddGlobalStyle('body{background-color:red;}');

function AddGlobalStyle(css) {
    var head, style;
    head = document.getElementsByTagName("head")[0];
    console.log("[Test]: Head: %o", head); //DEBUG
    console.log("[Test]: document.head: %o", document.head); //DEBUG
}

Expect Result:

[Test]: Head:  <head> 
[Test]: document.head:  <head>

Actual Result:

[Test]: Head:  undefined
[Test]: document.head:  null

This issue also applies to GM_addStyle

Source

byzod

👍5 👎1

Most helpful comment

@the8472 If the behavior of current document-start is correct and intentionally, then we need to using an observer every time you need to add style
Something like

function addGlobalStyle(css){
  let headHunter = new MutationObserver(
    records => {
    ; check mutation records
    ; is added node's tag name 'head'?
    ; create a style node then throw it in
    ; then disconnect us
   }
  );
  headhunter.observer(document, {childlist : true});
}

is needed for every script that add a style before document-end. That's boring.

I hope GM_addstyle could do that for me, or write some useful warning in the wiki ("GM_addstyle is not available for scripts with @run-at document-start,don't' use it, find a solution yourself", etc)

byzod on 23 Jun 2017

👍2

All 9 comments

Last good: Firefox 55.0a1 (2017-03-17)
Build from https://hg.mozilla.org/mozilla-central/rev/39607304b774591fa6e32c4b06158d869483c312

First bad: Firefox 55.0a1 (2017-03-17)
Build from https://hg.mozilla.org/mozilla-central/rev/23a4b7430dd7e83a2809bf3dc41471f154301eda

Pushlog:
https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=39607304b774591fa6e32c4b06158d869483c312&tochange=23a4b7430dd7e83a2809bf3dc41471f154301eda

Bug 1333990 is the suspect.

See also #1849

janekptacijarabaci on 15 Jun 2017

👍2

@janekptacijarabaci Found a workaround:

setTimeout(()=>{
    AddGlobalStyle('body{background-color:red;}');
});

It looks unstable and unreliable, but that's the simplest way I can found currently that make things work.

byzod on 16 Jun 2017

...and the documentation is still wrong.
https://developer.mozilla.org/en-US/docs/Observer_Notifications#Documents

https://bugzilla.mozilla.org/show_bug.cgi?id=1333990#c128

janekptacijarabaci on 16 Jun 2017

I don't think this is a bug. document-start happens very early. This allows userscripts to manipulate the page before any content javascript has executed.

If you want to execute later just use document-end or use mutation observers to wait for a particular element to be inserted.

the8472 on 23 Jun 2017

@the8472
Maybe you're right.
According to MDN:

document-element-inserted
Sent immediately after the root element of a document has been created, but before executing any script on it.

document-start (based on document-element-inserted) is fired immediately after <html></html> is created, at this time, <head> is null.

But this breaks many scripts that try to add style before the page is rendered (if you use GM_addstyle with document-end you will noticed that the page is blinking) as it works before

I'm not sure this is intentionally

byzod on 23 Jun 2017

GM_addStyle is silly anyway, it just inserts a <style> tag into <head>, you can do that yourself, with a mutation observer if necessary.

But if that is the actual concern it could be patched to check for the presence of <head> use observers if it is not.

the8472 on 23 Jun 2017

👎2

@the8472 If the behavior of current document-start is correct and intentionally, then we need to using an observer every time you need to add style
Something like

function addGlobalStyle(css){
  let headHunter = new MutationObserver(
    records => {
    ; check mutation records
    ; is added node's tag name 'head'?
    ; create a style node then throw it in
    ; then disconnect us
   }
  );
  headhunter.observer(document, {childlist : true});
}

is needed for every script that add a style before document-end. That's boring.

byzod on 23 Jun 2017

👍2

Yes, gm_addstyle should be fixed.

But everything else a script might do also has to jump through the same hoops at document-start too, adding styles not special in that regard. Nothing of the DOM is available, so you have to wait for whatever you need. I.e. you need to use observers anyway if you run things at document-start.

the8472 on 23 Jun 2017

Thanks for the detailed report, but this is WAI, and the 3.x branch is ~dead anyway. (I, for one, welcome our new web extension overlords.) Things like GM_addStyle will be fixed by never existing in 4.x.

Scripts like https://arantius.com/misc/greasemonkey/amazon-url-cleaner.user.js exist which don't need a DOM at all, and should run ASAP.