Build a Chrome Extension with Alpinejs & Tailwindcss
Get the Starter Kit: https://github.com/thomasjohnkane/tailwind-alpine-chrome-extension
![]() |
![]() @click Works! |
![]() |
I recently built a web extension for a side project. I was surprised to learn that web extensions are just tiny websites.
Specifically, you have a "popup" which is a tiny website. You also have a content.js
script which is injected into the page the user is browsing, as well as a background.js
script which can access browser events (like new tabs being opened, etc).
I originally started building my "tiny website" with vanilla JS, HTML, and CSS. It took all of about an hour before I started accidentally typing Tailwind class names and dreading my spaghetti javascript.
In general, these are the important parts of your extension:
-
manifest.json
- The file that tells the browser where all of your scripts are located -
popup.html
- The entry point for your extension. When someone clicks your extension icon, this will be what they see. -
options.html
- The entry point for your "settings". When someone clicks into the chrome settings for your extension, this will be what they see. -
icon
- you need at least one default icon to use which will be displayed to the user next to their other extensions. I went with a default 16x16 png that I made from my favicon. - You also have your
content.js
andbackground.js
files that I mentioned earlier
Tailwind and Alpine wasn't enough for my development experience. There are so many other little luxuries we've grown accustomed to when building websites. I wanted to add the following...
-
Webpack
- basic flow to build my javascript, minify css, etc -
Hot Reload
- so I didn't have to re-upload my extension to the browser (chrome) every time I made a change -
Watch
- for all of my files including my tailwind config file -
Config
- environment variables to handle development vs production, and eventually cross-browser support (Chrome vs Safari, etc) -
Zip Deployment
- once your extension is ready, you submit it to the Chrome store as a zip file. I want to add a script to zip up your content for each browser.
It got a little dark for a while. However, after a fair amount of trial and error, head banging, and some deep googling, I got all of this working exactly like I wanted! It was magical.
I decided to pull it all out into a repo so other people could have a nice starting point for their next Chrome Extension project: https://github.com/thomasjohnkane/tailwind-alpine-chrome-extension
I also added more instructions in the README to help you get started
Learn More about web extensions...
I recommend these resources if you'd like to learn more about web extensions: