When we try to build Chrome extension,we notice that Chrome doesn'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 creates an 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 stand-alone 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 extensions.

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: npm start

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