First run

The goal of this step is simple — see the extension run end-to-end on your own machine, without touching any external service. We will do this in console-log mode, which prints the result to the browser console instead of sending it anywhere. It usually takes under thirty minutes.

1) Start Claude Code in the base directory

From inside the directory you cloned (e.g. my-extension/), run:

claude

When the Claude Code prompt appears, it will quietly read CLAUDE.md and pick up this project’s automation rules. You may not see much output at this point, and that is fine.

2) Kick it off with a single line

At the Claude Code prompt, type either of these:

start extension development

or, equivalently, 확장 개발 시작 in Korean. That one line triggers the orchestrate-extension skill, and the orchestrator starts walking through the phases in order.

3) Answer the questions the AI asks

The orchestrator asks a handful of questions in sequence. If this is your first time, the recommendations in the table below are the safest defaults. None of these decisions is permanent, so do not overthink them.

What the AI asks	A reasonable first answer
Trigger UI mode (popup, sidepanel, popup+sidepanel, window)	sidepanel. It docks to the right edge and does not close on outside clicks, which is helpful while you are still learning. Requires Chrome 114 or newer.
Extension name and one-line description	A placeholder like “TBD” is fine. You can update it once you have decided on the concept.
Domain(s) the content script should run on	Leave it blank, or use https://example.com/* as a placeholder until you have decided.
Default backend mode (console-log, server-relay, supabase-direct)	console-log. It needs no external setup, so you can confirm the first run quickly.
Whether to register MCP servers	”none” is the easiest answer. You can add Supabase MCP later if you go that route.

The aim of this step is to see the whole thing run once, end to end, no matter how rough the configuration looks.

4) While the AI is generating code

In this stretch the orchestrator is doing the following on its own:

• Creating the directory layout (src/app/, src/widgets/ and so on).
• Writing manifest.config.ts.
• Generating the backend adapter, options page, background worker, content script, and sidepanel code.
• Running the build and packaging the result into a zip.

You will see status lines stream by (✓ Phase 1 Architect 완료 and similar). Depending on machine speed and network, this takes anywhere from five to fifteen minutes. Grab a coffee — the orchestrator does not need supervision while it works.

5) Load the extension into Chrome

Once the build finishes, you will have a dist/ directory next to your source. That is what Chrome loads.

1. Type chrome://extensions into the address bar.
2. Confirm the Developer mode toggle you turned on in 01-prerequisites.md is still on.
3. Click Load unpacked.
4. In the file picker, select my-extension/dist/.

If everything is in order, the extension card shows up in the list with its name and short description. If you see a red “Errors” badge, the build failed or the manifest is broken — click “Errors” to read the message, then rebuild.

Screenshot

Actual capture to be added later via the docs-screenshot skill. Slot: static/img/chrome-ext/beginner/first-run-01-extension-loaded.png.

6) Watch it work

This is where you actually see the first run.

1. Open any web page (something like https://example.com is fine).
2. Click the extension’s icon in the top-right of the browser. The sidepanel should slide in.
3. Inside the sidepanel, click Analyze and send.
4. Open DevTools with F12 and switch to the Console tab. You should see the analyzed page data printed via console.log.

That is the first run. The extension went through a full cycle without any external service involved.

If nothing shows up in the console, first check which console you are looking at. The sidepanel’s own console opens via right-click → “Inspect” inside the sidepanel. The background service worker has a separate console — from your extension card on chrome://extensions, click “Details” → “Service Worker” and a new console window appears. The analyzed data usually lands in the background console. For a fuller walkthrough, see the “Analyze and send prints nothing to the console” entry in 06-troubleshooting.md.

7) A quick tour of src/

While you are here, it is worth glancing at the layout the orchestrator just produced.

src/
├── app/sidepanel/           ← entry point for the sidepanel you just used
├── app/options/             ← the page that opens from chrome://extensions → "Options"
├── app/background/          ← message routing (no UI of its own)
├── app/content/             ← injected into pages to analyze the DOM
├── widgets/page-analysis/   ← the main UI inside the sidepanel
├── shared/api/backend/      ← console-log, server-relay, and supabase adapters
└── ...

You do not need to understand all of this yet. When you want to change something, telling Claude Code what you want is usually the fastest path — it knows which file maps to your description.

What’s next

Where you want to go	Where to go in this manual
Send data to a real backend (server or Supabase)	04-real-backend.md
Change the extension’s concept (analyze a different page, etc.)	Tell Claude Code “I want to change the extension concept to X”
Get your extension into a user’s hands (zip, Web Store, self-hosted .crx)	09-distribution.md
Something is broken	06-troubleshooting.md