Chrome扩展content.js仅触发一次，URL参数变更时如何重复执行？

你的理解有误，问题根源不是URL参数后没有斜杠，而是这类网站通常采用单页应用（SPA）架构：当URL参数变化时，页面并没有真正刷新，只是通过前端JavaScript更新页面内容和浏览器历史记录，Chrome不会重新注入内容脚本，所以你的content.js只会在首次加载页面时执行一次。

下面提供两种适配SPA场景的解决方案，按需选择：

方法一：通过后台Service Worker监听URL变化并触发脚本 #

利用webNavigation权限监听URL变化，当匹配到目标模式时，主动向标签页发送消息触发爬取逻辑。

步骤1：更新manifest.json #

添加后台Service Worker配置，并补充必要权限：

{
  "manifest_version": 3,
  "name": "Scraper",
  "description": "Scrape product data from the active tab.",
  "version": "1.0",
  "icons": {
    "16": "abc.png",
    "32": "abc.png",
    "48": "abc.png",
    "128": "abc.png"
  },
  "permissions": ["webNavigation", "scripting"],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "js": ["scripts/content.js"],
      "matches": ["https://*.example.co.uk/search?*"],
      "run_at": "document_idle"
    }
  ]
}

步骤2：创建background.js #

监听SPA导航触发的历史记录更新事件，匹配URL后通知content.js执行爬取：

chrome.webNavigation.onHistoryStateUpdated.addListener((details) => {
  if (/^https:\/\/.*\.example\.co\.uk\/search\?/.test(details.url)) {
    chrome.tabs.sendMessage(details.tabId, { action: "scrape" });
  }
}, { url: [{ urlMatches: "https://*.example.co.uk/search?*" }] });

步骤3：修改content.js #

接收后台消息，触发爬取函数：

function scrapProductsFromSearch() {
  console.log("Scrapped the page");
}

// 首次加载时执行一次
scrapProductsFromSearch();

// 监听后台消息，URL变化时再次执行
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === "scrape") {
    scrapProductsFromSearch();
  }
});

方法二：在Content Script内监听URL变化 #

直接在content.js中监听浏览器历史记录或页面内容变化，自主触发爬取逻辑，无需依赖后台。

修改content.js #

function scrapProductsFromSearch() {
  console.log("Scrapped the page");
}

// 首次加载执行
scrapProductsFromSearch();

// 监听历史记录变化（SPA导航常用）
window.addEventListener("popstate", () => {
  if (/^https:\/\/.*\.example\.co\.uk\/search\?/.test(window.location.href)) {
    scrapProductsFromSearch();
  }
});

// 监听hash变化（适配部分hash路由场景）
window.addEventListener("hashchange", () => {
  if (/^https:\/\/.*\.example\.co\.uk\/search\?/.test(window.location.href)) {
    scrapProductsFromSearch();
  }
});

// 可选：用MutationObserver监听页面内容更新，覆盖特殊SPA场景
const observer = new MutationObserver(() => {
  if (/^https:\/\/.*\.example\.co\.uk\/search\?/.test(window.location.href)) {
    scrapProductsFromSearch();
  }
});
observer.observe(document.body, { childList: true, subtree: true });

• 方法一适合需要全局控制的场景，方法二更轻量化；
• 使用MutationObserver建议添加防抖逻辑，避免频繁触发爬取；
• 测试时需重新加载扩展，并勾选Chrome开发者工具的"Disable cache"选项，避免缓存干扰。

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