Chrome扩展Manifest的matches规则跳转URL时失效问题咨询

这是因为很多现代网站采用了单页应用（SPA）架构：当你直接在地址栏输入URL时，浏览器会发起完整的页面请求，触发Chrome扩展的Content Script注入逻辑；但从其他页面通过超链接跳转时，网站并没有重新加载整个页面，只是通过前端路由（比如History API、hash路由）更新页面内容，此时页面的document对象并没有被重新创建，Chrome也就不会再次注入你的home.js脚本。

这里提供几种实用的解决思路，你可以根据目标网站的路由机制选择：

1. 在Content Script中监听路由变化 #

针对不同的路由类型，添加对应的监听逻辑，确保路由切换时能触发脚本：

// home.js 中新增以下代码
function handleRouteChange() {
  // 这里执行你原本要在页面加载时运行的逻辑
  console.log('页面路由更新，执行脚本逻辑');
  // 比如重新初始化你的功能模块
}

// 页面首次加载时先执行一次
handleRouteChange();

// 监听hash路由变化（URL带#的场景）
window.addEventListener('hashchange', handleRouteChange);

// 监听浏览器前进/后退触发的路由变化
window.addEventListener('popstate', handleRouteChange);

// 重写History API的pushState/replaceState，捕获手动触发的路由跳转
const originalPushState = history.pushState;
history.pushState = function(...args) {
  originalPushState.apply(this, args);
  handleRouteChange();
};

const originalReplaceState = history.replaceState;
history.replaceState = function(...args) {
  originalReplaceState.apply(this, args);
  handleRouteChange();
};

2. 用Chrome扩展的webNavigation API监听路由更新 #

通过后台脚本监听网站的路由变化，再通知Content Script执行逻辑：
首先更新你的manifest配置，添加后台脚本和权限：

{
  "manifest_version": 2,
  "name": "HelloWorld",
  "version": "0.1",
  "content_scripts": [
    {
      "matches": ["*://www.mywebsite.com/*"],
      "js": ["home.js"],
      "run_at": "document_start"
    }
  ],
  "background": {
    "scripts": ["background.js"]
  },
  "permissions": ["webNavigation", "*://www.mywebsite.com/*"]
}

然后在background.js中添加监听：

chrome.webNavigation.onHistoryStateUpdated.addListener(
  (details) => {
    // 向目标页面的Content Script发送消息
    chrome.tabs.sendMessage(details.tabId, { action: 'routeChanged' });
  },
  { url: [{ hostContains: 'mywebsite.com' }] }
);

最后在home.js中接收消息并触发逻辑：

// 初始化首次加载的逻辑
initScript();

// 接收后台脚本的消息
chrome.runtime.onMessage.addListener((request) => {
  if (request.action === 'routeChanged') {
    initScript();
  }
});

function initScript() {
  // 你的核心脚本逻辑
}

3. 特殊场景：监听DOM变化 #

如果目标网站的路由切换没有触发常规的路由事件，可以用MutationObserver监听页面核心DOM的变化，以此判断页面是否切换：

// 监听页面主容器的变化
const targetNode = document.getElementById('main-container'); // 替换成目标网站的核心容器ID
const observerOptions = { childList: true, subtree: true };

const observer = new MutationObserver((mutations) => {
  // 当DOM变化时，判断是否需要重新执行脚本
  if (mutations.length > 0) {
    handleRouteChange();
  }
});

observer.observe(targetNode, observerOptions);

• 确保你的脚本逻辑是可重入的，多次执行不会导致重复绑定事件、重复创建DOM元素等问题；
• 如果目标网站的路由机制比较特殊，可能需要结合多种监听方式来覆盖所有场景。

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