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

Question

Use vue-cli to create a vue3 project to develop chrome extension, now it work. But the problem is the project need to rebuild when the code change every time. And it spent a lot of time.

So I try to watch code change:

vue-cli-service build --watch

Then there get error

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

the manifest_version

{
    "manifest_version": 3,
    ...
}

Answer 1

Make sure your manifest content_security_policy doesn't have unsafe-eval, e.g.:

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

You can also add the devtool option to vue.config.js:

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

Just make sure your choice of source map generation doesn't use eval - https://webpack.js.org/configuration/devtool/