How to Build a Chrome Extension with AI (2026)

Chrome extensions with AI can summarize pages, translate text, generate replies, and more. Here's how to build one from scratch with Manifest V3 and AI integration.

What You'll Build

A Chrome extension that:

Adds a popup with an input field
Reads the current page content
Sends it to an AI model
Displays the AI response

Total time: 1-2 hours.

Step 1: Project Structure

my-ai-extension/
├── manifest.json
├── popup.html
├── popup.js
├── content.js
├── background.js
├── styles.css
└── icons/
    ├── icon16.png
    ├── icon48.png
    └── icon128.png

Step 2: Manifest V3

{
  "manifest_version": 3,
  "name": "AI Page Assistant",
  "version": "1.0.0",
  "description": "AI-powered page analysis and summarization",
  "permissions": ["activeTab", "storage"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ],
  "background": {
    "service_worker": "background.js"
  }
}

Step 3: Popup UI

<!-- popup.html -->
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <h1>AI Assistant</h1>
    <textarea id="prompt" placeholder="Ask about this page..."></textarea>
    <button id="ask">Ask AI</button>
    <div id="response"></div>
    <button id="summarize">Summarize Page</button>
  </div>
  <script src="popup.js"></script>
</body>
</html>

/* styles.css */
.container {
  width: 350px;
  padding: 16px;
  font-family: system-ui, sans-serif;
}
h1 { font-size: 18px; margin: 0 0 12px; }
textarea {
  width: 100%;
  height: 80px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 6px;
  resize: vertical;
}
button {
  width: 100%;
  padding: 10px;
  margin-top: 8px;
  background: #2563eb;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
button:hover { background: #1d4ed8; }
#response {
  margin-top: 12px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.5;
  display: none;
}

Step 4: Content Script (Read Page)

// content.js — Runs on every page
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === 'getPageContent') {
    const content = document.body.innerText.slice(0, 4000) // Limit to ~4K chars
    const title = document.title
    const url = window.location.href
    sendResponse({ content, title, url })
  }
  return true // Keep message channel open for async
})

Step 5: Popup Logic + AI Integration

// popup.js
const OPENAI_API_KEY = '' // We'll handle this properly below

document.getElementById('summarize').addEventListener('click', async () => {
  const response = document.getElementById('response')
  response.style.display = 'block'
  response.textContent = 'Reading page...'

  // Get page content from content script
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true })
  const pageData = await chrome.tabs.sendMessage(tab.id, { action: 'getPageContent' })

  response.textContent = 'Thinking...'

  // Get API key from storage
  const { apiKey } = await chrome.storage.local.get('apiKey')
  if (!apiKey) {
    response.textContent = 'Please set your API key in settings.'
    return
  }

  // Call AI
  const aiResponse = await callAI(apiKey, 
    `Summarize this webpage in 3-5 bullet points:\n\nTitle: ${pageData.title}\nURL: ${pageData.url}\n\nContent:\n${pageData.content}`
  )
  
  response.textContent = aiResponse
})

document.getElementById('ask').addEventListener('click', async () => {
  const prompt = document.getElementById('prompt').value
  if (!prompt) return

  const response = document.getElementById('response')
  response.style.display = 'block'
  response.textContent = 'Thinking...'

  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true })
  const pageData = await chrome.tabs.sendMessage(tab.id, { action: 'getPageContent' })

  const { apiKey } = await chrome.storage.local.get('apiKey')
  if (!apiKey) {
    response.textContent = 'Please set your API key in settings.'
    return
  }

  const aiResponse = await callAI(apiKey,
    `Based on this webpage, answer the question.\n\nPage: ${pageData.title}\nContent: ${pageData.content}\n\nQuestion: ${prompt}`
  )
  
  response.textContent = aiResponse
})

async function callAI(apiKey, prompt) {
  try {
    const res = await fetch('https://api.openai.com/v1/chat/completions', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${apiKey}`,
      },
      body: JSON.stringify({
        model: 'gpt-4o-mini',
        messages: [{ role: 'user', content: prompt }],
        max_tokens: 500,
      }),
    })
    
    const data = await res.json()
    return data.choices[0].message.content
  } catch (error) {
    return `Error: ${error.message}`
  }
}

Step 6: Secure API Key Storage

Never hardcode API keys. Add a settings page:

// In popup.js — add settings handler
document.getElementById('saveKey').addEventListener('click', () => {
  const key = document.getElementById('apiKeyInput').value
  chrome.storage.local.set({ apiKey: key })
})

Step 7: Load in Chrome

Open chrome://extensions/
Enable "Developer mode" (top right)
Click "Load unpacked"
Select your extension folder
Click the extension icon on any page

Using Local AI (No API Key)

Chrome now supports built-in AI APIs (experimental):

// Chrome Built-in AI (Gemini Nano)
const session = await ai.languageModel.create()
const result = await session.prompt("Summarize this: " + pageContent)

This runs locally — no API key, no costs, no data leaving the device. Check chrome://flags/#prompt-api-for-gemini-nano to enable.

Adding to the Chrome Web Store

Create a ZIP of your extension folder
Go to Chrome Web Store Developer Dashboard
Pay $5 one-time registration fee
Upload ZIP, add screenshots and description
Submit for review (1-3 days)

Ideas for AI Chrome Extensions

Email summarizer — Summarize long email threads
Code explainer — Select code on any page, get an explanation
Translation — Translate selected text to your language
Meeting notes — Record and summarize Google Meet transcripts
Price tracker — Monitor product prices with AI alerts
Content grader — Rate article quality and readability
Social media reply generator — Draft replies on Twitter/LinkedIn

FAQ

Is Manifest V3 required?

Yes. Chrome deprecated Manifest V2 in 2024. All new extensions must use V3.

How much does the OpenAI API cost?

GPT-4o-mini: ~$0.15 per million input tokens. A page summary costs ~$0.001. Practically free for personal use.

Can I use Claude or other models?

Yes. Replace the OpenAI API call with Anthropic, Google, or any other LLM API. The pattern is the same.

Can I monetize a Chrome extension?

Yes. Freemium model (free basic, paid pro features), one-time purchase, or subscription. Many successful extensions charge $5-20/month.

Bottom Line

Building an AI Chrome extension is straightforward with Manifest V3. Read page content via content scripts, process with an AI API, display results in a popup. The entire project takes 1-2 hours. Chrome's built-in AI (Gemini Nano) is an exciting future that eliminates API costs entirely.