Chrome 扩展清单 V3 远程托管代码答案

【问题标题】：Chrome extension manifest V3 remotely hosted codeChrome 扩展清单 V3 远程托管代码
【发布时间】：2021-09-20 03:30:07
【问题描述】：

在Chrome Extension manifest v3 remotely hosted code is no longer allowed。迁移文档有两种解决方案。

配置驱动的特性和逻辑——在这种方法中，您的扩展程序在运行时加载远程配置（例如 JSON 文件）并在本地缓存配置。然后扩展使用这个缓存的配置来决定启用哪些功能。

使用远程服务外部化逻辑 - 考虑将应用程序逻辑从扩展程序迁移到您的扩展程序可以调用的远程 Web 服务。（本质上是一种消息传递形式。）这使您能够保持代码的私密性并按需更改代码，同时避免重新提交到 Chrome 网上应用店的额外开销。

有人看过这两种配置的示例吗？

起初我试图在这个错误的情况下弄乱 CSP，但现在认为这甚至不可能，所以这个错误首先有点误导。

Refused to load the script 'https://code.jquery.com/jquery-3.5.1.slim.min.js' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

这是我试图开始实施的 CSP 政策，现在怀疑是否可行。

    "content_security_policy": {
    "script-src": "'self' 'unsafe-eval' https://unpkg.com https://code.jquery.com https://stackpath.bootstrapcdn.com https://cdn.jsdelivr.net/ https://cdn.datatables.net https://cdnjs.cloudflare.com https://cdn.rawgit.com; object-src 'self'"
},

有一个really good stack overflow thread on this，但它适用于清单 v2。

谢谢

【问题讨论】：

您不需要任何这些复杂性来加载 jquery，而且它们无论如何都不适用于这里。只需下载 jquery 并将文件放在您的扩展目录中，然后像任何其他扩展的脚本一样加载它。
它不仅仅是 jquery。我最终得到了这个工作，但在每个包上使用 wget，然后在 html 中引用本地版本。

标签： google-chrome-extension content-security-policy chrome-extension-manifest-v3

【解决方案1】：

我能够让它工作，现在扩展程序一旦构建就不需要任何外部源。花了一段时间，这里没有答案，所以我在这里发布我的解决方案。

我创建了这个 shell 脚本来将外部包下载到一个名为第三方的文件夹中。

package.json 的一部分

  scripts {
        "build_myapp": "npm install && npm run build_prod",

        "build_prod": "./getexternalscripts.sh & npm run build_myapp",

        "tar2zip": "tarball=$(npm list --depth 0 | sed 's/@/-/g; s/ .*/.tgz/g; 1q;'); tar -tf $tarball | sed 's/^package\\///' | zip -@r package; rm $tarball",

        "package": "npm run build_prod && npm pack && npm run tar2zip && mv package.zip myapp-$npm_package_version.zip"
 
    }

getexternalscripts.sh

#!/bin/bash
wget -N https://code.jquery.com/jquery-3.5.1.slim.min.js -P ./thirdparty/
wget -N https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js  -P ./thirdparty/
wget -N https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js -P ./thirdparty/
wget -N https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js -P ./thirdparty/

当在我的 html 文件中引用这些时，它看起来像这样

<head>
    <script src="/thirdparty/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"></script>
    <script src="/thirdparty/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"></script>
    <script src="/thirdparty/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"></script>
    <script src="/thirdparty/axios.min.js"></script>
</head>

【讨论】：