←back to thread

381 points cezaraugustodev | 7 comments | | HN request time: 1.22s | source | bottom

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

1. simple10 ◴[] No.40213866[source]
This is exactly what I need right now. Thanks for building and sharing it! Looking forward to Firefox support. I hope you can get it working.

Firefox Support Issue: https://github.com/cezaraugusto/extension.js/issues/5

replies(2): >>40213893 #>>40214034 #
2. simple10 ◴[] No.40213893[source]
It would be great if you could add more details to the Firefox support issue in github. Maybe the community could help solve it?
replies(1): >>40214372 #
3. Vinnl ◴[] No.40214034[source]
In particular, navigating the conflicting requirements for `manifest.json` would be useful, e.g. the difference between event pages and background service workers, or permissions that are inconsistently required/forbidden.
replies(1): >>40221980 #
4. cezaraugustodev ◴[] No.40214372[source]
The plugin for Firefox is on the way, but any community support is highly appreciated.
5. cezaraugustodev ◴[] No.40221980[source]
That's interesting, what do you mean? An abstraction for the manifest apply dev defaults or instructions on how each major part should work?
replies(1): >>40224653 #
6. dotproto ◴[] No.40224653{3}[source]
I don't know exactly what the the person you're replying to had in mind, but support for different parts of the manifest varies (especially in Manifest V3). While it's possible to write a single manifest that works in all browsers (with warnings), doing so requires more than a little specialized knowledge.

For example, Firefox does not currently support the `optional_host_permissions` top level manifest key. To work around this, developers can declare their optional host permissions in both the `optional_host_permissions` array for Chrome compatibility and in the `optional_permissions` array for Firefox/Safari compatibility.

Another example is that currently only Chrome supports `background.service_worker` in stable releases. To work around this, developers can write their MV3 background scripts in a way that's compatible with both service workers and event pages, then declare both in the manifest like so:

```json { "background": { "scripts": ["background.js"], "service_worker: "background.js" } } ```

replies(1): >>40246491 #
7. Vinnl ◴[] No.40246491{4}[source]
Yep, that's it! I settled for generating the manifest.json through a script, since at some point adding something only supported by one browser would cause an error in the other, though I think that may have been remedied now.