如何在 React 和 Webpack 中使用带 Chrome 扩展 MV3 的 Stripe

Question

我正在 MV3 中开发 Chrome 扩展。我需要将 Stripe 与此扩展集成。此扩展覆盖新选项卡。我正在使用 ReactJs 和 Webpack。

NPM 包使用：React Stripe.js

现在我正在

stripe.esm.js:30 Refused to load the script 'https://js.stripe.com/v3' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

我试过添加

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

在 manifest.json 但我明白了。

我做错了什么？ MV3里不可以这么用吗？

感谢您的帮助。

Answer 1

基本上，简单直接的答案是您不能以这种方式进行实施。首先“不再允许Remotely hosted code；扩展只能执行包含在其包中的 JavaScript。”根据 chrome 开发者文档 [0].

Stripe 也在他们的 GitHub 中解决了这个问题，您可以在此处阅读更多信息 [1]。

至于处理这种情况的最佳方法是让您的扩展生成一个 link 到您要创建的外部网站。在那里，您可以创建 CheckoutSession 甚至与 PaymentElements 集成。

我希望这对如何前进有所启发。

[0] https://developer.chrome.com/docs/extensions/mv3/intro/mv3-migration/#feature-summary

[1] https://github.com/stripe/stripe-js/issues/273

如何在 React 和 Webpack 中使用带 Chrome 扩展 MV3 的 Stripe

How to use Stripe with Chrome Extension MV3 with React & Webpack

javascript

reactjs

google-chrome-extension

stripe-payments