Build a Chrome Extension With Mint

An underdog language for building on the web

Photo by the author.

In my last article, I discussed why I enjoyed using Mint to build a small web application —more specifically, to build a Chrome extension popup.

Building a Chrome extension with Mint is mostly straightforward, but I encountered a few hurdles along the way. Today, I’ll explain how to:

1. Quickly get set up developing a Mint Chrome extension.
2. Add some functionality using the Chrome Storage API.

In this article, we’ll build a demo Chrome extension. The code is available on GitHub.

What Are We Building?

Our demo Chrome extension will be a simple counter where the count value is stored in Chrome’s browser storage. The counter value will be persisted between tabs, when the browser is closed, and will even be synced to other Chrome browsers that a user is logged into.

To see a more complex Chrome extension built with Mint, take a look at the code for GitHubGo. It’s an extension that uses Chrome’s Omnibox and Storage APIs and demonstrates much more of Mint’s built-in functionality for building web apps.

How To Build a Chrome Extension With Mint

Building a Chrome extension with Mint can be broken down into three parts:

1. Setting up a normal Mint web application as the extension’s popup — the small UI which shows when you click on the extension icon in the toolbar
2. Building the application into a Chrome extension format by customising the default Mint production build
3. Adding some functionality with Chrome APIs using Mint’s interoperability with JavaScript

1. Start a new Mint application

Scaffolding a new Mint application is easy. First, install Mint and then follow these instructions to initialise and run the new application with the mint init and mint start commands.