Chrome Eklentisi Geliştirme Kılavuzu

2uSa...Ddqn

19 Jan 2024

Giriş

Günümüzde web tarayıcıları, kullanıcılara özelleştirilebilir deneyimler sunmak için eklentilere olanak tanır. Bu kılavuzda, Chrome tarayıcısı için bir eklenti geliştirmenin temel adımlarını öğreneceksiniz.

1. Temel Bilgiler

1.1. Eklenti Türleri

Chrome, kullanıcıların tarayıcı deneyimini özelleştirmelerine olanak tanıyan çeşitli eklenti türlerini destekler. İşte bazı temel eklenti türleri:

İçerik Betiği (Content Script)

İçerik betikleri, web sayfalarının içeriği ile etkileşimde bulunmak için kullanılır. Örneğin, bir web sayfasındaki belirli öğeleri seçmek, değiştirmek veya eklemek için içerik betikleri kullanılabilir.

Popup

Popup, kullanıcının belirli bir düğmeye tıkladığında açılan küçük bir pencere türüdür. Bu pencere, kullanıcı arayüzü öğeleri içerebilir ve genellikle hızlı erişim için kullanılır.

Araç Çubuğu

Araç çubukları, tarayıcı arayüzüne entegre edilen ve genellikle tarayıcı penceresinin üst kısmında yer alan özel araçlara erişim sağlayan eklentilerdir.

İzleme (Background Script)

Background script'ler, tarayıcı çalıştığı sürece arka planda çalışan betiklerdir. Genellikle uzun vadeli görevler, bildirimler veya belirli olaylara tepki olarak kullanılırlar.

1.2. Manifest Dosyası

Eklentinizin temel yapılandırma bilgilerini içeren manifest dosyası, eklentinizin tanıtımını yapar. Bu dosya, eklentinin adı, sürümü, içerik betikleri, popup sayfası, izinler ve diğer önemli ayarları içerir. Manifest dosyası aynı zamanda eklentinin Chrome Web Mağazası'nda nasıl görüneceğini belirler.

Bir manifest dosyasının temel örnek yapısı şu şekildedir:

{
  "manifest_version": 2,
  "name": "Örnek Eklenti",
  "version": "1.0",
  "description": "Bu eklenti tarayıcınızı özelleştirmenize olanak tanır.",
  "permissions": [
    "storage",
    "activeTab"
  ],
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "content_scripts": [
    {
      "matches": [""],
      "js": ["contentScript.js"]
    }
  ]
}

Bu örnek manifest dosyasında, eklentinin adı, sürümü, açıklaması, izinleri, tarayıcı eylemi (browser action), içerik betiği vb. bilgiler bulunmaktadır. Manifest dosyası, eklentinin davranışını ve görünümünü belirlemede kilit bir rol oynar.

Bu temel bilgileri anlamak, bir Chrome eklentisi geliştirmeye başlamak için önemlidir. İlerleyen adımlarda, bu bilgileri kullanarak eklentinizi daha da geliştirmeyi öğreneceksiniz.

2. Geliştirme Ortamını Hazırlama

2.1. Chrome Developer Modu

Chrome Developer Modu, eklentilerinizi geliştirmeniz ve hızlıca test etmeniz için gereklidir. Bu modu etkinleştirmek, tarayıcının geliştirme özelliklerini kullanmanıza imkan tanır. İşte bu modu etkinleştirmek için adımlar:

Chrome'u Açın: Chrome tarayıcınızı açın.
Tarayıcı Menüsü: Sağ üst köşede yer alan üç dikey noktaya tıklayarak açılan menüden "Araçlar" veya "Tools" sekmesine gidin.
Uzantılar veya Eklentiler: "Uzantılar" veya "Extensions" seçeneğine tıklayın.
Geliştirici Modu Etkinleştirme: Sağ üst köşede yer alan "Geliştirici modu" veya "Developer mode" seçeneğini etkinleştirin.

Geliştirici modunu etkinleştirdikten sonra, eklentilerinizi hızlıca yükleyebilir, test edebilir ve değişikliklerinizi anında görebilirsiniz.

2.2. Temel Araçlar

Chrome'un geliştirme araçları, eklentinizin hata ayıklama ve performans izleme süreçlerinde kritik bir rol oynar. İşte temel araçlar ve kullanımları:

Hata Ayıklama (Inspect)

Element İnceleme: Sağ tıklayarak ve "İncele" seçeneğine tıklayarak bir web sayfasındaki HTML ve CSS elemanlarını inceleyebilirsiniz.
Console: Geliştirme sırasında JavaScript hatalarını ve konsol çıktılarını görmek için "Console" sekmesini kullanın.
Sources: JavaScript dosyalarınızı ve içerik betiklerinizi buradan inceleyebilir, hata ayıklama yapabilirsiniz.

