[Step 2-A-1/3] Your First Chrome Extension That Actually Loads — For Your Side Hustle (Reseller Edition)

📌Expert Workflows · Step 2: AI Chrome Extension · Edition A (Reseller) · Part 1 of 3

🎯 What You’re Actually Building Here

InStep 1some of us built a tool that summarizes PDFs from the command line. It worked — but let’s be honest about where it lived: in a black terminal window you had to open on purpose. That’s a fine place for a developer and an intimidating one for everyone else.

This step moves your AI tool somewhere you already are all day: your browser, as a button you click. By the end of this three-part guide you’ll have a Chrome extension that sits in your toolbar, reads whatever page you’re looking at, and hands you a clean summary or a rewritten version — which, if you sell things online, is the difference between spending your evening rewriting listings and spending it with your family.

This first part has one job, and it’s the job that makes everything afterward feel possible: getting an extension you built to actually appear in Chrome. No AI yet, no clever features — just the satisfying moment when your own icon shows up in the toolbar and a window opens when you click it. That moment is where “I could never do this” quietly turns into “oh, I just did.”

Project context

An extension fixes exactly that. Her whole motivation is one sentence:make the tool come to the page instead of making me go to the tool.

If you write code,Edition C (Solo Founder)moves faster. If you’re a younger builder — or building with one —Edition B (Young Coder)is the friendliest on-ramp of the three.

🛠️ Prerequisites

• The Chrome browser (or any Chrome-based browser — Edge, Brave, and others work the same way)
• A plain text editor — Notepad, TextEdit, or the freeVS Code, which makes this noticeably easier
• About 30 minutes
• No coding experience, no installation beyond the editor, no payment

That’s genuinely the whole list. A Chrome extension is just a folder of text files that Chrome knows how to read — there’s nothing to install and nothing that can harm your computer.

How to Use This Troubleshooting Tutorial

• 🔴 BEFORE shows an intentionally incomplete or flawed example so readers can reproduce and understand a representative problem.
• 🧠 CAUSE explains why the problem occurs.
• 🟢 AFTER presents the corrected implementation for this lesson.
• ✅ VERIFICATION explains how to confirm that the correction works.

📝 Step 1: What a Chrome Extension Actually Is

Before we build one, let’s dissolve the mystery, because the word “extension” sounds far more technical than the thing itself.

A Chrome extension isa folder containing a few small text files. One of those files is a kind of ID card that tells Chrome “here’s my name, here’s what I’m allowed to do, here’s the button to show.” That’s it. When you “install” your own extension, you’re really just pointing Chrome at that folder and saying “treat this as an extension.”

The famous extensions you already use — ad blockers, password managers, coupon finders — are the same thing, scaled up. Yours will start with two files and grow from there. If you can create a folder on your desktop and save a file into it, you already have every skill this part requires.

There’s one more idea worth holding onto: extensions are built from a small number of named parts, each with a job. Today we only need two of them.

• The manifest— the ID card. A file named exactlymanifest.jsonthat describes your extension to Chrome.
• The popup— the little window that opens when you click your toolbar icon. A file namedpopup.html.

Later parts add the pieces that read the page and call the AI. For now, ID card and window. That’s a complete, loadable extension.

📝 Step 2: Create the Folder and the ID Card

Make a new folder somewhere you’ll find it again — your Desktop is fine. Call itlisting-helper.

Inside it, create a file named exactlymanifest.json. The exact name matters — notmanifest.txt, notManifest.json, butmanifest.json. (This is the same hidden-extension trap from Step 1: if your editor insists on adding.txt, we fix that in the Troubleshooting notes below.)

Put this inside it:

{
  "manifest_version": 3,
  "name": "Listing Helper",
  "version": "1.0",
  "description": "Summarizes and rewrites text from any page.",
  "action": {
    "default_popup": "popup.html",
    "default_title": "Listing Helper"
  }
}

Let’s read that like a form you’re filling in, because that’s all it is.manifest_versionis which rulebook Chrome should use — 3 is the current one, and it’s not optional.name,version, anddescriptionare exactly what they sound like; they’re what you’ll see in your extensions list. Andactionis the important one:default_popuptells Chrome “when someone clicks my icon, open this file.” We’ll create that file next.

