Guides

Building Manifest V3 extension development with Chrome Ex...

This guide provides a structured approach to building Chrome extensions with Manifest V3, secure AI integration, and cross-browser compatibility. Focuses on practical implementation steps, security patterns, and deployment workflows for developers working on productivity tools, AI-powered features, and SaaS integrations.

2-3 hours6 steps
1

Initialize project with Vite and React

Create a new project using Vite with React and TypeScript template. Configure project to use Chrome Extension API by adding necessary devDependencies (e.g., @types/chrome).

setup.sh
npm create vite@latest my-extension --template react-ts
cd my-extension
npm install -D @types/chrome

⚠ Common Pitfalls

  • •Forgetting to add @types/chrome for TS type support
  • •Using incompatible Vite plugins for extension builds
2

Configure Manifest V3 structure

Create manifest.json with required fields. Replace background page with service worker, define host permissions, and set content security policy.

{
  "manifest_version": 3,
  "name": "AI Assistant Extension",
  "version": "1.0",
  "permissions": ["activeTab", "scripting"],
  "background": {
    "service_worker": "background.js"
  },
  "content_security_policy": {
    "extension_pages": "script-src 'self' 'unsafe-eval'; object-src 'self'"
  }
}

⚠ Common Pitfalls

  • •Using deprecated manifest_version 2
  • •Missing required permissions for API calls
3

Implement secure API key management

Store API keys in chrome.storage.local instead of client code. Create a utility function to retrieve credentials securely.

async function getApiKey(): Promise<string> {
  const { apiKey } = await chrome.storage.local.get(['apiKey']);
  return apiKey;
}

// Usage in service worker
const key = await getApiKey();

⚠ Common Pitfalls

  • •Hardcoding API keys in client code
  • •Not handling storage errors
4

Integrate AI API in service worker

Create a service worker that handles API requests. Use fetch() with proper headers and error handling for AI API interactions.

chrome.runtime.onMessage.addListener(async (request, sender, sendResponse) => {
  if (request.action === 'callAI') {
    const apiKey = await getApiKey();
    const response = await fetch('https://api.example.com/ai', {
      method: 'POST',
      headers: { 'Authorization': `Bearer ${apiKey}` },
      body: JSON.stringify({ prompt: request.prompt })
    });
    sendResponse(await response.json());
  }
});

⚠ Common Pitfalls

  • •Forgetting to handle CORS in service workers
  • •Not validating API responses
5

Add cross-browser compatibility

Use WebExtension APIs instead of Chrome-specific APIs. Test in Firefox and Safari using browser-specific developer tools.

// Use standard WebExtension APIs
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
  chrome.scripting.executeScript({
    target: { tabId: tabs[0].id! },
    func: injectContent
  });
});

⚠ Common Pitfalls

  • •Using chrome-specific APIs without polyfills
  • •Not testing in Firefox/Safari
6

Implement content security policy

Configure content_security_policy in manifest to prevent XSS. Use strict rules for script and object loading.

"content_security_policy": {
  "extension_pages": "script-src 'self' 'unsafe-eval'; object-src 'self'"
}

⚠ Common Pitfalls

  • •Overly permissive CSP rules
  • •Forgetting to update CSP when adding new assets

What you built

Follow these steps to create a secure, cross-browser Chrome extension with AI integration. Validate each component through testing and ensure compliance with Chrome Web Store policies before publishing.