Cómo insertar un nodo de nota en el DOM en la parte superior de cualquier página web

Agregar un nodo que muestre información de una cadena de consulta en una página web puede ser un desafío en algunos casos. En este artículo, abordaremos cómo implementar un script que inserte un cuadro de texto en la parte superior de la página web si la URL contiene un parámetro específico llamado note.

Problema presentado

El código que se presenta intenta extraer el valor de note de la cadena de consulta de la URL y mostrarlo en un cuadro de texto. Sin embargo, el script no funciona en todos los sitios, lo que plantea la siguiente pregunta: ¿la causa es un problema relacionado con CSP (Content Security Policy) o el tiempo de carga del DOM?

Análisis del Código

// ==UserScript==
// @name         Simple note from QUERY_STRING
// @namespace    http://tampermonkey.net/
// @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);
    }
})();

Problemas Comunes

1. CSP (Content Security Policy): Algunos sitios web aplican políticas de seguridad que restringen la ejecución de scripts no confiables. Esto puede causar que tu script no funcione en ciertos dominios.

2. Carga del DOM: Si el script se ejecuta antes de que el DOM esté completamente cargado, puede que no encuentre el body y no pueda insertar el nodo.

Soluciones y Alternativas

Para asegurarse de que el script funcione en la mayoría de los sitios web, puedes considerar las siguientes soluciones:

1. Esperar a que el DOM esté listo: Modifica el script para que se ejecute una vez que el DOM esté completamente cargado. Por ejemplo, puedes envolver tu código en un DOMContentLoaded:

   document.addEventListener('DOMContentLoaded', function() {
       const urlParams = new URLSearchParams(window.location.search);
       const noteValue = urlParams.get('note');
   
       if (noteValue) {
           addNoteHeader(noteValue);
       }
   });

2. Revisar la política CSP: Si el problema persiste en un sitio particular, investiga si hay restricciones CSP que bloquean el script. Puedes necesitar ayuda de extensiones de navegador que permiten scripts para sobrepasar esas restricciones.

Conclusión

Insertar un nodo de nota en una página web a partir de un parámetro en la URL es una tarea relativamente sencilla, pero puede verse afectada por políticas de seguridad y el estado de carga del DOM. Al aplicar los consejos mencionados, deberías ser capaz de hacer que tu script funcione en una variedad más amplia de sitios web.