Struggling to integrate a Paypal smart button into my Google Chrome Extension.
The JSFiddle demo shows the working button. Check out the newer version below for updates.
The page functions properly on localhost as well.
https://i.sstatic.net/J5Sw0.jpg
However, loading the buy page from the chrome extension results in visual and console errors.
https://i.sstatic.net/ZYIoX.jpg
https://i.sstatic.net/NSfBW.png
The script fails to load due to violating the content security policy directive "script-src 'self'".
After testing, adding the meta tag mentioned in the HTML allows it to function without disappearing when run as a file.
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline' 'unsafe-hashes' fonts.googleapis.com; object-src 'self' https://www.paypal.com 'sha256-U2vsCzUQ797LcHkgCQJsOSAJxY/+LTdJONJ+wacPXrI='; script-src-elem 'self' 'unsafe-inline' https://www.paypal.com">
This solution works because the paypal button was being loaded inline initially. I have now updated the code in this JSFiddle.
Improvements include loading JS and CSS files separately, avoiding unsafe-inline issues with Content Security Policy.
Despite these changes, the error persists when trying to load the buy page via the chrome extension.
Note that the page is created from a button press on the popup page, triggering a message to the background service worker which opens the page. The page appears correct except for missing the paypal button.
if (request.buy != null) {
chrome.tabs.create({
url: 'buy.html'
});
}
How can I resolve the issue of the paypal button not displaying correctly within a Google Chrome extension using manifest 3?
I've tried modifying the manifest with:
"content_security_policy": {
"extension_pages": "default-src 'self';script-src 'self'"
}
Unfortunately, this did not work, causing strange display issues on the buy page with elements disappearing.
https://i.sstatic.net/UvCIy.png
Google doesn't support 'unsafe-inline' or 'unsafe-hash', leaving me unsure how to proceed. Any assistance would be greatly appreciated!
Manifest.json details:
{
"name" : "Trading View Input Optimizer",
"description" : "Automatically experiment with different inputs to discover which inputs deliver the optimal results with an optional easy to see heat map",
"version" : "1.0.0",
"manifest_version": 3,
"icons": {
"16": "./images/icon-16.png",
"32": "./images/icon-32.png",
"48": "./images/icon-48.png",
"128": "./images/icon-128.png"
},
// More manifest details...
}