Chrome beta

Claude Code ile Chrome Kullanımı (Beta)

Claude Code'u Chrome tarayıcınıza bağlayarak web uygulamalarını test edebilir, konsol loglarıyla hata ayıklama yapabilir, form doldurmayı otomatikleştirebilir ve web sayfalarından veri çıkarabilirsiniz.

Dokümantasyon indeksi: Tüm sayfaların tam listesini https://code.claude.com/docs/llms.txt adresinden alabilirsiniz.

Claude Code, Claude in Chrome tarayıcı eklentisiyle entegre olarak size CLI veya VS Code eklentisi üzerinden tarayıcı otomasyon yetenekleri sunar. Kodunuzu oluşturup ardından bağlam değiştirmeden tarayıcıda test edebilir ve hata ayıklayabilirsiniz. Claude, tarayıcı görevleri için yeni sekmeler açar ve tarayıcınızın oturum açma durumunu paylaşır, böylece daha önce giriş yaptığınız herhangi bir siteye erişebilir. Tarayıcı işlemleri gerçek zamanlı olarak görünür bir Chrome penceresinde çalışır. Claude bir giriş sayfası veya CAPTCHA ile karşılaştığında durur ve sizin manuel olarak halletmenizi ister.

Chrome entegrasyonu beta aşamasındadır ve şu anda Google Chrome ile Microsoft Edge tarayıcılarında çalışmaktadır. Brave, Arc veya diğer Chromium tabanlı tarayıcılarda henüz desteklenmemektedir. WSL (Windows Subsystem for Linux) de desteklenmez.

Yetenekler (Capabilities)

Chrome bağlıyken, tarayıcı işlemlerini kodlama görevleriyle tek bir iş akışında birleştirebilirsiniz:

• Canlı hata ayıklama: Konsol hatalarını ve DOM durumunu doğrudan okuyun, ardından bunlara neden olan kodu düzeltin
• Tasarım doğrulama: Bir Figma taslağından UI oluşturun, ardından tarayıcıda açarak eşleşip eşleşmediğini doğrulayın
• Web uygulaması testi: Form doğrulamayı test edin, görsel regresyonları kontrol edin veya kullanıcı akışlarını doğrulayın
• Kimlik doğrulamalı web uygulamaları: API bağlayıcıları olmadan Google Docs, Gmail, Notion veya giriş yaptığınız herhangi bir uygulamayla etkileşime geçin
• Veri çıkarma: Web sayfalarından yapılandırılmış bilgileri çekin ve yerel olarak kaydedin
• Görev otomasyonu: Veri girişi, form doldurma veya çoklu site iş akışları gibi tekrarlayan tarayıcı görevlerini otomatikleştirin
• Oturum kaydı: Tarayıcı etkileşimlerini GIF olarak kaydederek belgeleyin veya paylaşın

Ön Koşullar (Prerequisites)

Claude Code'u Chrome ile kullanmadan önce ihtiyacınız olanlar:

