适用于 Google Chrome 扩展清单版本 3 的 Paypal 按钮答案

【问题标题】：Paypal Button for Google Chrome Extension Manifest Version 3适用于 Google Chrome 扩展清单版本 3 的 Paypal 按钮
【发布时间】：2021-11-28 19:08:20
【问题描述】：

我正在尝试通过我的 Google Chrome 扩展程序加载一个 paypal 智能按钮。

这是按钮在 JSFiddle 中工作的页面。请注意，我在下面的问题中有一个较新的 JS fiddle 以供审查（这只是为了向您展示到目前为止的进展以及我从哪里开始）。 https://jsfiddle.net/ZQVerse/k2e6nh5r/182/

https://jsfiddle.net/741ntrqj/

当我在本地主机下运行时，此页面也可以工作。

当我尝试从 google chrome 扩展程序加载我的购买页面时，我收到以下视觉错误和 javascript 控制台错误。

错误是它拒绝加载脚本，因为它违反了内容安全策略指令“script-src'self'”

所以我做了一个测试......如果你将它作为一个元标记添加到 HTML 中，当你将它作为一个文件运行时它可以工作，而不会消失。

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

我相信这行得通，因为 paypal 按钮是内联加载的。我现在已经把我的代码改成了下面的 jsfiddle。

https://jsfiddle.net/741ntrqj/

因此，这个 JSFiddle 的改进在于我现在将 JS 和 CSS 作为单独的文件加载，而不是内联，从而消除了对不安全内联内容安全策略的需要，而谷歌 Chrome 扩展显然不再允许。

也就是说，当它尝试通过 chrome 扩展加载我的购买页面时，我仍然遇到同样的错误。

我应该注意到，该页面是通过按下弹出页面上的按钮创建的，该页面向后台服务人员发送消息。这是在新选项卡中打开页面的代码。该页面在功能上看起来是正确的，只是 paypal 按钮不存在！

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

如何使用 manifest 3 让 paypal 按钮工作并在 Google Chrome 扩展程序中显示？

我已尝试修改清单以包含以下内容：

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

这样做没有用，然后购买页面看起来更奇怪，促销视频背景图像由于某种原因消失了？谷歌字体也没有加载

Google 似乎不允许使用“unsafe-inline”或“unsafe-hash”，所以我不知道如何实现这一点。非常感谢任何帮助！

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

【问题讨论】：

您需要尝试类似stackoverflow.com/questions/67439012/… 的外部脚本paypal.com/sdk/…
我已经尝试了 4 个小时，但到目前为止没有成功，你能给我举个例子吗？
ManifestV3 在设计上不允许使用外部脚本。将其复制到扩展程序中并在本地加载。

标签： javascript google-chrome-extension paypal content-security-policy manifest.json

【解决方案1】：

所以我做了一个测试......如果你将它作为一个元标记添加到 HTML 中，当你将它作为一个文件运行时它可以正常工作而不会消失。

很遗憾jsfiddle.net 不允许您添加自定义元标记。如果你看一下你测试的jsfiddle的iframe的内容，会有：

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

如果元标记 Content-Security-Policy 未放置在正确的 <head> 部分中，则不会应用它，因此您的 CSP 将被忽略。

Manifest V3 does not allow 使用远程脚本。看看this对Facebook SDK脚本Manifest V3类似问题的评论，也许这会对你有所帮助。

【讨论】：

到目前为止，我已经使用清单版本 2 让它工作，我可以很快发布该答案。当我引用元标记时，那是在我的本地文件主机上而不是 jsfiddle
是的，清单 V2 (MV2) 允许包含第三方脚本并使用 'unsafe-inline'，这是一种已知的解决方法。 1000 美元的问题是 Google 将支持 MV2 多久。本地主机上的元标记确实可以工作，尽管您提供的 CSP 中有小错误（object-src 指令不支持'sha256-value'；script-src 包含'unsafe-hashes' 令牌在没有'sha256-value' 的情况下使用）。