Build an AI Chrome Extension · 45 min · Anthropic Claude API · Chrome Service Worker

Wire the AI Features

The shell already works. Today every button you built in Lesson 2 actually does the thing its label promises.

Hiring signal: Calling an AI API from a service worker and streaming the response into a UI is the exact pattern behind every real AI browser extension on the market -- this is the moment the product becomes genuinely useful, not just well-organized.

What you will learn

Call the Anthropic API from a service worker with a stored user API key
Stream a response into the side panel token-by-token
Implement structured JSON extraction for the 'extract data' feature

Introduction

Four unwired buttons, a real extraction pipeline, and a stored API key — every piece exists. Today, one feature at a time, the extension becomes genuinely useful.

The service worker is where API calls happen — never the content script

Content Security Policy blocks a lot from content scripts -- calls go through the service worker
MV3's strict CSP restricts what content scripts (running inside arbitrary third-party pages) can do, including some network requests. The service worker is the context designed for this: it has the permissions, it's the one place that reads the stored API key, and it's the natural place to coordinate "get page text from content script → call AI → stream result to side panel," since it already sits between all the other contexts in Lesson 1's diagram.

Unlock the full lesson

You've read the first 2 sections. The rest of this lesson covers Feature 1: Summarize, with streaming, Feature 2 & 3: Q&A and structured extraction, Fact-check: reuses the selected-text message from Lesson 3, 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.