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.
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.