Chrome extension脚本跳转后失效 如何遍历链接列表完成数据解析

你遇到的跳转后脚本失效的核心原因是content script仅作用于当前注入的页面，页面刷新/跳转后旧的content script会被销毁，无法跨页面维持任务状态。完整实现依赖扩展的background service worker做全局任务调度，配合content script做单页面数据解析，逻辑拆分如下：

• 任务队列、进度、爬取结果全部存在chrome.storage.local做持久化，避免service worker被回收、页面跳转导致数据丢失
• background负责控制tab跳转、更新任务进度、接收解析结果
• content script仅负责当前页面的DOM解析，完成后将结果发回background触发下一轮迭代

目前Chrome扩展已强制要求使用V3版本，基础配置示例如下：

{
  "manifest_version": 3,
  "name": "批量页面解析工具",
  "version": "1.0",
  "permissions": ["storage", "tabs", "scripting"],
  "host_permissions": ["<all_urls>"], // 可替换为你要爬取的指定站点
  "background": {
    "service_worker": "background.js"
  },
  "action": {},
  "content_scripts": [
    {
      "matches": ["<all_urls>"], // 可替换为指定站点匹配规则
      "js": ["content.js"]
    }
  ]
}

background.js 任务调度逻辑 #

// 初始化任务队列，可根据你的需求修改传入的链接列表
const initTask = async (urlList) => {
  await chrome.storage.local.set({
    taskList: urlList,
    currentIndex: 0,
    resultList: []
  })
  // 跳转到第一个任务链接
  await chrome.tabs.update({url: urlList[0]})
}

// 监听扩展图标点击，启动任务
chrome.action.onClicked.addListener(async () => {
  // 示例链接列表，可替换为你自己的输入源
  const targetUrls = ["https://example.com/page1", "https://example.com/page2", "https://example.com/page3"]
  await initTask(targetUrls)
})

// 监听content script发回的解析结果
chrome.runtime.onMessage.addListener(async (message, sender, sendResponse) => {
  if (message.type === 'PARSE_COMPLETE') {
    const { taskList, currentIndex, resultList } = await chrome.storage.local.get(['taskList', 'currentIndex', 'resultList'])
    // 存储当前页面解析结果
    resultList.push(message.data)
    const nextIndex = currentIndex + 1
    // 判断是否还有未处理的任务
    if (nextIndex < taskList.length) {
      await chrome.storage.local.set({
        currentIndex: nextIndex,
        resultList: resultList
      })
      // 跳转下一个链接，可调整延迟时长避免触发反爬
      setTimeout(() => {
        chrome.tabs.update({url: taskList[nextIndex]})
      }, 2000)
    } else {
      // 全部任务完成，存储最终结果
      await chrome.storage.local.set({resultList: resultList})
      console.log('全部解析完成，结果：', resultList)
      // 可在这里添加导出结果、通知用户的逻辑
    }
  }
})

content.js 页面解析逻辑 #

// 页面加载完成后执行解析
window.addEventListener('load', () => {
  // 替换为你需要解析的DOM逻辑，示例为提取页面标题
  const parseData = {
    title: document.title,
    url: window.location.href
    // 补充你需要提取的其他字段
  }
  // 发送结果到background
  chrome.runtime.sendMessage({
    type: 'PARSE_COMPLETE',
    data: parseData
  })
})

• 如果需要爬取的站点不固定，可移除manifest中content_scripts的配置，在background跳转页面后调用chrome.scripting.executeScript动态注入解析脚本，灵活性更高
• 针对动态渲染的单页应用，可在content script中使用MutationObserver监听目标DOM元素生成后再执行解析，避免拿到空数据
• 可根据站点反爬规则调整跳转间隔，避免请求被拦截

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