The curly braces and quotation marks aren’t decoration — this is a format called JSON, and it’s strict about them. One missing comma or one extra one and Chrome refuses the whole file. That strictness is annoying exactly once, which is coming up in the Troubleshooting notes.

📝 Step 3: Create the Window

In the same folder, createpopup.htmland paste:

<!DOCTYPE html>
<html>
  <body style="width: 300px; padding: 16px; font-family: sans-serif;">
    <h3>Listing Helper</h3>
    <p>If you can read this in a popup, your extension works.</p>
    <button>Do nothing (yet)</button>
  </body>
</html>

Don’t worry about understanding HTML line by line. The one thing to notice:width: 300pxsets how wide your popup window is, and everything between the<body>tags is what shows up inside it. You’ll customize this later; right now it just needs to exist so we can prove the extension loads.

Your folder now contains two files:manifest.jsonandpopup.html. That is a complete Chrome extension. Let’s install it.

📝 Step 4: Load It Into Chrome

This is the moment. Follow these exactly:

1. Open Chrome and go tochrome://extensions(type it into the address bar like a web address).
2. Find theDeveloper modetoggle in the top-right corner and switch iton. New buttons appear.
3. ClickLoad unpacked.
4. In the file picker, select yourlisting-helperfolder— the folder itself, not a file inside it — and confirm.

If everything’s right, a card appears with “Listing Helper” and your description. Now look at your Chrome toolbar, near the top-right. Click the little puzzle-piece icon (that’s where new extensions hide), find Listing Helper, and click the pin icon so it stays visible. Then click your extension’s icon.

A small window opens saying “If you can read this in a popup, your extension works.”

Sit with that for a second. You built a Chrome extension. It’s in your browser right now.

---

⚠️ Troubleshooting — “Manifest file is missing or unreadable”

(Troubleshooting example — a common mistake reconstructed for learning, not a personal claim.)

🔴 BEFORE

ClickingLoad unpackedproduced a red error instead of a card:

Failed to load extension.
Manifest file is missing or unreadable.
Could not load manifest.

Educational error scenario: Chrome reports that the manifest is missing even though a file appears in the folder. The learner checks the selected folder, the real filename extension, and JSON syntax in that order.

🤔 Cause

Several mistakes can produce a similar message: selecting the file instead of its folder, saving manifest.json.txt, or creating invalid JSON. Verify the folder, show filename extensions, and validate the JSON before changing unrelated code.

First, I’d selected the wrong thing in the file picker. “Load unpacked” wants thefolder, but I’d double-clicked into the folder and selectedmanifest.jsonitself. Chrome needs the folder so it can find all the files, not just the one I pointed at.

Second — and this took longer to spot — my file wasn’t actually namedmanifest.json. My editor had helpfully saved it asmanifest.json.txt, and Windows was hiding the.txtso itlookedcorrect in the folder. Chrome went looking formanifest.json, found nothing by that exact name, and gave up.

The third cause, which I hit later, is a typo inside the file — a missing or extra comma in the JSON. Chrome can see the file but can’t read it.

🟢 AFTER

Work through these in order:

1. Select the folder, not a file.When the picker opens, click yourlisting-helperfolder once to highlight it, then confirm — don’t open it and pick something inside.

2. Make file extensions visible and check the real name.On Windows: File Explorer → View → tick “File name extensions.” On Mac: Finder → Settings → Advanced → “Show all filename extensions.” Now look at your file. If it saysmanifest.json.txt, rename it tomanifest.jsonexactly.

3. Check the JSON for a stray comma.The most common typo is a comma after thelastitem inside the braces. Paste your file into a free “JSON validator” (search that phrase) and it’ll point at the exact character that’s wrong. This is a habit worth keeping — validating JSON takes ten seconds and saves twenty minutes.

After you fix a file, click therefresh iconon your extension’s card inchrome://extensionsrather than removing and re-adding it. That reloads your changes instantly, which you’ll be doing constantly in parts 2 and 3.

Teaching takeaway: Confirm the actual filename and extension rather than relying on how the file browser displays it. This is a fictional learner scenario, not a personal anecdote.

---

⚠️ What Still Needs Doing

You have an extension that loads and opens a window — the hardest psychological step, now behind you. Two honest expectations before part 2, so the next stage feels like progress rather than a letdown.

