Build a Chrome Extension with Alpinejs & Tailwindcss
Get the Starter Kit: https://github.com/thomasjohnkane/tailwind-alpine-chrome-extension
|Basic Popup with Tailwind|| Alpine
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).
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
background.jsfiles 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...
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:
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: