Chrome扩展Manifest V3：监听全场景URL访问的简便方法（更新修正）

核心问题梳理 #

你之前的问题本质是错误的守卫语句拦截了chrome.tabs.onUpdated的正常触发，同时对Manifest V3中不同导航事件的覆盖场景理解不到位。

可行方案与最佳实践 #

1. 修正chrome.tabs.onUpdated的使用逻辑 #

移除错误的守卫语句，这个监听器本身可以覆盖初始加载、页面刷新、常规链接跳转场景，关键是要正确判断触发条件：

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  // 确保页面加载完成且URL匹配目标规则
  if (changeInfo.status === 'complete' && tab.url?.includes('你的目标URL特征')) {
    // 注入JS脚本
    chrome.scripting.executeScript({
      target: { tabId: tabId },
      files: ['inject-script.js']
    });
    // 若需注入CSS
    chrome.scripting.insertCSS({
      target: { tabId: tabId },
      files: ['inject-style.css']
    });
  }
});

2. 补充chrome.webNavigation.onHistoryUpdated处理前端路由变化 #

这个监听器专门覆盖pushState/replaceState导致的URL变化，可以通过参数过滤提前缩小监听范围：

chrome.webNavigation.onHistoryUpdated.addListener((details) => {
  chrome.scripting.executeScript({
    target: { tabId: details.tabId },
    files: ['inject-script.js']
  });
  chrome.scripting.insertCSS({
    target: { tabId: details.tabId },
    files: ['inject-style.css']
  });
}, { url: [{ urlContains: '你的目标URL特征' }] });

3. 避免重复注入的优化 #

为防止同一页面多次触发注入，可维护一个已注入标签页的状态集合：

const injectedTabs = new Set();

// 在tabs.onUpdated中
if (changeInfo.status === 'complete' && tab.url?.includes('你的目标URL特征') && !injectedTabs.has(tabId)) {
  // 执行注入逻辑
  injectedTabs.add(tabId);
  // 标签页关闭时移除标记
  chrome.tabs.onRemoved.addListener((removedTabId) => injectedTabs.delete(removedTabId));
}

// 在webNavigation.onHistoryUpdated中
if (!injectedTabs.has(details.tabId)) {
  // 执行注入逻辑
  injectedTabs.add(details.tabId);
}

为什么需要两个监听器？ #

Manifest V3中没有单一监听器能覆盖所有URL变化场景：

• tabs.onUpdated负责页面加载类的URL变更（初始加载、刷新、常规跳转）
• webNavigation.onHistoryUpdated负责前端路由（pushState/replaceState）的URL变更
  这是当前的标准实践，并非繁琐，而是针对不同场景的精准覆盖。

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