Web tarayıcı uzantıları, dijital deneyimimizi kişiselleştirmenin ve geliştirmenin güçlü bir yolunu sunar. Ancak, bir Chrome uzantısı geliştirmek genellikle karmaşık bir yapılandırma, çok sayıda dosya ve özel bir derleme süreci gerektirebilir. Peki, ya bu süreci basitleştiren, tek bir dosyadan tam işlevsel bir uzantı oluşturmanıza olanak tanıyan bir araç olsaydı? İşte tam da bu noktada Kiro devreye giriyor. Bu kapsamlı rehberde, Kiro kullanarak sıfırdan, tek bir JavaScript veya TypeScript dosyasından başlayarak, tam teşekküllü bir Chrome uzantısını nasıl adım adım geliştirebileceğinizi, gelişmiş özelliklerini ve gerçek dünya senaryolarındaki uygulamalarını keşfedeceğiz. Geleneksel uzantı geliştirme karmaşasına veda edip, modern ve akıcı bir yaklaşımla projelerinizi hayata geçirmeye hazır olun!

Chrome uzantıları, web tarayıcımızın işlevselliğini artıran, kullanıcılara özel yetenekler sunan küçük ama güçlü yazılım parçacıklarıdır. Birçoğumuz için vazgeçilmez olan bu uzantılar, arka planda web sayfalarını analiz etmekten, kullanıcı arayüzünü değiştirmeye, hatta belirli web siteleri için özel araç çubukları oluşturmaya kadar geniş bir yelpazede görev alabilir. Ancak, bir uzantının arkasındaki geliştirme süreci, özellikle yeni başlayanlar için göz korkutucu olabilir. Öncelikle, bir Chrome uzantısının temel yapısı genellikle birden fazla dosyadan oluşur. Bu dosyalar arasında manifest.json (uzantının meta verilerini, izinlerini ve bileşenlerini tanımlayan temel dosya), background scripts (uzantının arka planda çalışan ve genellikle olayları dinleyen ana mantığı), content scripts (web sayfalarının DOM’unu değiştiren veya onlarla etkileşim kuran betikler) ve popup sayfaları (uzantının simgesine tıklandığında açılan küçük kullanıcı arayüzleri) bulunur.

Geleneksel bir Chrome uzantısı geliştirirken, bu farklı bileşenleri yönetmek, aralarında iletişimi sağlamak ve nihayetinde dağıtım için paketlemek, belirli zorlukları beraberinde getirir. Örneğin, bir geliştiricinin hem JavaScript hem de HTML/CSS dosyalarını yönetmesi, bunların tarayıcı tarafından düzgün bir şekilde yüklenmesini sağlaması ve tüm bağımlılıkları doğru bir şekilde yapılandırması gerekir. Dahası, modern web geliştirme süreçlerinde sıklıkla kullanılan modül sistemleri, TypeScript derlemesi veya CSS ön işlemcileri gibi araçların, uzantı geliştirme ortamına entegrasyonu ek bir karmaşıklık katmanı ekleyebilir. Bu durum, özellikle küçük ve hızlı bir uzantı fikrini hayata geçirmek isteyenler için ciddi bir başlangıç engeli oluşturabilir. Her proje için baştan bir derleme aracı (örneğin Webpack veya Rollup) kurmak, yapılandırmak ve bakımını yapmak, geliştirme süresini uzatan ve verimliliği düşüren faktörlerdir. İşte Kiro, tam da bu geleneksel zorluklara modern ve zarif bir çözüm sunarak, geliştiricilerin sadece kod yazmaya odaklanmasını sağlamayı hedefler. Tek dosya felsefesiyle, uzantı geliştirme sürecindeki bu engelleri ortadan kaldırmayı başarır.

Kiro Nedir ve Chrome Uzantısı Geliştirmeye Nasıl Bir Kolaylık Getirir?

