- Safari https://github.com/cezaraugusto/extension.js/issues/46 - Firefox https://github.com/cezaraugusto/extension.js/issues/5
154 karma · joined January 26, 2021
- Safari https://github.com/cezaraugusto/extension.js/issues/46 - Firefox https://github.com/cezaraugusto/extension.js/issues/5
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 :)
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 :_(
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.
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.
You can run your Mozilla Add-On on Chrome or Edge by adding a --polyfill flag, but for now you need to manually add the extension to Firefox. I do plan to support Firefox in the near future, but no browser runner available at the moment.