SimplifyJobs/webpack-ext-reloader

MV3 Support?

shuhankuang opened this issue · 38 comments

shuhankuang commented

It will support MV3?
thanks.

rushilsrivastava commented

At the moment, this will not work with MV3. However, we plan to release this functionality in the near future.

  • 👀8
just-jeb commented

Any news guys?

  • 😕1
  • 👀2
obender commented

The end of life of V2 reaching in a year and google started to slow down reviews of V2 starting this month....

obender commented

@rushilsrivastava Do you need any help implementing the V3 Support?

rushilsrivastava commented

Hey guys, thanks for being patient. Let me address a couple of things real quick:

The end of life of V2 reaching in a year and google started to slow down reviews of V2 starting this month....

Yup, MV2 end-of-life (no new updates will be allowed to existing MV2 extensions) is slated for January 2023. I predict that Google will probably end up delaying this, but nevertheless definitely pushes the need for V3 support. While I couldn't find any announcement for slow release of V2 extensions (anecdotally, all our reviews have been approved within 24-hours), as of January 2022, no new extensions with MV2 will be allowed. All this information can be found on Google's Support Page.

@rushilsrivastava Do you need any help implementing the V3 Support?

Here's my roadmap:

  • Publish new version v1.1.9 with latest bug fixes for Firefox and listeners. This will probably be the last release for 1.x granted there are no new bugs.
  • Start a new 2.x branch to start working on Manifest V3 changes. Once this is stable, this will become master.

As far as I know, there shouldn't be much work to get this to work in V3 other than reworking how background listeners work. I have no specific timeline to when I will be able to start work on V3, but if others are able to contribute PRs, I can commit to reviewing them and accelerating the roadmap accordingly.

  • 👍5
reorx commented

Hey guys, I just submitted a PR to fix this issue. My setup is MacOS Chrome + MV3. Both the extension and background page are working fine with this PR, leaving the content script untested. Feel free to use my fork before the PR merged.

  • 👍6
  • 👀1
kYem commented

I been using reorx fork for now, any plans to merge it in?

  • 👍3
sherifmayika commented

At the moment, this will not work with MV3. However, we plan to release this functionality in the near future.

come on

  • 👍3
tscislo commented

I can confirm that PR created by lmichelin in #319 works for MV3 extensions.

rushilsrivastava commented

I intend to merge one of the open PRs by the end of November. There seems to be open review comments/concerns on each one of these PRs at the moment

sherifmayika commented

I intend to merge one of the open PRs by the end of November. There seems to be open review comments/concerns on each one of these PRs at the moment

There are two ways to resole the problem.

  1. remove polyfill, which is not required in MV3
  2. extend polyfill namespace for browser.runtime to chrome.runtime and browser.tabs to chrome.tabs
reorx commented

I adapted @sherifmayika 's advice and finally made my fork work. Please try https://github.com/reorx/webpack-ext-reloader, which should be fully compatible with MV3.

Bnaya commented

I adapted @sherifmayika 's advice and finally made my fork work. Please try https://github.com/reorx/webpack-ext-reloader, which should be fully compatible with MV3.

is it published to NPM?

reorx commented
  • 🎉2
  • ❤️2
just-jeb commented

@reorx thanks for taking the initiative! Your fork doesn't seem to work for me though, getting an error:
image.

Reproduction: https://github.com/just-jeb/angular-chrome-extension/tree/mv3-background-reload

  1. git clone
  2. yarn
  3. yarn watch
  4. Load as unpacked from the dist/angular-chrome-extension folder
reorx commented
just-jeb commented

If by instruction you mean readme then it does follow the instruction.
As for development environment - the whole point of this plugin is to work with development mode, am I missing something?

sherifmayika commented

@reorx thanks for taking the initiative! Your fork doesn't seem to work for me though, getting an error: image.

Reproduction: https://github.com/just-jeb/angular-chrome-extension/tree/mv3-background-reload

  1. git clone
  2. yarn
  3. yarn watch
  4. Load as unpacked from the dist/angular-chrome-extension folder

