Building Chrome Extensions with Plasmo

This is the first taste of a series on pieces of tech and ideas that I'm exploring at the moment. These are meant as full on guides for how to use the tech, but should give enough of an idea of what the tech is to pique your interest and explore it.

For a while, I've been slightly obsessed with using Chrome Extensions as a surface for doing things. They have a ton of super powers that stem partly from being able to read and write the webpage currently in the tab and partly from just being there, without the need to move to another webpage.

I've been partly nervous with getting started due to the steep learning curve for understanding how to get the most out of the extension and most of my efforts so far have been limited to really basic extensions that typically get the URL of the page and then send it to an API.

Enter Plasmo.

Plasmo is a framework for the development of Chrome Extensions that I've started playing with for the creation of Chrome Extensions.

Chrome extensions are underrated

As a developer, Chrome Extensions are a really interesting surface that don't feel like they've been fully exploited at the moment:

• A low friction surface to get to - the user doesn't need to open a new tab in order to interact with the thing.
• Contextual awareness - whatever is already shown in the tab, can be interacted with and can be combined with calls to APIs.
• Modification of on screen content - it's possible to modify what's on screen, either to action something generated via the Extension or to read & write and abstract away from complexity for the user.

Why I like Plasmo

Whilst it's possible to write a Chrome extension without making use of Plasmo, this can be quite a cumbersome process and limit more advanced features within the extension.

Plasmo makes it much easier to get started with building more advanced extensions and has a great set of documentation and examples that make it easy to get started and build on existing knowledge and code (e.g. incorporating React components).

Getting started with Plasmo

Plasmo's getting started page is pretty good to start building. You'll see quite a lot of references to pnpm and node related things in general and so be prepared for a bit of a learning curve in getting started and finding that you've not got things installed on your machine that are needed.

React-y front ends

I've been playing around with React for building front ends for the last few weeks as that is what Claude likes to spit out for apps. React is well supported in Plasmo and I've been using that as the way of building.

My general workflow has been generating a first version of the extension that I want in Claude, copying and pasting that into a Plasmo template project and then iterating from there using Cursor with inbuilt Claude for amending and adding to the code. About 85% of the code suggestions that are made by Cursor based on my prompts tend to work. I've been able to make calls to APIs from the extension, have dynamic content based on the webpage and reading and writing to and from the webpage without too many things going wrong.