在Chrome扩展中导入“@tensorflow/tfjs”以使用本地模型时出错

Question

我尝试在我的铬扩展中使用tensorflow本地模型。在contentScript中

import * as tf from '@tensorflow/tfjs';
const MODEL_URL = './model/model.json';
const model = tf.load_model(MODEL_URL);
model.run("text");

我的manifest.json

  "content_security_policy": {
    "extension_pages": "script-src 'self' http://localhost; object-src 'self';"
  },
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_title": "My extension",
    "default_popup": "popup.html"
  },
  "permissions": [
    "tabs", 
    "history", 
    "background", 
    "webNavigation", 
    "activeTab", 
    "storage"
  ],
  "content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
      "run_at": "document_start",
      "js": [
        "contentScript.js"
      ]
    }
  ]

但我错了Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'".

我的package.json

{
  "name": "my-extension",
  "version": "0.1.0",
  "description": "My Chrome Extension",
  "private": true,
  "scripts": {
    "watch": "webpack --mode=development --watch --config config/webpack.config.js",
    "build": "webpack --mode=production --config config/webpack.config.js"
  },
  "devDependencies": {
    "copy-webpack-plugin": "^6.4.1",
    "css-loader": "^4.3.0",
    "file-loader": "^6.2.0",
    "mini-css-extract-plugin": "^0.10.1",
    "size-plugin": "^2.0.2",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.12",
    "webpack-merge": "^5.8.0"
  },
  "dependencies": {
    "@tensorflow/tfjs": "^3.16.0",
    "@tensorflow/tfjs-node": "^3.16.0"
  }
}

使用本地模式的正确方法应该是什么？

Answer 1

TL;DR -

清单3不允许使用'unsafe-eval'.您需要将库代码捆绑在扩展中，或者使用您的扩展将调用的外部API，比如消息传递。

略为冗长的链接-

从舱单第3版官方概述 -

Manifest V3的一个关键安全改进是扩展不能加载远程代码，比如JavaScript或Wasm文件。这使我们在将扩展提交到Chrome时能够更可靠、更有效地检查扩展的安全行为。具体来说，所有的逻辑都必须包含在扩展的包中。 我们建议使用远程配置文件，而不是远程代码。有关如何处理此更改的更多信息，请参见迁移指南。

下面是指向关于远程托管代码的迁移指南部分的链接(PS -不是在这里粘贴整个东西，因为这些指南可以更新)