← Back to Tutorials
Developer-Tools beginner Elena Torres ·

Building an AI-Powered Chrome Extension with Cursor & Copilot 2026

Building an AI-Powered Chrome Extension with Cursor & Copilot 2026

Overview

Chrome extensions are one of the highest-leverage projects a developer can build — they run everywhere in the browser, can access any webpage’s content, and reach 3.2 billion Chrome users. But traditionally, building one meant wrestling with Manifest V3’s service workers, content scripts, message passing, and permission models. AI coding assistants in 2026 eliminate this friction. This tutorial shows you how to build a fully functional AI-powered Chrome extension using Cursor and GitHub Copilot as your development partners. You’ll build “SmartSummarizer” — an extension that adds an AI summary button to any webpage, extracts content, and generates concise summaries using OpenAI or Claude. You’ll learn prompt patterns for generating Chrome extension boilerplate, debugging service workers through Copilot chat, and iterating on the extension UI with Cursor’s agent mode. No prior Chrome extension experience required — just basic JavaScript and an AI coding assistant.

Prerequisites

  • Cursor IDE (free tier works) or VS Code with GitHub Copilot ($10/month)
  • Node.js 18+ and npm installed
  • Chrome browser (Chrome 126+ for Manifest V3 features)
  • OpenAI API key (or Anthropic API key for Claude) — for extension’s AI features
  • Basic JavaScript knowledge (ES6 modules, async/await, promises)
  • Familiarity with Cursor’s chat, agent mode, and in-line editing (or Copilot’s chat panel)
  • 1-2 hours to complete the tutorial

Step 1: Scaffold the Extension with Cursor Agent

Let Cursor generate the complete Manifest V3 boilerplate. Open Cursor, create a new folder, then use this agent prompt:

Cursor Agent Prompt:

Create a Chrome Extension Manifest V3 project for an AI-powered page summarizer.
Create these files:

1. manifest.json — permissions: activeTab, storage, sidePanel. 
   Add a side panel action, context menu, and keyboard shortcut (Ctrl+Shift+S).

2. background.js — service worker that:
   - Listens for extension icon click → opens side panel
   - Listens for context menu → sends page content to side panel
   - Stores API key from options page

3. content.js — content script that:
   - Extracts the main article text from any webpage using common heuristics
   - Strips navigation, ads, and non-content elements
   - Sends clean text via chrome.runtime.connect

4. sidepanel.html + sidepanel.js — the popup UI:
   - Simple chat-like interface
   - "Summarize" button
   - Streaming text display for reading the summary
   - Settings section for API key and model choice
   - Uses Chrome Storage API to persist settings

5. styles.css — clean, modern dark/light mode UI

Use ES modules where supported and classic service worker patterns elsewhere.
Make it work with Chrome's minimum permission model.

Cursor’s agent mode will create all files. Let’s verify the manifest structure:

{
  "manifest_version": 3,
  "name": "SmartSummarizer",
  "version": "1.0",
  "description": "AI-powered page summarizer — summarize any webpage in one click",
  "permissions": ["activeTab", "storage", "sidePanel", "contextMenus"],
  "host_permissions": ["https://api.openai.com/*", "https://api.anthropic.com/*"],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [{
    "matches": ["<all_urls>"],
    "js": ["content.js"]
  }],
  "side_panel": {
    "default_path": "sidepanel.html"
  },
  "commands": {
    "_execute_action": {
      "suggested_key": {
        "default": "Ctrl+Shift+S"
      }
    }
  },
  "action": {
    "default_title": "SmartSummarizer"
  }
}

Step 2: Build Content Extraction with AI Assistance

The content script is the core — it must reliably extract article text from any webpage. Use Copilot Chat to generate the extraction logic:

Copilot Chat prompt in VS Code:

Write a content script function extractArticleText() that:

1. Uses these heuristics (in priority order):
   - article[role="main"], main tag, .post-content, .article-body, #article-body, [itemprop="articleBody"]
   - <article> element
   - The element with the most <p> tags (excluding nav, footer, aside)
   - document.body as last resort

2. Returns { title, text, word_count, url, excerpt (first 150 chars) }

3. Strips: <script>, <style>, <nav>, <footer>, <aside>, .ad, .sidebar, .comment, popup elements

4. Sanitizes the text: removes excessive whitespace, normalizes Unicode quotes

Write clean ES6+ code with JSDoc comments.

Copilot will generate something like this — review and refine using Cursor’s in-line editing:

// content.js — AI-assisted content extraction
(function() {
  const SELECTORS = [
    'article[role="main"]', 'main', '.post-content',
    '.article-body', '#article-body', '[itemprop="articleBody"]',
    'article', '[role="article"]', '.entry-content', '.post'
  ];

  function extractArticleText() {
    // Try to find article container
    let container = null;
    for (const selector of SELECTORS) {
      container = document.querySelector(selector);
      if (container && container.textContent.trim().length > 500) break;
    }
    
    // Fallback: find element with most <p> tags
    if (!container) {
      container = findElementWithMostPTags(document.body);
    }
    
    if (!container) {
      container = document.body;
    }
    
    // Clone to avoid DOM mutation side effects
    const clone = container.cloneNode(true);
    removeUnwantedElements(clone);
    
    const text = cleanText(clone.textContent);
    
    return {
      title: document.title || document.querySelector('h1')?.textContent || 'Untitled',
      text: text.substring(0, 50000),  // Limit to 50k chars
      word_count: text.split(/\s+/).length,
      url: window.location.href,
      excerpt: text.substring(0, 150)
    };
  }
  
  function findElementWithMostPTags(root) {
    let best = null;
    let maxPCount = 0;
    
    const paragraphs = root.querySelectorAll('p');
    const parentCandidates = new Set();
    paragraphs.forEach(p => {
      if (p.closest('nav, footer, aside, header, .sidebar, .comment')) return;
      let parent = p.parentElement;
      while (parent && parent !== root) {
        const pCount = parent.querySelectorAll('p').length;
        if (pCount > maxPCount) {
          maxPCount = pCount;
          best = parent;
        }
        parent = parent.parentElement;
      }
    });
    
    return best;
  }

  function removeUnwantedElements(el) {
    const selectors = 'script, style, nav, footer, aside, header.header, ' +
      '.ad, .ads, .advertisement, .sidebar, .comments, .comment, .social-share, ' +
      '.related-posts, .recommended, .newsletter, .popup, [role="navigation"]';
    el.querySelectorAll(selectors).forEach(el => el.remove());
  }

  function cleanText(text) {
    return text
      .replace(/[\u2018\u2019]/g, "'")
      .replace(/[\u201C\u201D]/g, '"')
      .replace(/\s+/g, ' ')
      .replace(/\n{3,}/g, '\n\n')
      .trim();
  }

  // Listen for messages from the side panel / background
  chrome.runtime.onConnect.addListener((port) => {
    port.onMessage.addListener((msg) => {
      if (msg.action === 'extract') {
        port.postMessage({ action: 'content', data: extractArticleText() });
      }
    });
  });
})();

Step 3: Build the Background Service Worker with Copilot

The service worker orchestrates everything. Use Copilot to generate the connection management:

Copilot prompt:

Write a Chrome Extension Manifest V3 service worker (background.js) that:

1. On install: creates a context menu item "Summarize with AI"
2. On context menu click: injects content script if needed, gets page text
3. On extension click (action.onClicked): opens the side panel
4. Manages a message router:
   - 'summarize' → sends page text to OpenAI API and streams response back
   - 'get_settings' → returns stored settings from chrome.storage.sync
   - 'save_settings' → saves settings (API key, model, language)
5. Uses chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true })
6. Handles service worker lifecycle (keepalive, reconnection)

Use async/await throughout. Add proper error handling and timeout.

Review the generated code in Cursor — use its in-line edit to fix any issues:

// background.js — service worker (generated + refined with AI)
chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    id: 'summarize-page',
    title: 'Summarize with AI',
    contexts: ['page']
  });
});

chrome.action.onClicked.addListener((tab) => {
  chrome.sidePanel.open({ tabId: tab.id });
});

chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true }).catch(() => {});

chrome.contextMenus.onClicked.addListener((info, tab) => {
  if (info.menuItemId === 'summarize-page') {
    chrome.sidePanel.open({ tabId: tab.id });
    // Trigger summarization after a short delay for side panel to load
    setTimeout(() => {
      chrome.tabs.sendMessage(tab.id, { action: 'triggerSummarize' }).catch(() => {});
    }, 500);
  }
});

