WebExtension：如何让content_scripts注入扩展窗口后续加载页面？

1. 仅通过manifest.json配置能否注入后续加载的页面？ #

分两种场景判断：

• 普通页面刷新式跳转：可以。只要目标页面符合matches规则，且是完整页面刷新（比如表单提交后的跳转），content scripts会自动注入。如果你的场景没生效，排查以下配置：
  • 确认matches规则覆盖目标页面，例如"*://*/bookmarks/*"或"*://*/*"
  • 检查是否存在exclude_matches/exclude_globs规则意外排除了/bookmarks/success页面
  • Manifest V3 下确保content_scripts结构正确，比如js/css为数组格式，matches数组配置无误
  • 避免将run_at设为过于早期的阶段（默认"document_idle"即可满足大部分场景）
• SPA路由变化（无页面刷新）：不行。这类跳转通过pushState/replaceState实现，页面并未重新加载，content scripts不会自动重新注入，必须通过额外逻辑监听处理。

2. 无法通过manifest配置时，用什么监听器获取页面变化？ #

方案1：监听标签页URL变化（适配页面刷新式跳转） #

在后台脚本中使用tabs.onUpdated事件，监听标签页加载状态与URL变化，手动注入content script：

Manifest V3 配置与代码

// manifest.json
{
  "manifest_version": 3,
  "permissions": ["tabs", "scripting"],
  "host_permissions": ["*://*/*"],
  "background": {
    "service_worker": "background.js"
  }
}

// background.js
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  // 页面加载完成且URL匹配目标路径时执行注入
  if (changeInfo.status === "complete" && tab.url?.includes("/bookmarks/")) {
    chrome.scripting.executeScript({
      target: { tabId },
      files: ["content.js"]
    }).catch(err => console.error("脚本注入失败:", err));
  }
});

Manifest V2 配置与代码

// manifest.json
{
  "manifest_version": 2,
  "permissions": ["tabs", "*://*/*"],
  "background": {
    "scripts": ["background.js"]
  }
}

// background.js
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  if (changeInfo.status === "complete" && tab.url.includes("/bookmarks/")) {
    chrome.tabs.executeScript(tabId, { file: "content.js" });
  }
});

方案2：监听SPA路由变化（适配无页面刷新的跳转） #

对于单页应用的路由切换，需在已注入的content script中捕获路由变化事件：

// content.js
// 路由变化后的业务逻辑处理
function handleRouteChange() {
  if (window.location.pathname === "/bookmarks/success") {
    // 执行你的业务逻辑
    console.log("Success页面路由已加载");
  }
}

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

// 重写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();
};

// 页面初始加载时执行一次逻辑
handleRouteChange();

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