Membangun ekstensi dengan agen coding

Agen coding AI, seperti Antigravity, kini dapat membuat kode ekstensi dengan akurasi yang mengesankan. Namun, untuk benar-benar memaksimalkan potensi mereka dan memastikan hasil berkualitas tinggi, Anda perlu memberi mereka konteks dan alat yang tepat.

Panduan ini menjelaskan cara menyiapkan alat yang tepat di agen coding Anda dan cara alat tersebut dapat membantu Anda membangun ekstensi yang lebih baik dengan lebih cepat.

Kami telah membuat keterampilan untuk agen coding yang dirancang khusus untuk pengembangan ekstensi. Keahlian ini adalah bagian dari inisiatif kami yang lebih luas, Panduan Web Modern, yang memberikan keahlian platform web, praktik terbaik, dan pola API modern kepada agen coding AI.

Namun, membuat ekstensi hanyalah langkah pertama. Untuk membantu Anda memverifikasi bahwa kode Anda berfungsi seperti yang diharapkan, Chrome DevTools untuk agen memungkinkan asisten coding AI men-debug ekstensi langsung di Chrome dan memanfaatkan kemampuan pen-debug-an DevTools serta insight performa.

Penyiapan

Panduan Web Modern

Untuk menggunakan paket keterampilan, instal Panduan Web Modern ke lingkungan pilihan Anda dan tambahkan keterampilan ekstensi ke dalamnya. Berikut petunjuk untuk beberapa alat populer.

CLI

Penginstalan yang direkomendasikan untuk sebagian besar agen coding (termasuk Gemini CLI, Claude Code, dan Codex) adalah melalui modern-web-guidance CLI yang dibuat oleh tim Chrome. Menginstal keterampilan melalui modern-web-guidance CLI akan otomatis membuat keterampilan tetap terbaru.

  npx modern-web-guidance@latest install --choose

Tindakan ini menjalankan wizard interaktif untuk menginstal keterampilan sesuai preferensi Anda. Saat opsi ditampilkan, pilih agen coding Anda dan pilih chrome-extensions dan modern-web-guidance.

Perintah pemilih CLI Modern Web Guidance.
Memilih chrome-extensions dan modern-web-guidance di wizard penginstal.

Antigravity

Saat menginstal Antigravity, Anda dapat memilih plugin Modern Web Guidance yang mencakup keterampilan ekstensi, atau Anda dapat menambahkannya melalui Penyesuaian > Build With Google Plugins > Modern Web Guidance.

Plugin Modern Web Guidance di layar penginstalan Antigravity.
Memilih plugin Modern Web Guidance selama penginstalan Antigravity.

Panduan Web Modern di bagian Plugin Build With Google dalam penyesuaian Antigravity.
Menambahkan Panduan Web Modern melalui Penyesuaian setelah penginstalan.

Chrome DevTools untuk agen coding

Anda dapat menambahkan Chrome DevTools untuk agen ke agen coding pilihan Anda sebagai plugin, ekstensi, atau sebagai server MCP.

Berikut adalah petunjuk untuk beberapa agen yang paling populer.

