Chrome扩展popup弹窗如何访问当前页面的HTML信息？

不存在能让popup直接访问目标页面HTML的快速修复方案。你的报错原因判断完全正确：popup弹窗属于扩展独立的运行上下文，有自己单独的DOM树，你在popup关联的JS中调用document相关API时，操作的永远是popup自身的HTML结构，根本无法触及当前打开的网页内容，所以document.querySelector('[data-client-id]')会返回null，最终抛出读取getAttribute的类型错误。你在浏览器控制台运行代码能正常生效，是因为控制台默认绑定的是当前网页的执行上下文，和popup的上下文完全隔离。

你这个需求不需要复杂改造，用Chrome扩展提供的动态脚本注入能力就能实现，全程只需要改两处：

1. 首先在扩展的manifest.json中补充两个必要权限（基于官方教程默认的Manifest V3规范）：

{
  "manifest_version": 3,
  "name": "你的扩展名",
  "version": "1.0",
  "action": {
    "default_popup": "popup.html"
  },
  // 新增下面这行权限配置
  "permissions": ["activeTab", "scripting"]
}

2. 替换你原来popup的JS代码，把DOM查询逻辑放到按钮点击回调中，通过动态注入的方式在目标页面上下文里执行查询，拿到值之后再拼接URL打开新标签：

// popup.js
const button = document.getElementById("btn1");
button.addEventListener("click", async () => {
  // 获取当前窗口激活的标签页（也就是你正在浏览的目标页面）
  const [activeTab] = await chrome.tabs.query({ active: true, currentWindow: true });
  // 向目标页面注入脚本，在页面上下文中执行DOM查询
  const [injectResult] = await chrome.scripting.executeScript({
    target: { tabId: activeTab.id },
    func: () => {
      // 该函数内的代码运行在目标网页中，可以直接访问页面DOM
      const clientEl = document.querySelector('[data-client-id]');
      return clientEl ? clientEl.getAttribute("data-client-id") : null;
    }
  });

  const clientId = injectResult.result;
  if (!clientId) {
    alert("当前页面未找到有效client ID");
    return;
  }
  // 拼接URL打开新标签
  chrome.tabs.create({ url: `https://www.huggy.app/panel/contacts/${clientId}` });
});

如果后续你需要扩展更多和网页交互的逻辑，也可以用常驻内容脚本（Content Script）的方式实现：

• 在manifest中配置content_scripts规则，匹配你需要操作的站点，提前把DOM操作的JS注入到对应页面
• 点击popup按钮时，通过chrome.tabs.sendMessage向当前页面的内容脚本发送消息
• 内容脚本收到消息后查询DOM拿到client ID，再通过消息回调把值传回popup
• popup拿到返回值后拼接URL打开新标签
  这种方式适合交互逻辑复杂的场景，你当前的简单需求用上面的动态注入方案就足够，不需要额外新建内容脚本文件。

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