-(function(_window) {
-let window: any
-if (_window.document !== undefined) {
-window = _window
-}

+(function() {
+try {window} catch {var window: any;};

just-jeb commented

Or

(function(_window) {
let window: any
if (_window?.document !== undefined) {
  window = _window
}

I guess it does the same.

sherifmayika commented

Or

(function(_window) {
let window: any
if (_window?.document !== undefined) {
  window = _window
}

I guess it does the same.

try instead of guess

just-jeb commented

Thank you for such a useful comment.

sherifmayika commented

Or

(function(_window) {
let window: any
if (_window?.document !== undefined) {
  window = _window
}

I guess it does the same.

did you test?

jianjungki commented

Actually, I have test for the chrome extension, it shows me like this:

image

I think it has some problem about manifest v3 so far.

xadamxk commented

Any updates regarding manifest v3 support?

reorx commented

@xadamxk https://github.com/reorx/webpack-ext-reloader is working properly in my projects, you can have a try

xadamxk commented

@reorx

Yup, I got your fork working after commenting here - thank you.

xD33m commented

Any hints on how to resolve the "Uncaught TypeError: Cannot read properties of undefined (reading 'document')" issue? @reorx
image

xadamxk commented

Any hints on how to resolve the "Uncaught TypeError: Cannot read properties of undefined (reading 'document')" issue? @reorx image

It's broken and is not being maintained, use this fork instead: https://github.com/reorx/webpack-ext-reloader

rushilsrivastava commented

Any hints on how to resolve the "Uncaught TypeError: Cannot read properties of undefined (reading 'document')" issue? @reorx image

It's broken and is not being maintained, use this fork instead: https://github.com/reorx/webpack-ext-reloader

There are 3 open PRs for Manifest V3, each has there own issues. I'll see if I can clean them up soon, but this repo is being maintained for V2.

vialoh commented

#386 has MV3 support and will be included in the next release (1.1.10).

just-jeb commented

Well, I still get this when update to 1.1.10.
image

vialoh commented

Well, I still get this when update to 1.1.10. image

Are you sure that's from webpack-ext-reloader? Doesn't quite look like the error I remember seeing before.

just-jeb commented

It comes from the code that is generated by webpack-ext-reloader (as you can see from the screenshot). I assume it pops up because window does not exist in service workers. I mean there is a fallback for { browser: null } but seems like the browser will throw this error upon any use of window in the service worker.
And it seems to result in service worker not working at all.

vialoh commented

And it seems to result in service worker not working at all.

We're using this in a MV3 service worker without issue (aside from a separate library causing issues in the SW), which is why your comment doesn't make sense to me.

I will look further into this today.

reorx commented

To all who are concerned about this project, I have updated @reorx/webpack-ext-reloader to version 1.6.0, which addresses a persistent issue where the plugin continually raised errors, significantly disrupting the development experience. The errors in question were primarily the following:

  1. Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist.: This error occurred when the plugin's code attempted to send a message to a tab that did not have a message listener. It has been resolved by adding a .catch statement after the .sendMessage call.
  2. WebSocket is already in CLOSING or CLOSED state: This error commonly appeared after the extension reloaded, when trying to send reload results to a server that was either down or when the socket instance had become outdated. This has been corrected by adding a state check before invoking socket.send.
  3. Websocket HTTP Authentication failed; no valid credentials available: This error surfaced if the webpack process was terminated, as the plugin would then repeatedly attempt to reconnect to the server. It was challenging due to its origin in the 'new WebSocket', which made it impossible to prevent the error from displaying in the console. The fix involved implementing an HTTP server on the same port and using a fetch request to this server as a reconnect attempt.

Overall, @reorx/webpack-ext-reloader is now more robust against errors. You can confidently assume that any errors appearing in chrome://extensions are worth investigating without having to manually clear them out repeatedly.

Additional quality-of-life improvements include:

  • A clear distinction between changes made to the background, content scripts, and extension pages, ensuring that only the relevant tabs are refreshed. For example, the extension itself will not reload unless changes are made to the background, and side panels remain open after making non-background updates.
  • To prevent Chrome from terminating an inactive service worker, content scripts and extension pages now send periodic ping/pong messages to the background. This replaces the previous workaround of having to keep the developer tools open for the background page to keep it alive. Therefore, if your extension has any content scripts or extension pages running, it will automatically reload without needing to keep the developer tools open.
  • 👍1
rushilsrivastava commented

@reorx Can you open a PR with your changes?

CC @vialoh

reorx commented