Gunakan Claude Code dengan Chrome

Hubungkan Claude Code ke browser Chrome Anda untuk menguji aplikasi web, debug dengan console logs, otomatisasi pengisian formulir, dan ekstrak data dari halaman web.

Claude Code terintegrasi dengan ekstensi Claude in Chrome browser untuk memberikan Anda kemampuan otomasi browser dari CLI atau ekstensi VS Code. Bangun kode Anda, kemudian uji dan debug di browser tanpa beralih konteks.

Claude membuka tab baru untuk tugas browser dan berbagi status login browser Anda, sehingga dapat mengakses situs apa pun yang sudah Anda masuki. Tindakan browser berjalan di jendela Chrome yang terlihat secara real-time. Ketika Claude menemukan halaman login atau CAPTCHA, ia berhenti dan meminta Anda menanganinya secara manual.

Ekstensi mengumpulkan tab yang dibuka Claude ke dalam grup tab Chrome yang terikat pada sesi Anda. Dalam sesi lokal, apakah Claude Code menutup grup tersebut ketika sesi berakhir tergantung pada cara sesi berakhir:

• Ketika Anda mengetik /clear, Claude Code menutup grup, termasuk halaman yang terbuka, kecuali pekerjaan yang bertahan dari clear masih berjalan
• Ketika Anda beralih sesi dengan perintah seperti /resume, keluar dari Claude Code, atau menjalankan /clear sementara pekerjaan yang bertahan masih berjalan, Claude Code menutup grup hanya jika grup tersebut tidak berisi apa pun selain tab baru kosong, sehingga halaman yang mungkin masih Anda baca tetap terbuka

Kemampuan

Dengan Chrome terhubung, Anda dapat menggabungkan tindakan browser dengan tugas coding dalam satu alur kerja:

• Live debugging: baca kesalahan console dan status DOM secara langsung, kemudian perbaiki kode yang menyebabkannya
• Verifikasi desain: bangun UI dari mock Figma, kemudian buka di browser untuk memverifikasi kecocokannya
• Pengujian aplikasi web: uji validasi formulir, periksa regresi visual, atau verifikasi alur pengguna
• Aplikasi web terautentikasi: berinteraksi dengan Google Docs, Gmail, Notion, atau aplikasi apa pun yang Anda masuki tanpa konektor API
• Ekstraksi data: tarik informasi terstruktur dari halaman web dan simpan secara lokal
• Otomasi tugas: otomatisasi tugas browser berulang seperti entri data, pengisian formulir, atau alur kerja multi-situs
• Unggah file: lampirkan file dari mesin Anda ke bidang unggah di halaman web
• Perekaman sesi: rekam interaksi browser sebagai GIF untuk mendokumentasikan atau berbagi apa yang terjadi

Prasyarat

Sebelum menggunakan Claude Code dengan Chrome, Anda memerlukan:

• Google Chrome, Microsoft Edge, atau browser berbasis Chromium lainnya seperti Brave, Arc, Vivaldi, atau Opera
• Ekstensi Claude in Chrome versi 1.0.36 atau lebih tinggi, tersedia di Chrome Web Store
• Claude Code
• Paket Anthropic langsung (Pro, Max, Team, atau Enterprise)

Di organisasi Enterprise yang mengaktifkan HIPAA, Claude in Chrome nonaktif secara default, dan seorang Owner dapat mengaktifkannya di Organization settings > Claude in Chrome. Business Associate Agreement (BAA) Anda dengan Anthropic tidak mencakup data yang dikirim ke situs pihak ketiga melalui Claude in Chrome. Lihat Implementation Guide untuk daftar Eligible Services.

Integrasi Chrome juga memerlukan masuk dengan /login. Jika Anda melakukan autentikasi dengan kunci API atau token jangka panjang dari claude setup-token, Claude Code membuat integrasi Chrome tetap mati, bahkan ketika Anda melewatkan --chrome, karena ekstensi browser tidak dapat melakukan autentikasi dengan kredensial tersebut. Sebelum v2.1.216, sesi ini dapat mengaktifkan integrasi Chrome, tetapi setiap upaya untuk terhubung ke ekstensi browser gagal dengan kesalahan 403.

Mulai di CLI

claude --chrome

Go to code.claude.com/docs, click on the search box,
type "hooks", and tell me what results appear

