Kodlama temsilcileriyle uzantılar oluşturma

Antigravity gibi yapay zeka kodlama temsilcileri, artık etkileyici bir doğrulukla uzantı kodu oluşturabiliyor. Ancak bu modellerin potansiyelinden tam olarak yararlanmak ve yüksek kaliteli sonuçlar elde etmek için onlara doğru bağlamı ve araçları sağlamanız gerekir.

Bu kılavuzda, kodlama temsilcilerinizde doğru araçları nasıl ayarlayacağınız ve bu araçların daha hızlı bir şekilde daha iyi uzantılar oluşturmanıza nasıl yardımcı olabileceği açıklanmaktadır.

Kodlama temsilcileri için uzantı geliştirmeye özel olarak tasarlanmış bir beceri oluşturduk. Bu beceri, yapay zeka kodlama temsilcilerine web platformu uzmanlığı, en iyi uygulamalar ve modern API kalıpları sağlayan daha kapsamlı girişimimiz Modern Web Rehberi'nin bir parçasıdır.

Ancak uzantıyı oluşturmak yalnızca ilk adımdır. Ajanlar için Chrome Geliştirici Araçları, kodunuzun beklendiği gibi çalıştığını doğrulamanıza yardımcı olmak için yapay zeka kod yazma desteği asistanlarının uzantılarda doğrudan Chrome'da hata ayıklamasına ve Geliştirici Araçları'nın hata ayıklama özelliklerinden ve performans analizlerinden yararlanmasına olanak tanır.

Kurulum

Modern Web Rehberi

Beceri paketini kullanmak için Modern Web Rehberi'ni tercih ettiğiniz ortama yükleyin ve uzantı becerisini ekleyin. Popüler araçlardan bazılarıyla ilgili talimatları aşağıda bulabilirsiniz.

KSA

Çoğu kodlama temsilcisi (Gemini CLI, Claude Code ve Codex dahil) için önerilen yükleme yöntemi, Chrome ekibi tarafından geliştirilen modern-web-guidance CLI'dır. Becerileri modern-web-guidance CLI üzerinden yüklediğinizde beceriler otomatik olarak güncel tutulur.

  npx modern-web-guidance@latest install --choose

Bu komut, becerileri tercihlerinize göre yüklemek için etkileşimli bir sihirbaz çalıştırır. Seçenekler sunulduğunda kodlama temsilcilerinizi seçin ve hem chrome-extensions hem de modern-web-guidance seçeneğini belirleyin.

Antigravity

Antigravity'yi yüklerken uzantı becerisini içeren Modern Web Rehberi eklentisini seçebilir veya Özelleştirmeler > Build With Google Eklentileri > Modern Web Rehberi'ni kullanarak ekleyebilirsiniz.

Kodlama ajanları için Chrome Geliştirici Araçları

Ajanlar için Chrome Geliştirici Araçları'nı tercih ettiğiniz kodlama temsilcinize eklenti, uzantı veya MCP sunucusu olarak ekleyebilirsiniz.

En popüler aracılardan bazıları için talimatları aşağıda bulabilirsiniz.

Antigravity

1. Antigravity IDE'yi indirin (Antigravity, MCP sunucusu yapılandırmasını manuel olarak düzenlemenize izin vermediği için önerilmez).

2. Başlangıçta veya Ayarlar > Özelleştirmeler'de, Build with Google bölümünde Chrome Geliştirici Araçları'nı etkinleştirin. Bu işlem yalnızca Chrome Geliştirici Araçları becerisini yükler, MCP sunucusunu yüklemez.

   

3. Chrome Geliştirici Araçları MCP sunucusunu eklemek için Ayarlar > Özelleştirme'ye gidin, MCP sunucusu ekle düğmesini tıklayın ve Chrome Geliştirici Araçları'nı arayın.

   

   

   

4. MCP sunucusu yapılandırmasını açmak için MCP Yapılandırması'nı aç'ı tıklayın. Yapılandırma dosyasını IDE'de görmek için ayarları kapatmanız gerektiğini unutmayın.

   

