Let’s break down how to resolve the Content Security Policy (CSP) errors and get your PayPal button working properly in your Chrome extension. The core issue here is that Manifest V3 enforces stricter CSP rules than V2, and your current policy wasn’t allowing the necessary external resources from PayPal and other services.

Step 1: Update Your Manifest’s CSP Configuration #

Manifest V3 overrides any meta-tag CSP rules in your HTML, so all policy adjustments must happen directly in manifest.json. Here’s the corrected setup that addresses both PayPal’s script requirements and your other resources (Google Fonts, video backgrounds):

{ 
  "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/*", "https://*.paypalobjects.com/*" ],
  "content_security_policy": {
    "extension_pages": "default-src 'self'; 
      script-src 'self' https://www.paypal.com https://www.paypalobjects.com; 
      script-src-elem 'self' https://www.paypal.com https://www.paypalobjects.com; 
      style-src 'self' https://fonts.googleapis.com 'unsafe-inline'; 
      font-src 'self' https://fonts.gstatic.com; 
      img-src 'self' data: https://www.paypalobjects.com; 
      media-src 'self' [YOUR_VIDEO_BACKGROUND_DOMAIN];"
  },
  "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"] 
    } 
  ] 
}

Key CSP Adjustments Explained: #

• script-src & script-src-elem: Added PayPal’s official domains (https://www.paypal.com and https://www.paypalobjects.com) to allow loading their SDK scripts—these are critical for the smart button to function.
• style-src: Included https://fonts.googleapis.com for Google Fonts, and 'unsafe-inline' (Manifest V3 allows this for styles when needed for external font stylesheets).
• font-src: Added https://fonts.gstatic.com to load the actual font files from Google’s CDN.
• img-src: Allowed PayPal’s image domain (https://www.paypalobjects.com) for button assets, plus data: if your video background uses base64 encoding.
• media-src: Replace [YOUR_VIDEO_BACKGROUND_DOMAIN] with the actual domain hosting your promotional video (e.g., https://your-domain.com) to fix the disappearing background.
• host_permissions: Added https://*.paypalobjects.com/* to ensure the extension can access all PayPal-related resources.

Step 2: Ensure PayPal Button Initialization Uses External JS #

Since you’ve already moved away from inline scripts, double-check your buy.html and initialization code:

1. Load the PayPal SDK in buy.html directly from their CDN:

   <script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&currency=USD"></script>
   

2. Place your button initialization code in a separate JS file (e.g., paypal-init.js) and link it in buy.html:

   <script src="./paypal-init.js"></script>
   

3. In paypal-init.js, render the button:

   paypal.Buttons({
     createOrder: (data, actions) => {
       return actions.order.create({
         purchase_units: [{
           amount: { value: '0.01' }
         }]
       });
     },
     onApprove: (data, actions) => {
       return actions.order.capture().then(details => {
         alert(`Transaction completed by ${details.payer.name.given_name}`);
       });
     }
   }).render('#paypal-button-container');
   

Why Your Previous Attempts Failed #

• The initial script-src 'self' policy blocked all external scripts, including PayPal’s SDK.
• Meta-tag CSP rules are ignored in Manifest V3 extensions—only the manifest’s policy is respected.
• You were missing permissions for paypalobjects.com, which hosts critical button assets and scripts.

Once you apply these changes, reload your extension in Chrome’s developer dashboard, and your PayPal button should load correctly alongside your other resources.

内容的提问来源于stack exchange，提问作者Joseph Astrahan