So entwickeln Sie Browser-Erweiterungen mit Claude Code

Browser-Erweiterungsentwicklung mit Claude Code beschleunigen

Die Entwicklung von Chrome-Erweiterungen erfordert Kenntnisse über Manifest V3-Spezifikationen, Content Scripts, Background Service Worker und Popup-UI. Mit Claude Code können Sie all dies einfach durch natürlichsprachliche Anweisungen generieren.

Projektinitialisierung

> Erstelle ein Chrome-Erweiterungsprojekt.
> Mit Manifest V3, Popup-Bildschirm und Content Script.
> Build mit TypeScript + Vite ermöglichen.

Beispiel der von Claude Code generierten manifest.json:

{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0.0",
  "description": "Chrome-Erweiterung erstellt mit 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"
  }
}

Popup-UI implementieren

Das Popup, das beim Klicken auf das Erweiterungssymbol angezeigt wird.

// 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 });
  // Content Script über Einstellungsänderung benachrichtigen
  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);
  });
});

Content Script implementieren

Das Content Script manipuliert den Seiteninhalt. Hier implementieren wir eine Text-Hervorhebungsfunktion.

// 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();
    }
  });
}

// Nachrichten-Listener
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;
  }
});

Background Service Worker implementieren

// background.ts
chrome.runtime.onInstalled.addListener(() => {
  // Kontextmenü hinzufügen
  chrome.contextMenus.create({
    id: "highlight-selection",
    title: "Ausgewählten Text hervorheben",
    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,
    });
  }
});

Zu den Unterschieden zur CLI-Tool-Entwicklung siehe CLI-Tool-Entwicklung. Für effizientes Prompt-Schreiben siehe 10 Tipps zur Verdreifachung der Produktivität.

Zusammenfassung

Mit Claude Code können Sie die Chrome-Erweiterungsentwicklung erheblich beschleunigen – von der Manifest V3-Konfiguration über UI, Content Script bis zum Background Worker. Überlassen Sie Claude Code die Komplexität der Spezifikationen und konzentrieren Sie sich auf die Funktionsideen.

Weitere Informationen finden Sie in der offiziellen Claude Code-Dokumentation.