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

Question

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

Configuration-driven features and logic—In this approach, your extension loads a remote configuration (for example a JSON file) at runtime and caches the configuration locally. The extension then uses this cached configuration to decide which features to enable.

Externalize logic with a remote service—Consider migrating application logic from the extension to a remote web service that your extension can call. (Essentially a form of message passing.) This provides you the ability to keep code private and change the code on demand while avoiding the extra overhead of resubmitting to the Chrome Web Store.

有人见过这两种配置的样本吗？

起初我试图在出现此错误的情况下弄乱 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.

谢谢

Answer 1

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

我创建了这个 shell 脚本来将外部包下载到名为 third party 的文件夹。

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>

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

Chrome extension manifest V3 remotely hosted code

google-chrome-extension

content-security-policy

chrome-extension-manifest-v3