Support manifest v3

[jcblw]

Description

I would like to get this project set up for success with v3 extensions. I have run into quite a few issues trying to convert it to a v3 extension.

Devtools exclusive issues

webextension-toolbox

webextension-toolbox currently does not support v3 of Chrome extensions. This is due to manifest validation failing due to background.service_worker key. Also, the Webpack plugin tries to append another background script that allows for reloading.

Validation is a pretty easy fix. The other fix would mean this plugin would need to change how they inject their scripts into the background page. Could be possible to polyfill it.

Solution

Quite a few issues to patch with this one... potentially we need to start looking at new candidates for building the dev tools extension. Maybe, web-ext or a homegrown solution.

issue already submitted

Chrome issues

Right now Chrome requires the background script to be on the same level as the manifest. Chrome 93 fixes the issue. I also wrapped the background script as recommended here, and everything started up fine.

Solution

We might want to wait out till Chrome 93 comes out which looks like it will come out August 31st.

Window in polyfill.

The devtools uses a pretty common polyfill webextension-polyfill. This polyfill when put through Webpack seems to be adding some additional calls to window which will not work in service workers. Here is the line and I locally modified it to use this instead of window.

Everything works after that, glad to see the core of finch-graphql still works in v3.

[jcblw]

closed in

#172

Just to explain what we did to support v3.

We migrated off webextension-toolbox. There is only a small configuration to get Webpack to work. Even used the library as an example of what needed to be done.

We now have full control of the extension webpack compilation. I actually removed the paths to ./scripts this made service workers work in the current Chrome versions.

I had to bump minimum_chrome_version to 88.

Lastly with the polyfill. The actual error was coming from webextension-toolbox so with full control I used this instead of window on the replacement loader. This worked in the background file, as well as the client.

Looking forward to start working with a v3 extension.

[here-nerd]

@jcblw thank you for sharing how you overcome the current limitation of webextension-toolbox. Is there any chance that your solution would be integrated back webextension-toolbox so that everyone does not have to repeat the same fix by themselves?

[jcblw]

@jcblw thank you for sharing how you overcome the current limitation of webextension-toolbox. Is there any chance that your solution would be integrated back webextension-toolbox so that everyone does not have to repeat the same fix by themselves?

A majority of the changes are pretty small. I think the only large one would be the change to how hot reloading works in terms of injecting the script into the bundle instead of appending to the background script.

Ill make a few PRs this weekend to start the process. 😁