Writing my first browser extension with WXT

In the last few months, I have worked on expanding my knowledge in web development by learning new technologies. I explored more of the Vue.js world and played around with many new libraries and patterns. Meanwhile working on work stuff I missed a good (or more suitable for me) extension that can fill forms with test data so I decided to put two things together - wanting to learn something new and improve my development workflow.

I did start with plain Javascript, but then I had an idea to search for Vue.js solutions and discovered WXT. It looked interesting as it seemed to help a lot to start with a new extension. It also has good polyfills to write extensions for both Firefox and Chrome. Testing the extension was easy and later the building process generated everything that was needed (like the source package for the Mozilla store). I was impressed with the experience.

The WXT framework itself is easy to use and it did not cause any problems, the most difficult part of the extension development is to write actual functionality and communicate with different layers because things are limited - for example - the extension cannot directly access or modify webpage and webpage cannot communicate with extension, there is a separate messaging API to make these kinds of communications to work.

The review process can take some time, Mozilla was the fastest (two days) and Chrome took around a week. This process takes more time if your extension tries to access all sites and it was the case with this extension because of its functionality.

The extension name is mockFiller and it is available at:

The extension idea is to help out with repetitive form fillings (mainly developers and testers) while providing visually good-looking inputs.

The main features of this extension are:

  • Overlay next to input to fill it on the spot
  • Ability to limit overlay button to specific hosts
  • Can detect input type and fill it accordingly
  • Two data generators and the possibility to configure the generated text length preference
  • Context menu and toolbar button to generate text quickly

Some screenshots:

The extension has some issues that I need to work on soon, but overall it works and helps a lot filling out forms when you need create some test content quickly.

Buy Me a Coffee at ko-fi.com

Add new comment