Yapay zeka temsilcileriyle Chrome uzantılarında hata ayıklama

José Luis Zapata
Matthias Rohmer

Ajanlar için Chrome Geliştirici Araçları, ajanınızın bir tarayıcı oturumu başlatmasına ve MCP sunucusu kullanarak Chrome uzantılarını yüklemesine veya bunlarla etkileşimde bulunmasına olanak tanır. Bu sayede kodlama aracınız, uzantı yaşam döngüsünü (yükleme, yeniden yükleme ve işlemleri tetikleme) kontrol edebilir.

Paketi açılmış bir uzantıyı manuel olarak yüklemek, kodu her değiştirdiğinizde uzantı yönetimi sayfasındaki yeniden yükle düğmesini tıklamak ve uzantıyı test etmek için manuel olarak tetiklemek yerine, yapay zeka aracınıza tüm süreci bağımsız olarak yönetmesini söyleyin. Bu sayede, statik kod oluşturma ile canlı uzantı testi arasındaki boşluk doldurulur.

Uzantı araçlarını kullanarak şunları yapabilirsiniz:

  • Uzantı yükleme: Yerel bir dizin yolundan açılmamış bir Chrome uzantısı yükleyin.
  • Uzantıları listeleme: Ad, kimlik, sürüm ve etkinleştirme durumu dahil olmak üzere tüm yüklü Chrome uzantılarının listesini alın.
  • Uzantıları yeniden yükleme: Kod değişikliklerini anında uygulamak için paketi açılmış bir Chrome uzantısını kimliğine göre yeniden yükleyin.
  • İşlemleri tetikleme: Bir uzantının varsayılan işlemini kimliğine göre tetikleyin. Örneğin, bir menüyü açın veya arka plan komut dosyası işlemini yürütün (API dokümanlarındaki chrome.action bölümüne bakın).
    • Uzantıları kaldırma: Chrome uzantılarını kimliklerine göre tarayıcı oturumundan kaldırma.

Ön koşullar

Uzantı araçlarını kullanmadan önce aşağıdakilere sahip olduğunuzdan emin olun:

  • Deneysel işaret: Uzantılar kategorisi, Temsilciler için Geliştirici Araçları'nda varsayılan olarak etkin değildir. MCP sunucusunu --categoryExtensions işaretiyle yapılandırmanız gerekir.
  • Paketlenmemiş uzantılar: install_extension gibi araçlar, paketlenmemiş uzantı klasörünün mutlak yolunu gerektirdiğinden yerel geliştirme için idealdir.

  • Uzantı klasörüne dosya erişimi: Sunucu yalnızca çalışma alanı köklerindeki dosyaları okuyabilir. Bunlar, MCP istemcinizin sağladığı köklerdir (ör. proje dizininiz). İstemciniz kök dizin sağlamazsa sunucu yalnızca işletim sisteminin geçici dizinine erişebilir. macOS'te bu dizin /tmp. Uzantı klasörü bu köklerin dışındaysa install_extension, Access denied hatasıyla başarısız olur. Başka bir klasöre izin vermek için sunucu bağımsız değişkenlerinize --filesystemRoot işaretini (takma ad --workspace) ekleyin:

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

    Daha fazla bilgi için Geçici dizinin dışındaki dosyalara erişime izin verme başlıklı makaleyi inceleyin.

Chrome uzantısı araçlarının kullanım alanları

Ajanınıza, geliştirme ve hata düzeltme sırasında uzantı yaşam döngünüzü yönetmesini söyleyin.

Not: Temsilci yürütme adımları, olası davranış örnekleridir. Temsilciniz farklı davranabilir.

Uzantıları hızla yineleme ve yeniden yükleme

Her dosya değişikliğinden sonra uzantıyı manuel olarak yeniden yüklemek, geliştirme sürecini yavaşlatır. Temsilcinize bir kod düzeltmesi uygulamasını ve yeni davranışı manuel müdahale olmadan doğrulamak için uzantıyı hemen yeniden yüklemesini söyleyin.

Örnek istem:

Genel bir yaklaşım kullanabilirsiniz:

Verify the extension has access to the active tab.

Daha ayrıntılı bilgi de verebilirsiniz:

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.

Örnek ajan yürütme: Ajanınız, dosya sisteminizdeki manifest.json dosyasını düzenler. Ardından, sağlanan kimliği kullanarak reload_extension aracını çağırır. Son olarak, uzantıyı etkinleştirmek için trigger_extension_action aracını çağırır ve konsolda izin hatası verilmediğini doğrular.

Bir uzantının hedef sayfadaki varsayılan işlemini test etme

Genellikle bir içerik komut dosyasının veya uzantı işleminin belirli bir web sitesiyle nasıl etkileşim kurduğunu test etmeniz gerekir. Temsilcinize siteye gitme, uzantıyı yükleme ve tetikleme talimatı vererek bu süreci otomatikleştirin.

Örnek istem:

Genel bir yaklaşım kullanabilirsiniz:

Test my extension on example.com and verify it works correctly.

Daha ayrıntılı bilgi de verebilirsiniz:

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.

Örnek temsilci yürütme: Temsilciniz, navigate_page kullanarak hedef URL'ye gider. Ardından, sağlanan mutlak yolla install_extension kullanılır. Uzantı yüklendikten sonra, kullanıcı tıklamasını simüle etmek için trigger_extension_action komutunu yürütür. Son olarak, içerik komut dosyasının çalıştırıldığını ve beklenen çıkışı ürettiğini onaylamak için list_console_messages kullanılır.

Yüklü uzantıları doğrulama ve temizleme

Otomatik test sırasında, bir uzantının doğru sürümle doğru şekilde yüklenip yüklenmediğini doğrulamanız veya bir sonraki test için temiz bir durum sağlamak amacıyla uzantıyı kaldırmanız gerekebilir.

Örnek istem:

Uninstall 'My Test Extension' from the browser.

Örnek temsilci yürütme: Temsilciniz, yüklü uzantıların listesini ve meta verilerini almak için list_extensions aracını kullanır. "My Test Extension" ile ilişkili kimliği belirlemek için çıkışı ayrıştırır. Ardından, tarayıcıdan güvenli bir şekilde kaldırmak için bu kimliğe sahip uninstall_extension aracını kullanır.

Yeni bir uzantı oluşturma ve test etme

Sıfırdan yeni bir Chrome uzantısı başlatmak için genellikle standart dosyalar oluşturmanız ve paketi açılmış dizini test etmek için tarayıcıya manuel olarak yüklemeniz gerekir. Temsilcinize ilk kodu oluşturmasını, uzantıyı yüklemesini ve temel işlevlerini uçtan uca tek bir adımda doğrulamasını söyleyerek bu manuel kurulumu atlayın.

Örnek istem:

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.

Örnek ajan yürütme: Ajanınız temel bir Manifest V3 manifest.json ve chrome.action.onClicked etkinliğini dinleyen bir arka plan hizmeti çalışanı oluşturur. Ardından test sayfasına gidip install_extension yöntemini çağırır ve kullanıcı tıklamasını simüle etmek için trigger_extension_action yöntemini kullanır. Son olarak, arka planın griye döndüğünü doğrulamak için DOM'u inceler veya ekran görüntüsü alır. Bu, hazır metnin işlevsel olduğunu kanıtlar.