🚀 Chrome Uzantısı Nasıl Yapılır: Adım Adım Kapsamlı Geliştirici Rehberi
🚀 Chrome Uzantısı Nasıl Yapılır: Adım Adım Kapsamlı Geliştirici Rehberi
Chrome uzantıları (extensions), internet deneyiminizi kişiselleştirmenin ve tarayıcınıza yeni işlevler eklemenin en güçlü yollarından biridir. İster günlük iş akışınızı hızlandırmak, ister eğlenceli küçük bir araç geliştirmek isteyin; bir Chrome uzantısı geliştirmek şaşırtıcı derecede kolaydır.
Bu kapsamlı rehberde, ilk uzantınızı oluşturmak için gereken tüm adımları, temel kod yapılarını ve ipuçlarını bulacaksınız.
1. ⚙️ Temel Gereksinimler ve Teknik Bilgi
Bir Chrome uzantısı, özünde bir web uygulamasıdır. Bu nedenle, aşağıdaki temel web teknolojilerine hakim olmanız gerekir:
- HTML (HyperText Markup Language): Uzantınızın kullanıcı arayüzünü (pop-up penceresi veya ayarlar sayfası) oluşturmak için.
- CSS (Cascading Style Sheets): Arayüzün görsel tasarımını ve stilini düzenlemek için.
- JavaScript (JS): Uzantınızın asıl işlevselliğini ve Chrome API'leri ile etkileşimini sağlamak için.
Bu dillerde temel bilgiye sahipseniz, bir uzantı geliştirmeye hazırsınız demektir.
2. 📂 Proje Yapısını Oluşturma
Başlamadan önce, uzantınızla ilgili tüm dosyaları saklayacağınız bir klasör oluşturun. (Örnek: ilk-chrome-uzantisi).
Bu klasörün içinde bulunması gereken üç temel dosya vardır:
manifest.jsonpopup.htmlpopup.js(veyabackground.js)
3. 🧠 Manifest Dosyası: Uzantının Beyni (manifest.json)
manifest.json dosyası, Chrome'un uzantınızı tanıması ve çalıştırması için gerekli tüm ayarları içeren zorunlu bir dosyadır.
Manifest V3 Örneği:
{
"manifest_version": 3,
"name": "Basit İşlev Uzantısı",
"version": "1.0",
"description": "Kullanımı kolay ilk Chrome uzantısı projesi.",
"action": {
"default_popup": "popup.html",
"default_icon": "icon.png"
},
"icons": {
"128": "icon128.png"
}
}İpuçları:
manifest_version: Şu anki standart sürüm: 3 olmalıdır.name: Uzantının adı. Bu alan anahtar kelime içermelidir.description: Uzantının kısa açıklaması. Yine anahtar kelime kullanımına dikkat edin.
4. 🎨 Kullanıcı Arayüzünü Tasarlama (popup.html)
Bu HTML dosyası, kullanıcı uzantı simgenize tıkladığında açılan küçük pencerenin içeriğidir. Standart HTML yapısıyla hazırlanır ve CSS ile stil verilebilir.
<!DOCTYPE html>
<html>
<head>
<title>Uzantı Başlığı</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h2>Tarayıcıyı Kişiselleştirme</h2>
<button id="calistirButton">İşlevi Başlat</button>
<script src="popup.js"></script>
</body>
</html>Önemli Not:popup.htmldosyasının en altına, işlevselliği sağlayacakpopup.jsdosyasını mutlaka bağlayın.
5. 💻 İşlevselliği Kodlama (popup.js ve Chrome API)
Uzantınızın asıl görevi, bu JavaScript dosyasında yer alır. Bu dosya, kullanıcı etkileşimlerini dinler ve Chrome'un özel API'leri aracılığıyla tarayıcıyla etkileşime girer.
Örnek JavaScript:
// Sayfa yüklendiğinde çalışacak kodu dinliyoruz
document.addEventListener('DOMContentLoaded', function () {
const buton = document.getElementById('calistirButton');
// Butona tıklandığında
buton.addEventListener('click', function () {
// Örnek: Aktif sekmede bir kod çalıştırabiliriz.
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
alert("Butona tıklandı! Aktif Sekme ID'si: " + tabs[0].id);
});
});
});6. 🚀 Uzantıyı Chrome'a Yükleme (Test Etme)
Uzantınızı test etmek için herhangi bir derleme aracına ihtiyacınız yoktur. Chrome'un kendi geliştirici modu bu iş için yeterlidir.
- Chrome'u açın ve adres çubuğuna
chrome://extensionsyazın. - Sayfanın sağ üst köşesindeki Geliştirici modu düğmesini açın.
- Paketlenmemiş öğe yükle butonuna tıklayın.
- Oluşturduğunuz proje klasörünü (ilk-chrome-uzantisi) seçin.
Uzantınız artık tarayıcı araç çubuğunda görünmelidir. Tıklayarak işlevselliğini test edebilirsiniz. Kodunuzda değişiklik yaptığınızda, uzantılar sayfasındaki yenileme simgesine tıklayarak uzantınızı güncellemeyi unutmayın!
Sonuç: Başarılı Bir Uzantı Geliştirmek
Chrome uzantısı yapmak hem eğlenceli hem de pratik bir öğrenme sürecidir. İlk başta basit pop-up'lar ile başlayabilir, daha sonra Content Scripts (web sayfalarına kod enjekte eden) veya Background Scripts (arka planda sürekli çalışan) gibi daha gelişmiş özelliklere geçiş yapabilirsiniz.
Başarılı bir geliştirici olmak için Chrome’un resmi geliştirici belgelerini düzenli olarak takip etmeniz önerilir.
Sıkça Sorulan Sorular (SSS)
Soru: Manifest V2 ve V3 arasındaki fark nedir?
Cevap: Manifest V3, daha güvenli ve modern bir mimariye sahiptir. En büyük fark, arka plan komut dosyalarının (Background Scripts) yerini Service Worker'ların almasıdır. Yeni uzantılar için V3 kullanılması zorunludur.
Soru: Uzantımı Chrome Web Mağazası'nda nasıl yayınlarım?
Cevap: Geliştirme tamamlandıktan sonra, uzantınızın klasörünü ZIP'leyerek Chrome Web Mağazası Geliştirici Paneli üzerinden yayınlayabilirsiniz. Bunun için bir geliştirici hesabı oluşturmanız gerekmektedir.
Yorumlar
Yorum Gönder