如何在Chrome和Firefox扩展中访问网页Shadow DOM元素

针对你提供的带有closed Shadow Root的页面结构，以下是在Chrome和Firefox扩展中访问目标元素的具体实现方法：

Chrome扩展实现 #

Chrome提供了chrome.dom.openOrClosedShadowRoot API，专门用于扩展访问元素的open/closed Shadow Root。你可以在content script中直接调用该API：

// 查找宿主元素parentTag
const parentElement = document.querySelector('parentTag');
if (parentElement) {
  // 获取Shadow Root（兼容open和closed类型）
  const shadowRoot = chrome.dom.openOrClosedShadowRoot(parentElement);
  if (shadowRoot) {
    // 在Shadow Root内查找目标元素
    const shadowTag = shadowRoot.getElementById('textid');
    if (shadowTag) {
      console.log('Shadow元素文本内容:', shadowTag.textContent);
      // 这里可以添加你的业务逻辑，比如修改内容、监听事件等
    } else {
      console.log('未找到id为textid的shadowTag元素');
    }
  } else {
    console.log('该parentTag元素不存在Shadow Root');
  }
} else {
  console.log('未找到parentTag元素');
}

Firefox扩展实现 #

Firefox则直接为DOM元素提供了openOrClosedShadowRoot属性，用法更简洁：

// 查找宿主元素parentTag
const parentElement = document.querySelector('parentTag');
if (parentElement) {
  // 获取Shadow Root（兼容open和closed类型）
  const shadowRoot = parentElement.openOrClosedShadowRoot;
  if (shadowRoot) {
    // 在Shadow Root内查找目标元素
    const shadowTag = shadowRoot.getElementById('textid');
    if (shadowTag) {
      console.log('Shadow元素文本内容:', shadowTag.textContent);
    } else {
      console.log('未找到id为textid的shadowTag元素');
    }
  } else {
    console.log('该parentTag元素不存在Shadow Root');
  }
} else {
  console.log('未找到parentTag元素');
}

注意事项 #

• 上述代码需放在扩展的content script中（或扩展拥有页面访问权限的上下文里），普通网页脚本无法调用这些特权API。
• 确保你的扩展manifest文件配置了正确的页面匹配规则，例如Chrome Manifest V3的配置：

{
  "manifest_version": 3,
  "name": "Shadow DOM 访问工具",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["https://目标页面域名/*"],
      "js": ["content.js"]
    }
  ]
}

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