WXT Extension: The Ultimate Framework for Building Web Extensions

Context :

For the last few months I have been working on Web extensions, creating web extensions is similar to developing websites but there you get some extra concepts of how web extensions work, how the content-scripts inject the scripts into the DOM, how the popup.js works for displaying the popup, how the service workers play a vital role in managing the tasks at the background. All these are okay to implement but this new open-source framework "WXT" for web extensions made life super easy for extension devs. Below we will discuss how the wxt framework makes it so easy and some of the out of the box features that it provides I will also discuss how to get started with the wxt framework if you are already building extensions in vanilla.

Out of the box features of WXT :

• Framework Agnostic: It has support for almost every frontend framework like React, Vue, Svelte, Solid and of course the vanilla, and you can directly install them without any configurations.

• Cross-Browser Support: It has some out of the box apis which work with almost every type of browser, you don't need to write separate code for chromium-based and other types of browsers.

• Hot Module Replacement (HMR): It has a separate extension environment for development, supports the hot reloading feature, and automatically reloads the dev environment during any change of code. You don't need to go and refresh your browsers again and again.

• TypeScript Integration: It also has inbuilt Typescript support which you get with the installation

• You can directly install and use npm packages without any configurations.

There are many more awesome features of the WXT framework, you just need to dive into them.

Getting Started with WXT :

• Just do npx wxt@latest init, and you are onto the game, during installation you can select various frontend frameworks you want to work with. Check out this link for more Link🔗

• After installation, you will get a typescript environment which you can change by changing the .ts files to .js files.

• In WXT, if you want to configure the manifest.json file, you have to do it in wxt.config file.

• You can add content-scripts, service workers, and popup in the entrypoints directory and you can add your assets in the assets folder or the public folder.

• If you want to configure your contentscript.js or the serviceworker/background.js files, you have to do it inside those files, at the above. You don't get the option to configure them on the wxt.config file.

• You can get the build folder by doing npx run build, .output directory will be the build folder after the project is built.

• As mentioned earlier, you can easily install npm packages without as such configurations.

• If you already have an extension and you want to migrate that into WXT, you need to follow certain steps. You can find those in this link. Link🔗

Keeping in mind all the above points will do the work for you, the leftover concepts are the same as building web extensions without the WXT.

Conclusion :

Concluding the blog, if you are already building web extensions, I highly recommend trying out the WXT framework, you will just enjoy it, apart from the outcome even the developer experience is just awesome. This blog will give you an overview of how you can use WXT and for a detailed guide you can always visit their official documentation site, link🔗 . I hope this blog helped you, if you have any doubts, do ask them in the comments and I will be more than happy if you could share this blog with people who are already working with web extensions.