如何让JS脚本在未聚焦Chrome标签页运行？解决Google Meet自动化失效问题

问题核心原因 #

• 原有代码提前缓存了DOM元素列表，5秒/8秒后遍历的是旧列表，未聚焦时页面渲染优先级低，麦克风、摄像头按钮还没加载到DOM中，自然无法点击生效
• 固定延迟时间不可靠，未激活标签页的资源加载、DOM渲染速度比聚焦时慢很多，固定5秒可能还没渲染完按钮
• Chrome对未激活标签页的定时器有节流策略，延迟时间可能被拉长，导致逻辑执行不符合预期

解决方案（从最简单到复杂排序） #

方案1：直接修改PHP重定向链接（最推荐，完全不用改扩展代码）

Google Meet官方支持URL参数直接默认关闭麦克风和摄像头，不管标签页是否聚焦都100%生效：

• 链接后缀加?audio=false&video=false即可默认关闭麦克风和摄像头
• 如果原链接已经带有其他参数，就加&audio=false&video=false

修改后的meet.php代码：

<?php
    /*
        Code to sleep until meet url is available and store it in $url
        ...
        ...
    */
    // 拼接参数
    $connector = str_contains($url, '?') ? '&' : '?';
    // 若PHP版本低于8.0无str_contains函数，替换上面一行为：
    // $connector = strpos($url, '?') !== false ? '&' : '?';
    $url .= $connector . 'audio=false&video=false';
    header('Location: '.$url);
?>

该方案完全规避了JS操作DOM的所有兼容问题。

方案2：扩展代码优化（如果需要保留原有点击逻辑）

第一步：修改manifest.json

缩小匹配范围避免在所有网站运行，同时升级到官方目前要求的Manifest V3版本：

{
    "name": "automatic class joiner",
    "version": "1.0",
    "manifest_version": 3,
    "content_scripts": [{
        "matches": ["https://meet.google.com/*"],
        "js": ["content.js"],
        "run_at": "document_end"
    }],
    "action": {
        "default_popup": "popup.html",
        "default_title": "automatic class joiner"
    }
}

第二步：重写content.js逻辑

去掉固定延迟逻辑，改成轮询查询目标元素，每次查询时重新获取DOM，确保拿到最新的元素列表，同时判断按钮状态避免误操作：

function start() {
    if (location.href.includes("meet.google.com")) {
        // 轮询关闭麦克风和摄像头
        const toggleMedia = setInterval(() => {
            try {
                const items = document.getElementsByTagName('div');
                let micClicked = false, camClicked = false;
                for (let i = 0; i < items.length; i++) {
                    const ariaLabel = items[i].getAttribute("aria-label") || "";
                    // 仅按钮为开启状态时才点击
                    if ((ariaLabel.includes("microphone") && ariaLabel.includes("打开")) || ariaLabel.includes("on")) {
                        items[i].click();
                        micClicked = true;
                    }
                    if ((ariaLabel.includes("camera") && ariaLabel.includes("打开")) || ariaLabel.includes("on")) {
                        items[i].click();
                        camClicked = true;
                    }
                }
                // 两个按钮都操作完成后停止轮询，再找加入按钮
                if (micClicked && camClicked) {
                    clearInterval(toggleMedia);
                    const joinMeet = setInterval(() => {
                        const joinBtn = document.querySelector('div[jsname="Qx7uuf"]');
                        if (joinBtn) {
                            joinBtn.click();
                            clearInterval(joinMeet);
                        }
                    }, 500);
                }
            } catch (err) {
                console.log(err);
            }
        }, 500);
    }
}
start();

优化点说明：

• 用500毫秒一次的轮询代替固定延迟，不管页面加载多慢都能等到元素渲染完成
• 每次轮询都重新获取DOM元素列表，不会用到旧的缓存列表
• 增加按钮状态判断，避免本来是关闭状态反而被误点成开启
• 逻辑顺序更合理，关完媒体再找加入按钮，不会出现还没关完就加入会议的问题

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