Chrome扩展注入脚本中Stripe card-element不显示且Stripe未定义如何解决

问题核心原因 #

• Chrome扩展的content script运行在隔离上下文，和宿主页面的JavaScript上下文完全独立，你通过document.head.appendChild注入的Stripe脚本只会挂载到页面的window对象上，content script的全局作用域无法直接访问到Stripe变量。
• 你定义了弹窗的HTML字符串但没有插入到页面DOM中，就算Stripe加载成功也找不到#card-element节点，自然挂载失败。
• 代码中重复声明了elements变量，属于冗余代码，可删除多余声明。

完整修复步骤 #

1. 新增弹窗插入逻辑 #

在调用injectScript之前，先把弹窗节点插入到页面DOM：

// 把弹窗插入到页面body末尾
document.body.insertAdjacentHTML('beforeend', subscriptionPopup);

2. 跨上下文访问Stripe #

直接把Stripe初始化逻辑也注入到页面上下文，和Stripe脚本同上下文即可正常访问Stripe变量：

injectScript('https://js.stripe.com/v3/').then(() => {
  const initStripeScript = document.createElement('script');
  initStripeScript.textContent = `
    const stripe = Stripe('pk_test_A7jK4iCYHL045qgjjfzAfPxu');
    const elements = stripe.elements();
    const style = {
      base: {
        color: "#32325d",
      }
    };
    const card = elements.create("card", { style: style });
    card.mount("#card-element");
  `;
  document.body.appendChild(initStripeScript);
  // 执行完即可移除脚本节点，不影响功能
  initStripeScript.remove();
})

3. 调整扩展安全策略 #

在扩展的manifest.json中添加Stripe域名白名单，避免被扩展的内容安全策略拦截：
如果是Manifest V3版本：

"content_security_policy": {
  "extension_pages": "script-src 'self' https://js.stripe.com; object-src 'none';"
}

如果是Manifest V2版本：

"content_security_policy": "script-src 'self' https://js.stripe.com; object-src 'none'"

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