Jalankan /chrome kapan saja untuk memeriksa status koneksi, mengelola izin, menghubungkan kembali ekstensi, atau memilih browser yang terhubung mana yang akan digunakan. Integrasi berfungsi ketika panel status menampilkan "Status: Enabled" dan "Extension: Installed".

Jika lebih dari satu browser terhubung, Anda memilih yang mana Claude gunakan. Ketika tindakan browser dimulai sebelum Anda memilih, Claude meminta Anda untuk memilih satu. Untuk beralih browser nanti, jalankan /chrome dan pilih Select browser…. Claude terus menggunakan pilihan Anda bahkan ketika browser lain terhubung.

Untuk VS Code, lihat otomasi browser di VS Code.

Instal ekstensi ketika Claude meminta

Ketika Claude membutuhkan browser Anda dalam sesi interaktif dan Claude Code tidak mendeteksi ekstensi, Claude Code menampilkan prompt instalasi berjudul "Claude wants to use your browser". Claude Code meminta paling banyak sekali per sesi.

Prompt menawarkan tiga pilihan:

• Install extension: membuka halaman instalasi ekstensi di browser Anda dan memulai setup terpandu. Claude Code menunggu instalasi, menghubungkan ekstensi, dan mengaktifkan alat browser dalam sesi yang sama. Ketika koneksi siap, pilih "Continue with browser tools" dan Claude melanjutkan tugas di browser Anda. Anda dapat meninggalkan setup dengan memilih "Continue without browser tools" dan menyelesaikannya nanti dengan /chrome.
• Not now: melanjutkan tugas tanpa alat browser. Claude Code dapat meminta lagi dalam sesi yang lebih baru.
• Don't ask again: menghentikan prompt di sesi mendatang. Anda masih dapat menyiapkan integrasi kapan saja dengan /chrome.

Dua kebijakan MCP terkelola mematikan prompt:

• Jika organisasi Anda memblokir server MCP claude-in-chrome dengan pengaturan terkelola deniedMcpServers, Claude Code tidak menampilkan prompt instalasi.
• Jika organisasi Anda menerapkan file managed-mcp.json tanpa mengizinkan Claude in Chrome bersama set terkelola, Claude Code tidak menampilkan prompt instalasi.

Aktifkan Chrome secara default

Untuk menghubungkan Chrome tanpa meneruskan --chrome setiap kali, jalankan /chrome dalam sesi CLI dan pilih Enabled by default. Di ekstensi VS Code, ketik /chrome di kotak prompt dan nyalakan sakelar Enabled by default. Keduanya berbagi satu pengaturan, sehingga menyalakannya di salah satu tempat akan menyalakannya untuk CLI dan VS Code sekaligus.

Dengan pengaturan ini aktif dan Claude Code v2.1.287 atau yang lebih baru, setiap sesi VS Code terhubung ke browser Anda saat dimulai, sehingga Claude dapat menggunakannya sebelum Anda mengetik @browser. Pada versi sebelumnya, atau dengan pengaturan ini nonaktif, sesi VS Code terhubung ketika Anda mengetik @browser.

Claude Code dimulai secara normal ketika Chrome tidak berjalan. Sebelum v2.1.211, startup dapat hang ketika integrasi Chrome diaktifkan tetapi Chrome tidak berjalan.

Kelola izin situs

Izin tingkat situs diwarisi dari ekstensi Chrome. Kelola izin di pengaturan ekstensi Chrome untuk mengontrol situs mana yang dapat dijelajahi, diklik, dan diketik oleh Claude. Dalam mode otomatis, ketika pengklasifikasi mode otomatis itu sendiri menyetujui panggilan browser ke situs, ekstensi melewati pemeriksaan per-situsnya sendiri untuk panggilan itu, kecuali aturan izin Anda menolak situs apa pun ke Claude di Chrome.

Dialog izin dalam sesi VS Code

Dalam sesi VS Code, ketika Claude Code meminta konfirmasi sebelum tindakan browser, dialog izin muncul sebagai kartu di panel chat. Ketika tindakan tersebut menargetkan situs yang belum Anda izinkan, kartu tersebut juga menawarkan untuk mengizinkan situs itu.

