Build an AI Chrome Extension · 35 min · React · WXT · Chrome Side Panel API

The Product Shell

Every button in this shell is real and visible before a single one of them calls an AI model -- that's what makes it feel like a product, not a prototype.

Hiring signal: Shipping the full UI shell before the core feature works is a real product discipline -- it forces you to confront navigation, settings, and information architecture decisions before they're tangled up with debugging an AI feature at the same time.

What you will learn

Build a popup with 4 labeled action buttons, unwired to any AI feature yet
Open a side panel from the popup using the Chrome Side Panel API
Persist API key settings using the Chrome Storage API

What You're Building

Everything a real user would see and touch — 4 labeled buttons, a side panel that opens and has a chat-like layout, a settings screen that saves an API key — and none of it calls an AI model yet. If someone clicked "Summarize" right now, nothing intelligent would happen. That's correct for today.

The popup: 4 real buttons, zero wired features

function Popup() {
  const openSidePanel = (action: string) => {
    chrome.runtime.sendMessage({ type: 'OPEN_SIDE_PANEL', action });
  };

  return (
    <div className="popup">
      <h1>Page Intelligence</h1>
      <button onClick={() => openSidePanel('summarize')}>Summarize this page</button>
      <button onClick={() => openSidePanel('ask')}>Ask a question</button>
      <button onClick={() => openSidePanel('extract')}>Extract data</button>
      <button onClick={() => openSidePanel('factcheck')}>Fact-check selection</button>
    </div>
  );
}

Notice the popup doesn't call the AI API directly, and doesn't even do the actual work of opening the side panel itself -- it sends a message (chrome.runtime.sendMessage) to the service worker, which is the one context with the right permissions to open the side panel and coordinate everything else. This is Lesson 1's message-passing diagram, now doing real work instead of being a diagram.

Unlock the full lesson

You've read the first 2 sections. The rest of this lesson covers Chrome's Side Panel API, Settings: where the API key actually lives, What You're Building — plus a hands-on lab, quiz, and project artifact.

Create a free account to unlock Phase 0 and Phase 1 of every course — no credit card.

Key terms in this lesson

ReAct