Chrome扩展无法访问DOM求助：获取页面元素内容显示在弹窗

你的核心问题是popup脚本无法直接访问当前网页的DOM——popup有独立的运行上下文，和网页的DOM环境完全隔离。以下是修正后的实现方案：

1. 修正 script.js #

替换原代码为以下内容，通过Chrome的scripting.executeScript API注入脚本到当前网页上下文，获取元素内容后返回给popup：

chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
  const activeTabId = tabs[0].id;
  // 注入脚本到当前活动标签页，执行DOM查询
  chrome.scripting.executeScript({
    target: {tabId: activeTabId},
    func: () => {
      // 这里的代码运行在网页的上下文里，可以直接访问网页DOM
      const targetElement = document.querySelector('.className');
      return targetElement ? targetElement.innerText : '未找到目标元素';
    }
  }, (results) => {
    // 将返回结果更新到popup的DOM中
    if (results?.length) {
      document.getElementById('test').innerText = results[0].result;
    }
  });
});

2. 清理 manifest.json（可选） #

如果你的content_script.js没有实际逻辑，可以删除content_scripts配置项，避免因文件缺失报错：

{
    "name": "Name",
    "description": "Description",
    "version": "1.0",
    "manifest_version": 3,
    "permissions": ["storage", "activeTab", "scripting", "tabs"],
    "host_permissions": [
      "*://*.example.com/*"
    ],
    "action": {
      "default_popup": "popup.html"
    }
}

关键原理说明 #

• popup的脚本运行在独立的隔离环境，只能访问自身的DOM，无法直接操作网页DOM。
• 通过chrome.scripting.executeScript注入的代码会运行在当前网页的上下文，可直接访问网页的DOM结构，执行后将结果返回给popup。
• 已配置的activeTab和scripting权限是实现此功能的必要条件。

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