Cara Bikin Chrome Extension AI dengan ChatGPT & Claude API 2026

Pernah nggak sih, lagi baca artikel panjang terus mikir: “Wah, bagus kalau ada tombol AI ringkasin ini langsung di browser.” Atau lagi nulis email di Gmail, pengen rewrite biar lebih profesional tanpa bolak-balik buka tab ChatGPT.

Itu use case klasik Chrome extension AI — dan di 2026, bikinnya jauh lebih gampang dari yang lo kira. Nggak perlu jadi senior engineer. Cukup JavaScript dasar, API key, dan sedikit sabar.

Di artikel ini kita bikin extension simpel tapi berguna: side panel chat + tombol ringkas halaman + rewrite teks yang di-highlight. Cocok buat personal use, jual jasa, atau fondasi produk SaaS kecil.

Kenapa Extension AI Worth It Dibangun Sendiri

Banyak tools AI browser berbayar (Scite, Monica, MaxAI, dll). Fiturnya bagus, tapi:

• Langganan $10–30/bulan per tool
• Data lo lewat server mereka
• Fitur locked di plan premium
• Nggak custom buat workflow lo sendiri

Kalau lo udah punya API key vs akun login yang cocok, bikin extension sendiri sering lebih murah dan lebih fleksibel. Lo kontrol prompt, model, dan data flow-nya.

Plus: skill ini transferable. Extension + AI = product yang bisa lo jual, white-label, atau pakai internal tim.

Yang Lo Butuh Sebelum Mulai

1. Chrome / Chromium browser (Brave, Edge Chromium juga oke)
2. Editor — VS Code / Cursor (lebih enak kalau pakai Cursor + Claude Code setup)
3. API key OpenAI, Claude, atau OpenAI-compatible (banyak reseller di Indonesia jual paket hemat)
4. Dasar HTML/CSS/JS — nggak perlu framework dulu

Kalau lo baru kenal ecosystem API, baca dulu panduan OpenAI-compatible API Indonesia biar ngerti base URL, model name, dan format request-nya.

Arsitektur Extension Sederhana (Manifest V3)

Struktur folder minimal:

ai-sidekick/
├── manifest.json
├── background.js          # service worker
├── sidepanel.html
├── sidepanel.js
├── sidepanel.css
├── content.js             # inject ke halaman web
├── popup.html             # opsional: settings
├── popup.js
└── icons/
    └── icon128.png

1. manifest.json (inti semuanya)

{
  "manifest_version": 3,
  "name": "AI Sidekick",
  "version": "1.0.0",
  "description": "Ringkas halaman & rewrite teks pakai AI",
  "permissions": ["storage", "activeTab", "sidePanel", "scripting"],
  "host_permissions": ["https://api.openai.com/*", "https://*/*"],
  "background": {
    "service_worker": "background.js"
  },
  "side_panel": {
    "default_path": "sidepanel.html"
  },
  "action": {
    "default_title": "Buka AI Sidekick"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ]
}

Catatan penting:

• Manifest V3 wajib (V2 udah deprecated)
• host_permissions sesuaikan base URL API lo (OpenAI, Anthropic, atau proxy reseller)
• Jangan minta permission berlebihan biar review store lebih mulus

2. background.js — buka side panel

chrome.action.onClicked.addListener((tab) => {
  chrome.sidePanel.open({ windowId: tab.windowId });
});

Simpel. Klik icon extension → side panel muncul di kanan browser.

3. content.js — ambil teks halaman / selection

chrome.runtime.onMessage.addListener((msg, _sender, sendResponse) => {
  if (msg.type === "GET_PAGE_TEXT") {
    const text = document.body.innerText.slice(0, 12000);
    sendResponse({ text, title: document.title, url: location.href });
  }
  if (msg.type === "GET_SELECTION") {
    sendResponse({ text: window.getSelection().toString() });
  }
  return true;
});

Kita potong 12.000 karakter biar token nggak meledak. Buat artikel super panjang, lo bisa tambah chunking nanti.

