preface

Vite + React Chrome Extension (MV3) has been designed for Chrome Extension (MV3). It has the following core features:

  • 📦️ JS packaged as a single file
  • 🎨 Automatically imports the CSS
  • 🔨 Package service workers
  • 🚀 Development environment hot update

Here’s a look at the current implementation of hot updates, but other features are much simpler. See ThePrimone/Violet for more details

Once I saw Violet Eternal Garden in B station by chance, which was very impressive. Just now, I was planning to make an extension of Bilibili’s cartridge screen, so I simply adopted violet 😃 as the heroine’s name

In field

The general process of hot update is as follows:

Start the

Execute three commands simultaneously with NPM run dev:

  • TSC compiles the service worker and listens for changes
  • Vite compile the extension
  • The WebSocket service listens for directory /dist changes after packaging

Because vite build — Watch has not been released yet, we will monitor the source code changes through custom scripts for the time being. After vite is released, it can be removed.

Hot update

After loading Content scripts on the browser page, a Websocket link will be created. After receiving the request, the server will start monitoring the /dist directory, and the WebSocket service will initiate notification after monitoring the change of /dist.

Content scripts received notice of the need to update the Extension, by chrome. Runtime. The sendMessage trigger service worker by chrome. In runtime. Registered onMessage event, Trigger Chrome.runtime. reload and Chrome.tabs. Reload to update the Extension and the current page. Implement what you write is what you get without any manual intervention 🚀

Some readers may wonder why not just listen for websocket notifications in the service worker?

In Manifest V3, service worker is used to promote Thinking with events. By chrome. Runtime. OnInstalled and chrome. Runtime. The onStartup create websocket client will be accidentally closed, even if is to use the timer polling will restart after many times to be shut down. Therefore, the best solution currently found is to listen for chrome.Runtime. onMessage events in the service worker.

This allows hot updates to be triggered when the page loads the current Extension.

conclusion

As most of Chrome Extension is lower than MV3 version, after two days, stepped on a lot of pits, for the browser Extension development did not contact before also have a certain degree of understanding. For now, this is only for Chrome Extension scenarios, but other browser extensions will be supported as the current scenario continues to be improved. It should eventually be possible to encapsulate a browser extension development tool.