无法访问textarea.g-recaptcha-response的shadowRoot如何解决？

可能的原因及解决办法： #

1. 目标元素在iframe内
   reCAPTCHA通常会嵌入到独立iframe中，直接用document.querySelector无法跨iframe定位元素。你需要先找到对应的iframe，再进入其文档上下文操作：

// 定位reCAPTCHA所在的iframe
const captchaIframe = document.querySelector('iframe[src*="recaptcha"]');
if (captchaIframe) {
  // 等待iframe加载完成
  captchaIframe.onload = () => {
    const iframeDoc = captchaIframe.contentDocument || captchaIframe.contentWindow.document;
    const textarea = iframeDoc.querySelector('textarea.g-recaptcha-response');
    if (textarea?.shadowRoot) {
      const targetDiv = textarea.shadowRoot.querySelector('div');
      targetDiv.innerText = '你的验证码响应值';
    }
  };
}

2. 元素未完成动态加载
   如果你的代码执行时机早于元素渲染完成，document.querySelector会拿到空对象或未初始化的元素，导致shadowRoot返回null。用MutationObserver监听元素的出现：

const observer = new MutationObserver((mutations) => {
  const textarea = document.querySelector('textarea.g-recaptcha-response');
  if (textarea?.shadowRoot) {
    const targetDiv = textarea.shadowRoot.querySelector('div');
    targetDiv.innerText = '你的验证码响应值';
    observer.disconnect(); // 找到元素后停止监听
  }
});

// 监听文档内的动态变化
observer.observe(document.body, {
  childList: true,
  subtree: true
});

3. ShadowRoot为closed模式
   如果上述方法都无效，说明该ShadowRoot是closed模式——这种模式下只有创建它的脚本有权限访问内部内容，外部脚本无法直接获取。此时你需要借助浏览器扩展的特权（比如油猴脚本需配置对应权限），或者通过调试工具将代码注入到目标脚本的执行环境中。

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