4. sidepanel.js — otak AI-nya

Intinya: ambil teks → kirim ke API → tampilkan jawaban.

async function callAI(systemPrompt, userContent) {
  const { apiKey, baseUrl, model } = await chrome.storage.sync.get([
    "apiKey", "baseUrl", "model"
  ]);

  const res = await fetch(`${baseUrl || "https://api.openai.com/v1"}/chat/completions`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "Authorization": `Bearer ${apiKey}`
    },
    body: JSON.stringify({
      model: model || "gpt-4o-mini",
      messages: [
        { role: "system", content: systemPrompt },
        { role: "user", content: userContent }
      ],
      temperature: 0.4
    })
  });

  if (!res.ok) {
    const err = await res.text();
    throw new Error(err);
  }

  const data = await res.json();
  return data.choices[0].message.content;
}

document.getElementById("btn-summarize").addEventListener("click", async () => {
  const out = document.getElementById("output");
  out.textContent = "Lagi ringkasin...";

  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  const page = await chrome.tabs.sendMessage(tab.id, { type: "GET_PAGE_TEXT" });

  try {
    const summary = await callAI(
      "Kamu asisten riset. Ringkas konten dalam Bahasa Indonesia, bullet points jelas, max 8 poin + 1 takeaway.",
      `Judul: ${page.title}\nURL: ${page.url}\n\n${page.text}`
    );
    out.textContent = summary;
  } catch (e) {
    out.textContent = "Error: " + e.message;
  }
});

Tombol rewrite selection mirip — bedanya GET_SELECTION + system prompt beda:

Rewrite teks berikut biar lebih profesional, ringkas, dan natural Bahasa Indonesia. Jaga makna asli.

5. Simpan API key di chrome.storage (bukan hardcode)

Di popup settings:

document.getElementById("save").addEventListener("click", async () => {
  await chrome.storage.sync.set({
    apiKey: document.getElementById("apiKey").value.trim(),
    baseUrl: document.getElementById("baseUrl").value.trim(),
    model: document.getElementById("model").value.trim()
  });
  alert("Tersimpan!");
});

Jangan pernah commit API key ke GitHub. Key bocor = tagihan meledak.

Load Extension ke Chrome (Development)

1. Buka chrome://extensions
2. Nyalakan Developer mode
3. Load unpacked → pilih folder ai-sidekick
4. Isi API key di popup settings
5. Buka artikel random → klik icon → ringkas

Kalau error CORS / network, cek host_permissions dan base URL. Beberapa provider butuh path /v1/chat/completions exact.

Prompt Templates yang Worth Dimasukin

Jangan cuma “summarize”. Kasih preset biar extension terasa produk beneran:

Ini yang bikin user betah: satu klik, hasil konsisten.

Pakai Claude API (Anthropic) — Ada Bedanya Sedikit

Claude bagus banget buat ringkasan panjang dan rewrite yang natural. Format request-nya beda kalau pakai Anthropic native:

// Anthropic Messages API (bukan OpenAI shape)
body: JSON.stringify({
  model: "claude-sonnet-4-20250514",
  max_tokens: 1024,
  system: systemPrompt,
  messages: [{ role: "user", content: userContent }]
})
// Header: x-api-key + anthropic-version

Alternatif lebih gampang: pakai proxy OpenAI-compatible yang nge-wrap Claude. Request shape sama kayak OpenAI, cuma ganti base URL + model name. Banyak yang pilih ini biar satu codebase handle banyak model.

Kalau lo sering ganti model, pelajari cara hemat kuota token API AI — extension yang spam request gampang bikin bill naik diam-diam.

Fitur Next Level (Kalau Udah Jalan)

Setelah MVP jalan, upgrade bertahap:

1. Context menu — klik kanan teks → “Rewrite with AI”
2. Streaming response — pakai stream: true biar terasa cepat
3. History chat di chrome.storage.local
4. Per-site prompt — Gmail beda template dari LinkedIn
5. Screenshot + vision — kirim image ke model multimodal
6. Keyboard shortcut — Alt+S untuk summarize