5. Şu iki yapılandırma parametresini ekleyin: --categoryExtensions (uzantı araçlarını etkinleştirmek için) ve --autoConnect (mevcut bir Chrome profiline bağlanmayı etkinleştirmek için. Bu, Chrome'un yerleşik yapay zeka API'lerini kullanırken veya oturum açma gerektiğinde zorunludur).

   {
    "mcpServers": {
      "chrome-devtools-mcp": {
        "args": [
          "-y",
          "chrome-devtools-mcp@latest",
          "--categoryExtensions",
          "--autoConnect"
        ],
        "command": "npx"
      }
    }
   }
   

6. Uzaktan hata ayıklamayı etkinleştirmek için Chrome'u açın, chrome://inspect/#remote-debugging adresine gidin ve Bu tarayıcı örneği için uzaktan hata ayıklamaya izin ver'i seçin.

   

7. Antigravity IDE'yi yeniden başlatın.

8. Yeni bir çalışma alanı oluşturun ve şu test istemini girin: "Hello World Chrome uzantısı oluştur. Chrome Geliştirici Araçları'nı kullanarak test edin." Temsilci, uzantıyı tarayıcıda test etmeye başladığında Chrome, uzaktan hata ayıklama izni isteyen bir iletişim kutusu gösterir. İzin ver'i seçin. Uzaktan hata ayıklama oturumu etkinleştirildiğinde Chrome'da "Chrome şu anda otomatik test yazılımı tarafından kontrol ediliyor" şeklinde bir banner gösterilir.

<figure>
  <img src="image/antigravityide--u84rk62f5t9.png" alt="The remote debugging warning banner and approval popup dialog in Chrome." class="screenshot" width="800">
  <figcaption>The remote debugging banner indicating automated browser control is active.</figcaption>
</figure>

Claude Code

  claude mcp add chrome-devtools --scope project -- npx chrome-devtools-mcp@latest --categoryExtensions --autoConnect

Diğer temsilciler

Diğer temsilcileri ayarlama talimatları için Chrome Geliştirici Araçları MCP GitHub sayfasındaki belgelere göz atın.

CHROMEWEBSTORE.md temsilci talimatları

Uzantı yayınlamanın önemli bir parçası, Geliştirici Kontrol Paneli'ni doldurmaktır. Bu beceri, kodlama temsilcinizin gerekli bilgileri (kodda istenen her izin isteği için gerekçeler dahil) izleyen bir CHROMEWEBSTORE.md dosyası oluşturup bu dosyayı güncel tutmasını sağlayarak bu sorunu çözer.

"Bunu yayınlayalım" veya "Bu uzantıyı mağaza için hazırla" gibi ifadeler kullandığınızda beceri tetiklenir. Ancak temsilci tabanlı iş akışlarınızı kolaylaştırmak için temsilcinizin sistem talimatlarına (ör. Antigravity için ~/.gemini/GEMINI.md veya Claude için ~/.claude/CLAUDE.md) aşağıdakileri ekleyin:

Whenever you are creating or making changes to a Chrome extension, create and manage a CHROMEWEBSTORE.md file. You can use the chrome-extensions skill to learn about the format of this file.

Kodlama temsilcileriyle uzantınızı oluşturma ve test etme

Modern Web Rehberi'nde yer alan uzantı becerisi, temsilcilere üç temel konuda yardımcı olur:

• Güncel API bilgisi: Temsilcilere, kullandığınız model eğitildikten sonra yayınlanmış olabilecek en yeni API'leri öğretir.
• En iyi uygulamalar: Temsilcilerin, ekibimizin Chrome uzantıları oluştururken yıllar içinde öğrendiği tüm en iyi uygulamalara erişmesini sağlar.
• Gönderime hazır olma durumu: Uzantınızı Chrome Web Mağazası'na göndermek için ihtiyaç duyabileceğiniz bilgileri takip ederek dağıtımı kolaylaştırır.

Modern Web Rehberi; performans, erişilebilirlik ve modern API'ler gibi mükemmel bir kullanıcı deneyimi sunmak için ihtiyacınız olan her şeyi kapsayan beceriler de içerir. Örneğin, yerleşik yapay zeka API becerileri, yapay zeka kodlama aracılarının her zaman API'nin en yeni sürümünü kullanmasını sağlar. Ayrıca, bu API'lerin kullanımıyla ilgili açık mimari kurallar ve donanım kısıtlamaları hakkında ek bilgiler sunarak model indirmelerinin verimli bir şekilde yönetilmesini, güvenliğe odaklanılmasını ve sorunsuz yedek stratejiler uygulanmasını sağlar.

