Tampermonkey脚本按钮无法在Google.com显示的问题求助

问题根源及修复方案 #

• 匹配规则失效：原脚本仅匹配http://www.google.com，但当前Google默认使用HTTPS协议，导致脚本根本不会触发执行。需更新匹配规则覆盖HTTPS场景。
• DOM事件监听时机偏差：若脚本在DOMContentLoaded事件触发后才运行，监听回调不会执行。需增加判断逻辑，确保无论脚本何时运行都能创建按钮。
• 按钮样式易被覆盖：默认按钮样式过于朴素，可能被Google页面元素遮挡，需增强样式提升可见性。

修正后的完整脚本 #

// ==UserScript==
// @name         Get DOM Info
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Button at top of page to retrieve information from the DOM and copy to clipboard
// @author       name
// @match        http://www.google.com/*
// @match        https://www.google.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    function getInfoFromDOM() {
        var pageTitle = document.title;
        return 'Page Title: ' + pageTitle;
    }

    function addDOMInfoButton() {
        var button = document.createElement('button');
        button.innerHTML = 'Copy DOM Info';
        // 增强样式确保按钮显眼且不被覆盖
        button.style.position = 'fixed';
        button.style.top = '10px';
        button.style.left = '10px';
        button.style.zIndex = '99999';
        button.style.padding = '8px 16px';
        button.style.backgroundColor = '#4285F4';
        button.style.color = 'white';
        button.style.border = 'none';
        button.style.borderRadius = '4px';
        button.style.fontSize = '14px';
        button.style.cursor = 'pointer';
        button.style.boxShadow = '0 2px 4px rgba(0,0,0,0.2)';

        button.addEventListener('click', function() {
            var domInfo = getInfoFromDOM();
            var textarea = document.createElement('textarea');
            textarea.value = domInfo;
            // 隐藏临时文本域避免干扰页面
            textarea.style.position = 'absolute';
            textarea.style.left = '-9999px';
            document.body.appendChild(textarea);
            textarea.select();
            document.execCommand('copy');
            document.body.removeChild(textarea);
            alert('DOM Info copied to clipboard:\n' + domInfo);
        });

        document.body.appendChild(button);
    }

    // 兼容DOM加载状态，确保按钮能被创建
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', addDOMInfoButton);
    } else {
        addDOMInfoButton();
    }
})();

关键修改说明 #

1. 扩展@match规则，同时支持HTTP和HTTPS的Google页面，保证脚本触发。
2. 增加DOM加载状态判断，避免因脚本运行时机滞后导致按钮不生成。
3. 优化按钮样式，添加背景色、阴影等提升辨识度，提高层级避免被页面元素覆盖。
4. 临时文本域设置绝对定位隐藏，消除对页面布局的影响。

内容的提问来源于stack exchange，提问作者stackproton