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 kemampuan 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, membangun ekstensi hanyalah langkah pertama. Untuk membantu Anda memverifikasi bahwa kode Anda berfungsi seperti yang diharapkan, Chrome DevTools untuk agen memungkinkan asisten coding AI melakukan debug ekstensi langsung di Chrome dan memanfaatkan kemampuan debug 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 CLI modern-web-guidance yang dibuat oleh tim Chrome. Menginstal skill melalui modern-web-guidance CLI akan otomatis membuat skill tetap terbaru.
npx modern-web-guidance@latest install --choose
Tindakan ini menjalankan wizard interaktif untuk menginstal keterampilan sesuai preferensi Anda. Saat melihat opsi, pilih agen coding Anda dan pilih chrome-extensions dan modern-web-guidance.
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.
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
Untuk menggunakan server MCP Chrome DevTools, ikuti petunjuk dari dokumen Antigravity untuk menginstal server MCP kustom. Tambahkan kode berikut ke konfigurasi server MCP:
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"chrome-devtools-mcp@latest",
"--category-extensions",
"-y"
]
}
}
}
Claude Code
claude mcp add chrome-devtools --scope project -- npx chrome-devtools-mcp@latest --categoryExtensions
Agen lain
Untuk mengetahui petunjuk tentang 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 mengatasi masalah ini dengan meminta 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: Alat ini mengajarkan agen tentang API terbaru, yang mungkin telah dirilis setelah model yang Anda gunakan dilatih.
- Praktik terbaik: Hal ini 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 API versi 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, pekerja layanan).
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 agen tahu bahwa ia perlu mempertahankan data. Sekarang, agen dapat membuat ekstensi, menginstalnya, mengamati cara kerjanya, 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, bersikap spesifik dalam perintah dapat menghasilkan hasil yang lebih baik untuk tahap pengembangan yang sedang Anda lakukan. Berikut panduan singkat tentang cara meminta agen Anda untuk membuat, memperbarui, dan mengelola file CHROMEWEBSTORE.md Anda.
- Publikasi pertama kali: Saat ekstensi Anda sudah 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.jsonAnda.
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 cara alat ini dapat menyederhanakan pengembangan ekstensi Anda dari prototipe awal hingga publikasi.