• Google Chrome veya Microsoft Edge tarayıcısı
• Claude in Chrome eklentisi sürüm 1.0.36 veya üzeri (her iki tarayıcı için Chrome Web Mağazası'nda mevcut)
• Claude Code sürüm 2.0.73 veya üzeri
• Doğrudan Anthropic planı (Pro, Max, Team veya Enterprise)

Chrome entegrasyonu, Amazon Bedrock, Google Cloud Vertex AI veya Microsoft Foundry gibi üçüncü taraf sağlayıcılar üzerinden kullanılamaz. Claude'a yalnızca üçüncü taraf bir sağlayıcı üzerinden erişiyorsanız, bu özelliği kullanmak için ayrı bir claude.ai hesabına ihtiyacınız vardır.

CLI'da Başlarken (Get started in the CLI)

1. Claude Code'u Chrome ile Başlatın

Claude Code'u --chrome bayrağıyla başlatın:

claude --chrome

Ayrıca mevcut bir oturum içinden /chrome komutunu çalıştırarak da Chrome'u etkinleştirebilirsiniz.

2. Claude'dan Tarayıcıyı Kullanmasını İsteyin

Bu örnekte Claude bir sayfaya gider, onunla etkileşime geçer ve bulduklarını raporlar:

code.claude.com/docs sayfasına git, arama kutusuna tıkla, "hooks" yaz ve hangi sonuçların çıktığını söyle

Bağlantı durumunu kontrol etmek, izinleri yönetmek veya eklentiyi yeniden bağlamak için istediğiniz zaman /chrome komutunu çalıştırabilirsiniz.

VS Code için, tarayıcı otomasyonu hakkında ilgili dokümantasyona bakın.

Chrome'u Varsayılan Olarak Etkinleştirme (Enable Chrome by default)

Her oturumda --chrome bayrağını geçirmekten kaçınmak için /chrome komutunu çalıştırın ve "Enabled by default" seçeneğini seçin. VS Code eklentisinde, Chrome eklentisi yüklü olduğu sürece Chrome her zaman kullanılabilir. Ek bir bayrağa gerek yoktur.

Not: Chrome'u varsayılan olarak etkinleştirmek, tarayıcı araçları her zaman yüklü olduğu için bağlam kullanımını artırır. Bağlam tüketiminde artış fark ederseniz, bu ayarı devre dışı bırakın ve yalnızca ihtiyaç duyduğunuzda --chrome kullanın.

Site İzinlerini Yönetme (Manage site permissions)

Site düzeyindeki izinler Chrome eklentisinden devralınır. Claude'un hangi sitelerde gezinebileceğini, tıklayabileceğini ve yazı yazabileceğini kontrol etmek için Chrome eklentisi ayarlarından izinleri yönetin.

Örnek İş Akışları (Example workflows)

Bu örnekler, tarayıcı işlemlerini kodlama görevleriyle birleştirmenin yaygın yollarını gösterir. Mevcut tüm tarayıcı araçlarının listesini görmek için /mcp komutunu çalıştırın ve claude-in-chrome seçeneğini seçin.

Yerel Bir Web Uygulamasını Test Etme (Test a local web application)

Bir web uygulaması geliştirirken Claude'dan değişikliklerin doğru çalıştığını doğrulamasını isteyin:

Giriş formu doğrulamasını yeni güncelledim. localhost:3000'i açıp geçersiz verilerle formu göndermeyi dene ve hata mesajlarının doğru görünüp görünmediğini kontrol et.

Claude yerel sunucunuza gider, formla etkileşime geçer ve gözlemlediklerini raporlar.

Konsol Loglarıyla Hata Ayıklama (Debug with console logs)

Claude, sorunları teşhis etmek için konsol çıktısını okuyabilir. Konsol logları ayrıntılı olabileceğinden, tüm konsol çıktısını istemek yerine Claude'a hangi kalıpları arayacağını söyleyin:

Dashboard sayfasını aç ve sayfa yüklendiğinde konsolda herhangi bir hata olup olmadığını kontrol et.

Claude konsol mesajlarını okur ve belirli kalıplar veya hata türleri için filtreleme yapabilir.

Form Doldurmayı Otomatikleştirme (Automate form filling)

Tekrarlayan veri girişi görevlerini hızlandırın:

contacts.csv dosyasında müşteri kişilerinin olduğu bir elektronik tablom var. Her satır için crm.example.com adresine git, "Add Contact" butonuna tıkla ve ad, e-posta, telefon alanlarını doldur.

Claude yerel dosyanızı okur, web arayüzünde gezinir ve her kayıt için verileri girer.

Google Docs'ta İçerik Taslağı Oluşturma (Draft content in Google Docs)

Claude'u API kurulumu olmadan doğrudan belgelerinize yazdırmak için kullanın:

Son commit'lere dayanarak bir proje güncellemesi taslağı oluştur ve docs.google.com/document/d/abc123 adresindeki Google Doc'uma ekle.

Claude belgeyi açar, düzenleyiciye tıklar ve içeriği yazar. Bu, giriş yaptığınız herhangi bir web uygulamasıyla çalışır: Gmail, Notion, Sheets ve daha fazlası.

Web Sayfalarından Veri Çıkarma (Extract data from web pages)

Web sitelerinden yapılandırılmış bilgileri çekin:

Ürün listeleme sayfasına git ve her öğe için ad, fiyat ve stok durumunu çıkar. Sonuçları CSV dosyası olarak kaydet.

Claude sayfaya gider, içeriği okur ve verileri yapılandırılmış bir formatta derler.

Çoklu Site İş Akışları Çalıştırma (Run multi-site workflows)

Birden çok web sitesi arasında görevleri koordine edin:

Yarınki toplantılarım için takvimimi kontrol et, ardından harici katılımcısı olan her toplantı için şirketlerinin web sitesine bak ve ne yaptıklarıyla ilgili bir not ekle.

Claude sekmeler arasında çalışarak bilgi toplar ve iş akışını tamamlar.

Demo GIF Kaydetme (Record a demo GIF)

Tarayıcı etkileşimlerinin paylaşılabilir kayıtlarını oluşturun:

Sepete ürün eklemeden onay sayfasına kadar olan ödeme akışını gösteren bir GIF kaydet.

Claude etkileşim sırasını kaydeder ve GIF dosyası olarak kaydeder.

Sorun Giderme (Troubleshooting)

Eklenti Algılanmadı (Extension not detected)

Claude Code "Chrome extension not detected" gösteriyorsa:

• Chrome eklentisinin chrome://extensions sayfasında yüklü ve etkin olduğunu doğrulayın
• Claude Code'un güncel olduğunu claude --version komutuyla kontrol edin
• Chrome'un çalıştığından emin olun
• /chrome komutunu çalıştırın ve "Reconnect extension" seçeneğini seçin
• Sorun devam ederse, hem Claude Code'u hem de Chrome'u yeniden başlatın

Chrome entegrasyonunu ilk kez etkinleştirdiğinizde, Claude Code bir native messaging host yapılandırma dosyası yükler. Chrome bu dosyayı başlangıçta okur, bu nedenle eklenti ilk denemede algılanmazsa, yeni yapılandırmayı alması için Chrome'u yeniden başlatın. Bağlantı hala başarısız olursa, host yapılandırma dosyasının varlığını kontrol edin:

Chrome için:

• 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: Windows Kayıt Defteri'nde HKCU\Software\Google\Chrome\NativeMessagingHosts\ yolunu kontrol edin

Edge için:

• 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: Windows Kayıt Defteri'nde HKCU\Software\Microsoft\Edge\NativeMessagingHosts\ yolunu kontrol edin

Tarayıcı Yanıt Vermiyor (Browser not responding)

Claude'un tarayıcı komutları çalışmayı durdurursa:

• Sayfayı bir modal diyalog (alert, confirm, prompt) engelliyor olabilir. JavaScript diyalogları tarayıcı olaylarını bloke eder ve Claude'un komut almasını engeller. Diyaloğu manuel olarak kapatın, ardından Claude'a devam etmesini söyleyin.
• Claude'dan yeni bir sekme oluşturmasını ve tekrar denemesini isteyin
• Chrome eklentisini chrome://extensions sayfasında devre dışı bırakıp yeniden etkinleştirin

Uzun Oturumlarda Bağlantı Kopmaları (Connection drops during long sessions)

Chrome eklentisinin service worker'ı uzun oturumlar sırasında boşta kalabilir ve bu da bağlantıyı koparır. Tarayıcı araçları bir süre hareketsizlikten sonra çalışmayı durdurursa, /chrome komutunu çalıştırın ve "Reconnect extension" seçeneğini seçin.

Windows'a Özgü Sorunlar (Windows-specific issues)

Windows'ta aşağıdaki sorunlarla karşılaşabilirsiniz:

• Named pipe çakışmaları (EADDRINUSE): Başka bir işlem aynı named pipe'ı kullanıyorsa, Claude Code'u yeniden başlatın. Chrome'u kullanabilecek diğer Claude Code oturumlarını kapatın.
• Native messaging host hataları: Native messaging host başlangıçta çökerse, host yapılandırmasını yeniden oluşturmak için Claude Code'u yeniden yüklemeyi deneyin.

Yaygın Hata Mesajları (Common error messages)

Ayrıca Bakınız (See also)

• Computer use: Bir görev tarayıcıda yapılamadığında yerel macOS uygulamalarını kontrol edin
• Use Claude Code in VS Code: VS Code eklentisinde tarayıcı otomasyonu
• CLI reference: --chrome dahil komut satırı bayrakları
• Common workflows: Claude Code'u kullanmanın daha fazla yolu
• Data and privacy: Claude Code'un verilerinizi nasıl işlediği
• Getting started with Claude in Chrome: Kısayollar, zamanlama ve izinler dahil Chrome eklentisinin tam dokümantasyonu

Örnek Kullanım Senaryosu

Bir e-ticaret uygulaması geliştirdiğinizi düşünün. Yeni bir ödeme akışı eklediniz ve bunu test etmeniz gerekiyor:

1. Claude Code'u Chrome ile başlatın:

   claude --chrome
   

2. Claude'a yerel geliştirme sunucunuzu açmasını söyleyin:

   localhost:3000 adresine git ve bir ürünü sepete ekle.
   

3. Claude ürün sayfasına gider, "Sepete Ekle" butonuna tıklar. Ardından şunu isteyin:

   Şimdi sepete git ve ödeme adımına ilerle. Konsolda herhangi bir hata var mı kontrol et.
   

4. Claude sepet sayfasına gider, "Ödemeye Geç" butonuna tıklar. Konsolda bir hata görürse bunu size bildirir. Hatayı düzelttikten sonra:

   Şimdi ödeme formunu geçersiz bir kredi kartı numarasıyla doldur ve doğrulama mesajını kontrol et.
   

5. Claude form alanlarını doldurur, "Gönder" butonuna tıklar ve hata mesajını okur. Doğru çalışıyorsa:

   Mükemmel. Şimdi tüm bu ödeme akışını bir GIF olarak kaydet ki ekibe gösterebileyim.
   

6. Claude, sepete ürün eklemeden ödeme onayına kadar olan tüm adımları kaydeder ve checkout-flow.gif dosyası olarak kaydeder.