Building Chrome extensions
Author: Kamil Dubiel
Chrome extensions are small software programs that customize the browsing experience, they enhance the browsing experience by adding features and functionality to the Chrome browser, and let users tailor Chrome functionality and behavior in many ways, providing things like:
- Productivity tools
- Web page content enrichment
- Information aggregation
- Fun and games
Problem context
Extensions are built with technologies such as HTML, CSS and JavaScript, so they're basically just like any other web applications, but the main difference is that you need to create manifest file on order to create one.
The simplest app can be built with two files:
any.html- which can also contain basic JavaScript logicmanifest.json- to give the browser basic informations about our program
This means that building an extension shouldn't take more than 60 seconds, but when we want to make it more extensive, it also becomes more complicated. Using technologies like Typescript or React seems to require much more work because we have to transpile them, and there isn't much information on the internet about it.
Luckily, today we have Vite - a build tool that aims to provide a faster and leaner development experience for modern web projects. It allows us to quickly bootstrap an app with most popular frontend technologies, so we don't have to rely on any NPM packages that could quickly become deprecated. The only thing we have to care about is to connect it with manifest file.