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:
- Wait for somebody that create npm package for me. or,
- 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)