Chrome Eklentisi Nasıl Yapılır? – AI ile Kodlama

chrome eklentisi nasıl geliştirilir

Chrome eklentilerini geliştirmek artık AI ile çok kolay bir hale geldi. İstediğiniz eklentiyi yapmak için öncelikle bir planlamaya, ardından AI yardımı ile kodlamaya ve son olarak mağazaya eklemeye ihtiyacınız olacak. Bu yazıda Chrome eklentisi yapmak için ihtiyacınız olan planlama aşamalarını, kodlama aşamalarını ve uzantıyı mağaza yükleme aşamalarını işleyeceğiz. Her bir aşama için size kolaylıkla takip edebilmeniz için bir outline sağlayacağız.

1- Eklentiyi ve Özelliklerini Planlama Aşaması

Hedefinizi Belirleme:

Öncelikle eklentinin temel işlevine karar verin. Tüm bu işlevleri bir sayfada sıralayan. Eğer ilk defa Chrome uzantısı kodlayacaksanız tek işlevi olan bir eklenti yapmanızı öneririm. Hedef belirlemek için kendinize şu soruları sorun:

  • Eklentinin amacı ne?
  • Eklenti ne yapacak? 
  • Eklentiyi kimler kullanacak?

Bu temel soruları sorduktan sonra eklentinizin işlevlerini tanımlamalısınız. Temel özellikleri belirleyin. Sizin için birkaç örnek temel özelliği aşağıya bırakıyorum. Fakat burası her eklenti türüne göre değişiklik gösterebileceği için size nihai bir yol haritası sunmam pek mümkün değil.

Temel özellik örnekleri:

  • Popup penceresi veya araç çubuğu simgesi olacak mı?
  • Eklenti arka planda çalışarak veri mi toplayacak?
  • Kullanıcılarla nasıl etkileşim kuracak? (Düğmeler, formlar, vb.)

Eklentinin İhtiyacı Olacak İzinleri Belirleme:

Temel özellikleri ve eklentinizin genel işlevini belirledikten sonra, eklentinizin çalışması için kullanıcıdan alacağı izinleri belirlemeniz lazım. Bazı örnek izinler şu şekilde:

  • Tab erişimi: Sekme bilgilerini okuma veya değiştirme.
  • Depolama: Verileri tarayıcıda saklama.
  • Harici kaynaklara erişim: Örneğin, bir API’ye bağlanma.

Tüm bunlar bittikten sonra eklentiniz için olan teknik detaylarını planlama ve kodlama aşamasına geçebilirsiniz.

2- Yapay Zeka İle Eklentiyi Kodlama

Yapay zeka ile eklentinizi kodlamak için aşağıdaki adımları izleyin:

Temel Yapıyı AI ile Oluşturma

  1. Manifest.json Dosyasını Yazdırma
    • Yapay zekaya eklenti türünü, izinlerini ve özelliklerini tanımlayın.
    • Örnek prompt:
      “Bana bir Chrome eklentisi için manifest.json oluştur. Popup penceresi olacak ve tabs API izni gerekecek.”

AI tarafından oluşturulan bir örnek:

{ "manifest_version": 3, "name": "AI Destekli Eklenti", "version": "1.0", "action": { "default_popup": "popup.html", "default_icon": "icon.png" }, "permissions": ["tabs"] }

Popup Arayüzü Tasarımı

  • AI’dan HTML ve CSS kodu istemek için bir prompt yazın:
    “Bana basit bir Chrome popup arayüzü için HTML ve CSS kodu yaz.”

Örnek Kod:

<!DOCTYPE html> <html> <head> <style> body { font-family: Arial, sans-serif; text-align: center; } button { padding: 10px 20px; margin: 10px; } </style> </head> <body> <h1>Eklentiye Hoş Geldiniz</h1> <button id="startButton">Başla</button> </body> </html>

İşlevsellik Eklemek

  1. AI ile JavaScript Kodlama
    • İşlevleri yapay zeka yardımıyla geliştirin. Örneğin:
      “Bu popup için bir butona tıklanınca ‘Merhaba Dünya’ mesajı veren bir JavaScript kodu yaz.”

AI tarafından oluşturulan kod:

document.getElementById('startButton').addEventListener('click', () => { alert('Merhaba Dünya!'); });

API Entegrasyonları

  • AI’dan bir web API’si ile entegrasyon yapmasını isteyin. Örneğin:
    “Bir JSON API’ye istek atan ve sonucu konsola yazdıran bir JavaScript fonksiyonu oluştur.”

Gelişmiş Özellikler Eklemek

  1. Arka Plan Scriptleri
    • AI’dan eklentiye sürekli çalışan bir arka plan scripti yazmasını isteyebilirsiniz:
      “Sekme değişikliklerini izleyen bir background.js kodu yaz.”

