Chrome Extension Development

# Chrome Extension Development

Build powerful Chrome extensions with Google Antigravity IDE. This comprehensive guide covers Manifest V3, service workers, content scripts, and modern extension architecture.

## Why Chrome Extensions?

Chrome extensions enhance browser functionality with access to tabs, storage, and web APIs. Google Antigravity IDE's Gemini 3 engine provides intelligent patterns for extension development and security best practices.

## Manifest V3 Configuration

```json
// manifest.json
{
  "manifest_version": 3,
  "name": "Antigravity Helper",
  "version": "1.0.0",
  "description": "AI-powered browsing assistant",
  "permissions": [
    "storage",
    "activeTab",
    "scripting",
    "contextMenus"
  ],
  "host_permissions": [
    "https://*.example.com/*"
  ],
  "background": {
    "service_worker": "background.js",
    "type": "module"
  },
  "content_scripts": [
    {
      "matches": ["https://*.example.com/*"],
      "js": ["content.js"],
      "css": ["content.css"],
      "run_at": "document_end"
    }
  ],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  },
  "options_page": "options.html",
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  }
}
```

## Service Worker

```typescript
// background.ts
import { setupContextMenus } from "./contextMenus";
import { MessageHandler } from "./types";

// Initialize on install
chrome.runtime.onInstalled.addListener(async () => {
  await chrome.storage.local.set({ enabled: true, settings: {} });
  setupContextMenus();
});

// Message handling
const messageHandlers: Record<string, MessageHandler> = {
  async getPageData(request, sender) {
    const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
    if (!tab.id) return null;
    
    const results = await chrome.scripting.executeScript({
      target: { tabId: tab.id },
      func: () => ({
        title: document.title,
        url: window.location.href,
        content: document.body.innerText.slice(0, 5000),
      }),
    });
    
    return results[0]?.result;
  },
  
  async saveToStorage(request) {
    await chrome.storage.local.set(request.data);
    return { success: true };
  },
};

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  const handler = messageHandlers[request.action];
  
  if (handler) {
    handler(request, sender).then(sendResponse);
    return true; // Keep channel open for async response
  }
});

// Context menu handling
chrome.contextMenus.onClicked.addListener(async (info, tab) => {
  if (info.menuItemId === "analyze-selection" && info.selectionText) {
    // Process selected text
    const result = await analyzeText(info.selectionText);
    
    if (tab?.id) {
      chrome.tabs.sendMessage(tab.id, {
        action: "showResult",
        data: result,
      });
    }
  }
});
```

## Content Script

```typescript
// content.ts
interface Message {
  action: string;
  data?: unknown;
}

// Listen for messages from background
chrome.runtime.onMessage.addListener((message: Message, sender, sendResponse) => {
  switch (message.action) {
    case "showResult":
      showOverlay(message.data);
      break;
    case "extractData":
      sendResponse(extractPageData());
      break;
  }
  return true;
});

function showOverlay(data: unknown) {
  // Remove existing overlay
  document.getElementById("antigravity-overlay")?.remove();
  
  const overlay = document.createElement("div");
  overlay.id = "antigravity-overlay";
  overlay.innerHTML = `
    <div class="antigravity-modal">
      <button class="close-btn">&times;</button>
      <div class="content">${JSON.stringify(data, null, 2)}</div>
    </div>
  `;
  
  overlay.querySelector(".close-btn")?.addEventListener("click", () => {
    overlay.remove();
  });
  
  document.body.appendChild(overlay);
}

function extractPageData() {
  return {
    title: document.title,
    url: window.location.href,
    headings: Array.from(document.querySelectorAll("h1, h2, h3")).map(
      (h) => ({ tag: h.tagName, text: h.textContent })
    ),
    links: Array.from(document.querySelectorAll("a[href]")).map(
      (a) => ({ href: (a as HTMLAnchorElement).href, text: a.textContent })
    ),
  };
}

// Inject styles
const style = document.createElement("style");
style.textContent = `
  #antigravity-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
  }
`;
document.head.appendChild(style);
```

## Popup UI

```typescript
// popup.ts
document.addEventListener("DOMContentLoaded", async () => {
  const { enabled, settings } = await chrome.storage.local.get(["enabled", "settings"]);
  
  const toggle = document.getElementById("toggle") as HTMLInputElement;
  toggle.checked = enabled;
  
  toggle.addEventListener("change", async () => {
    await chrome.storage.local.set({ enabled: toggle.checked });
  });
  
  document.getElementById("analyze")?.addEventListener("click", async () => {
    const data = await chrome.runtime.sendMessage({ action: "getPageData" });
    displayResults(data);
  });
});
```

## Storage API

```typescript
// storage.ts
export async function getSettings<T>(key: string): Promise<T | null> {
  const result = await chrome.storage.local.get(key);
  return result[key] ?? null;
}

export async function setSettings<T>(key: string, value: T): Promise<void> {
  await chrome.storage.local.set({ [key]: value });
}

// Sync storage for cross-device
export async function syncSettings<T>(key: string, value: T): Promise<void> {
  await chrome.storage.sync.set({ [key]: value });
}
```

## Best Practices

- Use Manifest V3 for new extensions
- Minimize required permissions
- Handle service worker lifecycle properly
- Use TypeScript for type safety
- Implement proper error handling
- Test across different Chrome versions

Google Antigravity IDE provides Chrome extension templates and automatically validates your manifest configuration for security compliance.