Kiro, modern JavaScript ve TypeScript tabanlı Chrome uzantıları geliştirmek için tasarlanmış yenilikçi bir derleme aracıdır. Temel amacı, uzantı geliştirme sürecini mümkün olduğunca basitleştirmek ve hızlandırmaktır. Geleneksel uzantı geliştirme ortamlarının aksine, Kiro’nun en dikkat çekici özelliği, tek bir JavaScript veya TypeScript dosyasından tüm bir Chrome uzantısını oluşturabilmesidir. Bu “tek dosya felsefesi”, geliştiricilerin farklı uzantı bileşenlerini (arka plan betikleri, içerik betikleri, açılır pencereler ve hatta seçenekler sayfaları) aynı dosya içinde tanımlamasına olanak tanır. Kiro, bu tek dosyayı alır, içerisindeki özel direktifleri yorumlar ve otomatik olarak bir Chrome uzantısının gerektirdiği tüm bileşenleri (HTML, CSS, JavaScript dosyaları ve manifest.json) uygun bir şekilde derler ve paketler.

Kiro’nun sunduğu kolaylıklar sadece tek dosya yaklaşımıyla sınırlı değildir. Aynı zamanda geliştirme deneyimini de önemli ölçüde iyileştirir. Örneğin, kiro dev komutu ile canlı yeniden yükleme (hot-reloading) özelliğini etkinleştirebilirsiniz, bu da kodunuzda yaptığınız değişikliklerin uzantınıza anında yansımasını sağlar. Bu özellik, hata ayıklama ve hızlı prototipleme süreçleri için paha biçilmezdir. Ayrıca, Kiro varsayılan olarak TypeScript desteği sunar; bu da daha güvenli ve ölçeklenebilir kod yazmanıza olanak tanırken, gelişmiş hata kontrolü ve kod tamamlama gibi IDE özelliklerinden faydalanmanızı sağlar. Modüler yapıya sahip olduğu için, projenize harici NPM paketlerini kolayca dahil edebilir ve modern JavaScript ekosisteminin tüm avantajlarından yararlanabilirsiniz. Kiro, arka planda gelişmiş derleme ve optimizasyon teknikleri kullanarak, ortaya çıkan uzantının performanslı ve kaynak tüketimi açısından verimli olmasını sağlar. Bu, geliştiricilerin karmaşık derleme yapılandırmalarıyla uğraşmak yerine, doğrudan uzantılarının çekirdek işlevselliğine odaklanmalarına olanak tanır, böylece daha kısa sürede daha kaliteli uzantılar ortaya çıkarabilirler.

Kiro ile İlk Chrome Uzantınızı Oluşturmaya Hazır mısınız?

Kiro ile ilk Chrome uzantınızı oluşturmak, şaşırtıcı derecede basittir. Bu bölümde, “Hello World” mesajını gösteren basit bir açılır pencere (popup) uzantısını adım adım nasıl geliştireceğinizi öğreneceğiz. İlk olarak, Kiro’yu sisteminize kurmanız gerekiyor. Kiro bir Node.js paketi olduğu için, sisteminizde Node.js ve npm’in (Node Package Manager) kurulu olduğundan emin olun. Kurulum işlemi oldukça basittir ve tek bir komutla global olarak gerçekleştirilebilir:

npm install -g kiro
    

Bu komut, Kiro CLI'yı (Command Line Interface) sisteminize yükler. Kurulum tamamlandıktan sonra, projeniz için yeni bir dizin oluşturun ve içine girin:

mkdir my-first-kiro-extension
cd my-first-kiro-extension
    

Şimdi, tüm uzantı mantığımızı içerecek olan ana dosyayı oluşturalım. Bu dosyanın adı genellikle index.ts (TypeScript kullanıyorsanız) veya index.js (JavaScript kullanıyorsanız) olabilir. Biz TypeScript'i tercih edeceğiz:

touch index.ts
    

index.ts dosyasının içeriği, uzantımızın tüm işlevselliğini tanımlayacak. Kiro'nun sihirli gücü, HTML içeriğini ve JavaScript mantığını aynı dosya içinde nasıl yönetebildiğinde yatar. Aşağıdaki kod bloğu, basit bir açılır pencere oluşturan bir Kiro uzantısını göstermektedir:

// index.ts

// kiro:popup direktifi, bu bloğun bir popup sayfasını temsil ettiğini belirtir.
// İçindeki HTML, uzantı simgesine tıklandığında görüntülenecektir.
/* kiro:popup */
export const popup = 
  
    
      
    
    
      
Merhaba, Kiro Dünyası!
    
  ;

