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

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

Genel 18 Şub 2025 Ahmet Halit DURUSOY Ahmet Halit DURUSOY 5 dakika okuma
Paylaş:

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, 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.

İlgili Etiketler

Ahmet Halit DURUSOY

Ahmet Halit DURUSOY

Yazar & İçerik Üreticisi

Profili Görüntüle
Evden Veri Etiketleme Yaparak Nasıl Para Kazanılır? 2025 Güncel Rehber
Önceki Yazı

Evden Veri Etiketleme Yaparak Nasıl Para Kazanılır? 2025 Güncel Rehber

Google, Tesla ve OpenAI gibi dev şirketler için veri etiketleme yaparak evden çalışmak mümkün! İşte veri etiketleme işine başlamanız için bilmeniz gerekenler. Yapay zekâ çağında veri etiketleme işi, evden çalışmak isteyenler için altın değerinde bir fırsat sunuyor. Google, Tesla ve OpenAI gibi dev şirketler için etiketleme yaparak aylık 1000-3000 dolar kazanabilirsiniz. İşte başlamanız için tüm detaylar!
CSS Animasyonları ve Scroll Efektleri ile Dinamik Web Siteleri Yapma
Sonraki Yazı

CSS Animasyonları ve Scroll Efektleri ile Dinamik Web Siteleri Yapma

Web sitenizi daha dinamik ve etkileyici hale getirmek ister misiniz? HTML, CSS ve JavaScript kullanarak profesyonel animasyonlar oluşturma teknikleri burada! Bu yazıda, CSS Animasyonları, JavaScript ile Scroll Efektleri, Parallax ve Hover Animasyonları gibi modern web tasarım tekniklerini ele alıyoruz. Web sitenizi hareketlendirmek ve kullanıcı deneyimini artırmak için en iyi yöntemleri öğrenin!

Çerez Ayarları

Deneyiminizi iyileştirmek için çerezler kullanıyoruz. Daha fazla bilgi için Çerez Politikamızı ziyaret edin.