Antigravity

  1. Download Antigravity IDE (Antigravity tidak direkomendasikan karena tidak memungkinkan Anda mengedit konfigurasi server MCP secara manual).

  2. Saat startup, atau di Setelan > Penyesuaian, di bagian Buat dengan Google, aktifkan Chrome DevTools. Tindakan ini hanya akan menginstal skill Chrome DevTools, tetapi bukan server MCP.

    Opsi kotak centang Developer Tools dan Panduan Web Modern di antarmuka penyiapan Antigravity.
    Mengaktifkan Panduan Web Modern dan Chrome DevTools selama startup atau penyesuaian.

  3. Untuk menambahkan server MCP Chrome DevTools, buka Setelan > Penyesuaian, klik tombol Tambahkan server MCP, lalu telusuri Chrome DevTools.

    Dialog penelusuran Tambahkan server MCP di Antigravity yang menampilkan Chrome DevTools di hasil penelusuran.
    Mencari Chrome DevTools di jendela Tambahkan server MCP.
    Menginstal server MCP Chrome DevTools di antarmuka Antigravity.
    Menginstal server MCP Chrome DevTools.
    Daftar penyesuaian yang menampilkan Chrome DevTools yang ditambahkan ke server MCP aktif.
    Server MCP Chrome DevTools yang tercantum di bagian penyesuaian.

  4. Klik Open MCP Config untuk membuka konfigurasi server MCP. Perhatikan bahwa Anda harus menutup setelan untuk melihat file konfigurasi di IDE.

    Jendela setelan Penyesuaian yang menampilkan tombol Open MCP config.
    Menemukan tombol Open MCP config di setelan.

  5. Tambahkan dua parameter konfigurasi berikut: --categoryExtensions (untuk mengaktifkan alat ekstensi) dan --autoConnect (untuk mengaktifkan koneksi ke Profil Chrome yang ada, yang diperlukan saat menggunakan API AI bawaan Chrome atau memerlukan login).

    {
 "mcpServers": {
   "chrome-devtools-mcp": {
     "args": [
       "-y",
       "chrome-devtools-mcp@latest",
       "--categoryExtensions",
       "--autoConnect"
     ],
     "command": "npx"
   }
 }
}

  6. Untuk mengaktifkan proses debug jarak jauh, buka Chrome, buka chrome://inspect/#remote-debugging, lalu pilih Izinkan proses debug jarak jauh untuk instance browser ini.

    Halaman chrome://inspect yang menampilkan kotak centang untuk proses debug jarak jauh.
    Mengaktifkan setelan Izinkan pen-debug-an jarak jauh untuk instance browser ini di Chrome.

  7. Mulai ulang Antigravity IDE.

  8. Buat ruang kerja baru dan buat perintah pengujian: "Buat ekstensi Chrome hello world. Uji menggunakan Chrome DevTools." Saat agen memulai pengujian ekstensi di browser, Chrome akan menampilkan dialog yang meminta izin proses debug jarak jauh. Pilih Izinkan. Saat sesi debug jarak jauh diaktifkan, Chrome akan menampilkan banner "Chrome saat ini dikontrol oleh software uji otomatis".

<figure>
  <img src="image/antigravityide--u84rk62f5t9.png" alt="The remote debugging warning banner and approval popup dialog in Chrome." class="screenshot" width="800">
  <figcaption>The remote debugging banner indicating automated browser control is active.</figcaption>
</figure>

Claude Code

  claude mcp add chrome-devtools --scope project -- npx chrome-devtools-mcp@latest --categoryExtensions --autoConnect

Agen lain

Untuk mengetahui petunjuk tentang cara menyiapkan agen lain, lihat dokumentasi di GitHub MCP Chrome DevTools.

Petunjuk agen CHROMEWEBSTORE.md

Bagian penting dari memublikasikan ekstensi adalah mengisi Dasbor Developer. Skill ini mengatasi masalah ini dengan membuat agen pengodean Anda membuat dan memelihara file CHROMEWEBSTORE.md yang melacak informasi yang diperlukan, termasuk justifikasi untuk setiap izin yang diminta dalam kode.

Keterampilan akan dipicu saat Anda menggunakan frasa seperti "Ayo publikasikan ini" atau "Siapkan ekstensi ini untuk toko", tetapi untuk menyederhanakan alur kerja agentik Anda, tambahkan kode berikut ke petunjuk sistem agen Anda (misalnya, ~/.gemini/GEMINI.md untuk Antigravity atau ~/.claude/CLAUDE.md untuk Claude):

Whenever you are creating or making changes to a Chrome extension, create and manage a CHROMEWEBSTORE.md file. You can use the chrome-extensions skill to learn about the format of this file.

Membangun dan menguji ekstensi Anda dengan agen coding

Keahlian ekstensi yang disertakan dalam Panduan Web Modern membantu agen dalam tiga cara utama:

  • Pengetahuan API terbaru: Mempelajari agen tentang API terbaru, yang mungkin telah dirilis setelah model yang Anda gunakan dilatih.
  • Praktik terbaik: Memastikan agen memiliki akses ke semua praktik terbaik yang telah dipelajari tim kami selama bertahun-tahun dalam membangun ekstensi Chrome.
  • Kesiapan pengiriman: Alat ini melacak informasi yang mungkin Anda perlukan untuk mengirimkan ekstensi ke Chrome Web Store, sehingga mempermudah distribusi.

