Membangun ekstensi dengan agen coding

Agen coding AI, seperti Antigravity, kini dapat membuat kode ekstensi dengan akurasi yang mengesankan. Namun, untuk benar-benar memaksimalkan potensinya dan memastikan hasil yang berkualitas tinggi, Anda perlu memberikan 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. Kemampuan ini adalah bagian dari inisiatif kami yang lebih luas, Modern Web Guidance, yang memberikan keahlian platform web, praktik terbaik, dan pola API modern kepada agen coding AI.

Namun, membangun 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 proses debug dan insight performa DevTools.

Penyiapan

Modern Web Guidance

Untuk menggunakan paket keterampilan, instal Modern Web Guidance 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 memperbarui keterampilan.

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

Tindakan ini akan menjalankan wizard interaktif untuk menginstal skill sesuai preferensi Anda. Saat opsi ditampilkan, pilih agen coding Anda, lalu 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 menyertakan kemampuan ekstensi, atau Anda dapat menambahkannya melalui Customizations > Build With Google Plugins > Modern Web Guidance.

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

Modern Web Guidance di bagian Build With Google Plugins dalam penyesuaian Antigravity.
Menambahkan Modern Web Guidance 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 petunjuk untuk beberapa agen paling populer.

Antigravity

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

  2. Saat memulai, atau di Setelan > Penyesuaian, di bagian Membangun solusi bersama Google, aktifkan Chrome DevTools. Tindakan ini hanya akan menginstal kemampuan Chrome DevTools, tetapi tidak menginstal server MCP.

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

  3. Untuk menambahkan server MCP Chrome DevTools, buka Settings > Customization, klik tombol Add MCP server, lalu telusuri Chrome DevTools.

    Dialog penelusuran Add MCP server di Antigravity yang menampilkan Chrome DevTools di hasil penelusuran.
    Menelusuri Chrome DevTools di jendela Add 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 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 Buka konfigurasi MCP.
    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 proses debug 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 halo dunia. 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 proses 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 lainnya

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

Petunjuk agen CHROMEWEBSTORE.md

Bagian penting dari memublikasikan ekstensi adalah mengisi Dasbor Developer. Keterampilan ini mengatasinya dengan meminta agen coding Anda membuat dan mengelola file CHROMEWEBSTORE.md yang melacak informasi yang diperlukan, termasuk justifikasi untuk setiap permintaan izin yang diminta dalam kode.

Kemampuan ini akan dipicu saat Anda menggunakan frasa seperti "Let's publish this" atau "Prepare this extension for the store", tetapi untuk menyederhanakan Agentic Workflows Anda, tambahkan hal 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 dengan agen coding

Kemampuan ekstensi yang disertakan dalam Modern Web Guidance membantu agen dalam tiga cara utama:

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

Modern Web Guidance juga mencakup keterampilan yang mencakup semua hal yang Anda perlukan untuk memberikan pengalaman pengguna yang luar biasa, seperti performa, aksesibilitas, dan API modern. Misalnya, keterampilan API AI bawaan memastikan bahwa agen coding AI selalu menggunakan versi terbaru API bersama dengan informasi tambahan tentang aturan arsitektur eksplisit dan batasan hardware untuk menggunakan API ini, guna memungkinkan pengelolaan download model yang efisien, fokus pada keamanan, dan strategi penggantian yang lancar.

Kemampuan 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 Anda untuk membuat ekstensi menggunakan Side Panel API dan memublikasikannya ke Chrome Web Store, agen tersebut akan mengenali bahwa ia memerlukan izin sidePanel. Kemudian, alat ini akan membuat file CHROMEWEBSTORE.md dengan justifikasi. Jika sudah siap mengirimkannya, Anda dapat meninjau justifikasi ini, melakukan penyesuaian jika diperlukan, dan menyalinnya langsung ke Dasbor Developer.

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

  • Menginstal dan meng-uninstal ekstensi.
  • Mencantumkan semua ekstensi yang diinstal dan memuat ulang ekstensi tersebut.
  • Memicu tindakan ekstensi.
  • Periksa setiap platform ekstensi Anda (pop-up, panel samping, pekerja layanan).

Berikut adalah 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 Manifes V3 dan meminta izin storage karena agen tahu bahwa ia perlu mempertahankan data. Agen kini dapat membuat ekstensi, menginstalnya, mengamati cara kerjanya, dan memverifikasi stabilitasnya tanpa Anda perlu keluar dari antarmuka chat.

Ini adalah contoh perintah sederhana. Untuk mempelajari lebih lanjut berbagai teknik perintah dan menemukan teknik yang paling sesuai untuk 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 meminta agen membuat, memperbarui, dan mengelola file CHROMEWEBSTORE.md Anda.

  • Publikasi pertama kali: Saat ekstensi Anda memiliki fitur lengkap dan Anda ingin membuat kehadiran awal di Store.
Prepare the extension for publication on the Chrome Web Store.
  • Memperbarui izin dan justifikasi: Chrome Web Store menerapkan kebijakan tujuan tunggal dan memerlukan justifikasi terperinci untuk setiap permintaan 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 toko: 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 Modern Web Guidance dengan Chrome DevTools untuk agen membantu Anda membangun fitur berkualitas tinggi dengan lebih cepat, sekaligus memastikan ekstensi Anda stabil dan siap dikirimkan ke Chrome Web Store.

Mulailah bereksperimen dengan alat ini dalam project Anda berikutnya untuk melihat bagaimana alat ini dapat menyederhanakan pengembangan ekstensi Anda, mulai dari prototipe awal hingga publikasi.