Agen coding AI, seperti Antigravity, kini dapat membuat kode ekstensi dengan akurasi yang mengesankan. Namun, untuk benar-benar memaksimalkan potensi dan memastikan hasil berkualitas tinggi, Anda harus memberinya konteks dan alat yang tepat.
Panduan ini menjelaskan cara menyiapkan alat yang tepat di agen coding Anda dan bagaimana alat tersebut dapat membantu Anda membuat ekstensi yang lebih baik dengan lebih cepat.
Kami telah membuat keterampilan untuk agen coding yang dirancang khusus untuk pengembangan ekstensi. Keterampilan ini adalah bagian dari inisiatif kami yang lebih luas, Modern Web Guidance, yang memberi agen coding AI keahlian platform web, praktik terbaik, dan pola API modern.
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 debug DevTools serta insight performa.
Penyiapan
Modern Web Guidance
Untuk menggunakan paket keterampilan, instal Modern Web Guidance ke lingkungan pilihan Anda dan tambahkan keterampilan ekstensi ke paket tersebut. 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 keterampilan melalui CLI modern-web-guidance akan otomatis memperbarui keterampilan.
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 serta modern-web-guidance.
Antigravity
Saat menginstal Antigravity, Anda dapat memilih plugin Modern Web Guidance yang menyertakan keterampilan ekstensi, atau Anda dapat menambahkannya melalui Customizations > 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 petunjuk untuk beberapa agen paling populer.
Antigravity
Untuk menggunakan server MCP Chrome DevTools, ikuti petunjuk dari dokumen Antigravity untuk menginstal server MCP kustom. Tambahkan hal 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 Chrome DevTools MCP GitHub.
Petunjuk agen CHROMEWEBSTORE.md
Bagian penting dari memublikasikan ekstensi adalah mengisi Dasbor Developer. Keterampilan ini mengatasi hal tersebut dengan membuat agen coding Anda membuat dan mengelola file CHROMEWEBSTORE.md yang melacak informasi yang diperlukan, termasuk justifikasi untuk setiap izin yang diminta dalam kode.
Keterampilan ini akan dipicu saat Anda menggunakan frasa seperti "Let's publish this" atau "Prepare this extension for the store", tetapi untuk menyederhanakan alur kerja agen 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.
Membuat dan menguji ekstensi Anda dengan agen coding
Keterampilan ekstensi yang disertakan dalam Modern Web Guidance membantu agen dalam tiga cara utama:
- Pengetahuan API terbaru: Keterampilan ini mengajarkan agen tentang API terbaru, yang mungkin dirilis setelah model yang Anda gunakan dilatih.
- Praktik terbaik: Keterampilan ini memastikan agen memiliki akses ke semua praktik terbaik yang telah dipelajari tim kami selama bertahun-tahun dalam membuat ekstensi Chrome.
- Kesiapan pengiriman: Keterampilan ini melacak informasi yang mungkin Anda perlukan untuk mengirimkan ekstensi ke Chrome Web Store, sehingga memudahkan distribusi.
Modern Web Guidance juga menyertakan keterampilan yang mencakup semua yang Anda butuhkan untuk memberikan pengalaman pengguna yang sangat baik, seperti performa, aksesibilitas, dan API modern. Misalnya, keterampilan 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, fokus pada keamanan, dan strategi penggantian 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 agen tersebut memerlukan izin sidePanel. Kemudian, agen akan membuat file CHROMEWEBSTORE.md dengan justifikasi. Saat siap mengirimkan, 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 dalam instance Chrome yang sedang berjalan, khususnya:
- Menginstal dan meng-uninstal ekstensi.
- Mencantumkan semua ekstensi yang diinstal dan memuat ulang ekstensi tersebut.
- Memicu tindakan ekstensi.
- Memeriksa setiap bagian 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 mengetahui bahwa agen tersebut 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 Teknik perintah.
Contoh perintah untuk menyederhanakan distribusi dengan CHROMEWEBSTORE.md
Meskipun menginstal keterampilan ekstensi dan menambahkan petunjuk ke agen Anda akan melakukan sebagian besar pekerjaan, bersikap spesifik dalam perintah Anda 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.
- Publikasi pertama kali: Saat ekstensi Anda memiliki semua fitur dan Anda ingin membuat kehadiran toko awal.
Prepare the extension for publication on the Chrome Web Store.
- Memperbarui izin dan justifikasi: Chrome Web Store menerapkan kebijakan tujuan tunggal dan memerlukan justifikasi mendetail untuk setiap izin yang diminta di
manifest.json.
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 membuat 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 di project berikutnya untuk melihat bagaimana alat ini dapat menyederhanakan pengembangan ekstensi Anda dari prototipe awal hingga publikasi.