If you look at the resulting browser extension, Never Again, you will immediately notice that it is very political in nature. I'll leave my personal motivation for creating this extension for another post. Here I would just like to cover the technical aspects of putting this together since I thought that it was interesting to do develop the extension with TypeScript and a couple of npm packages. You can find a lot of resources on how to create a browser extension, but none, at least that I found, helps you do so with TypeScript and npm packages.
First, let me tell you that creating a browser extension is relatively easy. You can simply use all the common technologies that we already use for creating web front-ends, i.e. JS, CSS and HTML, and apply them towards the making of your extension. For details about how to do this, I recommend using Mozilla's browser extension development guide.
The idea that I had for an extension was to highlight all instances of a word found on a webpage and on hover, present a small overlay with additional information. I figured that both the highlighting and the overlay should already be available as npm packages, but it was unclear to me how I would bundle that into the JS for this extension. At the same time, I wanted the comfort and feeling of safety I have grown to love when developing with TypeScript, but I wasn't sure how to pull that in as well. It took me a little bit to find the right solution, but one part of the magic to all this occurred with Parcel.
Parcel, a "zero configuration web application bundler," is super easy to use. My previous bundling experience was with Webpack, and that is definitely not zero configuration. With a simple npm script, I pointed Parcel to an index.html file that linked to my TS file and the JavaScript was magically delivered. Parcel bundled the two npm packages that I imported in my TS file, and it then also transpiled the TS into JS. There was additional administrative work that needed to be done such as moving and renaming of files so that I could provide the necessary assets for my extension in the format required by the browsers, but this was done through a series of npm scripts. It is also important to note that the index.html file is really just a dummy file that ends up not being used for the extension directly, but it was required as an entry point for Parcel. If you look at the manifest.json file, the file used to register the components of a browser extension, you will not see any mention of index.html.
The code is available on GitHub so that you can look at the details. I hope that this set up helps someone else to leverage the power of TypeScript and the npm ecosystem to bring their ideas for an extension to life.
The extension is available for both Firefox and Chrome.
Photo by Ryan Quintal on Unsplash.
Top comments (0)