←back to thread

Show HN: I made a CLI tool to create web extensions with no build configuration

(github.com)
381 points cezaraugustodev | 4 comments | 30 Apr 24 13:11 UTC | HN request time: 0s | source

Hello HN! I'm the creator and solo developer of Extension.js, a development tool for browser extensions with built-in support for TypeScript, WebAssembly, React, and modern JavaScript. Developers use it to spend less time configuring the compilation config or learning new frameworks and more time actually writing code.

Most projects similar to Extension.js rely on some sort of abstraction or configuration to get started, making the initial development process slow given the extra learning curve and setup guidelines. By using Extension.js, adding the package to your npm scripts is all it takes to get started developing cross-browser extensions with no build configuration. Say goodbye to extensive configurations to create your next cross-browser extension!

Creating a new extension is super easy. This command will create a new extension named "my-extension" in the current working directory. In your terminal:

npx extension@latest create my-extension

You can also create an extension based on any extension hosted on GitHub. Just add the URL of the folder where the manifest is located and run `npx extension@latest dev <github_url>`. For instance, you can try the Chrome Sample "page-redder" (https://github.com/GoogleChrome/chrome-extensions-samples/tr...).

I first created this project as a way to teach others how to develop browser extensions, until I realized that a good amount of my teachings would involve setting up a new project. With Extension.js, the abstractions and configurations needed to create cross-browser extensions are handled by a simple command-line interface, allowing developers to focus on the actual development of their next extension.

Any feedback is appreciated. I've been using it for a while in personal projects but it is now mature enough for others to give it a go. I'm looking forward to hear what you all have to say! :D

Show context
masto ◴[30 Apr 24 17:43 UTC] No.40213741[source]▶
I've made a couple of (admittedly trivial) Chrome extensions to tweak things on sites I use. I didn't really spend any time configuring the compilation config (not sure what that is) or frameworks. I'm guessing the reason for needing something like this is for handling complicated dependencies and cross-platform stuff?

The main issue I've run into is that I have no idea how to hook into and modify the behavior of fancy modern web sites with all of their React and Angular and Snorfleflox. I was kind of hoping this was for that. Is there some sort of framework that makes that stuff easier, or failing that, a really good tutorial for an experienced but a little out of date web developer to get up to speed?

replies(4): >>40213830 #>>40214005 #>>40214785 #>>40215507 #
1. grimgrin ◴[30 Apr 24 17:49 UTC] No.40213830[source]▶
The best luck I’ve had with SPA apps and a goal of manipulating the DOM is by using mutation observers. Worth exploring if you haven’t yet

https://developer.mozilla.org/en-US/docs/Web/API/MutationObs...

You can hack on the behavior via userscripts, my preferred way to alter websites, though I write extensions too (greasemoney is good tho)

replies(1): >>40213954 #
2. rsoto ◴[30 Apr 24 17:56 UTC] No.40213954[source]▶
IMO MutationObserver's API is a bit difficult to grasp. For simpler cases for getting a callback when an element is created, I use spect[1] or sentinel[2].

1: https://github.com/dy/spect 2: https://github.com/kubetail-org/sentineljs

replies(1): >>40217095 #
3. sfink ◴[30 Apr 24 22:16 UTC] No.40217095[source]▶
You can wimp out and just use MutationObserver as a way to get a callback whenever anything changes, ignoring all of the mutation records. Then in the callback, look up all of the elements you care about. The API is pretty simple then. It may be less efficient, but usually when you're mucking about with existing web pages, you're not all that performance sensitive. (And MO batches up updates reasonably well, so it's not like you're running the callback once per change.)

Occasionally it might even be faster, since you're not iterating through the mutation records and testing for stuff you care about.

replies(1): >>40217984 #
4. grimgrin ◴[01 May 24 00:02 UTC] No.40217984{3}[source]▶
yeah that's exactly how I've done it -- observe the highest order container I care about (document.body lazy mode)