Easiest way to add HMR in your chrome extension

When we try to build chrome extension,we notice that
chrome don't auto-reload our extension.
We need to reload our extension and also tab.
In popup window, we need to close popup window then
re-open window to view change.
This is time consuming and frustrating job.
We,developer don't want to do repeatable job.

I found some plugins that attach with vite or webpack.
When i debug these plugins, i found that they just
reload whole chrome extension for just small style change.
If i change some css property, these plugins reload injected page,
background page and popup window. I also need to re-open popup manually.

I have two options left:

1. Wait for somebody that create npm package for me. or,
2. Write own npm package.

I hate waiting so i decide to write own library and
publish on npm to share with communities.

NPM package for HMR in chrome extension is:
Crx-hmr

This is not another plugin. It is standlone full HMR library.
It is dependencies-free package.

I will explain how to start with crx-hmr to save our time and system resources.

what crx-hmr do ??

• Update changed file without reloading page or your extension.
• Support custom elements HMR.
• sass and pug supported (must be globally installed).

Benefits

With crx-hmr, we don't need to do

• Manual reload chrome extension.
• Close and reopen popup window to view change.
• Need to refresh tab to view change.

Scaffolding your first chrome extension with crx-hmr

Tools You Will Need:

• Node installed on your computer. You can download Node at nodejs.org.
• A package manager called npm. It is automatically included in your installation of Node.
• A good code editor to work with our project files. I highly recommend using the editor Visual Studio Code. You can grab it at code.visualstudio.com.

First create project directory (folder).
Open terminal in this directory.
If window os, open vs-code or open git-bash.
Run this command

npm create crx-hmr@latest

Once we run this command, Initial project structure will generated.

Now, install crx-hmr package: npm install.
For start server, run npm start.

Open chromium browser e.g chrome,brave,edge or vivaldi
Go to extensions page: chrome://extensions
Activate developer mode and click on Load unpacked button.
Pick this project directory and
Now start building extension.

From source

crx-hmr has zero dependencies,It work without npm or package.json.
Grab client.js and server.js file from github crx-hmr
then add client.js on chrome extension page.
rename server.js to server.mjs
For start server, run npm start

For contribute or create new issues, visit github page crx-hmr.
Thanks for reading