Building a Chrome extension with ChatGPT

In just a couple of hours I had a working Chrome extension published in Github.

There are 3 keyboard shortcuts I use all the time and I wish they came by default in Google Chrome.

Pin tabs, Duplicate tabs and close other tabs.

You can actually add them manually. But I wanted to know if there was a faster and simpler way to do it via a Chrome extension.

Custom shortcuts for Google Chrome in MacOS
Chrome shortcuts I use all the time and I wish they came set by default.

I had already played around with making an iOS app and home screen widget using ChatGPT so I figured I could do the same to build my extension.

I less than 2 hours I was able to make the extension. And it was incredibly fun!

Getting started

I started by testing the waters to see how much work it would be.

Right out the gate, it gave me a great overview of what it would take and how to start. Great!

After a few iterations on the code I asked it to give me a list of the other files that I needed to include in the folder for the extension to work.

I began testing the extension and it worked as I had imagined it would.

The extension's icon

I even asked it to make me an icon.

While that's not what I ended up going with, it served as an inspiration for the one I made myself in Figma.

My own extension icon

Uploading to Github

It did give me the correct instructions but because I was logged into my work's account, and I wanted to push the repo to my personal account, I ran into some bumps but I solved that quickly enough.

Choosing a license

Of course, it gave me templates for the open-source license where I just had to replace my information.

Drafting the readme file

Yeah, I was that lazy. I even asked it to give me a readme file to use as instructions in the Github project. It was already late at night and I was a bit tired.

I've since then, I've modified the readme a bit when I make updates to the extension.

Create a blog post?

This is where it went completely off base.

I asked it to summarize and describe all the steps we had gotten through into a blog post for my blog. That would have been the skeleton for what you're reading now.

But! As I've experienced over and over again, AI-generated posts are pretty useless to me.

They are excessively verbose. The tone feels disingenuous. And they are padded with redundancies.

So as usual, I disregarded the draft and decided to write my own which is this one you're reading right now.

What did we learn?

It's quite easy to build basic things like this, which shows that the barriers of entry into product development are much lower now.

I do think it helped me to have understanding of git and technology in general. A person who doesn't have a background in tech might have to make more questions and ask for more clarifications. They might also struggle identifying useless responses which can make the process take longer.

All in all, I'd recommend that if you have a simple idea going around in your head, just take a stab at building it.

Of course, you can install Chrome Power Extensions from the web store.

Subscribe to Ed Orozco

Don’t miss out on the latest issues. Sign up now to get access to the library of members-only issues.