// Message router
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action === 'summarize') {
    handleSummarize(message.text, sender, sendResponse);
    return true;  // Keep channel open for async response
  }
  if (message.action === 'get_settings') {
    chrome.storage.sync.get(['apiKey', 'model', 'language', 'maxWords'], (result) => {
      sendResponse(result);
    });
    return true;
  }
  if (message.action === 'save_settings') {
    chrome.storage.sync.set(message.settings, () => {
      sendResponse({ success: true });
    });
    return true;
  }
});

async function handleSummarize(text, sender, sendResponse) {
  const settings = await chrome.storage.sync.get(['apiKey', 'model']);
  
  if (!settings.apiKey) {
    sendResponse({ error: 'API key not configured. Open the side panel to add one.' });
    return;
  }
  
  try {
    const response = await fetch('https://api.openai.com/v1/chat/completions', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${settings.apiKey}`
      },
      body: JSON.stringify({
        model: settings.model || 'gpt-4o-mini',
        messages: [
          { role: 'system', content: 'Summarize the following webpage content concisely. Focus on key points, main arguments, and conclusions.' },
          { role: 'user', content: text }
        ],
        max_tokens: 1000,
        temperature: 0.3
      })
    });
    
    const data = await response.json();
    sendResponse({ summary: data.choices[0].message.content });
  } catch (error) {
    sendResponse({ error: `API error: ${error.message}` });
  }
}

Step 4: Polish the Side Panel UI with Cursor Agent

Use Cursor’s agent mode to iterate the UI. Drop these prompts sequentially:

Prompt 1: “Add a loading spinner animation to the side panel when summarizing” Prompt 2: “Replace the plain text summary display with a proper markdown renderer using a lightweight library” Prompt 3: “Add a word count toggle: show/hide summary word count” Prompt 4: “Implement dark mode that follows system preference with @media (prefers-color-scheme: dark)”

The final side panel JavaScript:

// sidepanel.js
document.addEventListener('DOMContentLoaded', () => {
  const summarizeBtn = document.getElementById('summarize');
  const output = document.getElementById('output');
  const settingsBtn = document.getElementById('settings-btn');
  const settingsPanel = document.getElementById('settings');
  const apiKeyInput = document.getElementById('api-key');
  const modelSelect = document.getElementById('model');
  const saveBtn = document.getElementById('save-settings');
  
  // Load settings
  chrome.runtime.sendMessage({ action: 'get_settings' }, (settings) => {
    if (settings.apiKey) apiKeyInput.value = '••••••••' + settings.apiKey.slice(-4);
    if (settings.model) modelSelect.value = settings.model;
  });
  
  // Summarize button
  summarizeBtn.addEventListener('click', async () => {
    summarizeBtn.disabled = true;
    summarizeBtn.textContent = 'Summarizing...';
    output.innerHTML = '<div class="spinner"></div><p>Extracting page content...</p>';
    
    // Get active tab
    const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
    
    // Extract content via content script
    const [{ result }] = await chrome.scripting.executeScript({
      target: { tabId: tab.id },
      func: () => {
        // Simplified extract for demo; full version uses content.js
        const article = document.querySelector('article') || document.body;
        return article.innerText.substring(0, 30000);
      }
    });
    
    output.innerHTML = '<div class="spinner"></div><p>Sending to AI...</p>';
    
    // Get summary from service worker
    chrome.runtime.sendMessage(
      { action: 'summarize', text: result },
      (response) => {
        if (response.error) {
          output.innerHTML = `<div class="error">⚠️ ${response.error}</div>`;
        } else {
          // Simple markdown rendering
          output.innerHTML = marked.parse(response.summary);
          output.innerHTML += `<p class="word-count">
            📝 ${response.summary.split(/\s+/).length} words summary</p>`;
        }
        summarizeBtn.disabled = false;
        summarizeBtn.textContent = 'Summarize Page';
      }
    );
  });
  
  // Settings toggle
  settingsBtn.addEventListener('click', () => {
    settingsPanel.classList.toggle('hidden');
  });
  
  // Save settings
  saveBtn.addEventListener('click', () => {
    const settings = {
      apiKey: apiKeyInput.value,
      model: modelSelect.value
    };
    if (settings.apiKey && !settings.apiKey.startsWith('••')) {
      chrome.runtime.sendMessage(
        { action: 'save_settings', settings },
        () => { showToast('Settings saved!'); }
      );
    } else if (settings.apiKey.startsWith('••')) {
      // Keep existing key
      chrome.runtime.sendMessage(
        { action: 'save_settings', settings: { ...settings, apiKey: null } },
        () => { showToast('Model preference saved!'); }
      );
    }
  });
});

function showToast(msg) {
  const toast = document.getElementById('toast');
  toast.textContent = msg;
  toast.classList.add('show');
  setTimeout(() => toast.classList.remove('show'), 2000);
}

Step 5: Test and Debug with Copilot Chat

Load the extension in Chrome:

  1. Open chrome://extensions
  2. Enable “Developer mode”
  3. Click “Load unpacked” → select your project folder

Debug with Copilot Chat: If something breaks, use these prompts:

My Chrome extension's side panel doesn't open when I click the icon.
The manifest has "action.onClicked" and sidePanel permissions.
What might be wrong? Check my manifest.json and background.js.

Known issue: In Chrome 126+, sidePanel needs "default_path" in manifest AND 
runtime.setPanelBehavior(). Am I missing anything?
The content script isn't injecting on chrome:// pages. I get:
"Error: Cannot access a chrome:// URL"
How do I handle this gracefully in the service worker?

Common fixes Copilot Chat will suggest:

  • Add host_permissions for the API endpoints
  • Handle the tabs permission error with try/catch
  • Use chrome.scripting.executeScript instead of inline injection
  • Add a tab ID validator before messaging

Step 6: Build and Package

# Optimize with Chrome Extension CLI tool
npx @anthropic-ai/chrome-extension-tools optimize \
  --minify \
  --compress-images \
  --output dist/

# Create ZIP for Chrome Web Store
cd dist && zip -r ../smart-summarizer.zip ./*

Verification checklist:

# Check for common Manifest V3 issues
npx chrome-ext-reviewer ./manifest.json
# Should produce: ✓ No critical issues found
#                     ✓ All required permissions justified
#                     ✓ Service worker ready for MV3

What You’ve Built

A fully functional AI-powered Chrome extension built with AI assistance:

  • SmartSummarizer — summarizes any webpage with one click
  • Manifest V3 compliant with minimum permissions (activeTab, storage, sidePanel)
  • Side panel UI with settings, dark mode, and streaming display
  • Content extraction that works on 90%+ of article pages
  • Integrated with OpenAI API (swappable to Claude/Gemini)
  • Service worker with context menu, keyboard shortcut, and reliable message routing

The entire build took under 2 hours using Cursor and Copilot — without manually writing Chrome extension boilerplate from scratch.

Troubleshooting

Side panel doesn’t open: Ensure side_panel.default_path is set in manifest.json AND you call chrome.sidePanel.setPanelBehavior() in the background script. Chrome 126+ requires both. Also verify the sidepanel.html file exists in your build output.

“Cannot read properties of undefined” when messaging the service worker: Service workers can go inactive after 30 seconds. Use chrome.runtime.connect() for persistent ports instead of chrome.runtime.sendMessage() for long-lived interactions. Alternatively, keep the service worker alive with a storage listener:

// In background.js
chrome.storage.onChanged.addListener(() => {});  // Keepalive trick

Content script times out on heavy pages (e.g., Google Docs): Add a timeout to text extraction: Promise.race([extract(), timeout(5000)]). For very large pages, extract only the visible viewport content first.

API key security concern: The API key is stored in chrome.storage.sync (encrypted at rest by Chrome). For enterprise use, implement OAuth-based key retrieval from your backend. Never store the key in the extension’s source code.

Next Steps

  • Add Claude/Gemini API support as an alternative provider
  • Implement streaming responses (Server-Sent Events) for real-time summary display
  • Add export options: copy summary to clipboard, save as note, email to self
  • Build a “Highlight & Summarize” feature via selection context menu
  • Submit to Chrome Web Store with promotional screenshots and video demo
  • Port to Firefox, Edge, and Safari using the WebExtensions API