cezaraugustodev

In your case, Extension.js can help by managing the configuration details that are usually overlooked in general web development.

After copying a few files from the Chrome extension documentation site, you'll need to manually enable "developer mode" in your browser and add these files. If you make changes to your code, seeing the updates live requires manually reloading the various contexts that a browser extension can influence. Additionally, if you want to test your extensions on multiple browsers, you must do this manually for each one.

If you plan to use package dependencies like TypeScript or a JavaScript framework, you'll either have to rely on an existing abstraction framework for extensions and learn new techniques, or create your own configuration using tools like webpack, Parcel, esbuild, or another code compiler. At this point, developing browser extensions can become complex and frustrating.

Extension.js simplifies this by automating the process of bundling an extension in a browser ready for development. It comes with auto-reload support for every context, including parts of the browser that are not HTML/CSS/JavaScript. It also has built-in support for code dependencies such as TypeScript and React, where a simple installation enables your extension to have support without any setup wizardry. And it runs on multiple browsers at once.

Hope that clarifies things, and I'm happy to answer more questions :)

Thanks for that!

That's great! I'm glad you will give it a try

That's interesting, what do you mean? An abstraction for the manifest apply dev defaults or instructions on how each major part should work?

Thank you! The ecosystem for developing extensions could be so much better, hope we can help with that

Haha, thanks! It’s not in the immediate plans, but meanwhile, I'm sure there are some good libraries on npm for that :)

I'm glad to hear!

Totally relate. Extension development should be fun, right? Hope Extension.js can help you with your next project!

Extension.js can help you creating a new extension using React in no time:

npx extension create my-react-extension --template=react

But I guess it doesn't make it any easier to modify the behavior of fancy modern web sites :_(

Great question!

The biggest difference, in my opinion, is that Plasmo is a framework, which means you have to learn its abstractions and rely on specific samples tailored for these abstractions to create new extensions. There are config files and specific rules to follow that are not necessarily related to browser extensions.

On the other hand, Extension.js allows developers to create extensions using the standard extension APIs and abstracts only the configuration files, without the need to learn the tooling specifics. This way, a sample from Chrome or MDN that works with a manifest file as the source of truth requires no refactoring to work with Extension.js, making it easier to get started and prototype new projects.

Yes, the manifest.json is a required file for all extensions, and the package.json file provides necessary package metadata.

web-ext is excellent, but it seems there are no plans for the project to support more browsers than it currently does. On the other hand, Extension.js plans to support all major vendors.

Except for Firefox support, which is in progress, I believe Extension.js offers parity with all core functionalities of web-ext, but it goes further by providing built-in support for React and TypeScript. All you need to do is add the correct dependencies to get up and running.

Additionally, Extension.js provides comprehensive extension reload support, including changes to the manifest.json file and the service_worker background. This feature sets it apart from similar tools, including web-ext, which do not offer this capability.

The plugin for Firefox is on the way, but any community support is highly appreciated.

Thanks! Firefox support will come in the next update. Stay tuned! :)