// kiro:manifest direktifi, uzantının manifest.json dosyasını tanımlar.
// Kiro, bu bilgiyi kullanarak manifest.json dosyasını otomatik olarak oluşturur.
/* kiro:manifest */
export const manifest = {
  name: "İlk Kiro Uzantım",
  version: "1.0",
  description: "Kiro ile oluşturulmuş basit bir Chrome uzantısı.",
  manifest_version: 3,
  action: {
    default_popup: "popup.html",
    default_icon: {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  },
  icons: {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  }
};

// Basit bir ikon dosyası oluşturduğumuzu varsayalım
// kiro, belirtilen yoldaki dosyaları otomatik olarak kopyalar.
// Gerçek bir senaryoda bu dosyaları images/icons dizinine koyardık.
// Şimdilik bu bölümü atlıyoruz ve manuel olarak ekleyeceğimizi varsayıyoruz.
// Uzman İpucu: Kiro, statik dosyaları (resimler, fontlar) manifest dosyasında belirtilen veya kod içinde referans verilen yollardan otomatik olarak bundle'a dahil eder. Bu, manuel kopyalama zahmetinden kurtarır.

console.log("Kiro uzantısı yüklendi!");

Bu kodda dikkat etmemiz gerekenler: /* kiro:popup */ ve /* kiro:manifest */ yorum satırlarıdır. Kiro, bu direktifleri kullanarak sırasıyla uzantımızın açılır pencere HTML'ini ve manifest.json dosyasının içeriğini tanımladığımızı anlar. manifest nesnesi, uzantımızın adını, sürümünü, açıklamasını ve hangi dosyaların açılır pencere olarak kullanılacağını belirtir. Ayrıca, uzantı simgeleri için de yollar tanımlanmıştır. Gerçek bir senaryoda, bu ikon dosyalarını projemizin bir icons klasörüne yerleştirmemiz gerekir. Kiro, derleme sırasında bu dosyaları otomatik olarak çıktı dizinine kopyalayacaktır.

Şimdi uzantımızı derleyelim: Çalışma dizininizde aşağıdaki komutu çalıştırın:

kiro build
    

Bu komut, dist adında bir klasör oluşturacak ve uzantımızın çalışması için gerekli tüm HTML, JavaScript ve manifest.json dosyalarını bu klasöre yerleştirecektir. Artık uzantınızı Chrome'a yüklemeye hazırsınız:

1. Chrome tarayıcınızı açın ve adres çubuğuna chrome://extensions yazın.
2. Sağ üst köşedeki "Geliştirici modu" anahtarını açın.
3. "Paketlenmemiş uzantı yükle" düğmesine tıklayın.
4. Proje dizininizdeki dist klasörünü seçin.

Uzantınız başarıyla yüklendiğinde, tarayıcınızın araç çubuğunda yeni bir simge görmelisiniz. Bu simgeye tıkladığınızda "Merhaba, Kiro Dünyası!" yazan açılır pencere karşınıza çıkacaktır. Gördüğünüz gibi, Kiro ile tek bir dosyadan tam işlevsel bir uzantı oluşturmak gerçekten de kolay ve hızlıdır. Hatta daha da ileri giderek, kodunuzu geliştirme sırasında otomatik olarak güncelleyebilir ve değişikliklerinizi anında görebilirsiniz. Bunun için kiro dev komutunu kullanmanız yeterlidir. Bu komut, kaynak kodunuzdaki değişiklikleri izler ve her kaydettiğinizde uzantıyı yeniden derler, böylece Chrome'daki uzantıyı manuel olarak yeniden yükleme ihtiyacını ortadan kaldırır. Bu sayede, hızlı prototipleme ve geliştirme döngüleri elde edersiniz.

Tek Dosya Yeteneğini Keşfetmek: Content Script ve Background Script Entegrasyonu Nasıl Yapılır?

Kiro'nun tek dosya yaklaşımı sadece basit popup'lar için değil, aynı zamanda daha karmaşık uzantı bileşenleri olan content script ve background script'leri entegre etmek için de geçerlidir. Bu yetenek, uzantınızın tüm mantığını tek bir merkezi konumda tutarak yönetimi inanılmaz derecede basitleştirir. Bir content script, bir web sayfasının bağlamında çalışan ve o sayfanın DOM'unu okuma, değiştirme veya olaylarını dinleme yeteneğine sahip olan JavaScript kodudur. Background script ise, uzantının tüm yaşam döngüsü boyunca arka planda çalışan ve genellikle tarayıcı olaylarını (sekme oluşturma, gezinme, vb.) dinleyen, depolama alanına erişen ve diğer uzantı bileşenleriyle iletişim kuran bir betiktir.

Şimdi, Kiro'nun özel direktiflerini kullanarak aynı index.ts dosyası içinde hem bir içerik betiği hem de bir arka plan betiği nasıl tanımlayacağımıza dair bir örnek inceleyelim. Bu vaka analizi olarak, ziyaret edilen her web sayfasında belirli bir kelimeyi (örneğin "Kiro") vurgulayan ve arka planda bir sayaç tutan bir uzantı geliştireceğiz. İşte index.ts dosyamızın güncellenmiş hali:

// index.ts

// kiro:popup - önceki örnekteki popup sayfası
/* kiro:popup */
export const popup = 
  
    
      
    
    
      
Kiro Vurgulayıcı
      
Toplam Vurgulama: 0
      Sayacı Sıfırla
      
    
  ;

// kiro:content-script direktifi, bu bloğun bir içerik betiği olduğunu belirtir.
// matches özelliği, bu betiğin hangi URL'lerde çalışacağını tanımlar.
/* kiro:content-script */
export const contentScript = {
  matches: [""], // Tüm URL'lerde çalışır
  runAt: "document_idle", // Sayfa yüklendikten sonra çalışır
  main: () => {
    const targetWord = "Kiro";
    const regex = new RegExp(targetWord, 'gi'); // Büyük/küçük harf duyarsız global arama

    // Sayfa içeriğini analiz et ve kelimeyi vurgula
    function highlightText(node: Node) {
      if (node.nodeType === Node.TEXT_NODE && node.parentNode && node.parentNode.nodeName !== 'SCRIPT' && node.parentNode.nodeName !== 'STYLE') {
        const text = node.nodeValue;
        if (text && regex.test(text)) {
          const fragment = document.createDocumentFragment();
          let lastIndex = 0;
          let match;
          while ((match = regex.exec(text)) !== null) {
            fragment.appendChild(document.createTextNode(text.substring(lastIndex, match.index)));
            const span = document.createElement('span');
            span.style.backgroundColor = 'yellow';
            span.style.fontWeight = 'bold';
            span.textContent = match[0];
            fragment.appendChild(span);
            lastIndex = regex.lastIndex;
            // Arka plan betiğine mesaj göndererek sayacı artır
            chrome.runtime.sendMessage({ type: "INCREMENT_COUNT" });
          }
          fragment.appendChild(document.createTextNode(text.substring(lastIndex)));
          node.parentNode.replaceChild(fragment, node);
        }
      } else if (node.nodeType === Node.ELEMENT_NODE && node.childNodes) {
        node.childNodes.forEach(highlightText);
      }
    }
    highlightText(document.body);

    console.log("Kiro vurgulayıcı içerik betiği etkin!");
  },
};

// kiro:background-script direktifi, bu bloğun bir arka plan betiği olduğunu belirtir.
/* kiro:background-script */
export const backgroundScript = {
  main: () => {
    let highlightCount = 0;

    // Uzantının yüklendiğini kontrol et
    chrome.runtime.onInstalled.addListener(() => {
        console.log("Kiro Vurgulayıcı yüklendi!");
        chrome.storage.local.get(['highlightCount'], (result) => {
            if (result.highlightCount !== undefined) {
                highlightCount = result.highlightCount;
            }
        });
    });

    // Mesajları dinle
    chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
      if (message.type === "INCREMENT_COUNT") {
        highlightCount++;
        chrome.storage.local.set({ highlightCount: highlightCount });
        sendResponse({ count: highlightCount });
      } else if (message.type === "GET_COUNT") {
        sendResponse({ count: highlightCount });
      } else if (message.type === "RESET_COUNT") {
        highlightCount = 0;
        chrome.storage.local.set({ highlightCount: highlightCount });
        sendResponse({ count: highlightCount });
      }
      return true; // Asenkron yanıt için true döndür
    });

    console.log("Kiro Vurgulayıcı arka plan betiği etkin!");
  },
};