Dalam sesi yang terhubung ke browser Anda saat dimulai karena Enabled by default aktif, Claude Code meminta konfirmasi Anda sebelum tindakan browser di situs yang belum Anda izinkan, dalam mode izin Manual, Edit automatically, Auto, dan Bypass permissions. Dalam mode izin Auto dan Bypass permissions, hal ini berlaku hingga Anda mengetik @browser dalam sesi tersebut.

Alat browser dalam plan mode

Dalam plan mode, dialog izin muncul sebelum Claude merekam GIF, membuka tab baru, atau menjalankan pintasan. Dalam sesi CLI interaktif, jika mode bypass permissions tersedia dan pengambilan feature-flag dimatikan, panggilan ini berjalan tanpa dialog izin.

Panggilan tabs_context_mcp juga meminta ketika menetapkan createIfEmpty, dan begitu juga panggilan browser_batch yang mencakup salah satu tindakan ini.

Contoh alur kerja

Contoh-contoh ini menunjukkan cara umum untuk menggabungkan tindakan browser dengan tugas coding. Jalankan /mcp, pilih claude-in-chrome, kemudian pilih View tools untuk melihat daftar lengkap alat browser yang tersedia.

Uji aplikasi web lokal

Saat mengembangkan aplikasi web, minta Claude untuk memverifikasi perubahan Anda berfungsi dengan benar:

I just updated the login form validation. Can you open localhost:3000,
try submitting the form with invalid data, and check if the error
messages appear correctly?

Claude menavigasi ke server lokal Anda, berinteraksi dengan formulir, dan melaporkan apa yang diamatinya.

Debug dengan console logs

Claude dapat membaca output console untuk membantu mendiagnosis masalah. Beri tahu Claude pola apa yang harus dicari daripada meminta semua output console, karena log dapat sangat panjang:

Open the dashboard page and check the console for any errors when
the page loads.

Claude membaca pesan console dan dapat memfilter pola atau jenis kesalahan tertentu.

Otomatisasi pengisian formulir

Percepat tugas entri data berulang:

I have a spreadsheet of customer contacts in contacts.csv. For each row,
go to the CRM at crm.example.com, click "Add Contact", and fill in the
name, email, and phone fields.

Claude membaca file lokal Anda, menavigasi antarmuka web, dan memasukkan data untuk setiap catatan.

Unggah file ke halaman web

Claude dapat melampirkan file dari mesin Anda ke bidang unggah di halaman. Claude Code membaca file dan mengirim isinya ke browser, sehingga unggahan berfungsi di sesi lokal dan jarak jauh. Memerlukan Claude Code v2.1.211 atau lebih baru.

Contoh ini melampirkan file log ke formulir:

Open the bug tracker at bugs.example.com, create a new issue,
and attach logs/session.log to it

Jika Claude menolak melampirkan file atau unggahan gagal, periksa penyebab-penyebab berikut:

• Izin: Claude dapat mengunggah file hanya ketika sesi diizinkan untuk membacanya, jadi aturan izin yang menolak akses Read ke file juga memblokir pengunggahannya.
• Ukuran: satu unggahan dapat mencakup hingga 10 MB file secara total.
• Hard links: Claude menolak file yang memiliki beberapa hard link, yang umum terjadi di dalam toko pengelola paket seperti node_modules. Salin file dan unggah salinannya.
• Nama kredensial: Claude menolak file yang nama atau foldernya merupakan tempat kredensial biasanya disimpan, seperti .env, file .pem atau .key, atau apa pun di bawah .ssh. Memerlukan Claude Code v2.1.293 atau lebih baru.

Buat draf konten di Google Docs

Gunakan Claude untuk menulis langsung di dokumen Anda tanpa penyiapan API:

Draft a project update based on the recent commits and add it to my
Google Doc at docs.google.com/document/d/abc123

Claude membuka dokumen, mengklik ke editor, dan mengetik konten. Ini bekerja dengan aplikasi web apa pun yang Anda masuki: Gmail, Notion, Sheets, dan lainnya.

Ekstrak data dari halaman web

Tarik informasi terstruktur dari situs web:

Go to the product listings page and extract the name, price, and
availability for each item. Save the results as a CSV file.

Claude menavigasi ke halaman, membaca konten, dan mengompilasi data ke dalam format terstruktur.

Jalankan alur kerja multi-situs

