DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

anil kumar
anil kumar

Posted on

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

Top comments (0)

Top Heroku Alternatives (For Free!)

Recently Heroku shut down free Heroku Dynos, free Heroku Postgres, and free Heroku Data for Redis on November 28th, 2022. So Meshv Patel put together some free alternatives in this classic DEV post.