Kalau lo pengen scale jadi produk jualan, pola-nya mirip bikin SaaS MVP 7 hari pakai Cursor + Claude API: fokus satu pain point, publish, iterasi dari feedback.

Keamanan & Etika (Jangan Skip)

• Jangan kirim password / data sensitif ke model tanpa consent user
• Tampilkan warning kalau halaman HTTPS private (banking, admin panel)
• Rate limit di sisi client (misal max 10 request/menit) biar nggak abuse
• Kalau publish ke store, jelaskan di privacy policy: data dikirim ke provider AI mana
• Sediakan opsi self-enter API key (BYOK) — user lebih percaya

Chrome Web Store semakin ketat soal remote code & data collection. BYOK model (user bawa key sendiri) biasanya lebih aman secara trust.

Estimasi Biaya Realistis

Asumsi pakai model mini/flash:

• Ringkas 1 artikel (~3–5k token input + 500 output): Rp5–30 tergantung provider
• 50 ringkasan/hari: masih di bawah Rp50rb/bulan di banyak setup hemat
• Bandingkan langganan extension AI komersial: $15–29/bulan fixed

Makanya banyak freelancer pilih API key sendiri + extension custom: cost ikut usage, fitur ikut kebutuhan.

Troubleshooting Cepat

Pro tip: buka DevTools service worker di chrome://extensions → “service worker” link buat liat error background.

Workflow Development yang Enak

Kalau lo coding pakai AI assistant:

1. Scaffold folder + manifest manual (5 menit)
2. Minta Cursor/Claude bikinin UI side panel yang rapi
3. Implement callAI dulu, test di console
4. Baru hubungkan content script
5. Polish preset prompts — ini yang rasanya “produk”

Prompt ke coding AI yang efektif:

“Buat Manifest V3 Chrome extension side panel: tombol Summarize active tab, Rewrite selection, settings simpan apiKey/baseUrl/model di chrome.storage.sync. Vanilla JS, tanpa bundler.”

Semakin spesifik, semakin sedikit debug.

Ide Monetisasi (Buat yang Suka Bisnis)

Extension AI bukan cuma tool pribadi:

• Jual jasa custom extension buat UMKM (CS helper, product rewriter Shopee)
• Template extension + setup API key — bundling jasa onboarding
• White-label buat agency content
• Lead magnet: free extension → upsell jasa AI / kursus

Kalau lo lebih suka jualan akses daripada coding full-time, kombinasi extension sederhana + reseller API key bisa jadi funnel yang rapi.

Checklist Sebelum Dipakai Harian

• [ ] API key tersimpan di storage, bukan di kode
• [ ] Model default yang murah (mini/flash) untuk task ringan
• [ ] Potong input teks biar token terkendali
• [ ] Error message manusiawi (bukan raw JSON)
• [ ] Tombol loading state biar user nggak double-click
• [ ] Test di 5 situs beda (news, docs, Gmail, Notion, Medium)

Penutup

Bikin Chrome extension AI di 2026 itu skill praktis: lo belajar browser API, prompt product thinking, dan cost control sekaligus. Mulai dari satu fitur yang lo pakai tiap hari — ringkas halaman atau rewrite selection — baru tambah fitur setelah kebiasaan terbentuk.

Yang lo butuh intinya cuma tiga: Manifest V3, sedikit JavaScript, dan API key yang stabil. Sisanya iterasi.

Kalau belum punya key, pilih dulu jalur yang cocok (akun chat vs API) lewat panduan API key vs akun login, terus setup endpoint yang nyaman dipakai development. Setelah itu, load unpacked, tes di artikel favorit lo, dan rasain bedanya kerja di browser tanpa bolak-balik tab ChatGPT.

Selamat nge-build. Kalau extension pertama lo berantakan, normal — yang penting jalan. Polish belakangan.