Chrome扩展中点击按钮后如何等待页面导航完成并提取数据？

兄弟，我看你这问题是把Chrome扩展里内容脚本和背景脚本的逻辑搞混了，难怪点击按钮后后面的代码根本跑不起来！

你当前的代码有个核心问题：如果这段代码是写在内容脚本里的，当你点击按钮触发页面跳转后，原来的内容脚本会被浏览器销毁——因为页面都换了，旧页面的脚本环境自然就没了，所以你await之后的document.querySelectorAll根本没机会在新页面执行。

给你梳理下正确的解决思路，分两步走，把导航监听和数据提取的逻辑拆分到背景脚本和内容脚本里：

核心逻辑拆分 #

• 内容脚本：负责在原页面点击按钮，然后通知背景脚本开始监听页面导航
• 背景脚本：监听目标标签页的导航状态，等新页面完全加载后，注入内容脚本来提取数据

具体代码实现 #

1. 背景脚本（background.js） #

这里负责监听导航和触发数据提取：

chrome.runtime.onMessage.addListener(async (message, sender, sendResponse) => {
  // 收到内容脚本的通知，开始监听导航
  if (message.action === "waitForNavigationAndExtract") {
    const targetTabId = sender.tab.id;
    
    // 定义标签页更新的监听函数
    const tabUpdateListener = (updatedTabId, info) => {
      // 确认是目标标签页，且页面完全加载完成
      if (updatedTabId === targetTabId && info.status === 'complete') {
        // 移除监听，避免重复触发
        chrome.tabs.onUpdated.removeListener(tabUpdateListener);
        
        // 向新页面注入数据提取的脚本
        chrome.scripting.executeScript({
          target: { tabId: targetTabId },
          func: extractAuctionDates // 这个函数会在新页面的环境里执行
        });
      }
    };
    
    // 开始监听标签页更新
    chrome.tabs.onUpdated.addListener(tabUpdateListener);
  }
});

// 数据提取函数，会在目标页面的内容脚本环境中运行
function extractAuctionDates() {
  const auctionDates = document.querySelectorAll('div.CALSELF, div.CALSELT');
  const nextAuctionDates = [];
  
  auctionDates.forEach(auctionDate => {
    // 补全你原来的判断逻辑，比如检查可用的拍卖日期
    const availableIndicator = auctionDate?.querySelector('span.CALA');
    if (availableIndicator) {
      nextAuctionDates.push(auctionDate);
    }
  });
  
  // 这里可以把提取的数据发送回背景脚本，或者存储起来
  chrome.runtime.sendMessage({
    action: "extractedAuctionData",
    data: nextAuctionDates.map(item => item.textContent.trim())
  });
}

2. 内容脚本（content-script.js） #

负责在原页面点击按钮，并通知背景脚本：

// 找到你要点击的按钮，替换成实际的选择器
const targetButton = document.querySelector('your-button-selector');
if (targetButton) {
  // 点击按钮
  targetButton.click();
  
  // 通知背景脚本开始监听页面导航
  chrome.runtime.sendMessage({ action: "waitForNavigationAndExtract" });
}

3. 权限配置（manifest.json） #

别忘了在扩展的清单文件里添加必要的权限：

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0",
  "permissions": ["tabs", "scripting"],
  "content_scripts": [
    {
      "matches": ["*://目标网站域名/*"], // 替换成你操作的网站域名
      "js": ["content-script.js"]
    }
  ],
  "background": {
    "service_worker": "background.js"
  }
}

为什么你的原代码不行？ #

再回头说下你原来的代码问题：你在内容脚本里用chrome.tabs.onUpdated监听，然后await这个Promise，但当页面跳转后，原来的内容脚本已经被销毁了，这个Promise永远不会在新页面里resolve，更别说执行后面的document.querySelectorAll了——因为新页面的内容脚本是全新的，和旧页面的脚本没关系。

备注：内容来源于stack exchange，提问作者Daniel Sanchez