How I used GitHub Copilot to build a browser extension

Assembling a Chrome extension with GitHub Copilot

GitHub Copilot can generate code for games and other simple projects, but can it help build something more complex, like a Chrome extension? A developer advocate at GitHub decided to find out by using the tool—including its chat interface—to create an extension that clears the browser cache. The process wasn't as smooth as the demos suggest; it required asking questions, iterating on prompts, and even getting help from developers watching a livestream of the build.

The result is a seven-step workflow that anyone, regardless of experience level, can replicate. It also offers some insight into how generative AI changes the dynamics of learning and collaboration.

Building the extension step by step

Before starting, ensure GitHub Copilot is installed and active in your IDE. If you have access to GitHub Copilot chat, use it for questions; otherwise, pair Copilot with ChatGPT for now.

Step 1: Ask about the project structure

Rather than guessing at the file layout, the first step is to ask GitHub Copilot chat directly:

"How do I create a Chrome extension? What should the file structure look like?"

Copilot's response includes both the directory design and instructions for running the project locally in Chrome.

For quick reference, here's what each core file does:

Step 2: Create the manifest

Create manifest.json in a project folder. Describe the desired file in plain language, then press Enter and type an opening curly brace. Copilot will suggest the manifest content. Delete the descriptive comment when done.

{
   "name": "Clear Cache",
   "version": "1.0",
   "manifest_version": 3,
   "description": "Clears browser cache",
   "permissions": [
       "storage",
       "tabs",
       "browsingData"
   ],
   "action": {
       "default_popup": "popup.html"
   },
   "background": {
       "service_worker": "background.js"
   }
}

Step 3: Add a service worker

Copilot's initial file suggestions omitted background.js, but a viewer of the livestream pointed out it's required. The service worker lets the extension run in the background, handling tasks and responding to events outside its popup window, such as network requests or data storage.

Write a comment describing the service worker's purpose, then add comments for each function to trigger code suggestions.

/*
Service Worker for Google Chrome Extension
Handles when extension is installed
Handles when message is received
*/

// console.log when extension is installed
chrome.runtime.onInstalled.addListener(function() {
   console.log("Extension installed");
});

// send response when message is received and console.log when message is received
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
   console.log("Message received");
   sendResponse("Message received");
});

Step 4: Build the popup UI

For the popup.html file, describe how the popup window should appear. Users see this window when clicking the extension's icon. Copilot will generate the corresponding markup.

Step 5: Test early

Test the extension before adding styling or interactivity. Incremental changes with manual tests simplify debugging.

Navigate to chrome://extensions/, enable Developer mode, select "Load unpacked," and upload the project folder.

Step 6: Add interactivity with JavaScript

In popup.js, write comments as pseudocode to guide Copilot's suggestions. Pseudocode lets you focus on the algorithms rather than syntax; a generic English description of each function works as a prompt.

Enter each comment one at a time so Copilot can generate an individual suggestion after each one.

One consideration: Copilot may suggest the outdated var keyword for variable declarations; replace it with let.

Step 7: Style with external CSS

For style.css, describe the visual style in a comment, type body, and press Tab through Copilot's suggestions to generate the full stylesheet.

Three lessons from pairing with AI

Generative AI lowers the fear of mistakes

Starting a new language or framework—or coding in front of an audience—can be intimidating. The worry about not knowing where to begin or spending hours debugging is a real hurdle. Real-time suggestions from Copilot provide a sense of direction that keeps momentum and confidence high during the build.

It simplifies learning but doesn't remove the effort

Copilot didn't produce the entire extension in one pass. The developer still needed to experiment with prompts and consult Copilot chat, Google, and other human developers. Getting through the first five steps took roughly 1.5 hours while streaming. The benefit is that AI suggestions shift effort from recalling syntax to reviewing and troubleshooting, allowing more time to focus on actually understanding how the code works.

It makes collaboration with other developers easier

Because using Copilot means clearly stating what you want it to do, those intentions become clearer to human teammates as well. Viewers of the livestream could follow the thought process and contribute—one recommended the service worker file that Copilot hadn't included. Confirming the need via a chat conversation and web search, the developer then used Copilot to write it. Overall, this workflow gave other developers a transparent window into the problem-solving process.

The real-time exchange with Copilot and live viewers helped catch errors and reinforce understanding. The final output is a solid, working browser extension—a demonstration of what human-AI collaboration can accomplish.