Chrome扩展集成Razorpay支付网关遇Manifest V3 CSP问题求助

我正在开发一款Chrome扩展，需要集成Razorpay支付网关实现支付功能，但受Manifest V3的内容安全策略（CSP）限制无法完成集成。我没有扩展开发经验，下面是相关代码文件及报错信息，寻求技术支持：

manifest.json #

{
    "name": "xyz",
    "version": "1.0.4",
    "manifest_version": 3,
    "permissions": [ "storage", "scripting", "identity", "identity.email" ],
    "content_security_policy": {
        "extension_pages": "script-src 'self'  https://checkout.razorpay.com; object-src 'self'"
    },
    "host_permissions": [
        "https://accounts.google.com/*",
        "http://localhost:3000/*",
        "https://checkout.razorpay.com/*"
    ],
    "web_accessible_resources": [
        {
            "resources": [ "options.html" ],
            "matches": ["https://accounts.google.com/*"]
        }
    ],
    "action": {
        "default_icon": {
            "16": "icon16.png",
            "32": "icon32.png",
            "48": "icon48.png",
            "128": "icon128.png"
        },
    },
    "background": {
        "service_worker": "service-worker.js",
        "type": "module"
    },
    "options_ui": {
        "page": "options.html",
        "open_in_tab": true,
        "browser_style": false
    },
    "icons": {
        "16": "icon16.png",
        "32": "icon32.png",
        "48": "icon48.png",
        "128": "icon128.png"
    }
}

options.html #

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
        href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
        rel="stylesheet"
    />
    <link
        href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
        rel="stylesheet"
    />
    <link rel="stylesheet" href="options.css" />
</head>
<body>
    <div id="app"></div>
    <script src="https://checkout.razorpay.com/v1/checkout.js"></script>
    <script src="options.js"></script>
</body>
</html>

RazorpayButton.tsx #

import React from 'react';

declare global {
  interface Window {
     Razorpay: any;
  }
}

export const RazorpayPayment: React.FC = () => {
const handlePayment = () => {
    const options = {
        key: 'YOUR_RAZORPAY_KEY',
        amount: 100 * 100, // amount in paise
        currency: 'INR',
        name: 'Extension Payment',
        description: 'Test Transaction',
        handler: function (response: any) {
            alert(`Payment Success: ${response.razorpay_payment_id}`);
        },
        prefill: {
            name: 'Test User',
            email: 'test@example.com',
        },
        theme: {
            color: '#3399cc',
        },
    };

    const razorpay = new window.Razorpay(options);
    razorpay.open();
};

return <button onClick={handlePayment}>Pay Now</button>;
};

报错信息 #

• 扩展启动时的错误：
  
• 点击支付按钮时的错误（推测因第三方脚本加载失败导致）：
  

内容的提问来源于stack exchange，提问作者Aayush Gupta