Chrome扩展仅在新窗口/刷新时生效问题排查求助

目标网站采用了**单页应用(SPA)架构，通过前端路由（比如History API）更新URL，没有触发完整的页面刷新。Chrome扩展的content script默认只会在页面首次加载（full page load）**时注入执行，这种SPA式的跳转不会重新加载页面，所以content.js不会再次执行，自然没有输出。

方案一：在content.js中监听URL变化，重复执行逻辑 #

直接修改content.js，监听SPA路由变化事件，当URL匹配目标路径时重新运行你的处理逻辑：

// 定义核心处理逻辑
function processParagraphs() {
  console.time('processParagraphs');
  document.querySelectorAll("p").forEach(node => {
    node.style.backgroundColor = "Yellow";
  });
  console.timeEnd('processParagraphs');
}

// 页面初始加载时执行一次
processParagraphs();

// 监听SPA路由的popstate事件（History API跳转）
window.addEventListener('popstate', () => {
  if (window.location.href.startsWith('https://example.com/projects/')) {
    processParagraphs();
  }
});

// 额外监听hash路由变化（如果网站使用hash模式）
window.addEventListener('hashchange', () => {
  if (window.location.href.startsWith('https://example.com/projects/')) {
    processParagraphs();
  }
});

方案二：用Background Service Worker监听导航事件（Manifest V3） #

如果需要更可靠的触发（比如部分SPA不会触发popstate），可以通过后台服务工作者监听页面导航变化，通知content script执行逻辑：

1. 修改manifest.json，添加后台权限和配置：

{
  "manifest_version": 3,
  "name": "Test",
  "version": "0.0.1",
  "description": "",
  "content_scripts": [{
    "matches": ["https://example.com/projects/*" ],
    "js": ["content.js"]
  }],
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["webNavigation"]
}

2. 创建background.js，监听路由更新事件：

chrome.webNavigation.onHistoryStateUpdated.addListener((details) => {
  if (details.url.startsWith('https://example.com/projects/')) {
    // 向当前标签页发送执行指令
    chrome.tabs.sendMessage(details.tabId, { action: 'processParagraphs' });
  }
}, {
  url: [{ urlMatches: 'https://example.com/projects/*' }]
});

3. 修改content.js，接收后台消息并执行逻辑：

// 定义核心处理逻辑
function processParagraphs() {
  console.time('processParagraphs');
  document.querySelectorAll("p").forEach(node => {
    node.style.backgroundColor = "Yellow";
  });
  console.timeEnd('processParagraphs');
}

// 初始加载执行
processParagraphs();

// 监听来自后台的消息
chrome.runtime.onMessage.addListener((message) => {
  if (message.action === 'processParagraphs') {
    processParagraphs();
  }
});

如果目标页面会动态加载内容（比如滚动加载新段落），可以配合MutationObserver监听DOM变化，确保新增元素也能被处理：

function processParagraphs() {
  // 处理现有段落
  document.querySelectorAll("p").forEach(node => {
    node.style.backgroundColor = "Yellow";
  });

  // 监听后续新增的段落元素
  const observer = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
      mutation.addedNodes.forEach(node => {
        if (node.tagName === 'P') {
          node.style.backgroundColor = "Yellow";
        }
        // 处理包含p元素的父节点
        if (node.querySelectorAll) {
          node.querySelectorAll("p").forEach(child => {
            child.style.backgroundColor = "Yellow";
          });
        }
      });
    });
  });

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

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