Tarayıcı eklentileri, işimizi oldukça kolaylaştıran ve tarayıcı üzerinde çalışan mini programlardır. Bu yazıda bir tarayıcı eklentisi nasıl yapılır, onu öğreneceğiz. Uzun zamandır beni her seferinde 5-10 saniye yavaşlatan rutinleşmiş bazı durumlarım oluyor. Sorunu biraz daha açmak gerekirse. Özellikle bu blogu yazarken, yazdığım kodları yazı içerisine eklemem gerekiyor. Ancak html kodu yazı içine eklerken büyüktür(>), küçüktür(<) gibi karakterlerde sorun çıkıyor. Bunların sorun çıkarmaması için < karakterini '<' şeklinde kaynak kodu içerisinde değiştirmem gerekiyor. Bu noktada bunları tek tek değiştirmek yerine bir tane converter yapabilirim diye düşündüm. Özellikle tarayıcı üzerinde blog yazdığım için bunu bir tarayıcı eklentisi olarak yapmak çok mantıklı geldi. Tabi kullandığım internet tarayıcısı Edge olduğu için eklentiyi onun üzerinde test edeceğim ancak yapacağım eklenti Chrome tarayıcıda da çalışacaktır.
Problemi bildiğimize göre eklenti yapımına geçebiliriz. Öncelikle masaüstünde eklenti için bir klasör oluşturuyorum. Daha sonrasında bu klasörü VS Code ile açıyorum.
İlk olarak manifest.json adında bir dosya oluşturulur. Bu dosya eklenti ayarlarının bulunduğu bir konfigürasyon dosyasıdır:
{
"name": "Character Converter",
"version": "0.0.0.1",
"manifest_version": 3,
"description": "An extension to convert characters"
}
Sıra eklentinin çalışacağı şablonu oluşturmaya geldi.
template adında bir klasör oluşturulur ve bu klasör içinde index.html adında bir dosya oluşturulur.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Converter</title>
</head>
<body>
<div>
test
</div>
</body>
</html>
Daha sonrasında bu sayfanın eklenti tarafından görülmesi ve çalıştırılması için manifest.json dosyasında aşağıdaki gibi ekleme yapılır:
{
"name": "Character Converter",
"version": "0.0.0.1",
"manifest_version": 3,
"description": "An extension to convert characters",
"action": {
"default_popup": "template/index.html"
}
}
Şimdi bitmemiş bu eklentiyi test etmek için
edge://extensions'ı açın ve Developer Mode'u aktif edin:
Load unpacked butonuna tıklayın ve oluşturduğumuz proje klasörünü seçin:
Seçilme işlemi yapıldıktan sonra aşağıda olduğu gibi eklentimiz başarılı bir şekilde yüklenmiş olacak:
Ancak diğer eklentilerin yanında yeni eklediğimiz bu eklenti bulunmuyor olabilir. Eklentiyi görülür yapmak için aşağıdaki gibi yapalım:
Şimdi eklentimizi çalıştıralım:
Yukarıda görüldüğü gibi eklenti başarılı bir şekilde çalıştırıldı. Şimdi sıra bu eklentiye biraz tasarım vermede. İlk olarak template klasörü içinde style.css adında dosya oluşturulur:
#content{
width: 320px;
height: 240px;
}
Daha sonrasında style.css dosyasını index.html içinde çağıralım ve ona uygun bazı düzenlemeler yapalım:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Converter</title>
<link rel="stylesheet" href="/template/style.css"/>
</head>
<body>
<div id="content">
<h1>Converter</h1>
<p>Test</p>
</div>
</body>
</html>
Eklentiyi tekrar çalıştıralım:
Tasarımı artık istediğimiz gibi style.css üzerinden ayarlayabiliriz.
Bu yazdığımız eklentinin amacı içindeki textarea'ya yapıştırılan kodu, benim kullanmak istediğim hale dönüştürmesiydi. O sebeple index.html'de bir tane textarea ekleyeceğim. Ayrıca bir tane de buton ekleyeceğim. Bu butonun ismi Convert olacak.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Converter</title>
<link rel="stylesheet" href="/template/style.css"/>
</head>
<body>
<div id="content">
<h1>Converter</h1>
<textarea id="content-text"></textarea>
<button id="convert-button">Convert it</button>
</div>
</body>
</html>
Daha sonrasında tasarımını oluşturalım basitçe:
#content{
width: 320px;
height: 240px;
padding: 5px;
}
#content-text{
width: 100%;
resize: none;
height: 100px;
}
#convert-button{
width: 325px;
height: 30px;
margin-top: 10px;
background-color: dimgrey;
color:beige;
cursor: pointer;
}
Tasarımı kontrol edelim:
Bu Convert it isimli butona tıklanınca tetiklenmesi gerek. Bu tetiklenme yazacağımız JavaScript kodu tarafından algılanacak. JS tarafında ilk olarak html element'lerimize id sayesinde ulaşmamız gerek. Ancak öncesinde bir JavaScript dosyası oluşturalım template içinde ve daha sonrasında bu dosyayı index.html içinde çağıralım:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Converter</title>
<link rel="stylesheet" href="/template/style.css"/>
</head>
<body>
<div id="content">
<h1>Converter</h1>
<textarea id="content-text"></textarea>
<button id="convert-button">Convert it</button>
</div>
<script src="/template/script.js"></script>
</body>
</html>
Daha sonrasında gerekli JS kodumu yazıyorum:
const contentText = document.getElementById("content-text");
const convertButton = document.getElementById("convert-button");
// butona tıklanınca fonksiyonu çalıştır
convertButton.onclick = function() {
var characters = {
"&" : "&",
"<" : "<",
">" : ">"
};
contentText.value = converter(characters);
}
// json object içinde verilen verilere göre dönüştürme yap
var converter = function(obj) {
var textValue = contentText.value;
for (var key in obj) {
textValue = textValue.replaceAll(key, obj[key]);
}
return textValue;
}
Basit bir js kodu yazdım. Biraz incelerseniz neyin ne olduğunu rahatlıkla anlayabilirsiniz. Eklentiyi çalıştıralım:
Converter düzgün bir şekilde çalışıyor. Elbette daha gelişmiş bir versiyonunu yapmaya devam edeceğim, ancak yazının daha fazla uzamaması adına burada bitiriyorum. Zaten az çok nasıl eklenti yapılır onu yeterince göstermiş olduk: Bu konuda daha fazla ayrıntılı bilgi edinmek isterseniz şu bağlantıdan
Extension concepts and architecture - Microsoft Edge Development | Microsoft Docs dokümentasyonu incelemenizi öneririm. İyi çalışmalar.
