document.head is null when @run-at document-start #2515

byzod · 2017-06-15T14:18:18Z

Environment

Key	Value
System Platform	AMD64, Windows-10-10.0.14393
Browser	Firefox Developer Edition (55.0 Beta 1, 64 bit)
User Agent	Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:55.0) Gecko/20100101 Firefox/55.0
Build Config	https://hg.mozilla.org/releases/mozilla-beta/rev/6872377277a618b2b9e0d2b4c2b9e51765ac199e
Grease Monkey	3.11

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

The text was updated successfully, but these errors were encountered:

janekptacijarabaci · 2017-06-15T16:38:42Z

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

byzod · 2017-06-16T15:57:44Z

@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.

janekptacijarabaci · 2017-06-16T17:01:31Z

...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

the8472 · 2017-06-23T06:40:01Z

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.

byzod · 2017-06-23T06:52:00Z

@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

the8472 · 2017-06-23T07:04:58Z

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.

byzod · 2017-06-23T07:18:39Z

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

the8472 · 2017-06-23T07:25:19Z

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.

arantius · 2017-06-23T16:01:56Z

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.

1) a recent change in Firefox has broken the pattern of styling a page before it's displayed by calling GM_addStyle at document-start. [1] a workaround hasn't been (and won't be) implemented in Greasemonkey work around this by using a mutation observer to detect the creation of the head element before adding the style 2) fix FOSC on /r/firefox (the blue background) by hiding <html> rather than <body> [1] greasemonkey/greasemonkey#2515

due to greasemonkey/greasemonkey#2515 this statement breaks the head injections on line 15 and 19. the script does not appear to require running at document start, and works fine with the default (document-end)

arantius closed this as completed Jun 23, 2017

janekptacijarabaci mentioned this issue Aug 16, 2017

GM_addStyle not work when run at document start #2545

Closed

Repository owner deleted a comment from Swyter Aug 31, 2017

Mapaler mentioned this issue Sep 5, 2017

一键安装/更新CSS研究 Mapaler/EhTagTranslator#19

Closed

The-Compiler mentioned this issue Oct 12, 2018

Qt 5.12: document.documentElement is null in GM_addStyle qutebrowser/qutebrowser#4322

Open

alexwh mentioned this issue Jul 15, 2019

remove run-at decleration Redcrafter/Bandcamp-Volume-Bar#2

Merged

the1812 mentioned this issue Jan 31, 2020

后台打开视频网页脚本没有加载 the1812/Bilibili-Evolved#311

Closed

akaihola mentioned this issue Dec 9, 2022

Sidebar links don't appear when installing in ViolentMonkey pionxzh/chatgpt-exporter#9

Closed

eebssk1 mentioned this issue Jul 8, 2023

The userscript won't work on firefox with greasemonkey. PipecraftNet/jsdelivr-auto-fallback#8

Open

andywang425 mentioned this issue Aug 31, 2023

无法正确注入css lisonge/vite-plugin-monkey#104

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

document.head is null when @run-at document-start #2515

document.head is null when @run-at document-start #2515

byzod commented Jun 15, 2017 •

edited

janekptacijarabaci commented Jun 15, 2017 •

edited

byzod commented Jun 16, 2017

janekptacijarabaci commented Jun 16, 2017 •

edited

the8472 commented Jun 23, 2017

byzod commented Jun 23, 2017 •

edited

the8472 commented Jun 23, 2017

byzod commented Jun 23, 2017 •

edited

the8472 commented Jun 23, 2017

arantius commented Jun 23, 2017

document.head is null when @run-at document-start #2515

document.head is null when @run-at document-start #2515

Comments

byzod commented Jun 15, 2017 • edited

Environment

Test user script:

Expect Result:

Actual Result:

janekptacijarabaci commented Jun 15, 2017 • edited

byzod commented Jun 16, 2017

janekptacijarabaci commented Jun 16, 2017 • edited

the8472 commented Jun 23, 2017

byzod commented Jun 23, 2017 • edited

the8472 commented Jun 23, 2017

byzod commented Jun 23, 2017 • edited

the8472 commented Jun 23, 2017

arantius commented Jun 23, 2017

byzod commented Jun 15, 2017 •

edited

janekptacijarabaci commented Jun 15, 2017 •

edited

janekptacijarabaci commented Jun 16, 2017 •

edited

byzod commented Jun 23, 2017 •

edited

byzod commented Jun 23, 2017 •

edited