Easiest way to add HMR in your chrome extension

anil kumar — Wed, 07 Dec 2022 17:48:09 +0000

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

3 ways to add npm package in chrome extension.

anil kumar — Wed, 07 Dec 2022 14:39:58 +0000

When you try to add npm packages in chrome extension.
Chrome extension show error
Import path must start with ./ or /

You might think then how node.js find path ??
When you run npm command. NPM replaces package name with real path.
You need to just find pkg's real path so that Chrome browser will find it.
Real path like this:

/node_modules/pkg-name/dist/main.js

I show you 3 different methods, how to add npm packages in your chrome extension?

Method 1: find Manually

First, Go to node_modules directory then
go to npm package directory and open package.json.
Find exports key value and copy import file value or
file with .js or .mjs file extension.

example:

   "exports": {
   ".": {
     "require": "./lib/postcss.js",
     "import": "./lib/postcss.mjs",
     "types": "./lib/postcss.d.ts"
   },
   }

This is a relative path. Chrome browser cannot find this path.
We need to convert this into absolute path by joining path.
/node_modules/{pkg_name}/{copied_path}

Example:
/node_modules/postcss/lib/postcss.mjs
Now use this file path in place of package_name.

Method 2: nodejs API
Create path.js file and add this line.

const fullPath = await import.meta.resolve("package_name");
const path = fullPath?.match(/(\/node_modules.*)/)[0];
console.log(path);

Then add this line inside scripts in package.json and run npm run path.
"path": "node --experimental-import-meta-resolve path.js",
Copy console output text.
Now use this file's real path in place of package_name.

Method 2: Automatic find and replace
Install other npm package to find and replace
npm packages' virtual path to real path so that chrome browser will find it.

Install Path-fixxer

npm i path-fixxer

path-fixxer provide 3 api to find and fix path.

Generate path.json file with absolute path of all dependencies.

import { pkgPathJson } from "path-fixxer";
pkgPathJson();

Auto-fix virtual path to real path of all dependencies

import setAllPkgPath from "path-fixxer";
setAllPkgPath();

Auto-fix virtual path to real path of one dependency

import { realPath } from "path-fixxer";
setPkgPath("package_name");

For contribute or create new issues, visit github page path-fixxer.
Thanks for reading