I'm developing a Chrome extension in MV3. I need to integrate Stripe with this extension. This extension overrides the new tab. And I'm using ReactJs and Webpack.
NPM Package using: React Stripe.js
Right now I'm getting
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.
I've tried adding
"content_security_policy": {
"extension_pages": "script-src 'self' https://js.stripe.com/v3; object-src 'self'; frame-src https://js.stripe.com/v3"
}
in manifest.json but I get this.
What am I doing wrong? Is it not possible to use it like this in MV3?
Your help is appreciated.
Basically the simple and straight forward answer is that you cannot do your implementation this way. First “Remotely hosted code is no longer allowed; an extension can only execute JavaScript that is included within its package.” as per the chrome developer documentation [0].
Stripe has also addressed this issue in their GitHub which you can read more about here [1].
As for the best way to handle this situation is for your extension to generate a link to an external website that you would create. In there, you’d be able to create a CheckoutSession or even integrate with PaymentElements.
I hope this shed some light on how to move forward.
[0] https://developer.chrome.com/docs/extensions/mv3/intro/mv3-migration/#feature-summary