Özel bir tarayıcı uzantısı oluşturmak, tarayıcınızın işlevselliğini genişletmenize, verimliliğinizi artırmanıza veya tekrarlayan bir sorunu tek bir tıklamayla çözmenize olanak tanır. Yaygın standartlara yönelik artan destekle birlikte, birden fazla tarayıcıda çalışan tek bir uzantı geliştirmek hem yeni başlayanlar hem de profesyoneller için gerçekçi bir hedef haline gelmiştir.
Bir eklentinin başarısı, dosya yapısını, izin mekanizmasını ve web sayfalarıyla güvenli ve verimli bir şekilde nasıl etkileşim kurulacağını anlamaya bağlıdır. Standart uygulamalara bağlı kalınarak, tarayıcı başına gerekli değişiklikler en aza indirilebilir ve dağıtım süreci hızlandırılabilir.
Bu kılavuz, Chrome, Firefox ve diğer tarayıcılarla uyumlu bir tarayıcı uzantısı oluşturmak için net adımlar sunar ve uzun vadeli performans, istikrar ve bakım kolaylığı sağlayan en iyi uygulamalara odaklanır.
WebExtensions girişimi ve temel web teknolojileri sayesinde, tarayıcılar arası uyumlu uzantılar geliştirmek kolaylaştı. Standartlaştırılmış bir format kullanarak, belirli tarayıcıları hedeflemeye gerek kalmadan her yerde çalışan uzantılar yazabilirsiniz.
Herhangi bir web sayfasına özel düzenlemeler yapmanızı sağlayacak ilk eklentinizi nasıl programlayacağınızı ve test edeceğinizi öğrenin.
Web eklentileri nedir?
Web eklentileri, web tarayıcılarının varsayılan işlevselliğini geliştirmek için web uygulama programlama arayüzlerini (API'ler) kullanan, çeşitli tarayıcılarla uyumlu uzantılardır. Eklentiler kaynak kod olarak dağıtılır ve HTML, CSS ve JavaScript gibi temel web teknolojilerini kullanır.
Uzantılar yaklaşık 30 yıldır var olmasına rağmen, tarayıcılar geleneksel olarak bunları desteklemek için farklı yöntemler kullanmıştır. Bu, bir Chrome uzantısının Firefox ile uyumlu olmadığı ve bunun tersinin de geçerli olduğu anlamına geliyordu. Standardizasyon çalışmaları ve birçok tarayıcının Chromium motoru etrafında birleşmesi sayesinde bu sorun daha az belirgin hale geldi. 2021'den beri WebExtensions girişimi, bu ekosistemi resmi olarak düzenlemeyi amaçlamaktadır. İdeal olarak, bu, geliştiricilerin bir uzantıyı bir kez yazıp tüm tarayıcılar için kullanılabilir hale getirmelerini sağlayacaktır.
Web platformunu kullanarak modern, tüm tarayıcılarla uyumlu eklentiler geliştirmeyi öğrenmek için okumaya devam edin; düşündüğünüzden daha kolay!
Not: WebExtensions'ın tarayıcıdan bağımsız olması amaçlanmış olsa da, Firefox, uzantıyı geçici olarak yüklemenize izin verdiği için geliştirme açısından en kolay tarayıcıdır. Buna karşılık, Safari ücretli bir geliştirici aboneliği gerektirir.
Manifest dosyası yazmak: Her eklentinin ihtiyacı olan tek şey, genel yapısını açıklayan bir manifest dosyasıdır. İşte bir örnek:
{
"manifest_version": 3,
"name": "my first extension",
"version": "1.0",
"icons": {
"16": "app/images/icon16.png",
"48": "app/images/icon48.png",
"128": "app/images/icon128.png"
},
"permissions": [
"webNavigation",
"storage"
],
}
ملاحظة
Bu dosya JSON formatındadır, yani onu düzenlemek veya görüntülemek için mevcut araçlardan herhangi birini kullanabilirsiniz.
Yalnızca üç anahtar gereklidir: name, version ve manifest_version. Name ve version anahtarları uygulamanıza özgüdür ve gerçek değerleri bu açıklama için önemli değildir. Ancak, sürüm geçersizse Chrome uzantınızı yüklemeyi reddedecektir, bu nedenle "0" veya "0.0.1" gibi 1 ile 4 arasında nokta ile ayrılmış bir tamsayı olduğundan emin olun.
`manifest_version` biraz hassas bir konu: diğer tarayıcılar 1 ve 2 sürümlerini destekleyebilirken, Chrome 3. sürümü kullanmadığınız sürece hiçbir eklentiyi yüklemeyi reddedecektir. Bu sürümü kullanmak kontrolünüzü azaltır, ancak Chrome'un desteklenmesini istiyorsanız bunu kullanmalısınız.
Ayrıca, manifest dosyası eklentinizin niteliğini tanımlamak için çeşitli başka anahtarlar da kullanabilir. Bunlar arasında yazar, açıklama ve simgeler bulunur; bu simgeler eklentinizi mağazada tanıtmak için faydalı olabilir. Komut tuşu, klavye kısayollarını tanımlamanıza olanak tanır.
`content_scripts` anahtarı, eklentinizin JavaScript veya CSS dosyalarını yüklemesine ve bunları web sayfasına uygulamasına olanak tanıdığı için en önemli manifest anahtarlarından biridir.
"content_scripts": [{
"matches": ["https://en.wikipedia.org/wiki/*"],
"js": ["script.js"],
"css": ["style.css"]
}]
`content_scripts` dosyasındaki her öğe, uzantının çalışacağı URL'leri belirten bir `matches` anahtarı içermelidir. `js` ve `css` anahtarları, uzantının eşleşen bir sayfayı görüntülerken yüklemesi gereken komut dosyalarını veya stil sayfalarını listelemenizi sağlar.
Uzantı kodunu yazmak
Bu basit örnek, simülasyon yapar. TampermonkeyTampermonkey, web sayfalarını özelleştirmenizi sağlayan popüler bir eklentidir. Bununla, Reddit akışınızda "en iyi" içeriklerin görüntülenmesini engellemek gibi şeyler yapabilirsiniz.
Bir manifest dosyası ve biraz JavaScript kullanarak kolayca basit bir web uzantısı yazabilirsiniz. Bu örnek, Wikipedia sayfalarını görüntüleme şeklinizi değiştirecek, ancak olasılıklar sonsuz; bir web sayfasıyla yapabileceğiniz her şey mümkün.
{
"manifest_version": 3,
"name": "tweakipedia",
"description": "Tweak Wikipedia pages to our liking",
"version": "1.0",
"content_scripts": [{
"matches": ["https://en.wikipedia.org/wiki/*"],
"js": ["tweakipedia.js"],
"css": ["tweakipedia.css"]
}]
}
Basitçe başlayacağım ve kişisel tercihlerime uyması için bazı şeyleri değiştirmek üzere CSS kodu kullanacağım. Örneğin, "daha fazla incelemeci gerekli" uyarısını sevmiyorum; ortalama okuyucu için dikkat dağıtıcı. Bu yüzden, öğenin kategorisini belirterek ve görüntüleme özelliğini "none" olarak ayarlayarak onu gizleyeceğim.
.box-More_citations_needed { display: none; }
Eğer iyilik yapmak istemiyorsanız, bağış toplama duyurusunu da gizleyebilirsiniz:
.cn-fundraising { display: none; }
Bundan sonra, dipnot işaretlerinin biraz dikkat dağıtıcı olduğunu düşünüyorum, bu yüzden renklerini ayarlayarak önemlerini biraz azaltacağım:
sup a { color: rgb(51, 102, 204, 0.5); }
Bu rengin %50 alfa kanalına sahip varsayılan renk olduğunu, yani neredeyse saydam olduğunu unutmayın. Bu, bu işaretlerin görünürlüğünü azaltmaya yardımcı olur.
Bu kavramı daha derinlemesine incelediğimde, diğer öğeleri gizlemek (veya değiştirmek) istiyorum, ancak yalnızca gerektiğinde ve değişiklikleri kolayca geri alma özelliğiyle. Bu biraz JavaScript gerektiriyor, ancak çok basit!
toggle_on_key("Escape", "sup a,.mw-editsection,.vector-page-toolbar");
function toggle_on_key(key, sels) {
document.addEventListener("keydown", function (ev) {
if (ev.key === key) {
document.querySelectorAll(sels).forEach(function (node) {
node.style.display = node.style.display === "none" ? "" : "none";
});
}
});
}
Belirli bir tuşa basıldığında belirli öğeleri gizlemek/göstermek için kullanışlı bir fonksiyon oluşturdum. Olay işleyici, eşleşen bir tuş arar, bir seçiciyle eşleşen tüm öğeleri bulur ve görsel durumlarına göre bunları gizler veya gösterir. Bu, stil sayfasıyla aynı CSS (display) özelliğini kullanır, ancak dinamik olarak uygulamak için JavaScript kullanır.
Uzantıyı yükleyin ve kullanın.
Her şey hazır olduktan sonra, eklentiyi yükleme ve deneme zamanı geldi.
Firefox'ta about:debugging adresine gidin, kenar çubuğundan "Bu Firefox"u seçin ve ardından "Geçici bir eklenti yükle" düğmesine tıklayın. Dosyalarınızdan herhangi birini (manifest dosyası veya herhangi bir kod dosyası) seçin ve açın.
Chrome'da chrome://extensions/ adresine gidin, sağ üst köşedeki düğmeyi kullanarak geliştirici modunu etkinleştirin ve ardından sol üst köşedeki "Sıkıştırılmamış dosyaları yükle" düğmesine tıklayın. Uzantı dosyalarınızı içeren klasörü seçin.
Uzantının herhangi bir Vikipedi sayfasında çalıştığını görebilmelisiniz. Sayfanın görünümünü şu şekilde değiştirmelidir:
Eklenti yüklenip etkinleştirildiğinde, Vikipedi sayfası şu şekilde görünmelidir; belirgin uyarı gizlenmiş ve dipnot bağlantıları daha açık bir renkte olacaktır:
Birden fazla tarayıcıyla uyumlu bir tarayıcı uzantısı oluşturmak, ek karmaşıklık yaratmadan daha geniş erişim ve daha iyi bir kullanıcı deneyimi sağlar. Başlangıçtan itibaren ortak standartlara uymak, çabayı azaltır ve uzantının başarı şansını artırır.
Küçük bir adımla başlayın, eklentiyi birden fazla tarayıcıda test edin ve yüksek kaliteyi ve kullanıcılar arasında daha geniş dağıtımı sağlamak için özelliklerini kademeli olarak genişletin.
