Antigravity gibi yapay zeka kodlama aracıları artık etkileyici bir doğrulukla uzantı kodu oluşturabiliyor. Ancak bu araçların potansiyelini tam olarak ortaya çıkarmak 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 aracınızda doğru araçların nasıl ayarlanacağı ve bu araçların daha iyi uzantıları daha hızlı oluşturmanıza nasıl yardımcı olabileceği açıklanmaktadır.
Özellikle uzantı geliştirme için tasarlanmış kodlama temsilcileri becerisi oluşturduk. Bu beceri, yapay zeka kodlama aracılarına web platformu uzmanlığı, en iyi uygulamalar ve modern API kalıpları sağlayan daha geniş bir girişimimiz olan Modern Web Guidance'ın bir parçasıdır.
Ancak uzantıyı oluşturmak yalnızca ilk adımdır. Kodunuzun beklendiği gibi çalıştığını doğrulamanıza yardımcı olmak için aracılar için Chrome Geliştirici Araçları, yapay zeka kodlama 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 Guidance'ı tercih ettiğiniz ortama yükleyin ve uzantılar becerisini ekleyin. Popüler araçlardan bazılarıyla ilgili talimatları burada bulabilirsiniz.
KSA
Gemini CLI, Claude Code ve Codex dahil olmak üzere çoğu kodlama aracının Chrome ekibi tarafından oluşturulan modern-web-guidance CLI aracılığıyla yüklenmesi önerilir. Becerileri modern-web-guidance CLI aracılığıyla yüklediğinizde beceriler otomatik olarak güncel tutulur.
npx modern-web-guidance@latest install --choose
Bu işlem, tercihlerinize göre becerileri yüklemek için etkileşimli bir sihirbaz çalıştırır. Seçenekler sunulduğunda kodlama aracılarınızı belirleyin ve hem chrome-extensions hem de modern-web-guidance'yi seçin.
Antigravity
Antigravity'yi yüklerken uzantılar becerisini içeren Modern Web Guidance eklentisini seçebilir veya Özelleştirmeler > Google Eklentileriyle Oluşturun > Modern Web Guidance üzerinden ekleyebilirsiniz.
Kodlama ajanları için Chrome Geliştirici Araçları
Aracıların kullanabileceği Chrome Geliştirici Araçları'nı, tercih ettiğiniz kodlama aracınıza eklenti, uzantı veya MCP sunucusu olarak ekleyebilirsiniz.
En popüler bazı aracıların talimatlarını burada bulabilirsiniz.
Antigravity
Chrome Geliştirici Araçları MCP sunucusunu kullanmak için Antigravity'nin özel bir MCP sunucusu yükleme dokümanlarındaki talimatları uygulayın. MCP sunucuları yapılandırmasına aşağıdakileri ekleyin:
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"chrome-devtools-mcp@latest",
"--category-extensions",
"-y"
]
}
}
}
Claude Code
claude mcp add chrome-devtools --scope project -- npx chrome-devtools-mcp@latest --categoryExtensions
Diğer temsilciler
Diğer aracıları ayarlama talimatları için Chrome Geliştirici Araçları MCP GitHub'daki dokümanlara bakın.
CHROMEWEBSTORE.md ajan talimatları
Uzantı yayınlamanın önemli bir parçası, Geliştirici Kontrol Paneli'ni doldurmaktır. Bu beceri, kodlama aracınızın, koddaki her izin isteğinin gerekçeleri de dahil olmak üzere gerekli bilgileri izleyen bir CHROMEWEBSTORE.md dosyası oluşturup bu dosyayı korumasını sağlayarak bu sorunu ele alır.
Bu beceri, "Bunu yayınlayalım" veya "Bu uzantıyı mağaza için hazırla" gibi ifadeler kullandığınızda tetiklenir. Ancak, aracınızın iş akışlarını kolaylaştırmak için aracınızın sistem talimatlarına aşağıdakileri ekleyin (örneğin, Antigravity için ~/.gemini/GEMINI.md veya Claude için ~/.claude/CLAUDE.md):
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 aracılarıyla uzantınızı oluşturma ve test etme
Modern Web Guidance'da yer alan uzantı becerisi, temsilcilere üç temel şekilde yardımcı olur:
- Güncel API bilgisi: Kullandığınız model eğitildikten sonra yayınlanmış olabilecek en yeni API'ler hakkında temsilcilere bilgi verir.
- En iyi uygulamalar: Bu sayede, aracıların ekibimizin Chrome uzantıları geliştirirken yıllar içinde öğrendiği tüm en iyi uygulamalara erişmesi sağlanır.
- Göndermeye hazırlık: 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 Kılavuzu, mükemmel bir kullanıcı deneyimi sunmak için ihtiyaç duyduğunuz her şeyi kapsayan becerileri de içerir. Örneğin, performans, erişilebilirlik ve modern API'ler. Örneğin, yerleşik yapay zeka API becerileri, yapay zeka kodlama aracıların her zaman API'nin en yeni sürümünü ve bu API'lerin kullanımıyla ilgili açık mimari kurallar ve donanım kısıtlamaları hakkında ek bilgileri kullanmasını sağlar. Böylece model indirmeleri verimli bir şekilde yönetilir, güvenliğe odaklanılır ve sorunsuz yedek stratejileri uygulanır.
Bu beceri, kodda istenen her izin için gerekçeler de dahil olmak üzere yayınlama için gerekli bilgileri takip etmenize de yardımcı olur. Örneğin, kodlama aracınızdan Yan Panel API'sini kullanarak bir uzantı oluşturmasını ve bunu Chrome Web Mağazası'nda yayınlamasını isterseniz araç, sidePanel izninin gerekli olduğunu anlar. Ardından, gerekçeli bir CHROMEWEBSTORE.md dosyası oluşturur. Göndermeye hazır olduğunuzda bu gerekçeyi inceleyebilir, gerekirse ayarlamalar yapabilir ve doğrudan Geliştirici Kontrol Paneli'ne kopyalayabilirsiniz.
Aracılar için Chrome Geliştirici Araçları, yapay zeka kodlama asistanlarının çalışan bir Chrome örneğine uzantı yüklemesine ve uzantılarda hata ayıklamasına olanak tanır. Özellikle:
- Uzantıları yükleme ve kaldırma
- Yüklü tüm uzantıları listeleyin ve yeniden yükleyin.
- Uzantı işlemlerini tetikleme
- Uzantınızın her yüzeyini (pop-up, yan panel, hizmet çalışanı) inceleyin.
İşte bir istem ve bunun pratikte nasıl çalıştığını gösteren bir video:
Build a simple "Quick notes" extension that opens a popup text area to save notes and test it in the browser.
Bu durumda, verilerin kalıcı olması gerektiğini bildiği için aracı, Manifest V3 dosyası oluşturmalı ve storage izni istemelidir. Artık temsilci, sohbet arayüzünden hiç ayrılmadan 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 kılavuzumuza göz atın.
CHROMEWEBSTORE.md ile dağıtımı kolaylaştırmaya yönelik istem örnekleri
Uzantı becerisini yüklemek ve aracınıza talimat eklemek işin büyük bir kısmını halletse de istemlerinizde spesifik olmak, bulunduğunuz geliştirme aşamasında daha iyi sonuçlar elde etmenizi sağlayabilir. Aşağıda, aracınızdan CHROMEWEBSTORE.md dosyanızı oluşturmasını, güncellemesini ve bakımını yapmasını istemeyle ilgili kısa bir kılavuz verilmiştir.
- İ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.jsondosyanızda istenen her izin 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 tarafından reddedilme durumunu ele alma: Uzantınız inceleme sürecinde reddedilirse veya işaretlenirse ret nedenini doğrudan aracıya 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 Guidance becerilerini Chrome Geliştirici Araçları ile birleştirmek, yüksek kaliteli özellikleri daha hızlı oluşturmanıza yardımcı olurken uzantınızın kararlı olmasını ve Chrome Web Mağazası'na gönderilmeye hazır olmasını da sağlar.
Bu araçların, uzantı geliştirme sürecinizi ilk prototipten yayınlamaya kadar nasıl kolaylaştırabileceğini görmek için bir sonraki projenizde bu araçları denemeye başlayın.