JavaScript ile Tarayıcı Eklentisi Yapımı: Başlangıçtan Gelişmiş Seviyeye

Tarayıcı eklentileri, web deneyimimizi özelleştirmemize ve geliştirmemize olanak sağlayan güçlü araçlardır. Bu rehberde, JavaScript kullanarak hem Chrome hem de Firefox için nasıl eklenti geliştirebileceğinizi adım adım öğreneceksiniz.

Tarayıcı Eklentisi Nedir?

Tarayıcı eklentileri, web tarayıcınızın işlevselliğini genişleten küçük yazılım parçalarıdır. Sayfaları değiştirebilir, yeni özellikler ekleyebilir ve tarayıcı davranışını özelleştirebilirler. Modern tarayıcı eklentileri, WebExtensions API standardını kullanır, bu da kodunuzun hem Chrome hem de Firefox'ta çalışabileceği anlamına gelir.

Başlamadan Önce Gerekenler

Eklenti geliştirmeye başlamak için ihtiyacınız olanlar:

• Temel JavaScript bilgisi
• HTML ve CSS anlayışı
• Bir kod editörü (VS Code önerilir)
• Chrome veya Firefox tarayıcısı

Manifest Dosyası: Eklentinizin Temeli

Her tarayıcı eklentisi bir manifest.json dosyası ile başlar. Bu dosya, eklentinizin özelliklerini ve izinlerini tanımlar:

{
  "manifest_version": 3,
  "name": "Benim İlk Eklentim",
  "version": "1.0",
  "description": "Basit bir tarayıcı eklentisi örneği",
  "permissions": ["activeTab", "storage"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/icon16.png",
      "48": "images/icon48.png",
      "128": "images/icon128.png"
    }
  },
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ]
}

Eklenti Yapısının Temel Bileşenleri

Popup (Açılır Pencere)

Popup, eklenti ikonuna tıklandığında açılan ara yüzdür:

<!-- popup.html -->
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="popup.css">
</head>
<body>
  <div id="app">
    <h1>Benim Eklentim</h1>
    <button id="actionButton">İşlemi Başlat</button>
  </div>
  <script src="popup.js"></script>
</body>
</html>

// popup.js
document.getElementById('actionButton').addEventListener('click', function() {
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    chrome.tabs.sendMessage(tabs[0].id, {action: "startProcess"});
  });
});

Background Script (Arka Plan Betiği)

Background script, eklentinizin arka planda çalışan mantığını içerir:

// background.js
chrome.runtime.onInstalled.addListener(function() {
  chrome.storage.local.set({
    'settings': {
      'enabled': true,
      'theme': 'light'
    }
  });
});

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  if (request.action === "getData") {
    // Veri işleme mantığı
    sendResponse({data: "İşlem tamamlandı"});
  }
  return true;
});

Content Script (İçerik Betiği)

Content script, web sayfalarında doğrudan çalışan kodları içerir:

// content.js
function modifyPage() {
  // Sayfa içeriğini değiştirme işlemleri
  const elements = document.querySelectorAll('.target-class');
  elements.forEach(element => {
    element.style.backgroundColor = 'yellow';
  });
}

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  if (request.action === "startProcess") {
    modifyPage();
    sendResponse({status: "success"});
  }
  return true;
});

Tarayıcı API'lerinin Kullanımı

Storage API

Verileri kalıcı olarak saklamak için Storage API kullanılır:

// Veri kaydetme
chrome.storage.local.set({key: value}, function() {
  console.log('Veri kaydedildi');
});

// Veri okuma
chrome.storage.local.get(['key'], function(result) {
  console.log('Değer:', result.key);
});

Tabs API

Sekmelerle etkileşim için Tabs API kullanılır:

// Aktif sekmeyi bulma
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
  const activeTab = tabs[0];
  console.log('Aktif sekme:', activeTab.url);
});

// Yeni sekme açma
chrome.tabs.create({url: 'https://www.example.com'});

İleri Seviye Özellikler

Bağlam Menüsü Ekleme

chrome.runtime.onInstalled.addListener(function() {
  chrome.contextMenus.create({
    id: "sampleContextMenu",
    title: "Seçili metni işle",
    contexts: ["selection"]
  });
});

chrome.contextMenus.onClicked.addListener(function(info, tab) {
  if (info.menuItemId === "sampleContextMenu") {
    // Seçili metni işleme
    console.log('Seçili metin:', info.selectionText);
  }
});

Klavye Kısayolları

// manifest.json'a ekleyin
{
  "commands": {
    "toggle-feature": {
      "suggested_key": {
        "default": "Ctrl+Shift+Y"
      },
      "description": "Özelliği aç/kapat"
    }
  }
}

// background.js'de dinleyin
chrome.commands.onCommand.addListener(function(command) {
  if (command === "toggle-feature") {
    // Özelliği aç/kapat
  }
});

Eklenti Test Etme ve Hata Ayıklama

Chrome'da Test Etme

1. chrome://extensions/ adresine gidin
2. Geliştirici modunu açın
3. "Paketlenmemiş öğe yükle" ile eklenti klasörünüzü seçin

Firefox'ta Test Etme

1. about:debugging adresine gidin
2. "Bu Firefox" sekmesini seçin
3. "Geçici Eklenti Yükle" ile manifest.json dosyanızı seçin

Eklentinizi Yayınlama

Chrome Web Mağazası İçin

1. Geliştirici hesabı oluşturun ($5 tek seferlik ücret)
2. Eklentinizi ZIP dosyası olarak hazırlayın
3. Chrome Web Store Developer Dashboard'a yükleyin
4. Gerekli bilgileri doldurun ve inceleme için gönderin

Firefox Add-ons İçin

1. Firefox Add-ons Developer Hub'da hesap oluşturun
2. Eklentinizi ZIP dosyası olarak yükleyin
3. Gerekli açıklamaları ekleyin
4. İnceleme için gönderin

En İyi Uygulama Önerileri

1. Performans Optimizasyonu
   • Gereksiz DOM manipülasyonlarından kaçının
   • Event listener'ları temizleyin
   • Memory leak'leri önleyin
2. Güvenlik
   • Content Security Policy (CSP) kullanın
   • Kullanıcı verilerini güvenli şekilde saklayın
   • Cross-site scripting (XSS) önlemlerini alın
3. Kod Organizasyonu
   • Modüler kod yazın
   • Açıklayıcı yorumlar ekleyin
   • Kod stilinizi tutarlı tutun

Tarayıcı eklentisi geliştirmek, web deneyimini özelleştirmenin güçlü bir yoludur. Bu rehberde öğrendiğiniz temel ve ileri seviye konularla kendi eklentilerinizi geliştirebilirsiniz. Başarılı bir eklenti için düzenli test, kullanıcı geri bildirimleri ve güncellemeler önemlidir.

Eklenti geliştirme sürecinizde karşılaşabileceğiniz zorluklar için tarayıcıların geliştirici forumlarını ve dokümantasyonlarını takip etmeyi unutmayın. Her iki tarayıcının da aktif geliştirici toplulukları, sorularınıza cevap bulmanıza yardımcı olacaktır.