Men-debug ekstensi Chrome dengan agen AI

José Luis Zapata
Matthias Rohmer

Chrome DevTools untuk agen memungkinkan agen Anda memulai sesi browser dan menginstal atau berinteraksi dengan ekstensi Chrome menggunakan server MCP. Hal ini memungkinkan agen coding Anda mengontrol siklus proses ekstensi: menginstal, memuat ulang, dan memicu tindakan.

Alih-alih memuat ekstensi yang tidak dikemas 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 langsung.

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 diinstal, termasuk nama, ID, versi, dan status aktifnya.
  • Muat ulang ekstensi: Muat ulang ekstensi Chrome mode developer berdasarkan ID-nya untuk langsung menerapkan perubahan kode aplikasi.
  • Memicu tindakan: 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 yang tidak dikemas: Alat seperti install_extension memerlukan jalur absolut ke folder ekstensi yang tidak dikemas, sehingga ideal untuk pengembangan lokal.

  • Akses file ke folder ekstensi: Server hanya dapat membaca file dalam root ruang kerjanya. Ini adalah root yang disediakan oleh klien MCP Anda, seperti direktori project Anda. Jika klien Anda tidak menyediakan root, server hanya dapat mengakses direktori sementara OS. Di macOS, direktori ini bukan /tmp. Jika folder ekstensi berada di luar root ini, install_extension akan gagal dengan error Access denied. Untuk mengizinkan folder lain, tambahkan flag --filesystemRoot (alias --workspace) ke argumen server Anda:

    "args": ["chrome-devtools-mcp@latest", "--categoryExtensions", "--filesystemRoot=/path/to/extensions"]

    Untuk mengetahui detail selengkapnya, lihat Mengizinkan akses file di luar direktori sementara.

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 potensi perilaku. Agen Anda mungkin bertindak berbeda.

Melakukan iterasi dan memuat ulang ekstensi dengan cepat

Memuat ulang ekstensi secara manual setelah setiap perubahan file akan 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 dapat lebih detail:

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, agen akan memanggil alat reload_extension menggunakan ID yang diberikan. Terakhir, agen akan memanggil alat trigger_extension_action untuk mengaktifkan ekstensi dan memverifikasi bahwa tidak ada error izin yang ditampilkan 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 dapat lebih detail:

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, agen akan menggunakan install_extension dengan jalur absolut yang diberikan. Setelah ekstensi dimuat, agen akan menjalankan trigger_extension_action untuk menyimulasikan klik pengguna. Terakhir, agen akan 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. Agen akan mengurai output untuk mengidentifikasi ID yang terkait dengan "Ekstensi Pengujian Saya". Kemudian, agen akan menggunakan alat uninstall_extension dengan ID tersebut untuk menghapusnya dengan aman dari browser.

Membuat ekstensi baru dan mengujinya

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 fungsi dasarnya, secara menyeluruh, dalam satu langkah.

Contoh perintah:

Build a Chrome extension that turns the page background gray when I click its icon. Save the files to a 'gray-bg-ext' folder in my project, navigate to example.com, load the extension, and verify that it works.

Contoh eksekusi agen: Agen Anda membuat manifest.json Manifest V3 dasar dan pekerja layanan latar belakang yang memproses peristiwa chrome.action.onClicked. Kemudian, agen akan membuka halaman pengujian, memanggil install_extension, dan menggunakan trigger_extension_action untuk menyimulasikan klik pengguna. Terakhir, agen akan memeriksa DOM atau mengambil screenshot untuk mengonfirmasi bahwa latar belakang berubah menjadi abu-abu, yang membuktikan bahwa boilerplate berfungsi.