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:
- Chrome tarayıcınızı açın ve adres çubuğuna
chrome://extensionsyazın. - Sağ üst köşedeki "Geliştirici modu" anahtarını açın.
- "Paketlenmemiş uzantı yükle" düğmesine tıklayın.
- Proje dizininizdeki
distklasö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
;
// 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
}
]
};
chrome.runtime.sendMessage ve chrome.runtime.onMessage.addListener API'leri aracılığıyla sağlanır. Bu mekanizma, içerik betiklerinin arka plan betiğine veya tersine mesaj göndermesine olanak tanır, böylece uzantınızın farklı parçaları arasında koordineli bir şekilde veri alışverişi yapabilirsiniz. Özellikle karmaşık uzantılar geliştirirken bu iletişim modelini iyi anlamak kritik öneme sahiptir.
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:
- Inline Stiller: HTML içeriği içinde
Sekme Kaydedici
Henüz kaydedilmiş oturum yok.