Chrome扩展Content Script在URL哈希变更时失效问题求助

1. 直接监听哈希变更事件 #

别死磕MutationObserver，浏览器本身提供了hashchange事件，专门捕获URL哈希的变化，精准对应路由切换场景：

window.addEventListener('hashchange', () => {
  // 哈希变更后重新执行自动填充逻辑
  initAutoFill();
});

再加上load事件，确保页面首次加载时也能触发逻辑：

// 页面首次加载执行
window.addEventListener('load', initAutoFill);
// 哈希切换时执行
window.addEventListener('hashchange', initAutoFill);

2. 优化MutationObserver的监听配置 #

如果之前的Observer没抓到DOM变化，大概率是监听范围或配置不合理。调整为监听整个文档子树，覆盖节点增删和属性变化：

const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    // 检查是否有目标表单/选择框节点被添加
    if (mutation.addedNodes.length > 0) {
      const targetElement = document.querySelector('#你的目标元素选择器');
      if (targetElement) {
        initAutoFill();
        // 若只需执行一次，可在此断开Observer
        // observer.disconnect();
      }
    }
  });
});

observer.observe(document.body, {
  childList: true,
  subtree: true,
  attributes: true
});

注意替换选择器为目标页面中表单/选择框的真实选择器，避免误触发。

3. 检查Content Script的注入规则 #

打开manifest.json，确保matches包含哈希路由的路径，否则脚本可能无法覆盖后续路由页面：

"content_scripts": [
  {
    "matches": [
      "https://solpanelsfasten.welandstal.com/*",
      "https://solpanelsfasten.welandstal.com/#/*"
    ],
    "js": ["adress.js"],
    "run_at": "document_idle"
  }
]

另外，单页应用路由切换后Content Script不会重新注入，所有逻辑必须在同一个脚本内通过事件监听处理，不要依赖脚本重新加载。

4. 结合两种监听方式，覆盖所有场景 #

把hashchange和MutationObserver结合使用，既捕获路由切换，又监听DOM节点变化，避免遗漏触发时机：

function initAutoFill() {
  // 这里编写你的自动填充逻辑，示例如下：
  const addressInput = document.querySelector('#address');
  if (addressInput) addressInput.value = '测试地址';
  const roofSelect = document.querySelector('#roof-type');
  if (roofSelect) roofSelect.value = 'flat';
}

// 首次加载触发
window.addEventListener('load', initAutoFill);
// 哈希切换触发
window.addEventListener('hashchange', initAutoFill);
// DOM变化触发
const observer = new MutationObserver(() => initAutoFill());
observer.observe(document.body, { childList: true, subtree: true });

额外提醒 #

• 避免重复填充：给已完成填充的元素添加自定义属性（如data-filled="done"），执行逻辑前先检查该属性，防止重复操作。
• 调试时用Chrome开发者工具的Sources面板，给Content Script加断点，查看哈希变更时脚本是否触发、目标DOM节点是否存在。

内容的提问来源于stack exchange，提问作者Mathias Halén