I try to add a text box if the REQUEST_URI have an entry note like this:
By example: /?note=TEST don't produce any new node from my code.
// ==UserScript==
// @name Simple note from QUERY_STRING
// @namespace /
// @version 1.0
// @description Affiche la valeur de 'note' de la query string de l'URL.
// @author Mévatlavé
// @match *://*/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
function addNoteHeader(noteValue) {
const header = document.createElement('div');
header.className = 'query-string-notifier';
header.textContent = noteValue;
header.style.backgroundColor = 'yellow';
header.style.color = 'black';
header.style.fontSize = '24px';
header.style.fontWeight = 'bold';
header.style.textAlign = 'center';
header.style.padding = '10px';
header.style.position = 'fixed';
header.style.top = '0';
header.style.left = '0';
header.style.right = '0';
header.style.zIndex = '1000';
document.body.insertBefore(header, document.body.firstChild);
}
const urlParams = new URLSearchParams(window.location.search);
const noteValue = urlParams.get('note');
if (noteValue) {
addNoteHeader(noteValue);
}
})();
It works on some sites, but not others. What's the cause?
Is my issue is CSP or DOM loading related?
How to fix or workaround to work on any website?
I try to add a text box if the REQUEST_URI have an entry note like this:
By example: https://stackoverflow/?note=TEST don't produce any new node from my code.
// ==UserScript==
// @name Simple note from QUERY_STRING
// @namespace http://tampermonkey/
// @version 1.0
// @description Affiche la valeur de 'note' de la query string de l'URL.
// @author Mévatlavé
// @match *://*/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
function addNoteHeader(noteValue) {
const header = document.createElement('div');
header.className = 'query-string-notifier';
header.textContent = noteValue;
header.style.backgroundColor = 'yellow';
header.style.color = 'black';
header.style.fontSize = '24px';
header.style.fontWeight = 'bold';
header.style.textAlign = 'center';
header.style.padding = '10px';
header.style.position = 'fixed';
header.style.top = '0';
header.style.left = '0';
header.style.right = '0';
header.style.zIndex = '1000';
document.body.insertBefore(header, document.body.firstChild);
}
const urlParams = new URLSearchParams(window.location.search);
const noteValue = urlParams.get('note');
if (noteValue) {
addNoteHeader(noteValue);
}
})();
It works on some sites, but not others. What's the cause?
Is my issue is CSP or DOM loading related?
How to fix or workaround to work on any website?
1 Answer
Reset to default 0Instead of trying to add an element on the top of the page, my experience is that using a side box is more reliable and works on most web sites including SO:
const sidebar = document.createElement('div');
sidebar.className = 'note-sidebar';
sidebar.style.position = 'fixed';
sidebar.style.top = '30%'; // Positionne la note dans le premier tiers de la fenêtre
sidebar.style.right = '0';
sidebar.style.zIndex = '9999';
sidebar.style.backgroundColor = 'yellow';
sidebar.style.padding = '5px'; // Réduit le padding
sidebar.style.fontSize = '16px'; // Réduit la taille de la police
sidebar.style.color = 'black';
sidebar.style.textAlign = 'center';
sidebar.style.width = '150px'; // Largeur de la boîte dépliée
sidebar.style.minHeight = '30px'; // Hauteur minimale pour le replié
sidebar.style.transition = 'width 0.3s'; // Transition pour l'animation de largeur
<div>? There is an element for this purpose,<header>. Why you don't use CSS? Create CSS property for the selectorheader, or something like that. – Sergey A Kryukov Commented Mar 4 at 2:44note? – Sergey A Kryukov Commented Mar 4 at 2:47document.body.insertAdjacentElement('afterbegin', header). Some website uses JavaScript to generate dom element, that when your script runs, the<body>element could be empty. – Hao Wu Commented Mar 4 at 3:00