Tarayıcı Eklenti Yapımı
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.
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:
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"
}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>{
"name": "Character Converter",
"version": "0.0.0.1",
"manifest_version": 3,
"description": "An extension to convert characters",
"action": {
"default_popup": "template/index.html"
}
}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:
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;
}<!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>
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>#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>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;
}
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.
Hiç yorum yok: