如何获取Google reCAPTCHA v2的data-sitekey？Chrome扩展代码如何提取该值及页面URL？

1. 如何获取Google reCAPTCHA v2的data-sitekey？ #

我平时常用这几种方法来拿到这个值，亲测有效：

• 直接检查页面DOM元素：打开浏览器的开发者工具（按F12或者Ctrl+Shift+I都行），切换到「Elements」标签，搜索带有g-recaptcha类的div元素——这个元素几乎都会带data-sitekey属性，直接复制属性值就搞定了。
• 查找页面的reCAPTCHA加载脚本：有些页面不会用现成的g-recaptcha div，而是通过调用grecaptcha.render()方法来渲染验证框。你可以在「Sources」或者「Elements」里搜这个方法，它的第二个参数是个配置对象，里面的sitekey字段就是你要找的data-sitekey。
• 用控制台快速获取：如果页面已经加载完reCAPTCHA，直接在控制台敲几行代码就能拿到：

  // 方法一：定位g-recaptcha元素
  document.querySelector('.g-recaptcha').getAttribute('data-sitekey');
  // 方法二：适配渲染式场景（如果页面把sitekey存在全局变量里，比如window.recaptchaSitekey，直接调用就行）
  

2. 从Chrome扩展自动解决reCAPTCHA的代码中获取data-sitekey和页面URL？ #

这得看你的扩展代码是内容脚本还是后台脚本，不同场景处理方式不一样，我给你拆解下：

获取data-sitekey #

• 如果是内容脚本：内容脚本能直接访问页面DOM，逻辑和手动获取差不多，直接写DOM查询代码就行：

  // 在内容脚本里执行
  const sitekey = document.querySelector('.g-recaptcha')?.getAttribute('data-sitekey');
  // 要是遇到渲染式的reCAPTCHA，你可以监听grecaptcha.render的调用，或者查找页面里的全局配置变量
  

• 如果是后台脚本：后台脚本没法直接碰页面DOM，得通过chrome.scripting.executeScript向目标页面注入代码来拿，举个例子：

  // 后台脚本里先拿到当前活跃标签页
  chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
    const activeTab = tabs[0];
    // 注入代码获取sitekey
    chrome.scripting.executeScript({
      target: {tabId: activeTab.id},
      func: () => {
        return document.querySelector('.g-recaptcha')?.getAttribute('data-sitekey');
      }
    }, (results) => {
      const sitekey = results[0].result;
      console.log('拿到的sitekey:', sitekey);
    });
  });
  

获取页面URL #

• 内容脚本中：超级简单，直接用window.location.href就能拿到当前页面的完整URL：

  const pageUrl = window.location.href;
  

• 后台脚本中：通过chrome.tabs.query获取活跃标签页的url属性就行：

  chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
    const pageUrl = tabs[0].url;
    console.log('当前页面URL:', pageUrl);
  });
  

要是你的扩展里已经有处理reCAPTCHA的逻辑，比如监听元素加载的代码，完全可以把获取sitekey的逻辑整合进去——比如当检测到reCAPTCHA元素加载完成时，立刻读取它的data-sitekey属性，这样更高效。

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