Chrome扩展Manifest V3中如何获取分组标签页的HTML内容

当前通过chrome.windows.getAll和chrome.tabs API只能获取标签页的元数据（如id、title、url等），无法直接访问页面DOM——因为扩展的弹窗/背景页与网页运行在不同的上下文环境，存在隔离机制。要访问标签页的HTML元素，必须使用Content Scripts，它可以注入到目标页面中，直接与页面DOM交互。以下是具体实现步骤：

1. 配置manifest.json #

确保在扩展的配置文件中声明必要的权限和Content Scripts：

{
  "manifest_version": 3,
  "name": "Tab DOM 获取工具",
  "version": "1.0",
  "permissions": ["tabs"],
  "content_scripts": [
    {
      "matches": ["<all_urls>"], // 匹配所有网址，可按需修改为特定域名，如"https://*.example.com/*"
      "js": ["content.js"],
      "run_at": "document_idle" // 页面加载完成后注入
    }
  ],
  "action": {
    "default_popup": "popup.html"
  }
}

2. 编写Content Script（content.js） #

这个脚本会被注入到目标页面，负责获取DOM元素内容并响应扩展的消息请求：

// content.js
// 自定义获取DOM内容的逻辑，可根据需求修改
function collectDomData() {
  // 示例1：获取页面标题
  const pageTitle = document.title;
  
  // 示例2：获取指定id的元素内容
  const targetElement = document.getElementById("target-id");
  const elementContent = targetElement ? targetElement.textContent.trim() : "目标元素不存在";
  
  // 示例3：获取所有p标签的文本内容
  const allParagraphs = Array.from(document.getElementsByTagName("p")).map(p => p.textContent.trim());
  
  return {
    tabUrl: window.location.href,
    pageTitle: pageTitle,
    targetElementContent: elementContent,
    paragraphContents: allParagraphs
  };
}

// 监听来自扩展弹窗/背景页的消息
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === "fetchDomData") {
    const domData = collectDomData();
    sendResponse(domData);
  }
});

3. 修改弹窗脚本（popup.js） #

在原有的代码基础上，添加向标签页发送消息、接收DOM数据的逻辑：

// popup.js
main();

function main() {
  const crmTestButton = document.getElementById('crmTestButton');
  crmTestButton.onclick = () => {
    alertTotalBrowsersOpenned();
  };
}

function alertTotalBrowsersOpenned() {
  chrome.windows.getAll({ populate: true }, listTabsinBrowsers);
}

function listTabsinBrowsers(windows) {
  for (const window of windows) {
    console.log('------- 窗口');
    for (const tab of window.tabs) {
      console.log(`------- 标签页: ${tab.title}`);
      // 向当前标签页发送消息，请求DOM数据
      chrome.tabs.sendMessage(tab.id, { action: "fetchDomData" }, (response) => {
        // 处理可能的错误（如标签页是chrome://等受限页面）
        if (chrome.runtime.lastError) {
          console.error(`无法访问标签页 ${tab.id}: ${chrome.runtime.lastError.message}`);
          return;
        }
        // 打印获取到的DOM数据
        console.log(`标签页 ${tab.id} 的DOM内容:`, response);
        // 这里可根据需求将数据展示到弹窗页面中
      });
    }
  }
}

注意事项 #

• 权限与匹配规则：确保matches字段覆盖你需要访问的网址，若需访问file://协议，需在扩展管理页开启"允许访问文件网址"权限。
• 受限页面：Chrome内置页面（如chrome://settings）、Chrome Web Store页面等无法注入Content Script，请求时会报错，需做好错误处理。
• 异步处理：chrome.tabs.sendMessage是异步操作，必须在回调函数中处理返回的DOM数据。

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