Chrome DevTools untuk agen memungkinkan agen Anda memulai sesi browser dan menginstal atau berinteraksi dengan ekstensi Chrome menggunakan server MCP. Hal ini memungkinkan agen pengodean Anda mengontrol siklus proses ekstensi: menginstal, memuat ulang, dan memicu tindakan.
Alih-alih memuat ekstensi mode developer secara manual, mengklik tombol muat ulang di halaman pengelolaan ekstensi setiap kali Anda mengubah kode, dan memicu ekstensi secara manual untuk mengujinya, instruksikan agen AI Anda untuk mengelola seluruh proses secara mandiri. Hal ini menjembatani kesenjangan antara pembuatan kode statis dan pengujian ekstensi aktif.
Anda dapat menggunakan alat ekstensi untuk melakukan hal berikut:
- Menginstal ekstensi: Menginstal ekstensi Chrome yang tidak dikemas dari jalur direktori lokal.
- Mencantumkan ekstensi: Mengambil daftar semua ekstensi Chrome yang terinstal, termasuk nama, ID, versi, dan status aktifnya.
- Muat ulang ekstensi: Muat ulang ekstensi Chrome yang belum di-unzip berdasarkan ID-nya untuk menerapkan perubahan kode secara instan.
- Tindakan pemicu: Memicu tindakan default ekstensi berdasarkan ID-nya,
seperti membuka menu atau menjalankan tindakan skrip latar belakang (lihat,
chrome.action dalam dokumentasi
API).
- Meng-uninstal ekstensi: Menghapus ekstensi Chrome dari sesi browser berdasarkan ID-nya.
Prasyarat
Sebelum menggunakan alat ekstensi, pastikan Anda memiliki hal berikut:
- Flag eksperimental: Kategori Ekstensi tidak aktif secara default di
DevTools untuk Agen. Anda harus mengonfigurasi server
MCP dengan
flag
--categoryExtensions. - Ekstensi mode developer: Alat seperti
install_extensionmemerlukan jalur absolut ke folder ekstensi mode developer, sehingga ideal untuk pengembangan lokal.
Kasus penggunaan alat ekstensi Chrome
Instruksikan agen Anda untuk mengelola siklus proses ekstensi saat mengembangkan dan memperbaiki bug.
Catatan: Langkah-langkah eksekusi agen adalah contoh perilaku potensial. Agen Anda mungkin bertindak berbeda.
Melakukan iterasi dan memuat ulang ekstensi dengan cepat
Memuat ulang ekstensi secara manual setelah setiap perubahan file memperlambat pengembangan. Instruksikan agen Anda untuk menerapkan perbaikan kode dan segera memuat ulang ekstensi untuk memverifikasi perilaku baru tanpa intervensi manual.
Contoh perintah:
Anda dapat menggunakan pendekatan umum:
Verify the extension has access to the active tab.
Atau, Anda bisa lebih mendetail:
Update the manifest.json to include the "activeTab" permission. Then, reload the extension with ID 'abc123xyz' and trigger its default action to ensure it works.
Contoh eksekusi agen: Agen Anda mengedit file manifest.json di sistem file Anda. Kemudian, alat ini memanggil alat reload_extension menggunakan ID yang diberikan.
Terakhir, alat ini memanggil alat trigger_extension_action untuk mengaktifkan ekstensi
dan memverifikasi bahwa tidak ada error izin yang muncul di konsol.
Menguji tindakan default ekstensi di halaman target
Anda sering kali perlu menguji cara skrip konten atau tindakan ekstensi berinteraksi dengan situs tertentu. Otomatiskan proses ini dengan menginstruksikan agen Anda untuk membuka situs, menginstal ekstensi, dan memicunya.
Contoh perintah:
Anda dapat menggunakan pendekatan umum:
Test my extension on example.com and verify it works correctly.
Atau, Anda bisa lebih mendetail:
Navigate to example.com, install the unpacked extension located at '/Users/dev/my-extension', and trigger the extension action. Check the console logs to verify the content script executed correctly.
Contoh eksekusi agen: Agen Anda membuka URL target menggunakan
navigate_page. Kemudian, install_extension akan menggunakan jalur absolut yang diberikan. Setelah ekstensi dimuat, ekstensi akan menjalankan trigger_extension_action untuk
mensimulasikan klik pengguna. Terakhir, perintah ini menggunakan list_console_messages untuk mengonfirmasi bahwa skrip konten berjalan dan menghasilkan output yang diharapkan.
Memverifikasi ekstensi yang diinstal dan membersihkan
Selama pengujian otomatis, Anda mungkin perlu memverifikasi apakah ekstensi dimuat dengan benar dengan versi yang tepat, atau menghapusnya untuk memastikan status bersih untuk pengujian berikutnya.
Contoh perintah:
Uninstall 'My Test Extension' from the browser.
Contoh eksekusi agen: Agen Anda menggunakan alat list_extensions untuk
mengambil daftar ekstensi yang diinstal dan metadatanya. Skrip ini mem-parsing
output untuk mengidentifikasi ID yang terkait dengan "My Test Extension". Kemudian, alat ini menggunakan alat
uninstall_extension dengan ID tersebut untuk menghapusnya dengan aman dari browser.
Membuat dan menguji ekstensi baru
Memulai ekstensi Chrome baru dari awal biasanya memerlukan pembuatan file boilerplate dan memuat direktori yang tidak dikemas secara manual ke browser untuk mengujinya. Lewati penyiapan manual ini dengan menginstruksikan agen Anda untuk membuat kode awal, memuat ekstensi, dan memverifikasi fungsionalitas dasarnya, secara end-to-end, dalam satu langkah.
Contoh perintah:
Build a Chrome extension that turns the page background gray when I click its icon. Save the files to '/tmp/gray-bg-ext', navigate to example.com, load the extension, and verify that it works.
Contoh eksekusi agen: Agen Anda membuat Manifest V3
manifest.json dasar dan pekerja layanan latar belakang yang memproses peristiwa
chrome.action.onClicked. Kemudian, ia membuka halaman pengujian, memanggil
install_extension, dan menggunakan trigger_extension_action untuk menyimulasikan klik
pengguna. Terakhir, kode ini memeriksa DOM atau mengambil screenshot untuk mengonfirmasi bahwa
latar belakang berubah menjadi abu-abu, yang membuktikan bahwa boilerplate berfungsi.