如何让自定义Firefox插件在谷歌页面加载后执行深色主题切换脚本？

问题背景 #

• 需求：自动点击谷歌搜索页的单选按钮以激活深色主题，可用执行脚本：document.querySelector('div[role="dialog"] g-radio-button-group:nth-of-type(1) > div:nth-child(2)').click();
• 问题：GreaseMonkey与TamperMonkey无法运行该脚本，自制Firefox插件后，borderify.js可正常生效（页面显示红色边框），但目标脚本未执行
• 已尝试方案：
  1. 在script.js中使用DOMContentLoaded/load事件监听
  2. 将目标脚本放入borderify.js，仅在重载插件时生效，手动切换为浅色主题后刷新页面无效果

解决方案 #

1. 用MutationObserver监听动态生成的目标元素 #

谷歌搜索页的主题设置弹窗属于动态渲染元素，DOMContentLoaded或load事件触发时，该元素可能还未生成。改用MutationObserver监听DOM变化，直到目标元素出现再执行点击逻辑：

修改script.js内容如下：

// 监听目标元素出现的工具函数
function waitForElement(selector, callback) {
  const observer = new MutationObserver((mutations) => {
    const targetEl = document.querySelector(selector);
    if (targetEl) {
      observer.disconnect(); // 找到元素后停止监听
      callback(targetEl);
    }
  });

  // 监听整个body的子元素变化，包括所有子树
  observer.observe(document.body, {
    childList: true,
    subtree: true
  });
}

// 调用监听函数，执行深色主题点击
waitForElement(
  'div[role="dialog"] g-radio-button-group:nth-of-type(1) > div:nth-child(2)',
  (el) => el.click()
);

2. 确保脚本注入时机正确 #

检查manifest.json的content_scripts配置，明确设置run_at为document_idle（页面基本加载完成后注入），并仅匹配谷歌搜索页，避免不必要的注入：

{
  "manifest_version": 2,
  "name": "谷歌深色主题自动切换",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["*://*.google.com/*"],
      "js": ["script.js"],
      "run_at": "document_idle"
    }
  ]
}

如果需要保留borderify.js的效果，可将其加入js数组："js": ["borderify.js", "script.js"]，确保执行顺序正确。

3. 处理主题弹窗的前置触发逻辑 #

如果目标元素仅在用户手动打开主题设置弹窗后才出现，需要先触发弹窗显示，再监听元素：

function activateDarkTheme() {
  // 先点击主题设置按钮（选择器需根据实际页面调整）
  const themeToggleBtn = document.querySelector('button[aria-label="主题设置"]');
  if (themeToggleBtn) {
    themeToggleBtn.click();
    // 弹窗打开后监听深色主题单选按钮
    waitForElement(
      'div[role="dialog"] g-radio-button-group:nth-of-type(1) > div:nth-child(2)',
      (el) => el.click()
    );
  }
}

// 页面加载后延迟执行，确保基础元素生成
window.addEventListener('load', () => {
  setTimeout(activateDarkTheme, 800);
});

注意：主题设置按钮的选择器需用浏览器开发者工具（F12）获取准确值，避免因页面结构更新失效。

4. 调试排查方法 #

• 打开Firefox开发者工具（F12），切换到「调试器」面板，找到插件的script.js，设置断点查看脚本执行流程
• 在脚本中添加console.log()输出，比如console.log('脚本已执行')、console.log('目标元素：', document.querySelector('xxx'))，通过控制台确认元素是否存在

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