Chrome Eklentisi Nasıl Yapılır?
A'dan Z'ye Uzman Rehberi 2026

Manifest V3 standartlarında, modern, güvenli ve yüksek performanslı Chrome eklentileri geliştirmeyi öğrenin. Bu kapsamlı rehber ile sıfırdan kendi eklentinizi kodlayıp Chrome Web Mağazası'nda yayınlayabileceksiniz.

Chrome Eklentisi Nedir ve Neden Geliştirmelisiniz?

Chrome eklentileri (extensions), Google Chrome tarayıcısının işlevselliğini artıran, HTML, CSS ve JavaScript gibi web teknolojileriyle yazılmış küçük yazılım programlarıdır. 2026 yılında tarayıcı tabanlı iş akışlarının artmasıyla birlikte, özel eklentiler hem bireysel verimlilik hem de kurumsal çözümler için vazgeçilmez hale gelmiştir.

Eka Sunucu olarak, web tabanlı projelerinizde entegrasyon sağlamak, e-ticaret süreçlerini otomatize etmek veya sadece kullanıcı deneyimini iyileştirmek için eklenti geliştirmenin gücüne inanıyoruz.

Önemli Bilgi: Manifest V3

Google, 2024 itibariyle Manifest V2 desteğini tamamen sonlandırdı. 2026 ve sonrası için geliştireceğiniz tüm eklentiler, güvenlik ve performans odaklı Manifest V3 standartlarına uygun olmalıdır. Bu rehber tamamen V3 uyumludur.

Web Teknolojileri

Sadece HTML, CSS ve JS bilerek güçlü uygulamalar geliştirebilirsiniz.

Yüksek Güvenlik

İzole edilmiş ortamlar ve sıkı izin politikaları ile güvenli çalışma.

Kolay Dağıtım

Chrome Web Mağazası üzerinden milyonlarca kullanıcıya anında erişim.

Adım 1: Proje Yapısı ve Manifest Dosyası

Her Chrome eklentisinin kalbinde manifest.json dosyası bulunur. Bu dosya eklentinizin adını, sürümünü, izinlerini ve hangi dosyaları kullanacağını tarayıcıya bildirir.

Öncelikle bilgisayarınızda my-awesome-extension adında bir klasör oluşturun ve içine aşağıdaki dosyaları ekleyin:

manifest.json Oluşturma

Klasörün kök dizininde manifest.json dosyasını oluşturun ve aşağıdaki kodları ekleyin:

{
  "manifest_version": 3,
  "name": "Eka Sunucu SEO Analiz",
  "version": "1.0",
  "description": "Web sayfalarının temel SEO analizini yapan profesyonel araç.",
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  },
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/icon16.png"
    }
  },
  "permissions": ["activeTab", "scripting"],
  "host_permissions": [
    "https://*.ekasunucu.com/*"
  ]
}
          

Adım 2: Arayüz ve Mantık Kodlaması

Eklenti ikonuna tıklandığında açılacak olan pencere (popup) standart bir HTML sayfasıdır. Burada modern CSS frameworkleri veya kendi stillerinizi kullanabilirsiniz.

popup.html (Arayüz)

Kullanıcının etkileşime gireceği basit bir arayüz tasarlayalım.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h3>SEO Analizörü</h3>
    <button id="analyzeBtn">Sayfayı Analiz Et</button>
    <div id="result"></div>
  </div>
  <script src="popup.js"></script>
</body>
</html>
          

popup.js (Mantık)

Butona tıklandığında aktif sekmede çalışan bir script enjekte ederek sayfa başlığını ve meta açıklamasını alalım.

document.getElementById("analyzeBtn").addEventListener("click", async () => {
  let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });

  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: getPageSEO,
  }, (results) => {
    const data = results[0].result;
    document.getElementById("result").innerHTML = 
      `<p><b>Başlık:</b> ${data.title}</p>` +
      `<p><b>Açıklama:</b> ${data.description}</p>`;
  });
});

function getPageSEO() {
  const title = document.title;
  const metaDesc = document.querySelector('meta[name="description"]');
  return {
    title: title,
    description: metaDesc ? metaDesc.content : "Bulunamadı"
  };
}
          

Backend API ve Veritabanı Entegrasyonu

Gelişmiş eklentiler genellikle verileri bir sunucuda işler veya kaydeder. Örneğin, kullanıcıların favori ürünlerini kaydettiği bir eklenti yapıyorsanız, güvenli bir API'ye ihtiyacınız vardır.

Eka Sunucu olarak, eklentilerinizin arka planını yönetmek için yüksek performanslı web hosting ve VPS çözümleri sunuyoruz. PHP veya Python ile yazacağınız bir API, eklentinizin beyni olabilir.

<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json");

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $data = json_decode(file_get_contents("php://input"));
    
    // Veritabanı işlemleri burada yapılır...
    $response = ['status' => 'success', 'message' => 'Veri kaydedildi'];
    
    echo json_encode($response);
}
?>
        

Backend tarafında verilerinizin güvenliği için mutlaka SSL Sertifikası kullanmalısınız. Google, HTTPS olmayan bağlantıları eklentilerde güvensiz olarak işaretleyebilir.

