Paypal Button for Google Chrome Extension Manifest Version 3

Question

I'm trying to get a paypal smart button to load through my Google Chrome Extension.

Here is the page with the button working in JSFiddle. NOTE that I have a newer JS fiddle below in the question for review after this (this is merely shown to show you the progress so far and where I started). https://jsfiddle.net/ZQVerse/k2e6nh5r/182/

https://jsfiddle.net/741ntrqj/ <-- Newest JSFiddle for quick reference

This page also works when I run under my localhost.

When I attempt to load my buy page from the google chrome extension however I get the following visual errors and javascript console errors.

The error is that it refuses to the load the script because it violates the content security policy directive "script-src 'self'"

So I did a test... and if you add this as a meta tag to the HTML it can work when you run it as a file without everything disapearing.

<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">

I believe this worked because the paypal button was being loaded inline. I have since changed my code to the jsfiddle below now.

https://jsfiddle.net/741ntrqj/

So the improvements in this JSFiddle is that I now load the JS and CSS as separate files and not inline removing the need for unsafe-inline content-security-policy which Google Chrome Extension apparently does not allow anymore.

That said I still get the same error when it attempts to load my buy page via the chrome extention.

I should note that the page is being created from a button press on my popup page which sends a message to the background service worker. This is the code that opens up the page in a new tab. The page looks functionally correct except for the paypal button not being there!

if (request.buy != null) {
   chrome.tabs.create({
       url: 'buy.html'
   });
}

How do I get the paypal button to work and show up from within a Google Chrome extension using manifest 3?

I have tried modifying the manifest to include this:

"content_security_policy": {
        "extension_pages": "default-src 'self';script-src 'self'"
    }

Doing this didn't work and the buy page then looked even stranger with the promotional video background image disappearing for some reason? Also the google fonts didn't load either

Google doesn't appear to allow the 'unsafe-inline' or 'unsafe-hash' so I am at a loss for how to make this work. Any help is greatly appreciated!

Manifest.json

{
    "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"
    },
    "background":{
        "service_worker": "./background.js"
    },
    "action":{
        "default_popup": "./popup.html",
        "default_icons": {
            "16": "./images/icon-16.png",
            "32": "./images/icon-32.png",
            "48": "./images/icon-48.png",
            "128": "./images/icon-128.png" 
        }
    },
    "permissions": [
        "activeTab",
        "tabs",
        "storage",
        "unlimitedStorage",
        "scripting"
    ],
    "host_permissions": [
        "https://tradingview.com/*",
        "https://*.paypal.com/*"
    ],
    "content_scripts": [
        {
            "matches": ["https://*.tradingview.com/*"],
            "css": ["trading-view.css"],
            "js": ["./js/jquery/jquery-3.6.0.min.js","./src/inject/tradingview-content-script.js"]
        }
    ]
}

Answer 1

So I did a test... and if you add this as a meta tag to the HTML it can work when you run it as a file without everything disapearing.

Unfortunately jsfiddle.net does not allow you to add custom meta tags. If you look at the contents of the jsfiddle's iframe of your test, there will be:

<!DOCTYPE html>
<html>
<head>
... jsfiddle's head content ...
</head>
<body>
<body>
  <!DOCTYPE html>
  <html lang="en">
    <head>
    ... your head content with <meta CSP> ...
    </head>
   <body>
   ... content of page ...
</body>
</html>

Meta tag Content-Security-Policy is not applied if it's placed not in right <head> section, therefore you CSP just ignored.

Manifest V3 does not allow to use remote scripts. Have a look this comment for the similar issue of Manifest V3 for the script of Facebook SDK, maybe this will help you.