Panduan Web Modern juga mencakup keterampilan yang mencakup semua yang Anda butuhkan untuk memberikan pengalaman pengguna yang sangat baik, seperti performa, aksesibilitas, dan API modern. Misalnya, kemampuan AI API bawaan memastikan bahwa agen coding AI selalu menggunakan versi API terbaru bersama dengan informasi tambahan tentang aturan arsitektur eksplisit dan batasan hardware untuk menggunakan API ini, guna memungkinkan pengelolaan download model yang efisien, berfokus pada keamanan, dan strategi fallback yang lancar.

Keterampilan ini juga membantu agen Anda melacak informasi yang diperlukan untuk publikasi, termasuk justifikasi untuk setiap izin yang diminta dalam kode. Misalnya, jika Anda meminta agen coding untuk membuat ekstensi menggunakan Side Panel API dan memublikasikannya ke Chrome Web Store, agen akan mengenali bahwa ia memerlukan izin sidePanel. Kemudian, file CHROMEWEBSTORE.md akan dibuat dengan justifikasi. Jika sudah siap mengirimkan, Anda dapat meninjau alasan ini, melakukan penyesuaian jika diperlukan, dan menyalinnya langsung ke Dasbor Developer.

Chrome DevTools untuk agen memungkinkan asisten coding AI menginstal dan men-debug ekstensi dalam instance Chrome yang sedang berjalan, khususnya:

  • Menginstal dan meng-uninstal ekstensi.
  • Mencantumkan semua ekstensi yang terinstal dan memuat ulang ekstensi tersebut.
  • Memicu tindakan ekstensi.
  • Periksa setiap permukaan ekstensi Anda (pop-up, panel samping, service worker).

Berikut perintah dan video yang menunjukkan cara kerjanya dalam praktik:

Build a simple "Quick notes" extension that opens a popup text area to save notes and test it in the browser.

Dalam hal ini, agen harus membuat file Manifest V3 dan meminta izin storage karena tahu bahwa ia perlu mempertahankan data. Agen kini dapat membuat ekstensi, menginstalnya, melihatnya berjalan, dan memverifikasi stabilitasnya tanpa Anda harus keluar dari antarmuka chat.

Ini adalah contoh perintah sederhana. Untuk mempelajari lebih lanjut berbagai teknik perintah dan menemukan teknik yang paling sesuai dengan kasus penggunaan Anda, lihat panduan kami tentang Rekayasa perintah.

Contoh perintah untuk menyederhanakan distribusi dengan CHROMEWEBSTORE.md

Meskipun menginstal keterampilan ekstensi dan menambahkan petunjuk ke agen akan melakukan sebagian besar pekerjaan, memberikan perintah yang spesifik dapat menghasilkan hasil yang lebih baik untuk tahap pengembangan yang sedang Anda lakukan. Berikut panduan singkat tentang cara memberikan perintah kepada agen untuk membuat, memperbarui, dan memelihara file CHROMEWEBSTORE.md Anda.

  • Publikasi pertama kali: Saat ekstensi Anda telah lengkap dan Anda ingin membuat kehadiran toko awal.
Prepare the extension for publication on the Chrome Web Store.
  • Memperbarui izin dan alasan: Chrome Web Store menerapkan kebijakan tujuan tunggal dan mewajibkan alasan terperinci untuk setiap izin yang diminta di manifest.json Anda.
We just added the 'declarativeNetRequest' and 'storage' permissions to our manifest. Let's update our store listing.
  • Menangani penolakan di Play Store: Jika ekstensi Anda ditolak atau ditandai selama proses peninjauan, Anda dapat memberikan alasan penolakan langsung kepada agen dan memintanya untuk memperbarui metadata kepatuhan Anda.
Our extension submission was rejected because our privacy policy doesn't explicitly mention how we handle user data locally. Let's update the privacy policy section in CHROMEWEBSTORE.md to resolve this.

Kesimpulan

Menggabungkan keterampilan Panduan Web Modern dengan Chrome DevTools untuk agen membantu Anda membangun fitur berkualitas tinggi dengan lebih cepat, tetapi juga memastikan ekstensi Anda stabil dan siap untuk dikirimkan ke Chrome Web Store.

Mulai bereksperimen dengan alat ini dalam proyek berikutnya untuk melihat bagaimana alat ini dapat menyederhanakan pengembangan ekstensi Anda dari prototipe awal hingga publikasi.