Como Desenvolver Extensões de Navegador com Claude Code

Acelerando o Desenvolvimento de Extensões de Navegador com Claude Code

O desenvolvimento de extensões Chrome requer conhecimento sobre especificações do Manifest V3, content scripts, background service workers e popup UI. Com o Claude Code, você pode gerar tudo isso simplesmente por instruções em linguagem natural.

Configuração Inicial do Projeto

> Crie um projeto de extensão Chrome.
> Com Manifest V3, tela popup e content script.
> Permitir build com TypeScript + Vite.

Exemplo de manifest.json gerado pelo Claude Code:

{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0.0",
  "description": "Extensão Chrome criada com Claude Code",
  "permissions": ["storage", "activeTab"],
  "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"],
      "css": ["content.css"]
    }
  ],
  "background": {
    "service_worker": "background.js",
    "type": "module"
  }
}

Implementação da Popup UI

O popup exibido ao clicar no ícone da extensão.

// popup.ts
interface Settings {
  enabled: boolean;
  highlightColor: string;
  fontSize: number;
}

const defaultSettings: Settings = {
  enabled: true,
  highlightColor: "#ffeb3b",
  fontSize: 14,
};

async function loadSettings(): Promise<Settings> {
  const result = await chrome.storage.sync.get("settings");
  return { ...defaultSettings, ...result.settings };
}

async function saveSettings(settings: Settings) {
  await chrome.storage.sync.set({ settings });
  // Notificar o content script sobre alteração de configurações
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  if (tab.id) {
    chrome.tabs.sendMessage(tab.id, { type: "SETTINGS_UPDATED", settings });
  }
}

document.addEventListener("DOMContentLoaded", async () => {
  const settings = await loadSettings();

  const enabledCheckbox = document.getElementById("enabled") as HTMLInputElement;
  const colorInput = document.getElementById("color") as HTMLInputElement;
  const fontSizeInput = document.getElementById("fontSize") as HTMLInputElement;

  enabledCheckbox.checked = settings.enabled;
  colorInput.value = settings.highlightColor;
  fontSizeInput.value = String(settings.fontSize);

  enabledCheckbox.addEventListener("change", () => {
    settings.enabled = enabledCheckbox.checked;
    saveSettings(settings);
  });

  colorInput.addEventListener("input", () => {
    settings.highlightColor = colorInput.value;
    saveSettings(settings);
  });

  fontSizeInput.addEventListener("input", () => {
    settings.fontSize = parseInt(fontSizeInput.value);
    saveSettings(settings);
  });
});

Implementação do Content Script

O content script que manipula o conteúdo da página. Aqui implementamos uma funcionalidade de destaque de texto.

// content.ts
let settings: Settings = {
  enabled: true,
  highlightColor: "#ffeb3b",
  fontSize: 14,
};

function highlightText(searchTerm: string) {
  if (!settings.enabled || !searchTerm) return;

  const walker = document.createTreeWalker(
    document.body,
    NodeFilter.SHOW_TEXT,
    null
  );

  const matches: { node: Text; index: number }[] = [];

  while (walker.nextNode()) {
    const node = walker.currentNode as Text;
    const index = node.textContent?.toLowerCase().indexOf(searchTerm.toLowerCase()) ?? -1;
    if (index !== -1) {
      matches.push({ node, index });
    }
  }

  matches.reverse().forEach(({ node, index }) => {
    const range = document.createRange();
    range.setStart(node, index);
    range.setEnd(node, index + searchTerm.length);

    const highlight = document.createElement("mark");
    highlight.style.backgroundColor = settings.highlightColor;
    highlight.className = "ext-highlight";
    range.surroundContents(highlight);
  });
}

function clearHighlights() {
  document.querySelectorAll(".ext-highlight").forEach((el) => {
    const parent = el.parentNode;
    if (parent) {
      parent.replaceChild(document.createTextNode(el.textContent || ""), el);
      parent.normalize();
    }
  });
}

// Listener de mensagens
chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => {
  if (message.type === "HIGHLIGHT") {
    clearHighlights();
    highlightText(message.term);
    sendResponse({ success: true });
  }
  if (message.type === "SETTINGS_UPDATED") {
    settings = message.settings;
  }
});

Implementação do Background Service Worker

// background.ts
chrome.runtime.onInstalled.addListener(() => {
  // Adicionar menu de contexto
  chrome.contextMenus.create({
    id: "highlight-selection",
    title: "Destacar texto selecionado",
    contexts: ["selection"],
  });
});

chrome.contextMenus.onClicked.addListener(async (info, tab) => {
  if (info.menuItemId === "highlight-selection" && tab?.id) {
    await chrome.tabs.sendMessage(tab.id, {
      type: "HIGHLIGHT",
      term: info.selectionText,
    });
  }
});

Para as diferenças em relação ao desenvolvimento de ferramentas CLI, consulte desenvolvimento de ferramentas CLI. Para escrita eficiente de prompts, veja 10 dicas para triplicar a produtividade.

Resumo

Com o Claude Code, você pode acelerar significativamente o desenvolvimento de extensões Chrome - desde a configuração do Manifest V3, UI, content script até o background worker. Deixe a complexidade das especificações com o Claude Code e foque nas ideias de funcionalidades.

Para mais informações, consulte a documentação oficial do Claude Code.