Ağ İzleme (Network)

Web sayfanızın ne kadar hızlı yüklendiğini ve hangi kaynakları kullandığınızı görmek için "Network" sekmesini kullanabilirsiniz.

Uygulama İzleme (Application)

Storage: Eklentiniz tarafından kullanılan yerel depolama ve çerez bilgilerini kontrol etmek için "Application" sekmesini kullanın.
Cache: Tarayıcı önbelleği ve veri önbelleğiyle ilgili bilgileri buradan inceleyebilirsiniz.

Güvenlik İzleme (Security)

HTTPS ve diğer güvenlik önlemlerini kontrol etmek için "Security" sekmesini kullanabilirsiniz.
Bu araçları etkin ve etkili bir şekilde kullanmak, eklentinizin geliştirme sürecinde sorunları tanımlamanıza ve çözmenize yardımcı olacaktır. Hata ayıklama sırasında tarayıcı araçlarını düzenli olarak kullanmayı alışkanlık haline getirin.

3. İlk Eklentinizi Oluşturma

3.1. Manifest Dosyası Oluşturma

Manifest dosyası, eklentinizin temel ayarlarını ve özelliklerini tanımlar. Bu dosya, eklentinizin adını, sürümünü, açıklamasını ve kullanacağı diğer özellikleri içerir. İşte basit bir manifest dosyası örneği:

{
  "manifest_version": 2,
  "name": "MyFirstExtension",
  "version": "1.0",
  "description": "Bu eklenti tarayıcınızı özelleştirmenize olanak tanır.",
  "browser_action": {
    "default_icon": {
      "16": "images/icon16.png",
      "48": "images/icon48.png",
      "128": "images/icon128.png"
    },
    "default_popup": "popup.html"
  },
  "permissions": [
    "activeTab"
  ],
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

Bu manifest dosyasında, eklentinin adı, sürümü, açıklaması, tarayıcı eylemi (browser action), izinleri ve simgeleri belirtilmiştir.

browser_action içinde, eklentinin hangi simgesini kullanacağını ve hangi popup sayfasını açacağını belirledik.
permissions içinde, eklentinin aktif sayfada (activeTab) işlem yapma iznini tanımladık.

3.2. Popup Sayfası

Popup, kullanıcının belirli bir düğmeye tıkladığında açılan küçük bir penceredir. Bu pencere, basit bir HTML, CSS ve JavaScript kombinasyonu kullanılarak oluşturulabilir. İşte basit bir popup sayfası örneği:

popup.html:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>My Extension Popup</title><link rel="stylesheet" href="popup.css">
</head>
<body><h1>Merhaba, bu benim ilk eklentim!</h1><button id="changeColor">Renk Değiştir</button>

  <script src="popup.js"></script>
</body>
</html>

popup.css:

body {
  width: 200px;
  padding: 20px;
}

button {
  padding: 10px;
  margin-top: 10px;
  cursor: pointer;
}

popup.js:

document.getElementById('changeColor').addEventListener('click', function() {
  document.body.style.backgroundColor = getRandomColor();
});

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

Bu örnek popup sayfası, bir başlık, bir düğme ve düğmeye tıklanınca arka plan rengini değiştiren basit bir JavaScript kodu içerir. Popup sayfanız, eklentinizin kullanıcı arayüzünü temsil eder ve bu sayfa üzerinde kullanıcı etkileşimleri gerçekleştirebilirsiniz.

4. Temel Fonksiyonlar

4.1. İçerik Betiği: Web sayfalarıyla etkileşimde bulunmak için içerik betiğini kullanmayı öğrenin.
4.2. Background Script: Arkaplan betiği kullanarak arka planda çalışan işlemleri yönetin.

5. Kullanıcıya Yönelik Deneyimi Geliştirme

5.1. Kullanıcı Ayarları: Kullanıcının eklentinizi özelleştirmesine olanak tanıyan ayarlar ekleyin.
5.2. İnteraktif Elementler: Kullanıcı arayüzüne butonlar, menüler ekleyerek etkileşimi artırın.

6. Eklentiyi Yayınlama

6.1. Chrome Web Mağazası'na Yükleme: Eklentinizi Chrome Web Mağazası'na nasıl yükleyeceğinizi ve yayınlayacağınızı öğrenin.
6.2. Güncelleme Politikası: Eklentinizi güncel tutmak ve kullanıcılarına en iyi deneyimi sunmak için güncelleme stratejilerini ele alın.

Sonuç

Bu kılavuz, Chrome eklentisi geliştirmenin temel adımlarını içerir. Eklenti geliştirme sürecinde daima Chrome Geliştirici Belgeleri'ni kontrol etmeyi ve topluluk kaynaklarından faydalanmayı unutmayın.