Chrome Eklentisi Nasıl Yazılır? Basit Uzantı Geliştirme

Chrome eklentisi yazmak için bilgisayarınızda bir klasör açıp içine bir manifest.json dosyası ve eklentinin işini yapan HTML, CSS ve JavaScript dosyalarını koymanız yeterlidir. Ardından Chrome’da Geliştirici modunu açıp bu klasörü “Paketlenmemiş öğe yükle” ile yüklersiniz. Eklenti anında tarayıcı çubuğunda görünür ve deneyebilirsiniz.

Chrome eklentisi nasıl yapılır?

Chrome eklentisi, web sayfası yapar gibi HTML, CSS ve JavaScript ile yapılır; farkı, tarayıcıya ne yapacağını anlatan bir manifest dosyasının olmasıdır. Özel bir program kurmanız gerekmez. Not Defteri bile iş görür, ama Visual Studio Code gibi ücretsiz bir kod düzenleyici hataları görmenizi kolaylaştırır.

Genel akış şöyledir:

• Eklenti için bir klasör oluşturursunuz.
• İçine manifest.json ve gerekli dosyaları eklersiniz.
• Chrome’da geliştirici modunda klasörü yüklersiniz.
• Deneyip düzeltirsiniz; isterseniz Chrome Web Mağazası’nda yayınlarsınız.

Chrome uzantısı nasıl çalışır?

Chrome uzantısı, manifest dosyasında tanımlanan parçalar ve izinler sayesinde tarayıcının belirli bölümlerine erişerek çalışır. Güncel eklentiler Manifest V3 yapısını kullanır. Başlıca parçalar şunlardır:

• Açılır pencere (popup): Araç çubuğundaki eklenti simgesine tıklayınca açılan küçük HTML sayfası.

• İçerik betiği (content script): Ziyaret ettiğiniz sayfanın içinde çalışır, sayfadaki metni ya da görünümü değiştirebilir.

• Arka plan betiği (service worker): Sekme açılması, simgeye tıklama gibi olayları dinler; sürekli açık durmaz, gerektiğinde uyanır.

• İzinler: Eklentinin sekmelere, depolamaya ya da belirli sitelere erişmesi için manifest’te tek tek istenir.

Basit bir eklentide bunların hepsine ihtiyaç yoktur. Yalnızca açılır pencereli bir eklenti de gayet geçerlidir.

Chrome extension yapmak için kod bilmek gerekir mi?

Evet, temel düzeyde HTML ve JavaScript bilmeniz gerekir, ama ileri seviye programcılık şart değildir. Aşağıdaki örneği kopyalayıp çalıştırarak başlayabilir, sonra adım adım değiştirerek öğrenebilirsiniz. Daha karmaşık işler (başka sitelerden veri çekmek, ayar sayfası eklemek) için JavaScript bilginizi ilerletmeniz gerekir.

İlk eklenti adım adım nasıl yazılır?

Örnek olarak, simgesine tıklayınca açılan pencerede bir düğme bulunan ve bu düğmeye basınca açık sayfanın arka planını sarıya boyayan bir eklenti yapalım.

1. Masaüstünde “ilk-eklentim” adında bir klasör oluşturun.
2. Klasörün içine manifest.json, popup.html ve popup.js adında üç boş dosya açın.
3. Dosyaları aşağıdaki içeriklerle doldurup kaydedin.
4. Chrome’da geliştirici modunu açıp klasörü yükleyin (bir sonraki bölümde anlatılıyor).

manifest.json dosyası nasıl hazırlanır?

manifest.json, eklentinin adını, sürümünü, izinlerini ve hangi dosyaları kullandığını belirten zorunlu dosyadır. Örnek içerik:

{ “manifest_version”: 3, “name”: “İlk Eklentim”, “version”: “1.0”, “description”: “Sayfanın arka planını sarı yapar.”, “action”: { “default_popup”: “popup.html” }, “permissions”: [“activeTab”, “scripting”] }

Burada “activeTab” yalnızca simgeye tıkladığınız sekmeye geçici erişim verir; “scripting” ise o sekmede kod çalıştırmayı sağlar. Simge eklemezseniz Chrome harfli varsayılan bir simge gösterir, bu sorun değildir.

Açılır pencere (popup) nasıl eklenir?

Açılır pencere, manifest’te default_popup olarak gösterdiğiniz HTML dosyasıdır. popup.html içeriği:

<!DOCTYPE html><html><body style=”width:200px”><button id=”boya”>Sarıya boya</button><script src=”popup.js”></script></body></html>

popup.js içeriği:

document.getElementById(“boya”).addEventListener(“click”, async () => { const [tab] = await chrome.tabs.query({ active: true, currentWindow: true }); chrome.scripting.executeScript({ target: { tabId: tab.id }, func: () => { document.body.style.backgroundColor = “yellow”; } }); });

Dikkat: Manifest V3’te JavaScript kodunu HTML içine doğrudan yazamazsınız; ayrı bir .js dosyasına koymanız gerekir. Bu, yeni başlayanların en sık takıldığı noktadır.

Chrome geliştirici modu nasıl açılır?

Geliştirici modu, Chrome’un Uzantılar sayfasının sağ üst köşesindeki anahtarla açılır. Adımlar:

