Build a Chrome Extension with Alpinejs & Tailwindcss

Published in Starter Kits Web Extensions on Jan 31, 2020

Get the Starter Kit: https://github.com/thomasjohnkane/tailwind-alpine-chrome-extension


Basic Popup with Tailwind	Alpine `@click` Works!	Basic Options

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.

So I decided to add Tailwind and Alpine to my extension!

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 and background.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: