Chrome Manifest V3扩展集成PayPal订阅按钮遇unsafe eval及CSP错误的原因分析与解决方案咨询

你遇到的问题是在Chrome Manifest V3版本的扩展里集成PayPal订阅按钮时，触发了unsafe eval和内容安全策略（CSP）相关错误，这其实是Manifest V3的核心安全限制导致的，下面给你拆解原因和对应的解决办法：

一、错误产生的核心原因 #

Chrome Manifest V3对扩展的内容安全策略（CSP）做了非常严格的默认限制：

• 禁止使用eval()及类似动态代码执行方式（也就是你碰到的unsafe eval错误），而PayPal的SDK内部恰好依赖这类逻辑
• 默认不允许加载外部第三方脚本（比如你代码里的PayPal SDK链接），同时也禁止内联脚本执行，你当前的PayPal按钮初始化代码是写在HTML内的<script>标签里，这也会被CSP拦截

另外你的manifest.json里没有配置自定义CSP规则，直接套用了Manifest V3的默认严格策略，自然会拦截PayPal的相关代码逻辑。

二、具体解决方案 #

1. 配置扩展的内容安全策略（CSP） #

需要在manifest.json中添加content_security_policy字段，明确允许加载PayPal的资源，同时为PayPal SDK开启必要的unsafe-eval权限（因为是可信第三方SDK，Manifest V3允许这种场景下使用）。

修改后的manifest.json示例：

{
  "manifest_version": 3,
  "name": "FlexiCalci",
  "description": "Get more done in less time with FlexiCalci, the calculator that lets you work smarter, not harder.",
  "version": "1.0.2",
  "action": {
    "default_popup": "index.html"
  },
  "permissions": ["storage"],
  "icons": {
    "16": "img/logo16.png",
    "32": "img/logo32.png",
    "48": "img/logo48.png",
    "128": "img/logo128.png"
  },
  "content_security_policy": {
    "extension_pages": "script-src 'self' https://www.paypal.com 'unsafe-eval'; object-src 'self'; frame-src https://www.paypal.com;"
  }
}

字段说明：

• script-src 'self' https://www.paypal.com 'unsafe-eval'：允许加载扩展自身脚本、PayPal域名的脚本，同时临时开启unsafe-eval权限适配PayPal SDK
• frame-src https://www.paypal.com：PayPal支付会弹出独立iframe窗口，需要明确允许加载该域名的iframe

2. 移除内联脚本，将初始化代码移到外部JS文件 #

Manifest V3默认禁止内联脚本执行，你需要把HTML里的PayPal按钮初始化代码，移到已有的js/js.js文件中。

修改后的index.html（移除内联脚本）：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/css.css">
<title>Flexi Calci</title>
</head>
<body>
<div id="paypal-button-container-P-30451526T9649281TMX"></div>
<script src="https://www.paypal.com/sdk/js?client-id=AQfUPqCKl3ThEvrldjThW9MTVGkLBJVAT89oen9Rtem9c0fuw8ul8FWaKriW4qSZ7rwlYdM6JUp&vault=true&intent=subscription&data-sdk-integration-source=button-factory"></script>
<script type="text/javascript" src="js/js.js"></script>
</body>
</html>

在js/js.js中添加PayPal按钮初始化代码：

paypal.Buttons({
  style: {
    shape: 'pill',
    color: 'gold',
    layout: 'horizontal',
    label: 'subscribe'
  },
  createSubscription: function(data, actions) {
    return actions.subscription.create({
      plan_id: 'P-30451526T9649281TMX'
    });
  },
  onApprove: function(data, actions) {
    alert(data.subscriptionID); // 可根据需求替换为更友好的成功提示
  }
}).render('#paypal-button-container-P-30451526T9649281TMX');

3. 验证配置生效 #

修改完成后，重新加载扩展：

• 打开Chrome扩展管理页面（输入chrome://extensions/访问）
• 找到FlexiCalci扩展，点击「重新加载」按钮
• 打开扩展弹窗，测试PayPal按钮是否能正常加载并触发支付流程

三、额外注意事项 #

• Manifest V3中unsafe-eval是受限权限，仅建议在可信第三方SDK场景下使用，自己的业务代码尽量避免使用eval类逻辑
• 确认PayPal的client-id和plan-id是有效且正确的，避免因配置错误导致其他异常
• 如果仍有CSP报错，可以打开Chrome开发者工具的「控制台」面板，查看具体的拦截信息，针对性调整CSP规则

备注：内容来源于stack exchange，提问作者3 Popcorns