Chrome Web Mağazası'nda Yayınlama

Eklentiniz hazır olduğunda, tüm dünyayla paylaşma zamanı gelmiştir. İşte adım adım yayınlama süreci:

Paketleme: Eklenti klasörünüzü bir .zip dosyası haline getirin.
Geliştirici Hesabı: Chrome Web Store Developer Dashboard'a gidin. İlk kayıt için 5$ tek seferlik ücret ödemeniz gerekir.
Yükleme: "Add new item" butonuna tıklayıp zip dosyanızı yükleyin.
Mağaza Bilgileri: Açıklama, ekran görüntüleri (1280x800px önerilir) ve kategori bilgilerini doldurun.
Gizlilik Politikası: Kullanıcı verisi topluyorsanız, web sitenizde barındırılan bir gizlilik politikası linki eklemelisiniz.
İnceleme: "Submit for review" butonuna basın. Google ekibi genellikle 24-48 saat içinde incelemeyi tamamlar.

2026 Eklenti SEO ve Pazarlama Trendleri

Eklentinizin mağazada bulunabilir olması için 2026 SEO kriterlerine dikkat etmelisiniz. Artık sadece anahtar kelimeler değil, kullanıcı deneyimi ve otorite ön planda.

E-E-A-T (Deneyim, Uzmanlık, Otorite, Güven): Eklentinizin arkasında güvenilir bir geliştirici veya firma olduğunu gösterin. Kurumsal bir web sitesi ve doğrulanmış domain bu güveni artırır.
Core Web Vitals: Eklentinizin tarayıcıyı yavaşlatmaması gerekir. Arka plan işlemlerini (Service Workers) verimli kullanın.
Çoklu Dil Desteği: Eklentinizi farklı dillere çevirerek global pazara açılın.
Zengin Medya: Mağaza sayfanızda sadece resim değil, eklentinin nasıl çalıştığını gösteren kısa videolar kullanın.

Profesyonel Eklenti İhtiyacınız mı Var?

Fikriniz var ama kodlama bilginiz mi yok? Eka Sunucu yazılım ekibi olarak, firmanıza özel Chrome, Firefox ve Edge eklentileri geliştiriyoruz.

15.000 ₺'den Başlayan Fiyatlarla Teklif Alın

Özel Sunucu Hizmetleri

Standart Sunucular

Özel Sunucu Hizmetleri

Standart Sunucular

Bize Ulaşın

Chrome Eklentisi Nasıl Yapılır?
A'dan Z'ye Uzman Rehberi 2026

Chrome Eklentisi Nedir ve Neden Geliştirmelisiniz?

Önemli Bilgi: Manifest V3

Web Teknolojileri

Yüksek Güvenlik

Kolay Dağıtım

Adım 1: Proje Yapısı ve Manifest Dosyası

manifest.json Oluşturma

Adım 2: Arayüz ve Mantık Kodlaması

popup.html (Arayüz)

popup.js (Mantık)

Backend API ve Veritabanı Entegrasyonu

Chrome Web Mağazası'nda Yayınlama

2026 Eklenti SEO ve Pazarlama Trendleri

Profesyonel Eklenti İhtiyacınız mı Var?

Sıkça Sorulan Sorular

Eklenti geliştirmek için hangi dilleri bilmeliyim?

Manifest V2 hala kullanılabilir mi?

Eklentimden nasıl para kazanabilirim?

Eklentim verileri nerede saklamalı?

Ürün ve hizmetlerimiz hakkında daha detaylı bilgi almak için hemen arayın.

[email protected]

Halkalı Merkez, Fatih Cd. özgür apartmanı no 45 iç kapı no: 3, 34303 Küçükçekmece/İstanbul

Site içi Bağlantılar

Web Hosting

Sunucu Hizmetleri

Site içi Bağlantılar

Özel Sunucu Hizmetleri

Standart Sunucular

Özel Sunucu Hizmetleri

Standart Sunucular

Bize Ulaşın

Chrome Eklentisi Nasıl Yapılır? A'dan Z'ye Uzman Rehberi 2026

Chrome Eklentisi Nedir ve Neden Geliştirmelisiniz?

Önemli Bilgi: Manifest V3

Web Teknolojileri

Yüksek Güvenlik

Kolay Dağıtım

Adım 1: Proje Yapısı ve Manifest Dosyası

manifest.json Oluşturma

Adım 2: Arayüz ve Mantık Kodlaması

popup.html (Arayüz)

popup.js (Mantık)

Backend API ve Veritabanı Entegrasyonu

Chrome Web Mağazası'nda Yayınlama

2026 Eklenti SEO ve Pazarlama Trendleri

Profesyonel Eklenti İhtiyacınız mı Var?

Sıkça Sorulan Sorular

Eklenti geliştirmek için hangi dilleri bilmeliyim?

Manifest V2 hala kullanılabilir mi?

Eklentimden nasıl para kazanabilirim?

Eklentim verileri nerede saklamalı?

Ürün ve hizmetlerimiz hakkında daha detaylı bilgi almak için hemen arayın.

Chrome Eklentisi Nasıl Yapılır?
A'dan Z'ye Uzman Rehberi 2026