// kiro:manifest - uzantının manifest.json dosyası
/* kiro:manifest */
export const manifest = {
  name: "Kiro Vurgulayıcı",
  version: "1.0",
  description: "Web sayfalarında 'Kiro' kelimesini vurgular ve sayar.",
  manifest_version: 3,
  permissions: ["activeTab", "scripting", "storage"], // Gerekli izinler
  host_permissions: [""], // İçerik betiği için tüm URL'lere erişim
  action: {
    default_popup: "popup.html",
    default_icon: {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  },
  icons: {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  background: {
    service_worker: "background.js" // Kiro, bu dosyayı otomatik olarak oluşturur
  },
  content_scripts: [ // Kiro, bu bölümü otomatik olarak doldurur
    {
      matches: [""],
      js: ["content.js"] // Kiro, bu dosyayı otomatik olarak oluşturur
    }
  ]
};

Yukarıdaki kodda, contentScript nesnesi, matches özelliğiyle bu betiğin hangi sayfalarda çalışacağını belirtiriz. main fonksiyonu ise içerik betiği çalıştığında ne olacağını tanımlar; bu örnekte, "Kiro" kelimesini arar ve bulduğunda sarı renkle vurgular. Her vurgulama yaptığında, arka plan betiğine bir mesaj göndererek bir sayacın artırılmasını ister. backgroundScript nesnesi, main fonksiyonu aracılığıyla arka plan mantığını içerir. Bu kısımda, chrome.runtime.onMessage.addListener ile diğer uzantı bileşenlerinden gelen mesajları dinler ve sayacı günceller veya sıfırlar. Ayrıca, chrome.storage.local kullanarak sayacı tarayıcının yerel depolama alanında kalıcı hale getiririz, böylece tarayıcı kapatılıp açılsa bile sayaç değeri korunur.

manifest nesnesinde ise, permissions ve host_permissions alanlarına gerekli izinleri ekledik (activeTab, scripting ve storage). background ve content_scripts alanları normalde manuel olarak belirtilse de, Kiro'nun akıllı direktifleri sayesinde Kiro derleme sırasında bu bölümleri sizin için otomatik olarak doldurur ve doğru JavaScript dosyalarını (background.js ve content.js gibi) oluşturur. Bu, Kiro'nun tek dosya yaklaşımının ne kadar güçlü olduğunu gösteren harika bir örnektir. Tüm karmaşık yapılandırma ve dosya yönetimi Kiro tarafından halledilirken, siz sadece iş mantığınıza odaklanabilirsiniz.

Bu örneği derlemek için yine kiro build komutunu kullanabilir, veya canlı geliştirme için kiro dev komutunu çalıştırabilirsiniz. Uzantıyı Chrome'a yükledikten sonra (önceki sürümünü kaldırıp, yeni dist klasörünü yüklemeniz gerekebilir), herhangi bir web sayfasını ziyaret ettiğinizde "Kiro" kelimesinin sarı renkle vurgulandığını ve uzantı simgesine tıkladığınızda açılan popup'ta vurgulama sayacının arttığını göreceksiniz. Bu, Kiro'nun tek bir dosya içinde farklı uzantı bileşenlerini nasıl sorunsuz bir şekilde birleştirebileceğinin güçlü bir kanıtıdır.

Modern Geliştirme Pratikleri ile Kiro: TypeScript, CSS ve Asset Yönetimi

Kiro, sadece tek dosya yaklaşımıyla değil, aynı zamanda modern web geliştirme pratiklerini Chrome uzantılarına taşımadaki yeteneğiyle de öne çıkar. TypeScript, CSS ve statik dosyaların (asset'ler) yönetimi, Kiro ile oldukça kolay ve entegredir. Bu da uzantılarınızı daha güvenli, bakımı daha kolay ve görsel olarak daha çekici hale getirmenizi sağlar.

TypeScript Entegrasyonu ve Avantajları

TypeScript, JavaScript'e isteğe bağlı statik tipleme ekleyen bir süper kümesidir. Büyük projelerde veya ekiplerle çalışırken kod kalitesini ve sürdürülebilirliği artırmak için vazgeçilmez bir araçtır. Kiro, TypeScript'i doğal olarak destekler. Yani, projenizi .ts uzantılı dosyalarla başlatabilir ve Kiro, derleme sırasında bu dosyaları otomatik olarak tarayıcıların anlayabileceği standart JavaScript'e dönüştürür. TypeScript kullanmanın avantajları şunlardır:

• Hata Yakalama: Derleme zamanında potansiyel hataları yakalayarak çalışma zamanı hatalarını azaltır.
• Kod Okunabilirliği: Tipler sayesinde kodun ne beklediği ve ne döndürdüğü daha açık hale gelir.
• Gelişmiş IDE Desteği: Otomatik tamamlama, refactoring ve navigasyon gibi IDE özelliklerini geliştirir.
• Ölçeklenebilirlik: Büyük ve karmaşık uzantılar geliştirirken kod tabanının yönetimini kolaylaştırır.

Yukarıdaki örneklerimizde zaten TypeScript kullandık, bu da Kiro'nun bu entegrasyonu ne kadar sorunsuz sağladığını gösteriyor.

CSS Entegrasyonu

Bir uzantının kullanıcı arayüzü sadece HTML ile değil, aynı zamanda stil kuralları sağlayan CSS ile de güzelleştirilir. Kiro, CSS'i farklı şekillerde entegre etmenize olanak tanır:

1. Inline Stiller: HTML içeriği içinde
etiketleri kullanarak CSS yazmak en basit yöntemdir. İlk popup örneğimizde bunu kullandık. Küçük stiller için yeterlidir.
2. CSS Dosyalarını İçe Aktarma: Daha büyük ve organize stiller için ayrı CSS dosyaları oluşturabilir ve bunları JavaScript/TypeScript dosyanızdan içe aktarabilirsiniz. Kiro, bu içe aktarılan CSS'i otomatik olarak işler ve uzantınızın derlenmiş çıktısına dahil eder.

Örneğin, styles.css adında bir dosya oluşturup içine stillerinizi yazabilir, ardından index.ts dosyanızda şu şekilde içe aktarabilirsiniz:

// styles.css
body {
  margin: 0;
  padding: 15px;
  background-color: #e0f7fa;
  color: #00796b;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

h1 {
  font-size: 1.5em;
  color: #004d40;
}
    

// index.ts (CSS import)
import './styles.css'; // CSS dosyasını içe aktarma

/* kiro:popup */
export const popup = 
  
    
      
    
    
      
Modern Stillerle Merhaba!
    
  ;
// ... diğer uzantı kodları
    

Statik Dosya ve Asset Yönetimi

Çoğu Chrome uzantısı, ikonlar, resimler, fontlar veya diğer statik dosyalar gibi "asset"lere ihtiyaç duyar. Kiro, bu dosyaların yönetimini de basitleştirir. Manifest dosyasında veya kod içinde referans gösterdiğiniz asset'leri, Kiro derleme sırasında otomatik olarak alır ve dist klasörünüze kopyalar. Bu, manuel kopyalama veya karmaşık yapılandırmalara gerek kalmadan, tüm statik dosyalarınızın uzantınızla birlikte düzgün bir şekilde paketlendiği anlamına gelir.

Örneğin, manifest.json'da bir ikon belirlediğinizde (yukarıdaki örneklerde olduğu gibi), Kiro bu ikon dosyasını projenizin kök dizinindeki veya belirtilen alt dizinindeki (örneğin icons/icon16.png) konumundan bularak çıktı klasörüne ekler. Benzer şekilde, eğer bir HTML sayfasında bir resme şeklinde referans verirseniz, Kiro bu resmi de bulup paketleyecektir. Bu akıllı asset yönetimi, geliştiricilerin dosyaları manuel olarak takip etme ve kopyalama yükünden kurtarır, böylece daha verimli bir geliştirme süreci sunar. Kısacası, Kiro modern geliştirme ekosistemini Chrome uzantılarına getirerek, geliştiricilerin daha az yapılandırma ile daha fazla iş yapmasını sağlar.

Kiro ile İleri Düzey Optimizasyonlar ve İpuçları

Kiro, temel geliştirme kolaylıklarının yanı sıra, uzantılarınızı optimize etmek ve daha verimli hale getirmek için de ileri düzey özellikler sunar. Bu bölümde, üretim için optimizasyonlardan performans ipuçlarına ve mobil uyumlu tasarıma kadar çeşitli konuları ele alacağız.

Üretim İçin Optimize Etme

Uzantınızı geliştirme aşamasında kiro dev komutuyla çalışırken, Kiro size hızlı geri bildirim sağlamak için bazı optimizasyonları atlayabilir. Ancak, uzantınızı Chrome Web Mağazası'na göndermeden veya son kullanıcılara dağıtmadan önce, performansı artırmak ve dosya boyutunu küçültmek için üretim modunda derlemeniz önemlidir. Bunu kiro build komutuyla yaparsınız.

Ayrıca, bağımlılıklarınızı yönetirken dikkatli olun. Büyük boyutlu kütüphaneler kullanmaktan kaçınmak veya yalnızca ihtiyacınız olan modülleri içe aktarmak, nihai uzantı boyutunu önemli ölçüde düşürebilir. Kiro, modern tree-shaking tekniklerini desteklediği için, sadece kullandığınız kod parçacıklarının derlemeye dahil edilmesini sağlar.

Performans İpuçları

1. DOM Manipülasyonunu Azaltın: Özellikle content script'lerde, DOM'da sık ve gereksiz değişiklikler yapmaktan kaçının. Toplu değişiklikler veya sanal DOM kullanan kütüphaneler (örneğin React veya Vue gibi, Kiro bunlarla da entegre edilebilir) performansı artırabilir.
2. Asenkron İşlemler: Network istekleri veya uzun süren hesaplamaları ana iş parçacığında (main thread) bloke etmeyin. async/await veya Promise'ları kullanarak işlemleri asenkron hale getirin.
3. Depolama Kullanımı: chrome.storage.local veya chrome.storage.sync API'lerini akıllıca kullanın. Sık sık veya büyük miktarlarda veri yazmaktan/okumaktan kaçının. Önbellekleme mekanizmaları düşünebilirsiniz.
4. Bellek Yönetimi: Özellikle uzun süre çalışan background script'lerde bellek sızıntılarına dikkat edin. Kullanılmayan event listener'ları veya büyük nesneleri temizlemeyi unutmayın.

Performans, kullanıcı deneyimi için kritik öneme sahiptir. Kiro, hızlı geliştirme döngüsü sayesinde performans testlerini ve optimizasyonları daha kolay yapmanızı sağlar.

Harici Kütüphanelerle Çalışma (NPM Paketleri)

Kiro, modern bir derleme aracı olarak, NPM üzerinden yüklediğiniz harici kütüphaneleri sorunsuz bir şekilde kullanmanıza olanak tanır. Örneğin, bir veri işleme kütüphanesi (lodash gibi) veya bir UI bileşen kütüphanesi kullanmak isteyebilirsiniz. Bunun için projenize normal bir NPM paketi gibi yüklemeniz yeterlidir:

npm install lodash
    

Ardından, index.ts dosyanızda kütüphaneyi içe aktarabilir ve kullanabilirsiniz:

import { debounce } from 'lodash';

// ... diğer Kiro kodları

/* kiro:content-script */
export const contentScript = {
  matches: [""],
  main: () => {
    const handleScroll = debounce(() => {
      console.log("Kaydırma olayı debounced olarak çalıştı!");
    }, 200);

    window.addEventListener('scroll', handleScroll);
  }
};
    

Kiro, bu bağımlılıkları otomatik olarak algılar, paketler ve uzantınızın derlenmiş çıktısına dahil eder. Bu sayede, modern JavaScript ekosisteminin zengin kütüphane ve araçlarından Chrome uzantılarınızda rahatlıkla faydalanabilirsiniz.

Mobil Uyumlu Tasarım İçin CSS Media Query Örneği

Chrome uzantılarınızın popup veya options sayfaları, bazen farklı ekran boyutlarına veya cihazlara uyum sağlaması gerekebilir. Özellikle uzantınızı bir web uygulamasının parçası olarak düşünüyorsanız veya gelecekte mobil tarayıcı uzantılarına dönüştürmeyi planlıyorsanız, responsive tasarım önemlidir. CSS Media Query'ler, bu uyumluluğu sağlamak için güçlü bir araçtır. Kiro ile yazılan uzantıların HTML/CSS kısımları standart web teknolojilerini kullandığı için, medya sorgularını kolayca uygulayabilirsiniz.

/* styles.css veya popup içindeki 
    
    
      
Sekme Kaydedici
      Açık Sekmeleri Kaydet
      

        
Henüz kaydedilmiş oturum yok.