如何在任意网页DOM顶部插入笔记节点？脚本失效原因与修复

你的脚本在部分网站失效，主要是两个原因：

• DOM加载时机不对：脚本执行时document.body还没生成，插入节点的操作自然失败
• CSP内容安全策略限制：像Stack Overflow这类网站的CSP禁止内联样式，直接给元素设置style属性会被浏览器拦截

下面是适配所有网站的修复方案：

修复要点 #

1. 确保DOM完全加载后执行代码：通过Tampermonkey参数指定运行时机，避免DOM未就绪的问题
2. 绕过CSP的内联样式限制：使用Tampermonkey提供的GM_addStyleAPI添加样式，替代直接操作元素style属性的方式

完整修复代码 #

// ==UserScript==
// @name         Simple note from QUERY_STRING
// @namespace    http://tampermonkey.net/
// @version      1.1
// @description  Affiche la valeur de 'note' de la query string de l'URL.
// @author       Mévatlavé
// @match        *://*/*
// @grant        GM_addStyle
// @run-at       document-body
// ==/UserScript==

(function() {
    'use strict';

    // 用GM_addStyle添加样式，绕过CSP限制
    GM_addStyle(`
        .query-string-notifier {
            background-color: yellow;
            color: black;
            font-size: 24px;
            font-weight: bold;
            text-align: center;
            padding: 10px;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 9999;
        }
    `);

    function addNoteHeader(noteValue) {
        const header = document.createElement('div');
        header.className = 'query-string-notifier';
        header.textContent = noteValue;

        // 双重保险：确保body存在再插入节点
        if (document.body) {
            document.body.insertBefore(header, document.body.firstChild);
        }
    }

    const urlParams = new URLSearchParams(window.location.search);
    const noteValue = urlParams.get('note');

    if (noteValue) {
        addNoteHeader(noteValue);
    }
})();

代码说明 #

• 添加@grant GM_addStyle：启用Tampermonkey的样式添加API，规避CSP对於内联样式的限制
• 设置@run-at document-body：指定脚本在body节点生成后再执行，从根源避免DOM未就绪的问题
• 样式移至GM_addStyle：不再直接操作元素style属性，完全符合CSP要求
• 增加document.body存在性检查：极端场景下的双重保障，防止节点插入失败

内容的提问来源于stack exchange，提问作者Mévatlavé Kraspek