Build Your First Chrome Extension

Go from zero knowledge to a working Chrome extension — learn the fundamentals, security model, and build a real extension that modifies web pages.

download courseware

Prefer to inspect a complete implementation? Download pre-completed courseware for this course.

Pre-completed project
All three stages of the Chrome extension — hello world popup, Comic Sans button, and AI page transformer — ready to load in Chrome.
sign in to download

Understanding Chrome Extensions

What Chrome extensions are, how they are built, and the security model that governs what they can and cannot do.

[ ] What Is a Chrome Extension? [text] free
- Explain what a Chrome extension is in plain language
- List three real-world examples of what extensions do
- Describe the difference between a website and an extension
[ ] How Chrome Extensions Are Built [text] free
- Identify the three core pieces of a Chrome extension: manifest, popup, and scripts
- Explain the role of manifest.json in plain language
- Describe how a popup and a script work together
[ ] The Security Model — What Extensions Can and Cannot Do [text] free
- Explain why Chrome restricts what extensions can do
- Distinguish between narrow and broad permissions
- Describe what activeTab and scripting permissions allow

Your First Extension — Hello World Popup

Create your extension files, build a simple popup message, and load it in Chrome.

[ ] Create Your Extension Folder and manifest.json [text]
- Create a valid starter folder for a Chrome extension
- Build a minimal Manifest V3 file from a copy/paste template
- Explain what each key in the manifest does
[ ] Build a Simple Popup Message [text]
- Create a popup.html file that Chrome renders when the extension icon is clicked
- Write basic HTML to display a greeting message
- Explain how the manifest connects to the popup
[ ] Load and Test Your Extension [text]
- Load an unpacked extension in Chrome using Developer mode
- Verify the popup appears when clicking the extension icon
- Troubleshoot common loading errors

Upgrading Your Extension — Comic Sans Mode

Replace the simple popup message with a button that changes every font on the current page to Comic Sans.

[ ] From Popup Messages to Page Manipulation [text]
- Explain the difference between a popup-only extension and one that modifies pages
- Describe why activeTab and scripting permissions are needed for page changes
- Understand what chrome.scripting.executeScript does at a high level
[ ] Add Comic Sans Mode [text]
- Update the manifest to include activeTab and scripting permissions
- Replace the popup greeting with an action button
- Create popup.js to change the current page fonts using chrome.scripting.executeScript
[ ] Test, Troubleshoot, and Next Steps [text]
- Test the Comic Sans extension on a real website
- Troubleshoot common issues with page-modifying extensions
- Identify practical next steps for extending your project

Real-World Application — AI-Powered Page Transformer

Build a practical extension that extracts text from any web page, sends it to an LLM for transformation, and provides a chat interface for follow-up questions.

[ ] What We Are Building [text]
- Describe the extract-transform-display pattern in plain language
- Explain why a custom system prompt makes the tool flexible
- List three practical uses for an AI page transformer
[ ] Adding a Settings Page [text]
- Create an options page that Chrome shows in the extension settings
- Use chrome.storage to save and load user preferences
- Explain why API keys should be stored locally and never shared
[ ] Extracting Text from a Web Page [text]
- Explain why raw page text is more useful than raw HTML for AI processing
- Write a function that extracts structured text including tables from a web page
- Understand the difference between innerText and innerHTML
[ ] Sending Text to an LLM [text]
- Explain what an API call is in plain language
- Write a function that sends text to OpenAI or Anthropic and receives a response
- Handle errors gracefully when the API call fails
[ ] Displaying the Results [text]
- Connect extraction, API calls, and display into a working end-to-end flow
- Handle loading states and errors in the popup UI
- Test the complete transformation flow on a real web page
[ ] Adding a Follow-Up Chat Interface [text]
- Add a chat interface to the extension popup for follow-up questions
- Maintain conversation history so the AI remembers previous context
- Use follow-up messages to request translations, reformatting, or deeper analysis

Security and Distribution

Understand why your extension code is not secret, why you should never hardcode API keys, and how to distribute extensions safely.

[ ] Your Extension Code Is Not Secret [text] free
- Explain why all Chrome extension source code is visible to anyone who installs it
- Identify why hardcoding API keys into an extension is a serious security risk
- Describe why user-provided configuration is the correct pattern for secrets
[ ] Distributing Extensions Safely [text] free
- Explain why public distribution requires a thorough security review
- Describe the private enterprise distribution options available through the Chrome Web Store
- Identify when to involve your IT team in extension distribution decisions