Build a Chrome Extension With Claude Code: The Extension Starter Path for Total Beginners

David IyaDavid Iya June 28, 2026 10 min read
A laptop screen showing a design app with a grid of photo thumbnails.
Photo via Pexels

How to Build a Chrome Extension With Claude Code, Start to Finish

To build a Chrome extension with Claude Code, follow the Extension Starter Path, our five-step method at Claude Code Club for going from an idea to a working browser extension with no prior experience. You describe the one job the extension does, let Claude scaffold the files, load it unpacked in your browser to test, iterate on the popup and permissions, and then package it. That is the whole journey.

A Chrome extension is just a small folder of files that your browser knows how to run. There is a settings file called a manifest, maybe a little popup window, and some code that does the actual work. You do not need to memorize any of that. Claude Code writes those files for you in the Claude desktop app, and your job is to describe what you want and test the result.

  1. Describe the one job the extension does, in a single sentence.
  2. Let Claude scaffold the manifest and files for you.
  3. Load it unpacked in your browser to test it live.
  4. Iterate on the popup and permissions until it feels right.
  5. Package it so you can keep it or share it.

Step One: Describe the One Job the Extension Does

Start by describing the single job your extension does in one sentence. Good extensions do one thing well. A one-sentence job might be: highlight every phone number on a page, or add a button that copies the current page title, or hide distracting sidebars on reading sites. If you need the word and twice to describe it, you are trying to build two extensions. Pick one.

Tell Claude Code that sentence and ask it to confirm the plan back to you before writing anything. This catches misunderstandings early. A clear one-line job is the single biggest predictor of whether your first extension works, because it tells Claude exactly what to build and what permissions it will need.

Step Two: Let Claude Scaffold the Manifest and Files

Next, let Claude scaffold the manifest and files. Ask Claude Code to create a new folder for the extension and generate the manifest file plus any code and popup it needs. The manifest is the settings file that tells the browser the extension's name, what it is allowed to do, and which files to run. Claude writes all of it, so you get a complete, working folder without touching the details.

Ask Claude to explain, in one or two sentences, what each file it created does. You do not need to understand the code, but knowing that one file is the settings, one is the popup, and one is the logic makes the folder feel far less mysterious. This is the moment your idea becomes real files sitting on your computer, ready to load.

  • Ask Claude to create the extension folder and the manifest file.
  • Have Claude generate any popup and code the one job needs.
  • Ask for a one-line explanation of what each file does.
  • Confirm the folder is complete before you try to load it.

Step Three: Load It Unpacked in Your Browser

Then load it unpacked in your browser to test it. Loading unpacked means pointing your browser at that folder directly, which is how you run an extension you are still building. Open your browser's extensions page, turn on developer mode, choose load unpacked, and pick the folder Claude made. Ask Claude for the exact clicks if you are unsure. Your extension appears in the toolbar, and you can try it immediately.

Now try the extension on a real page and watch what it does. This first live test almost never works perfectly, and that is completely normal. Note anything that feels off so you can describe it clearly in the next step. Seeing your own extension show up in the toolbar is the moment most beginners realize they actually built something.

  • Open your browser's extensions page and turn on developer mode.
  • Choose load unpacked and select the folder Claude created.
  • Try the extension on a real page and note anything that feels off.
  • Write down the difference between what happened and what you wanted.

Step Four and Five: Iterate on the Popup and Permissions, Then Package It

Now iterate on the popup and permissions. The popup is the little window that opens when you click the extension icon, and permissions are the list of things the extension is allowed to touch. Tell Claude Code plainly what to change: make the button bigger, only run this on certain sites, add a toggle. After each change, reload the extension from the extensions page and test again. Small changes, tested one at a time, is the pattern.

Ask Claude to keep permissions as narrow as possible. An extension should request only what its one job needs and nothing more. When it works the way you want, package it. Ask Claude Code to help you zip the folder or prepare it for the browser's store if you want to share it. For personal use, the unpacked folder already works, so packaging is only for distribution.

  1. Describe one change to the popup or permissions in plain words.
  2. Ask Claude to keep permissions limited to what the one job needs.
  3. Reload the extension and test after every change.
  4. Repeat until it does exactly what you described in step one.
  5. Package the folder when you are ready to keep or share it.

That is the Extension Starter Path, start to finish. Describe the job, let Claude scaffold, load it unpacked, iterate, and package. Your first extension will be small, and that is exactly right. When it is working, share it in the Claude Code Club community and tell us the one job it does. Seeing what other beginners built is the fastest way to get your next idea. ⚡

Frequently asked questions

What is the Extension Starter Path?

The Extension Starter Path is a five-step Claude Code Club method for building a Chrome extension with no prior experience: describe the one job, let Claude scaffold the files, load it unpacked in the browser, iterate on the popup and permissions, and package it. It is designed so a total beginner can go from idea to a working extension.

Do I need to know how to code to build a Chrome extension with Claude Code?

No. You describe what you want in plain English, and Claude Code writes the manifest, the code, and the popup for you. Your job is to describe the one thing the extension does and to test the result in your browser.

What does load unpacked mean?

Load unpacked means pointing your browser directly at the folder of files for an extension you are still building, instead of installing it from a store. You turn on developer mode on your browser's extensions page, choose load unpacked, and pick the folder. It is the normal way to test an extension while you build it.

What is a manifest file?

The manifest is the settings file that tells the browser your extension's name, what it is allowed to do, and which files to run. Claude Code writes it for you, so you do not need to learn its format. It is the one file every extension must have.

Why should I keep permissions narrow?

An extension should only request access to what its one job actually needs. Narrow permissions are safer and easier to trust, and browsers may warn users about broad ones. Ask Claude Code to request the minimum, and only add more when a feature truly requires it.

Can I use my extension without publishing it to a store?

Yes. For personal use, the unpacked folder you loaded in developer mode already works and stays in your browser. Packaging and publishing to a store is only needed if you want to share the extension with other people.

Last reviewed by David Iya on June 28, 2026

David Iya

Written by

David Iya

Forbes 30 Under 30 · Y Combinator

Keep reading

Ready to build it yourself?

Join Claude Code Club, the #1 community for learning claude code, for $9/month.

← Back to the blog