Chrome Extension内容脚本页面跳转后停止执行问题求助

嘿，我明白你遇到的问题了——这种情况在Chrome扩展开发里挺常见的，核心原因是Content Script的生命周期和它所在的页面绑定在一起。当你从词集首页跳转到新页面时，原来的页面会被浏览器销毁，依附在它上面的Content Script自然也会停止运行，新页面如果没配置对应的注入规则，就不会执行你的代码。

下面给你一步步的解决方案：

1. 检查并更新Manifest的Content Script匹配规则 #

首先要确保你的manifest.json里，Content Script的matches数组包含了所有需要运行脚本的页面URL——包括初始的词集首页，以及跳转后的目标页面。

比如Quizlet的词集首页通常是类似https://quizlet.com/<用户ID>/sets/<词集ID>的格式，跳转后的页面如果是词集的学习页面，可能是https://quizlet.com/<用户ID>/sets/<词集ID>/learn。那你的Manifest配置应该改成这样：

{
  "manifest_version": 3,
  "name": "Quizlet自动化工具",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": [
        "https://quizlet.com/*/sets/*",
        "https://quizlet.com/*/sets/*/learn" // 替换成你跳转的目标页面URL模式
      ],
      "js": ["content.js"],
      "run_at": "document_idle" // 确保页面加载完成后再执行
    }
  ]
}

2. 在Content Script里区分页面逻辑 #

接下来修改你的content.js，让它根据当前页面的URL判断该执行哪部分逻辑——首页抓数据输出并跳转，新页面加载后再输出数据：

// content.js
document.addEventListener('DOMContentLoaded', async () => {
  const currentUrl = window.location.href;

  // 处理词集首页逻辑
  if (currentUrl.match(/https:\/\/quizlet\.com\/.*\/sets\/[^\/]+$/)) {
    // 抓取当前页面信息（示例，根据实际页面结构调整）
    const pageData = {
      setTitle: document.querySelector('.SetPage-titleWrapper h1')?.textContent.trim(),
      cardCount: document.querySelector('.SetPage-termsCount')?.textContent.trim()
    };
    console.log('首页抓取数据:', pageData);

    // 执行页面跳转（替换成你的目标页面URL）
    const targetUrl = currentUrl + '/learn';
    window.location.href = targetUrl;
  }

  // 处理跳转后的页面逻辑
  else if (currentUrl.includes('/sets/learn')) {
    // 抓取新页面信息（示例，根据实际页面结构调整）
    const learnPageData = {
      learnModeTitle: document.querySelector('.LearnModeHeader-title')?.textContent.trim(),
      progress: document.querySelector('.ProgressBar-progress')?.style.width
    };
    console.log('新页面抓取数据:', learnPageData);
  }
});

3. 关键原理说明 #

为什么这样就能解决问题？

• 当你从首页跳转时，旧页面的Content Script完成任务后随页面销毁；
• 新页面加载时，因为URL匹配了Manifest里的规则，浏览器会自动注入一份新的Content Script；
• 新的Content Script检测到当前是目标页面，就会执行对应的输出逻辑。

额外注意事项 #

• 修改Manifest后，一定要在Chrome扩展管理页面点击重新加载按钮，确保配置生效；
• 如果目标页面是SPA（单页应用），页面跳转不刷新的话，你需要监听popstate或hashchange事件，而不是依赖页面重新注入；不过Quizlet的页面大多是硬导航，上面的方案应该足够；
• 测试时可以打开Chrome的开发者工具，切换到Console标签，查看两个页面分别输出的日志。

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