Chrome扩展内容脚本中注入Google reCAPTCHA CDN脚本的方法

嘿，我之前做Chrome扩展的时候也碰到过这个坑！内容脚本的隔离环境确实麻烦，不过有几个可行的办法能解决加载CDN脚本的问题，给你详细说说：

核心思路：把加载代码注入到页面上下文 #

内容脚本和页面的JS环境是隔离的，但DOM是共享的。所以我们可以把加载reCAPTCHA的代码包装成函数，注入到页面的全局上下文（也就是页面自己的window环境）里执行，这样就能绕过隔离限制加载CDN资源了。

方案1：基础加载CDN脚本 #

直接把创建script标签的代码注入到页面中执行：

// 你的content script代码
function loadRecaptcha() {
  const script = document.createElement('script');
  script.src = 'https://www.google.com/recaptcha/api.js';
  script.async = true;
  script.defer = true;
  document.head.appendChild(script);
}

// 将函数注入到页面上下文执行
const injectScript = document.createElement('script');
injectScript.textContent = `(${loadRecaptcha})();`;
document.documentElement.appendChild(injectScript);
injectScript.remove(); // 执行完就清理掉临时标签

方案2：带交互的完整实现（获取验证Token） #

如果需要和reCAPTCHA交互（比如获取验证后的Token），因为content script和页面环境隔离，得用自定义事件来传递数据：

1. 先在content script里写注入代码和事件监听：

// 注入到页面的函数，负责加载reCAPTCHA并设置回调
function injectRecaptchaWithCallback() {
  // 定义全局回调函数，用于接收reCAPTCHA的结果
  window.recaptchaCallback = function(token) {
    // 发送自定义事件，把Token传给content script
    window.dispatchEvent(new CustomEvent('recaptchaValidated', { detail: token }));
  };

  // 加载reCAPTCHA脚本（用explicit模式手动渲染）
  const script = document.createElement('script');
  script.src = 'https://www.google.com/recaptcha/api.js?render=explicit';
  script.async = true;
  script.defer = true;
  script.onload = function() {
    // 手动渲染reCAPTCHA到页面的某个容器里（需要提前在页面有个id为recaptcha-box的元素）
    grecaptcha.render('recaptcha-box', {
      sitekey: '你的reCAPTCHA站点密钥',
      callback: 'recaptchaCallback'
    });
  };
  document.head.appendChild(script);
}

// content script监听自定义事件，接收Token
window.addEventListener('recaptchaValidated', (event) => {
  const token = event.detail;
  console.log('拿到reCAPTCHA验证Token:', token);
  // 这里可以把Token发送到你的后端或者做其他处理
});

// 执行注入
const injectElement = document.createElement('script');
injectElement.textContent = `(${injectRecaptchaWithCallback})();`;
document.documentElement.appendChild(injectElement);
injectElement.remove();

2. 别忘了在扩展的manifest.json里配置CSP（内容安全策略），允许加载谷歌的CDN资源：

• 如果是Manifest V3：

"content_security_policy": {
  "extension_pages": "script-src 'self' https://www.google.com; object-src 'self'"
}

• 如果是Manifest V2：

"content_security_policy": "script-src 'self' https://www.google.com; object-src 'self'"

注意事项 #

• 确保页面上有reCAPTCHA需要渲染的容器元素（比如<div id="recaptcha-box"></div>），可以通过content script先创建这个元素再注入加载代码。
• reCAPTCHA的站点密钥要正确，并且已经把你的扩展ID添加到reCAPTCHA的允许域名列表里（扩展的域名格式是chrome-extension://你的扩展ID/）。

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