如何从普通网页访问Chrome扩展的DOM？

首先明确：只有当第三方扩展主动将DOM元素注入到当前网页的DOM树中时，网页才能访问这些元素；如果是扩展自身的独立页面（如弹出页、选项页、侧边栏），网页无法直接访问，这是Chrome的安全隔离机制限制，无法绕过。

可行场景：扩展向网页注入了DOM元素 #

如果第三方扩展通过内容脚本往网页里添加了可见UI（比如悬浮按钮、工具栏组件等），这些元素属于网页的DOM树，网页的JavaScript可以直接访问并监听其事件。

示例代码 #

假设扩展注入了一个类名为extension-floating-btn的按钮，网页中可以这样监听它的事件：

// 方案1：等待DOM加载后查找元素
document.addEventListener('DOMContentLoaded', () => {
  const targetBtn = document.querySelector('.extension-floating-btn');
  if (targetBtn) {
    bindButtonEvents(targetBtn);
  } else {
    // 方案2：用MutationObserver监听元素动态添加
    const observer = new MutationObserver((mutations) => {
      for (const mutation of mutations) {
        for (const node of mutation.addedNodes) {
          if (node.nodeType === Node.ELEMENT_NODE && node.classList.contains('extension-floating-btn')) {
            bindButtonEvents(node);
            observer.disconnect(); // 找到目标后停止监听
            return;
          }
        }
      }
    });
    // 监听body下所有子元素变化
    observer.observe(document.body, { childList: true, subtree: true });
  }
});

// 绑定事件的工具函数
function bindButtonEvents(btn) {
  btn.addEventListener('click', (e) => {
    console.log('扩展按钮被点击', e);
    // 在这里执行你需要的逻辑
  });

  // 也可以监听其他事件，比如鼠标悬停
  btn.addEventListener('mouseover', () => {
    console.log('鼠标悬停在扩展按钮上');
  });
}

不可行场景：扩展的独立页面 #

如果目标DOM属于扩展自身的独立页面（比如点击扩展图标弹出的窗口、扩展的选项页），网页无法直接访问这些页面的DOM。Chrome的安全模型会将网页和扩展的上下文完全隔离，避免网页恶意操作扩展，这种情况下没有合法的绕过方式，除非第三方扩展主动提供了通信接口（但你无法控制该扩展）。

注：你提到的消息传递是Chrome官方支持的跨上下文通信方式，但如果扩展没有实现接收网页消息的逻辑，这种方式也无法生效。

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