1. Chrome adres çubuğuna chrome://extensions yazıp Enter’a basın.
2. Sağ üstteki “Geliştirici modu” anahtarını açık konuma getirin.
3. Üstte beliren “Paketlenmemiş öğe yükle” düğmesine tıklayın (sürüme göre adı biraz farklı olabilir).
4. Oluşturduğunuz “ilk-eklentim” klasörünü seçin.
5. Araç çubuğundaki yapboz simgesine tıklayıp eklentinizi sabitleyin.

Artık herhangi bir siteye girip simgeye, ardından “Sarıya boya” düğmesine bastığınızda sayfa sarıya döner. Chrome’un kendi sayfalarında (chrome:// ile başlayanlar) eklentiler kod çalıştıramaz; denemeyi normal bir sitede yapın.

Eklenti neden yüklenmiyor ya da çalışmıyor?

En sık neden manifest.json dosyasındaki bir yazım hatasıdır; eksik virgül ya da tırnak, eklentinin yüklenmesini tamamen engeller. Chrome bu durumda hata mesajını Uzantılar sayfasında gösterir. Kontrol etmeniz gerekenler:

• Dosya adı tam olarak manifest.json mı, sonunda gizli bir .txt uzantısı var mı?
• Klasörü seçerken dosyaların bulunduğu klasörün kendisini mi seçtiniz?
• Manifest’teki dosya adları gerçek dosya adlarıyla birebir aynı mı?
• Gereken izinleri (ör. “scripting”) eklediniz mi?

Açılır penceredeki hataları görmek için pencereye sağ tıklayıp “İncele” seçeneğiyle geliştirici araçlarını açın; Console sekmesi hatanın satırını gösterir. Uzantılar sayfasındaki eklenti kartında “Hatalar” düğmesi de çıkabilir.

Kodda değişiklik yaptığınızda eklentiyi kaldırmanıza gerek yoktur. Uzantılar sayfasında eklenti kartındaki yenile (dairesel ok) simgesine basmanız yeterlidir. İçerik betiği değiştiyse, denediğiniz sayfayı da yenileyin.

Eklenti Chrome Web Mağazası’nda nasıl yayınlanır?

Eklentiyi herkese açmak için Chrome Web Mağazası geliştirici hesabı açıp klasörünüzü ZIP olarak yüklemeniz gerekir. Hesap açılışında genellikle tek seferlik bir kayıt ücreti istenir; güncel tutarı kayıt sırasında görürsünüz.

1. Eklenti klasörünüzü ZIP dosyası olarak sıkıştırın (manifest.json ZIP’in en üst düzeyinde olmalı).
2. Google hesabınızla Chrome Web Mağazası geliştirici konsoluna kaydolun.
3. Yeni öğe ekleyip ZIP dosyasını yükleyin.
4. Açıklama, ekran görüntüleri, simge ve gizlilik bilgilerini doldurun.
5. İncelemeye gönderin; onaylanınca mağazada yayınlanır.

İnceleme süresi eklentinin istediği izinlere göre değişebilir. Gereğinden fazla izin isteyen eklentiler daha uzun incelenir ya da reddedilebilir.

Güvenli bir eklenti için nelere dikkat etmek gerekir?

En önemli kural, yalnızca gerçekten ihtiyaç duyduğunuz izinleri istemektir. Tüm sitelere erişim (“<all_urls>”) yerine mümkünse “activeTab” ya da belirli site adresleri kullanın.

• Başka sitelerden kod indirip çalıştırmayın; Manifest V3 buna zaten izin vermez.
• Şifre, kart bilgisi gibi hassas verileri toplamayın ve saklamayın.
• Kodunuzu düzenli yedekleyin; bir Git deposu ya da bulut klasörü işinizi görür.
• Kendi kullanmadığınız, kaynağını bilmediğiniz eklentileri geliştirici moduyla yüklemeyin; paketlenmemiş eklentiler mağaza denetiminden geçmez.

Başkalarının hesap bilgilerini ya da gezinme geçmişini gizlice toplayan eklentiler hem mağaza kurallarına hem de yasalara aykırıdır. Kişisel verilerle ilgili yükümlülükleri merak ediyorsanız Kişisel Verileri Koruma Kurumu sitesine göz atabilirsiniz.

Sıkça Sorulan Sorular

Telefonda Chrome eklentisi yazılıp kullanılır mı?

Hayır, Android ve iPhone’daki Chrome eklenti desteklemez. Eklenti geliştirmek ve kullanmak için Windows, macOS, Linux ya da ChromeOS’ta masaüstü Chrome gerekir.

Yazdığım eklenti Edge veya Brave’de çalışır mı?

Çoğu durumda evet. Microsoft Edge, Brave ve Opera gibi Chromium tabanlı tarayıcılar aynı eklenti yapısını destekler; geliştirici modundan aynı klasörü yükleyebilirsiniz. Bazı Chrome’a özgü özellikler farklı davranabilir.

Eski Manifest V2 ile eklenti yazabilir miyim?

Yeni bir eklentiye Manifest V2 ile başlamak mantıklı değildir; Chrome bu sürümün desteğini kaldırma sürecine girdi. İnternette bulduğunuz eski örneklerde “manifest_version”: 2 görürseniz, kodu V3’e uyarlamanız gerekir.

Eklenti yazmak ücretli mi?

Kendi bilgisayarınızda eklenti yazmak ve geliştirici moduyla kullanmak tamamen ücretsizdir. Ücret yalnızca Chrome Web Mağazası’nda yayınlamak için açılan geliştirici hesabında söz konusudur.