Chrome扩展脚本在willhaben.at导航时不触发，仅刷新生效的问题

问题分析 #

Willhaben.at属于单页应用（SPA），Manifest V3的内容脚本仅在全新页面加载时执行，而SPA通过pushState/replaceState更新URL和部分DOM内容，不会触发完整页面刷新，导致原有脚本仅在页面刷新或新标签页打开时生效。

解决方案 #

1. 修正Manifest配置 #

确保内容脚本匹配所有Willhaben路径，并在DOM就绪后加载：

{
  "manifest_version": 3,
  "name": "Willhaben Enhancer",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["*://*.willhaben.at/*"],
      "js": ["content.js"],
      "run_at": "document_idle"
    }
  ]
}

2. 编写鲁棒的内容脚本 #

核心思路：监听SPA的URL变化事件，配合MutationObserver确保目标元素出现后再执行DOM操作：

// 封装DOM修改逻辑
function updateAdHeader() {
  const targetHeader = document.querySelector('[data-testid="ad-detail-header"]');
  
  if (targetHeader) {
    targetHeader.innerHTML = 'WORKING ON SPA NAVIGATION!';
    console.log('Ad header updated');
    return;
  }

  // 目标元素未加载，用MutationObserver监听其出现
  const observer = new MutationObserver((mutations) => {
    for (const mutation of mutations) {
      if (mutation.addedNodes.length) {
        const header = document.querySelector('[data-testid="ad-detail-header"]');
        if (header) {
          header.innerHTML = 'WORKING ON SPA NAVIGATION!';
          observer.disconnect(); // 完成后停止监听
          break;
        }
      }
    }
  });

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

// 监听SPA的URL变化（覆盖pushState/replaceState）
function setupRouteListener() {
  const originalPushState = history.pushState;
  const originalReplaceState = history.replaceState;

  // 重写pushState，触发更新逻辑
  history.pushState = function(...args) {
    originalPushState.apply(this, args);
    updateAdHeader();
  };

  // 重写replaceState，触发更新逻辑
  history.replaceState = function(...args) {
    originalReplaceState.apply(this, args);
    updateAdHeader();
  };

  // 监听浏览器前进/后退
  window.addEventListener('popstate', updateAdHeader);
}

// 页面初始加载时执行一次
updateAdHeader();
// 初始化路由监听
setupRouteListener();

为什么之前的尝试失败？ #

• 原有脚本仅在页面首次加载时执行一次，SPA导航时不会重新触发。
• pjax:end是特定框架的事件，Willhaben可能未使用该机制，因此监听无效。
• MutationObserver若未设置subtree: true，无法捕捉到深层DOM树的元素添加。

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