Greasemonkey: document.head est nul lorsque @run-at document-start

Créé le 15 juin 2017 · 9Commentaires · Source: greasemonkey/greasemonkey

Environnement

Clé | Valeur
-- | --
Plate-forme système | AMD64, Windows-10-10.0.14393
Navigateur | Firefox Developer Edition (55.0 Beta 1, 64 bits)
Agent utilisateur | Mozilla/5.0 (Windows NT 10.0 ; Win64 ; x64 ; rv : 55.0) Gecko/20100101 Firefox/55.0
Construire la configuration | https://hg.mozilla.org/releases/mozilla-beta/rev/6872377277a618b2b9e0d2b4c2b9e51765ac199e
Singe de graisse | 3.11

Testez le script utilisateur :

// ==UserScript==
// <strong i="15">@name</strong>        HeadTest
// <strong i="16">@namespace</strong>   HeadTest
// <strong i="17">@include</strong>     *
// @run-at      document-start
// <strong i="18">@version</strong>     1
// <strong i="19">@grant</strong>       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
}

Attendre le résultat :

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

Résultat actuel:

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

Ce problème s'applique également à GM_addStyle

Source

byzod

👍5 👎1

Commentaire le plus utile

@ the8472 Si le comportement du document-start actuel est correct et intentionnel, nous devons utiliser un observateur chaque fois que vous devez ajouter du style
Quelque chose comme

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

est nécessaire pour chaque script qui ajoute un style avant document-end . C'est ennuyant.

J'espère que GM_addstyle pourra le faire pour moi, ou écrire un avertissement utile dans le wiki ("GM_addstyle n'est pas disponible pour les scripts avec @run-at document-start, ne l'utilisez pas, trouvez une solution vous-même ", etc)

byzod le 23 juin 2017

👍2

Tous les 9 commentaires

Dernier bien : Firefox 55.0a1 (2017-03-17)
Construire à partir de https://hg.mozilla.org/mozilla-central/rev/39607304b774591fa6e32c4b06158d869483c312

Premier mauvais : Firefox 55.0a1 (2017-03-17)
Construire à partir de https://hg.mozilla.org/mozilla-central/rev/23a4b7430dd7e83a2809bf3dc41471f154301eda

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

Le bogue 1333990 est le suspect.

Voir aussi #1849

janekptacijarabaci le 15 juin 2017

👍2

@janekptacijarabaci a trouvé une solution :

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

Cela semble instable et peu fiable, mais c'est le moyen le plus simple que je puisse trouver actuellement pour que les choses fonctionnent.

byzod le 16 juin 2017

... et la documentation est toujours erronée.
https://developer.mozilla.org/en-US/docs/Observer_Notifications#Documents

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

janekptacijarabaci le 16 juin 2017

Je ne pense pas que ce soit un bug. document-start arrive très tôt. Cela permet aux scripts utilisateur de manipuler la page avant que tout contenu javascript ne soit exécuté.

Si vous souhaitez exécuter plus tard, utilisez simplement document-end ou utilisez des observateurs de mutation pour attendre qu'un élément particulier soit inséré.

the8472 le 23 juin 2017

@the8472
Peut-être que tu as raison.
Selon MDN :

document-élément-inséré
Envoyé immédiatement après la création de l'élément racine d'un document, mais avant l'exécution de tout script dessus.

document-start (basé sur document-element-inserted ) est déclenché immédiatement après la création de <html></html> , à ce moment, <head> est nul.

Mais cela casse de nombreux scripts qui tentent d'ajouter du style avant que la page ne soit rendue (si vous utilisez GM_addstyle avec document-end vous remarquerez que la page clignote) car cela fonctionnait avant

Je ne suis pas sûr que ce soit intentionnel

byzod le 23 juin 2017

GM_addStyle est stupide de toute façon, il insère simplement une balise <style> dans <head> , vous pouvez le faire vous-même, avec un observateur de mutation si nécessaire.

Mais si tel est le problème réel, il pourrait être corrigé pour vérifier la présence de <head> utiliser des observateurs si ce n'est pas le cas.

the8472 le 23 juin 2017

👎2

@ the8472 Si le comportement du document-start actuel est correct et intentionnel, nous devons utiliser un observateur chaque fois que vous devez ajouter du style
Quelque chose comme

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

est nécessaire pour chaque script qui ajoute un style avant document-end . C'est ennuyant.

byzod le 23 juin 2017

👍2

Oui, gm_addstyle devrait être corrigé.

Mais tout ce qu'un script peut faire d'autre doit également passer par les mêmes étapes au démarrage du document, en ajoutant des styles non spéciaux à cet égard. Rien du DOM n'est disponible, vous devez donc attendre tout ce dont vous avez besoin. C'est-à-dire que vous devez utiliser des observateurs de toute façon si vous exécutez des choses au début du document.

the8472 le 23 juin 2017

Merci pour le rapport détaillé, mais c'est WAI, et la branche 3.x est ~morte de toute façon. (Pour ma part, je souhaite la bienvenue à nos nouveaux suzerains d'extensions Web.) Des choses comme GM_addStyle seront corrigées en n'existant jamais dans 4.x.

Des scripts tels que https://arantius.com/misc/greasemonkey/amazon-url-cleaner.user.js existent qui n'ont pas du tout besoin d'un DOM et doivent être exécutés dès que possible.