add support for Manifest v3

[realrecordzLab]

Manifest v3 is coming and as writed on the chrome extension developers documentations it will be soon mandatory to use it. Will this cli plugin support manifest v3 soon?

[e-roy]

I'm working through migrating an extension to Manifest 3
https://developer.chrome.com/docs/extensions/mv3/intro/mv3-migration/

It's semi straight forward. v3 changes the background pages to service workers. The problem I'm finding is there is a known issue with service workers only working in the root directory
https://groups.google.com/a/chromium.org/g/chromium-extensions/c/eOosUOIh7cE/m/lP3DgUeEAwAJ

*some examples of extensions using v3
https://groups.google.com/a/chromium.org/g/chromium-extensions/c/16yaQeg07t4

It doesn't look like this will be fixed soon. So I'm stuck trying to figure out how to move the background.js file to the root directory on build. What can I do to the vue.config.js file to change the output? I'm looking through all the cli.vuejs.org docs and it's not clear to me how to do it. Any suggestions anyone? or @adambullmer?

[realrecordzLab]

I'm working through migrating an extension to Manifest 3
https://developer.chrome.com/docs/extensions/mv3/intro/mv3-migration/

It's semi straight forward. v3 changes the background pages to service workers. The problem I'm finding is there is a known issue with service workers only working in the root directory
https://groups.google.com/a/chromium.org/g/chromium-extensions/c/eOosUOIh7cE/m/lP3DgUeEAwAJ

*some examples of extensions using v3
https://groups.google.com/a/chromium.org/g/chromium-extensions/c/16yaQeg07t4

It doesn't look like this will be fixed soon. So I'm stuck trying to figure out how to move the background.js file to the root directory on build. What can I do to the vue.config.js file to change the output? I'm looking through all the cli.vuejs.org docs and it's not clear to me how to do it. Any suggestions anyone? or @adambullmer?

As I know the issue about background.js will be not fixed. I'm looking at the plugin code and this line seems to be responsable to generate the background file. I think the best solution is to edit the plugin code to reflect the manifest v3 changes, this until the author will release an update that is compilant with v3.

[e-roy]

I agree, I will post the code to change the vue.config.js file if I figure it out. But, I'm also having trouble writing the correct code to put the background.js file into the root folder on build. Anyone know how to do this?

[realrecordzLab]

I agree, I will post the code to change the vue.config.js file if I figure it out. But, I'm also having trouble writing the correct code to put the background.js file into the root folder on build. Anyone know how to do this?

I'm not sure that the change to have the background file in the project root can be done from vue.config.js file but let me know if there is any news about. In the next days I will create a fork of this project to try implementing manifest v3

[e-roy]

Sorry, I misunderstood your first message. I was able to get all of the js files to the root folder on build by adding this to vue.config.js

  configureWebpack: {
    output: {
      filename: "[name].js",
      chunkFilename: "[name].js",
    },
  },

But I'm still getting 'Service worker registration failed' error. I'm getting closer to convincing myself to create a fork also and try from that direction also.

[realrecordzLab]

Sorry, I misunderstood your first message. I was able to get all of the js files to the root folder on build by adding this to vue.config.js

  configureWebpack: {
    output: {
      filename: "[name].js",
      chunkFilename: "[name].js",
    },
  },

But I'm still getting 'Service worker registration failed' error. I'm getting closer to convincing myself to create a fork also and try from that direction also.

how is the code inside your background.js file? NB: You don't really need to register a service worker inside the background js file, they have changed only the name in the manifest

[e-roy]

Did configureWebpack help you on your situation?

I'm using my background.js to open the extension. I'm getting closer, right now I'm battling 2 issues.
Getting the extension to activate when running npm run serve
Service worker registration failed
(not sure where to look for this yet)

and writing the manifest on npm run build
manifest.content_security_policy.replace is not a function
(I think I can adjust it through something like adding devtools, I think it's from the MV3 changer here)

******* Edit : Fix Below **********

To run the service worker during hot reloading and fix manifest on build, change line 37 to

\node_modules\vue-cli-plugin-browser-extension\lib\manifest.js

37 manifest.content_security_policy.extension_pages = manifest.content_security_policy.extension_pages.replace(/'unsafe-eval'/, '')

and then add this script to your package.json file

"prod": "vue-cli-service build --mode production --watch",

then you can run

npm run prod

****** Note: This does slow down hot-reload, a lot. Not recommended environment for development, will need to refresh the extension after saving *******

[leoplct]

Any news on this? How can I manually use a manifest v3 without adding "content_security_policy"automatically at the end?

[awardx]

Did configureWebpack help you on your situation?

I'm using my background.js to open the extension. I'm getting closer, right now I'm battling 2 issues.
Getting the extension to activate when running npm run serve
Service worker registration failed
(not sure where to look for this yet)

and writing the manifest on npm run build
manifest.content_security_policy.replace is not a function
(I think I can adjust it through something like adding devtools, I think it's from the MV3 changer here)

******* Edit : Fix Below **********

To run the service worker during hot reloading and fix manifest on build, change line 37 to

\node_modules\vue-cli-plugin-browser-extension\lib\manifest.js

37 manifest.content_security_policy.extension_pages = manifest.content_security_policy.extension_pages.replace(/'unsafe-eval'/, '')

and then add this script to your package.json file

"prod": "vue-cli-service build --mode production --watch",

then you can run

npm run prod

****** Note: This does slow down hot-reload, a lot. Not recommended environment for development, will need to refresh the extension after saving *******

I was getting an error Cannot read property 'replace' of undefined This only worked for me when I changed line 30 to the following manifest.content_security_policy || { "extension_pages": "script-src 'self' 'unsafe-eval'; object-src 'self'" }

@e-roy many thanks for your input, really helpful. Any ideas why this is not auto refreshing extension after saving? Have you tried tweaking the https://github.com/rubenspgcavalcante/webpack-extension-reloader plugin? I'm thinking to explore that direction, only wanted to know how far did you get with that (if any) and continue from where you left off.

[e-roy]

@awardx I only made it as far as creating "band-aids" inside my project to be able to get MV3 working. Running in --watch and production mode forced to rebuild the extension code every time a change was made, which meant refreshing the extension in your browser. At the time I decided after I got it working with MV3, I would copy the manifest code to a txt file to use for when I build for production and continue developing with MV2. I hadn't tried tweaking the webpack-extension-reloader.

The added layer of service workers to MV3 adds a different level of complexity. Best of luck to figuring it out :)

[daviid-kovacs]

@awardx I managed to fix the Service worker registration failed issue...

It seems like the background.js must be in the root folder with the original content in order to work.

After I moved my script to the root (thanks @e-roy ) I was getting the same error message so I tried to install a demo Extension provided by Google to see what is going on and when I compared the background scripts I noticed the generated version contains a lots of markups so I tried to remove everything and just paste my background.js code and it started to work.

So apparently the Service Worker is not able to register because of the generated background.js.

I tried to find a way to build the background.js without the additional bits but I could not.

So as a quick fix I moved the background.js to the public folder so after the build the file goes to the root folder with the original content.

I had to change the browser.runtime bits to chrome.runtime though... I think because I don't have the browser polyfill included this way.

[shuhankuang]

any update?

[alancheatham]

also interested in this

[adamskeeled]

any update on this?