使用vue3和vue-cli开发chrome扩展，如何热重载代码

Question

使用vue-cli创建一个vue3项目来开发chrome扩展，现在可以了。但问题是每次代码更改时都需要重建项目。而且花了很多时间。

所以我试着观察代码变化：

vue-cli-service build --watch

然后报错

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

manifest_version

{
    "manifest_version": 3,
    ...
}

Answer 1

确保您的清单 content_security_policy 没有 unsafe-eval，例如：

// This is for manifest v3
"content_security_policy": {
  "extension_pages": "script-src 'self'; object-src 'self';"
}

您还可以将 devtool 选项添加到 vue.config.js:

module.exports = {
  configureWebpack: (config) => {
    config.devtool = 'inline-source-map'
  },
};

只需确保您选择的源映射生成不使用 eval - https://webpack.js.org/configuration/devtool/

使用vue3和vue-cli开发chrome扩展，如何热重载代码

use vue3 and vue-cli to develop chrome extension, how to hot reload the code

google-chrome-extension

webpack

vuejs3