Koordinasikan tugas di berbagai situs web:

Check my calendar for meetings tomorrow, then for each meeting with
an external attendee, look up their company website and add a note
about what they do.

Claude bekerja di seluruh tab untuk mengumpulkan informasi dan menyelesaikan alur kerja.

Rekam GIF demo

Buat rekaman alur interaksi browser yang dapat dibagikan:

Record a GIF showing how to complete the checkout flow, from adding
an item to the cart through to the confirmation page.

Claude merekam urutan interaksi dan menyimpannya sebagai file GIF. Rekaman menangkap semua yang terlihat di browser, termasuk detail akun di halaman yang sudah masuk, jadi tinjau sebelum membagikannya di luar tim Anda.

Simpan tangkapan layar ke disk

Minta Claude untuk menyimpan tangkapan layar sebagai file:

Take a screenshot of the checkout page and save it to disk

Claude menyimpan gambar ke disk dan melaporkan jalur file. Sebelum v2.1.211, opsi save_to_disk alat tangkapan layar tidak menulis file.

Troubleshooting

Ekstensi tidak terdeteksi

Jika Claude Code tidak dapat mendeteksi ekstensi Chrome:

1. Verifikasi ekstensi Chrome diinstal dan diaktifkan di chrome://extensions
2. Verifikasi Claude Code terbaru dengan menjalankan claude --version
3. Periksa bahwa Chrome sedang berjalan
4. Jalankan /chrome dan pilih "Reconnect extension" untuk membangun kembali koneksi
5. Jika masalah berlanjut, restart Claude Code dan Chrome

Pertama kali Anda mengaktifkan integrasi Chrome, Claude Code menginstal file konfigurasi host messaging asli. Chrome membaca file ini saat startup, jadi jika ekstensi tidak terdeteksi pada upaya pertama Anda, restart Chrome untuk mengambil konfigurasi baru.

Claude Code membuka tab browser yang meminta Anda untuk menghubungkan ekstensi hanya pada instalasi pertama itu. Claude Code tidak membukanya kembali ketika sesi kemudian menulis ulang file konfigurasi, misalnya setelah beralih build atau direktori konfigurasi.

Jika koneksi masih gagal, verifikasi file konfigurasi host ada di:

Untuk Chrome:

• macOS: ~/Library/Application Support/Google/Chrome/NativeMessagingHosts/com.anthropic.claude_code_browser_extension.json
• Linux: ~/.config/google-chrome/NativeMessagingHosts/com.anthropic.claude_code_browser_extension.json
• Windows: periksa HKCU\Software\Google\Chrome\NativeMessagingHosts\ di Windows Registry

Untuk Edge:

• macOS: ~/Library/Application Support/Microsoft Edge/NativeMessagingHosts/com.anthropic.claude_code_browser_extension.json
• Linux: ~/.config/microsoft-edge/NativeMessagingHosts/com.anthropic.claude_code_browser_extension.json
• Windows: periksa HKCU\Software\Microsoft\Edge\NativeMessagingHosts\ di Windows Registry

Peramban berbasis Chromium lainnya membaca file yang sama dari direktori konfigurasi mereka sendiri, dinamai menurut peramban. Misalnya, Brave di macOS menggunakan ~/Library/Application Support/BraveSoftware/Brave-Browser/NativeMessagingHosts/, dan di Windows setiap peramban memiliki kunci registri sendiri, seperti HKCU\Software\BraveSoftware\Brave-Browser\NativeMessagingHosts\.

Pengaturan proyek tidak dapat mengaktifkan Chrome

Peringatan ini di terminal Anda berarti proyek tempat Anda bekerja mencoba mengaktifkan integrasi Chrome, dan Claude Code tidak mengizinkannya:

Claude Code ignored CLAUDE_CODE_ENABLE_CFC in this project's settings: a project can't turn on Claude in Chrome. To turn it on yourself, run /chrome or start with --chrome.

File .claude/settings.json atau .claude/settings.local.json proyek menetapkan CLAUDE_CODE_ENABLE_CFC ke 1 di blok env-nya untuk mengaktifkan integrasi Chrome. Claude Code tidak menerapkan pengaturan tersebut, sehingga integrasi Chrome nonaktif dalam sesi ini dan Claude tidak memiliki tool browser.