Bu beceri, temsilcinizin kodda istenen her izin için gerekçeler de dahil olmak üzere yayınlama için gerekli bilgileri izlemesine de yardımcı olur. Örneğin, kodlama temsilcinizden Yan Panel API'yi kullanarak bir uzantı oluşturmasını ve bunu Chrome Web Mağazası'nda yayınlamasını isterseniz temsilci, sidePanel iznine ihtiyacı olduğunu anlar. Ardından, gerekçeyi içeren bir CHROMEWEBSTORE.md dosyası oluşturur. Göndermeye hazır olduğunuzda bu gerekçeyi inceleyebilir, gerekirse düzenleme yapabilir ve doğrudan Geliştirici Kontrol Paneli'ne kopyalayabilirsiniz.

Ajanlar için Chrome Geliştirici Araçları, yapay zeka kod yazma desteği asistanlarının çalışan bir Chrome örneğinde uzantıları yüklemesine ve hatalarını ayıklamasına olanak tanır. Özellikle:

• Uzantıları yükleme ve kaldırma
• Yüklü tüm uzantıları listeler ve yeniden yükler.
• Uzantı işlemlerini tetikleme
• Uzantınızın her yüzeyini (pop-up, yan panel, hizmet çalışanı) inceleyin.

Aşağıda, bu özelliğin pratikte nasıl çalıştığını gösteren bir istem ve video yer almaktadır:

Build a simple "Quick notes" extension that opens a popup text area to save notes and test it in the browser.

Bu durumda temsilci, verileri saklaması gerektiğini bildiği için bir Manifest V3 dosyası oluşturmalı ve storage iznini istemelidir. Temsilci artık sohbet arayüzünden ayrılmanıza gerek kalmadan uzantı oluşturabilir, yükleyebilir, çalışmasını izleyebilir ve kararlılığını doğrulayabilir.

Bu, basit bir istem örneğidir. Farklı istem teknikleri hakkında daha fazla bilgi edinmek ve kullanım alanınıza en uygun olanı bulmak için İstem mühendisliği ile ilgili kılavuzumuzu inceleyin.

CHROMEWEBSTORE.md ile dağıtımı kolaylaştırmak için istem örnekleri

Uzantı becerisini yüklemek ve temsilcinize talimatlar eklemek işin büyük kısmını halletse de istemlerinizde spesifik olmak, bulunduğunuz geliştirme aşaması için daha iyi sonuçlar verebilir. Temsilcinizden CHROMEWEBSTORE.md dosyanızı oluşturmasını, güncellemesini ve yönetmesini nasıl isteyeceğinizle ilgili kısa bir kılavuzu aşağıda bulabilirsiniz.

• İlk kez yayınlama: Uzantınızın özellikleri tamamlandığında ve ilk mağaza varlığınızı oluşturmak istediğinizde.

Prepare the extension for publication on the Chrome Web Store.

• İzinleri ve gerekçeleri güncelleme: Chrome Web Mağazası, tek amaç politikasını uygular ve manifest.json ürününüzde istenen her izin isteği için ayrıntılı gerekçeler sunulmasını zorunlu kılar.

We just added the 'declarativeNetRequest' and 'storage' permissions to our manifest. Let's update our store listing.

• Mağaza reddini ele alma: Uzantınız inceleme sürecinde reddedilir veya işaretlenirse ret nedenini doğrudan temsilciye iletebilir ve uygunluk meta verilerinizi güncellemesini isteyebilirsiniz.

Our extension submission was rejected because our privacy policy doesn't explicitly mention how we handle user data locally. Let's update the privacy policy section in CHROMEWEBSTORE.md to resolve this.

Sonuç

Modern Web Rehberi becerilerini temsilciler için Chrome Geliştirici Araçları ile birleştirmek, yüksek kaliteli özellikleri daha hızlı oluşturmanıza yardımcı olur. Ayrıca uzantınızın kararlı ve Chrome Web Mağazası'na gönderilmeye hazır olmasını sağlar.

İlk prototipten yayınlamaya kadar uzantı geliştirme sürecinizi nasıl kolaylaştırabileceklerini görmek için bir sonraki projenizde bu araçları denemeye başlayın.