Chrome扩展无法读取activePage：Manifest V2/V3及DOM访问问题求助

我从未开发过Chrome扩展，现在尝试开发时一直报错，对Manifest V2和V3的差异也搞不清楚。我需要这个扩展能访问当前页面DOM，通过类名获取特定元素的innerText，然后把数据传到popup.html展示给用户。我是JavaScript新手，求帮忙解决！

现有代码的问题分析 #

1. popup脚本位置错误：原popup.html里的script标签放在了html标签外部，Chrome扩展会拒绝执行，必须放在body或head标签内部。
2. 消息监听参数错误：chrome.runtime.onMessage的第一个回调参数是完整的消息对象，不是直接的address值，需要从对象中提取属性。
3. 时机不匹配：content script在页面加载时就发送消息，但此时popup可能还未打开，导致消息直接丢失。
4. Manifest配置缺失：原manifest.json没有指定popup的入口文件，也缺少必要的权限声明。

修正后的完整代码 #

content_script.js #

// 监听来自popup的数据请求
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  // 判断请求类型
  if (message.action === 'getAddress') {
    try {
      // 通过类名获取目标元素的文本
      const address = document.getElementsByClassName("classNameHere")[0].innerText;
      // 向popup返回成功结果
      sendResponse({ success: true, address });
    } catch (err) {
      console.log('No info found');
      // 返回失败信息
      sendResponse({ success: false, error: '未找到目标元素' });
    }
  }
});

popup.html #

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Hello world</title>
  <!-- 给popup添加基础样式，避免显示过窄 -->
  <style>
    body { width: 220px; padding: 12px; margin: 0; }
    #helloworld { margin-top: 10px; }
  </style>
</head>
<body>
  <h1>Test</h1>
  <p id="helloworld">点击扩展获取数据</p>

  <script>
    // 等待popup DOM加载完成
    document.addEventListener('DOMContentLoaded', () => {
      const resultEl = document.getElementById('helloworld');
      // 获取当前活跃的标签页
      chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
        // 向content script发送数据请求
        chrome.tabs.sendMessage(tabs[0].id, { action: 'getAddress' }, (response) => {
          // 根据响应更新页面内容
          if (response?.success) {
            resultEl.innerHTML = response.address;
          } else {
            resultEl.innerHTML = response?.error || '数据获取失败';
          }
        });
      });
    });
  </script>
</body>
</html>

manifest.json #

{
  "name": "Hello World",
  "version": "0.1.0",
  "manifest_version": 3,
  "content_scripts": [
    {
      "matches": ["https://google.com/*"],
      "js": ["content_script.js"]
    }
  ],
  "action": {
    "default_popup": "popup.html",
    "default_title": "Test extension"
  },
  "permissions": ["activeTab"]
}

关键修改说明 #

1. 调整消息交互逻辑：改成popup主动向content script请求数据，解决原代码中popup未打开时消息丢失的问题。
2. 修正脚本位置与参数处理：将popup的script标签移到body内部，正确解析消息对象中的属性。
3. 完善Manifest配置：添加default_popup指定popup入口，声明activeTab权限以获取当前活跃标签页。

Manifest V2与V3核心差异（针对本场景） #

• 后台脚本机制：V2使用background.page或background.scripts，V3必须使用service_worker（本场景无需后台脚本）。
• 权限管控：V3权限更严格，activeTab这类权限会在用户点击扩展时临时授予，无需提前申请永久权限。
• Content Script兼容性：两者的content script写法基本一致，但V3中content script无法直接访问部分chrome.runtime API，消息通信API则保持兼容。

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