Chrome扩展无法在页面加载时自动获取innerText问题求助

问题根源 #

1. popup.js中的chrome.tabs.onUpdated监听仅在弹窗打开时生效，关闭弹窗后监听会被移除，无法实现持续自动触发。
2. 原代码使用了Manifest V2的chrome.tabs.executeScript API，在Manifest V3中需替换为chrome.scripting.executeScript。
3. 自动触发逻辑应放在后台Service Worker（background.js）中，确保能持续监听标签页状态变化。

修改后的代码 #

background.js（核心自动触发逻辑） #

chrome.tabs.onUpdated.addListener(async (tabId, changeInfo, tab) => {
  // 仅在页面加载完成且非Chrome内部页面时执行
  if (changeInfo.status === "complete" && !tab.url.startsWith('chrome://')) {
    try {
      await chrome.scripting.executeScript({
        target: { tabId: tabId },
        func: getPageText
      });
    } catch (err) {
      console.error("注入脚本失败:", err);
    }
  }
});

function getPageText() {
  const websiteWords = document.body.innerText;
  console.log("页面文本内容:", websiteWords);
  // 可在此添加文本后续处理逻辑（如存储、分析等）
}

popup.js（保留手动触发逻辑，移除无效监听） #

const getWords = document.getElementById("getWords");

getWords.addEventListener("click", async () => {
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  
  try {
    await chrome.scripting.executeScript({
      target: { tabId: tab.id },
      func: getPageText,
    });
  } catch (err) {
    console.error("手动触发脚本失败:", err);
  }
});

function getPageText() {
  const websiteWords = document.body.innerText;
  console.log("页面文本内容:", websiteWords);
}

manifest.json（确认权限配置） #

{
  "manifest_version": 3,
  "name": "页面文本自动抓取",
  "version": "1.0",
  "permissions": [
    "activeTab",
    "webNavigation",
    "storage",
    "scripting"
  ],
  "host_permissions": [
    "https://*/*",
    "http://*/*"
  ],
  "background": {
    "service_worker": "background.js",
    "type": "module"
  },
  "action": {
    "default_popup": "popup.html"
  }
}

关键说明 #

• 将自动触发逻辑移至background.js的Service Worker中，确保后台持续监听标签页更新事件，不受弹窗状态影响。
• 添加tab.url判断，避免向Chrome内部页面（如chrome://newtab）注入脚本，这类页面无权限访问。
• 使用async/await处理异步操作并添加错误捕获，便于调试脚本注入问题。
• 扩展host_permissions包含http/https协议，若需处理本地文件，可添加"file:///*"。

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