如何通过Tampermonkey脚本让谷歌搜索释义页面自动展开？

问题根源 #

1. 类名选择错误：document.getElementsByClassName()仅支持单个类名参数，无法直接传入多个空格分隔的类名（如"S8ee5 CwbYXd wHYlTd vk_arc"），这会导致无法定位目标元素。
2. 页面加载时机不匹配：谷歌搜索结果为动态渲染，window.onload触发时目标元素可能还未生成。
3. 仅修改属性无效：单纯设置aria-expanded="true"无法触发谷歌内部的展开逻辑，模拟点击按钮才是可靠的触发方式。

修正后的脚本 #

// ==UserScript==
// @name         自动展开谷歌释义
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  自动展开谷歌搜索"meaning"关键词结果的释义扩展区域
// @author       You
// @match        https://www.google.com/search?q=meaning+*
// @run-at       document-idle
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 用CSS选择器匹配多类名元素
    const expandBtn = document.querySelector('div.S8ee5.CwbYXd.wHYlTd.vk_arc[aria-expanded="false"]');
    
    if (expandBtn) {
        // 模拟真实点击，触发展开逻辑
        expandBtn.click();
    } else {
        // 初始未找到元素时，用MutationObserver监听动态加载
        const observer = new MutationObserver((mutations) => {
            const targetBtn = document.querySelector('div.S8ee5.CwbYXd.wHYlTd.vk_arc[aria-expanded="false"]');
            if (targetBtn) {
                targetBtn.click();
                observer.disconnect(); // 找到元素后停止监听
            }
        });
        
        // 监听body下所有子元素的变化
        observer.observe(document.body, {
            childList: true,
            subtree: true
        });
    }
})();

关键改进点 #

• 使用document.querySelector()通过多类名CSS选择器定位元素（类名间用.分隔）。
• 设置@run-at document-idle确保脚本在页面核心内容加载完成后执行。
• 优先尝试直接点击元素，若未找到则通过MutationObserver监听动态生成的元素，避免错过加载时机。
• 模拟真实点击操作，触发谷歌内部的展开事件，而非仅修改属性。

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