Google Chrome Eklenti Yapmak
Google Chrome, dünyada en çok kullanılan web tarayıcısıdır ve eklentiler, Chrome’un işlevselliğini artırmanın harika bir yoludur. Eklentiler, yeni özellikler ekleyebilir, mevcut özellikleri geliştirebilir ve hatta tarayıcınızın görünümünü değiştirebilir.
Eğer bir web geliştiricisiyseniz veya sadece Chrome’u daha kullanışlı hale getirmek istiyorsanız, kendi eklentinizi yapmak isteyebilirsiniz. Bu makalede, size Google Chrome eklentisi yapmanın temellerini öğreteceğiz.
1. Adım: Bir Geliştirici Hesabı Oluşturun
Google Chrome eklentisi yapmak için öncelikle bir geliştirici hesabı oluşturmanız gerekir. Bunu yapmak için şu adımları izleyin:
- Google Chrome Geliştirici Konsolu’na gidin.
- “Hesap Oluştur” düğmesine tıklayın.
- Adınızı, e-posta adresinizi ve şifrenizi girin.
- “Hesap Oluştur” düğmesine tekrar tıklayın.
2. Adım: Yeni Bir Eklenti Projesi Oluşturun
Geliştirici hesabınızı oluşturduktan sonra, yeni bir eklenti projesi oluşturabilirsiniz. Bunu yapmak için şu adımları izleyin:
- Google Chrome Geliştirici Konsolu’na gidin.
- “Yeni Proje” düğmesine tıklayın.
- Projenize bir ad verin.
- “Oluştur” düğmesine tıklayın.
3. Adım: Eklentinizin Temel Yapısını Oluşturun
Yeni bir eklenti projesi oluşturduktan sonra, eklentinizin temel yapısını oluşturmanız gerekir. Bu, aşağıdaki dosyaları içerir:
- manifest.json: Bu dosya, eklentinizin adını, açıklamasını, sürüm numarasını ve diğer meta verilerini içerir.
- background.js: Bu dosya, eklentinizin arka planda çalışmasını sağlayan JavaScript kodunu içerir.
- content_scripts.js: Bu dosya, eklentinizin web sayfalarında çalışmasını sağlayan JavaScript kodunu içerir.
- popup.html: Bu dosya, eklentinizin açılır penceresinin HTML kodunu içerir.
- popup.js: Bu dosya, eklentinizin açılır penceresinin JavaScript kodunu içerir.
4. Adım: Eklentinizin İşlevselliğini Ekleyin
Eklentinizin temel yapısını oluşturduktan sonra, işlevselliğini ekleyebilirsiniz. Bunu yapmak için, JavaScript kodunu kullanabilirsiniz. JavaScript, web sayfalarında ve eklentilerde çalışan bir programlama dilidir.
Eklentinizin işlevselliğini eklemek için şu adımları izleyebilirsiniz:
- background.js dosyasını açın.
- Aşağıdaki kodu ekleyin:
javascript
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if (request.message === "hello") {
sendResponse({message: "Hello, world!"});
}
});
Bu kod, eklentinizin arka planında çalışan bir mesaj dinleyicisi oluşturur. Bu mesaj dinleyicisi, eklentinizin açılır penceresinden gelen mesajları dinler ve bu mesajlara yanıt verir.
- popup.js dosyasını açın.
- Aşağıdaki kodu ekleyin:
javascript
document.getElementById("send-message-button").addEventListener("click", function() {
chrome.runtime.sendMessage({message: "hello"}, function(response) {
console.log(response.message);
});
});
Bu kod, eklentinizin açılır penceresinde bir düğme oluşturur. Bu düğmeye tıklandığında, eklentinizin arka planında çalışan mesaj dinleyicisine bir mesaj gönderilir.
- Eklentinizi test edin.
Eklentinizin işlevselliğini ekledikten sonra, eklentinizi test etmeniz gerekir. Bunu yapmak için şu adımları izleyebilirsiniz:
- Google Chrome’u açın.
- Adres çubuğuna “chrome://extensions” yazın ve Enter tuşuna basın.
- “Geliştirici Modu” düğmesini açın.
- “Yükle” düğmesine tıklayın.
- Eklentinizin ZIP dosyasını seçin.
- “Aç” düğmesine tıklayın.
Eklentiniz şimdi yüklenecektir. Eklentinizin çalıştığından emin olmak için, eklentinizin açılır penceresini açın ve “Merhaba, dünya!” mesajının görüntülendiğini kontrol edin.
5. Adım: Eklentinizi Yayınlayın
Eklentinizin çalıştığından emin olduktan sonra, eklentinizi yayınlayabilirsiniz. Bunu yapmak için şu adımları izleyin:
- Google Chrome Geliştirici Konsolu’na gidin.
- Eklentinizin projesini seçin.
- “Yayınla” düğmesine tıklayın.
- Eklentinizin adını, açıklamasını ve sürüm numarasını girin.
- “Yayınla” düğmesine tekrar tıklayın.
Eklentiniz şimdi yayınlanacaktır. Eklentiniz, Google Chrome Web Mağazası’nda listelenecek ve kullanıcılar tarafından indirilebilecektir.
Faydalı Siteler ve Dosyalar
- Google Chrome Geliştirici Konsolu
- Google Chrome Eklentileri Dokümantasyonu
- JavaScript Öğrenme Kaynakları
- Chrome Eklentisi Örnekleri