Right now it does nothing, and that’s correct.The button is deliberately inert. It’s tempting to feel like you haven’t really built anything until it’s useful, but “loads reliably and opens a window” is the foundation every real feature sits on. Skipping straight to the AI is how people end up unable to tell whether a broken result is the extension failing to load, the page-reading failing, or the AI call failing — three problems at once with no way to isolate them. You built the base first on purpose.

At this stage the example contains no network request. It remains local unless other editor, sync, backup, or browser features transmit the folder.Nothing you’ve made talks to the internet, sends data anywhere, or costs anything. That changes in part 2 when we connect to an AI service, and that’s exactly where we’ll slow down and handle it carefully — because the moment your tool starts sending page text to an outside company, you need to know what you’re sending and where. The reasoning behind that caution is the same one laid out inAI Hallucination and Ethics, and it matters as much for a reseller as for anyone.

✅ What You Have Now

A real, installed Chrome extension with your name on it, living in your toolbar and opening a popup window when clicked. You understand what the two core files do — the manifest that introduces your extension to Chrome, and the popup that appears when you click. And you’ve met the error that catches nearly every first-timer, along with the “select the folder, check the real filename, validate the JSON” routine that clears it. For the authoritative details, seeChrome extensions documentation.

Three files’ worth of understanding, and a genuine “I built that” you can show someone tonight.

💡 Go One Level Deeper

Change thenamein your manifest to something that’s yours — “the example user’s Listing Helper” — and edit the text insidepopup.htmlto a greeting you like. Then click the refresh icon on your extension card and open the popup again. Watching your own words appear because you changed a file is a small thing that makes the whole idea click: this isyoursto shape, not a fixed app you’re borrowing.

❓ Put It Into Practice

Load the extension, then deliberately break it: add a comma after the last line inside yourmanifest.jsonand hit refresh. Read the error Chrome gives you, then remove the comma and watch it recover. Breaking it on purpose, safely, is how you stop being afraid of the red text — because now you’ve caused it and fixed it yourself.

🔗 Next in This Series

[Step 2-A-2/3] Making It Read the Page and Talk to AI— where the inert button finally earns its place: it grabs the text you’ve selected on any page, sends selected text to an external AI service whose access, pricing, and data terms must be checked, and shows you a summary right there in the popup. We’ll handle the one error that ambushes everyone here — the AI call that gets silently blocked — and the safe way to store your key so it isn’t sitting in plain sight.

---

Extension safety boundary

Load unpacked extensions only from code you understand and trust. Review requested permissions, keep the folder private, use a dedicated browser profile if appropriate, and remove the extension after testing. Part 1 makes no external request; later parts change that risk profile.

---

Verified Build Evidence

This Part 1 project was reproduced and checked on 30 August 2026 using Windows 10, Google Chrome 152.0.7977.65, and Windows PowerShell 5.1. The downloadable package contains the same Manifest V3 files used for the checks. It contains no API key, account data, page content, or network request.

Reproduction input and observed output

Input: Chrome rendered the included popup.html at a 360 × 260 viewport.

Observed output: the heading “Listing Helper,” the message “If you can read this in a popup, your extension works,” and the button “Do nothing (yet).”

Automated verification results

Check	Result	Verified condition
Manifest JSON syntax	PASS	manifest.json parsed without an exception.
Manifest V3 declaration	PASS	manifest_version equals 3.
Popup linkage	PASS	action.default_popup points to popup.html.
Popup file	PASS	The declared file exists beside the manifest.
Visible heading	PASS	The popup contains the expected “Listing Helper” heading.
API-key scan	PASS	No OpenAI-style secret pattern was found.
Network-code scan	PASS	No fetch, XMLHttpRequest, or WebSocket call exists in Part 1.

Download the verified Part 1 files (ZIP)
SHA-256: CC24EF4DD448FD4965BFE9B2090E24668C67E38FC2275C777BDBC41D76B9B991

Verification boundary: these checks validate the tutorial files, manifest linkage, rendered popup, and the stated no-network boundary for Part 1. Loading the unpacked folder through chrome://extensions is still a manual Chrome step. This evidence does not claim that the AI functionality introduced in later parts is present.