Claude Code melewati pengaturan tersebut karena file-file itu disimpan di direktori proyek, dan repositori yang Anda checkout tidak boleh dapat menghubungkan Claude ke browser Anda.

Anda dapat terus bekerja seperti biasa. Jika Anda menginginkan tool browser, atau ingin peringatan tersebut hilang, lakukan salah satu dari berikut ini:

• Untuk mendapatkan tool browser sekarang: keluar dan mulai lagi dengan claude --chrome di shell Anda.
• Untuk mendapatkan tool browser di sesi berikutnya: jalankan /chrome di prompt Claude Code dan pilih Enabled by default. Ini berlaku untuk sesi yang Anda mulai setelahnya, bukan sesi yang sedang berjalan.
• Untuk menghentikan peringatan tanpa tool browser: hapus baris CLAUDE_CODE_ENABLE_CFC dari file pengaturan proyek.

Browser tidak merespons

Jika perintah browser Claude berhenti bekerja:

1. Periksa apakah dialog modal (alert, confirm, prompt) memblokir halaman. Dialog JavaScript memblokir peristiwa browser dan mencegah Claude menerima perintah. Tutup dialog secara manual, kemudian beri tahu Claude untuk melanjutkan.
2. Minta Claude membuat tab baru dan coba lagi
3. Restart ekstensi Chrome dengan menonaktifkan dan mengaktifkannya kembali di chrome://extensions

Koneksi terputus selama sesi panjang

Service worker ekstensi Chrome dapat menjadi idle selama sesi yang diperpanjang, yang memutus koneksi. Jika alat browser berhenti bekerja setelah periode inaktivitas, jalankan /chrome dan pilih "Reconnect extension".

Saat Anda menjalankan /chrome, periksa baris Status-nya. Jika tertulis "Not connected", koneksi sesi yang sedang berjalan ke Chrome telah gagal. Pilih "Reconnect extension" untuk memulai ulang koneksi tersebut. Setelah koneksi berhasil, halaman reconnect ekstensi terbuka di Chrome. Sebelum v2.1.290, "Reconnect extension" hanya membuka halaman tersebut dan tidak memulai ulang koneksi yang gagal, jadi jika tool browser tidak kembali pada versi sebelumnya, perbarui Claude Code.

Ekstensi masuk ke organisasi yang berbeda

Jika Anda tergabung dalam lebih dari satu organisasi claude.ai, ekstensi harus masuk ke organisasi yang sama dengan Claude Code. Jika keduanya berbeda, tool browser Claude mengembalikan "Browser extension is not connected", bahkan ketika keduanya menggunakan akun claude.ai yang sama.

Untuk melihat organisasi mana yang digunakan Claude Code, jalankan /status di prompt Claude Code dan baca baris Organization.

Untuk mengubah organisasi ekstensi, keluar di pengaturan ekstensi, lalu masuk kembali dan pilih organisasi yang ditampilkan oleh /status.

Masalah khusus Windows

Di Windows, Anda mungkin mengalami:

• Konflik named pipe (EADDRINUSE): jika proses lain menggunakan named pipe yang sama, restart Claude Code. Tutup sesi Claude Code lain apa pun yang mungkin menggunakan Chrome.
• Kesalahan host messaging asli: jika host messaging asli mogok saat startup, coba instal ulang Claude Code untuk membuat ulang konfigurasi host.
• Halaman setup gagal dibuka: perbarui Claude Code. Sebelum v2.1.211, tab browser yang meminta Anda untuk menghubungkan ekstensi dapat gagal dibuka di Windows.

Pesan kesalahan umum

Ini adalah kesalahan yang paling sering dihadapi dan cara menyelesaikannya:

Lihat juga

• Computer use: kontrol aplikasi macOS asli ketika tugas tidak dapat dilakukan di browser
• Gunakan Claude Code di VS Code: otomasi browser di ekstensi VS Code
• Referensi CLI: flag baris perintah termasuk --chrome
• Alur kerja umum: lebih banyak cara untuk menggunakan Claude Code
• Data dan privasi: bagaimana Claude Code menangani data Anda
• Memulai dengan Claude in Chrome: dokumentasi lengkap untuk ekstensi Chrome, termasuk pintasan keyboard, penjadwalan, dan izin