Örnek:

chrome.tabs.onActivated.addListener((activeInfo) => { console.log("Aktif sekme değişti:", activeInfo.tabId); });
  1. Kullanıcı Verilerini Depolama
    • Yapay zekadan chrome.storage API kullanarak veri kaydetme ve okuma kodları istemek:
      “Chrome storage API kullanarak kullanıcı verilerini kaydeden ve okuyan bir örnek kod yaz.”

AI tarafından önerilen kod:

chrome.storage.sync.set({ key: "value" }, () => { console.log("Veri kaydedildi."); }); chrome.storage.sync.get(["key"], (result) => { console.log("Kaydedilen veri:", result.key); });

Kod Optimizasyonu ve Test

  • AI’dan kodunuzu optimize etmesini isteyin. Örneğin:
    “Bu kodu daha performanslı hale getirebilir misin?”
  • Test ve Hata Ayıklama:
    • Yapay zeka ile ortaya çıkan hataları düzeltmek için spesifik sorular sorun.
    • Örnek:
      “Bu hatayı alıyorum: undefined is not a function. Bunu nasıl düzeltebilirim?”

AI ile Dokümantasyon Oluşturma

  • Kullanıcıların eklentiyi nasıl kullanacağını açıklayan bir README dosyası oluşturmak için:
    “Bu Chrome eklentisi için bir README dosyası yaz.”

Tüm bu aşamaları tamamladıktan sonra ilk eklentiniz hazır olacak. Tabi burada verdiğimiz aşamalar basit bir eklenti üzerindendi. Eğer daha gelişmiş bir eklenti yapacaksanız promptlarınızı buna göre şekillendirmeniz gerekir.

3- Chrome Web Mağazasına Uzantı Yükleme

Chrome web mağazasına eklentinizi yüklemek için aşağıdaki işlemleri gerçekleştirmelisiniz:

1. Geliştirici Hesabı Oluştur

  • Chrome Web Store Developer Console adresine git.
  • Google hesabınla giriş yap.
  • Geliştirici hesabı ücretini öde (tek seferlik 5$).

2. Uzantıyı Paketle

  • Chrome tarayıcısında chrome://extensions sayfasını aç.
  • Geliştirici Modunu etkinleştir.
  • Paketlenmemiş Yükle seçeneğine tıklayarak eklentiyi test et.
  • Eklenti Paketle seçeneğini kullanarak .zip dosyasını oluştur.

3. Uzantıyı Yükle

  • Developer Console’a git.
  • Yeni Öğe Yükle butonuna tıkla.
  • Hazırladığın .zip dosyasını seç.

4. Detayları Doldur

  • Uzantı Adı ve Açıklama gir.
  • Ekran Görüntüleri ve simgeler yükle.
  • Kategori ve Etiketler belirle.

5. Mağaza Ayarları

  • Gizlilik Politikası bağlantısı ekle.
  • Kullanıcı Verileri politikalarını belirt.

6. Yayınla

  • Yayın İncelemesine Gönder butonuna tıkla.
  • Google ekibi inceleme yapar.
  • Onaylandıktan sonra eklentiniz yayınlanır.

Eğer yalnızca bir demo yapmak istiyor ve bunu yayına almayı düşünmüyorsanız şu şekilde eklentinizi çalıştırabilirsiniz:

Eklentiyi Yalnızca Kendi Tarayıcınıza Yükleme Adımları:

1. Eklenti Dosyalarını Hazırlayın

  • Tüm eklenti dosyalarınızı (manifest.json, popup.html, js ve css dosyaları) bir klasöre yerleştirin.
  • Eklentinizin sorunsuz çalıştığından emin olun.

2. Chrome Geliştirici Sayfasını Açın

  • Chrome tarayıcısında chrome://extensions adresine gidin.

3. Geliştirici Modunu Etkinleştirin

  • Sayfanın sağ üst köşesindeki Geliştirici Modu anahtarını aktif hale getirin.

4. Paketlenmemiş Eklenti Yükleme

  • Paketlenmemiş Yükle butonuna tıklayın.
  • Eklenti dosyalarınızın bulunduğu klasörü seçin.

5. Eklentiyi Test Edin

  • Eklentiniz tarayıcınıza yüklenecektir ve sağ üst köşede simgesi görünecektir.
  • Eklentiyi kullanarak işlevlerini test edin.

Bu yöntemle eklentinizi tarayıcınıza ekleyebilir ve yayınlamadan test edebilirsiniz. Herhangi bir değişiklik yaptıktan sonra sayfada “Yeniden Yükle” butonuna basarak eklentiyi güncelleyebilirsiniz.

Comments

No comments yet. Why don’t you start the discussion?

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir