Chrome Uzantısı Nasıl Yapılır?

Yayınlanan: 2017-11-22
Chrome Uzantısı Nasıl Yapılır?

Bir Chrome kullanıcısıysanız, büyük olasılıkla bir veya daha fazla uzantı kullanacaksınız. İster reklamları engellemek, ister özellik eklemek için olsun, uzantılar tarayıcıya birçok yardımcı program ekler. Kendi Chrome uzantınızı oluşturabilseydiniz harika olmaz mıydı? Size burada göstereceğim şey tam olarak bu.

Müşteriler için web sitelerinin bakımını yaptığım için, her sitenin sayfa yükleme konusunda nasıl performans gösterdiğini bilmek isterim. Google artık SEO hesaplamalarında yükleme sürelerini kullandığından, bir siteyi optimize ederken bir sayfanın ne kadar hızlı veya yavaş yüklendiğini bilmek önemli bir ölçümdür. Bu, bir web sitesini mobil cihazlar için optimize ederken daha da doğrudur. Google'da yüksek puan almak için hafif, hızlı ve hatasız yüklenmelidir.

Buna ek olarak, SitePoint'teki girişimci bir kişinin sayfa hızlarını kontrol etmek için kullandığım web sitesini, GTmetrix'i kullanması ve kontrol etmek için bir Chrome uzantısı geliştirmesi gerçeğini, ben de aynısını yapacağımı ve size yol göstereceğimi düşündüm.

Chrome Uzantıları

Chrome Uzantıları, çekirdek tarayıcıya özellikler ekleyen mini programlardır. Oluşturacağımız kadar basit veya güvenli parola yöneticileri veya komut dosyası öykünücüleri kadar karmaşık olabilirler. HTML, CSS ve JavaScript gibi uyumlu dillerde yazılmışlar, tarayıcının yanında bulunan bağımsız dosyalardır.

Zorunlu olarak, çoğu uzantı, belirli bir eylemi gerçekleştiren basit simge tıklaması yürütmeleridir. Bu eylem, kelimenin tam anlamıyla Chrome'un yapmasını istediğiniz herhangi bir şey olabilir.

Kendi Chrome uzantınızı oluşturun

Biraz araştırma ile uzantınızı istediğiniz gibi ayarlayabilirsiniz ama tek tuşla hız kontrolü fikrini beğendim, o yüzden devam edeceğim.

Genellikle site hızını kontrol ettiğinizde, bulunduğunuz sayfanın URL'sini GTmetrix, Pingdom veya herhangi bir yere yapıştırır ve Analiz Et'e basarsınız. Yalnızca birkaç saniye sürer, ancak tarayıcınızda bir simge seçip sizin için yapmasını sağlasanız iyi olmaz mıydı? Bu öğretici üzerinde çalıştıktan sonra, tam da bunu yapabileceksiniz.

Her şeyi içeride tutmak için bilgisayarınızda bir klasör oluşturmanız gerekecek. Üç boş dosya oluşturun, manifest.json, popup.html ve popup.js. Yeni klasörünüzün içine sağ tıklayın ve Yeni ve metin dosyası'nı seçin. Seçtiğiniz metin düzenleyicide üç dosyanızın her birini açın. popup.html'nin bir HTML dosyası olarak kaydedildiğinden ve popup.js'nin bir JavaScript dosyası olarak kaydedildiğinden emin olun. Bu örnek simgeyi de yalnızca bu eğitimin amaçları için Google'dan indirin.

manifest.json'u seçin ve içine şunu yapıştırın:

 {

"manifest_version": 2,

"ad": "GTmetrix Sayfa Hızı Çözümleyicisi",

"description": "Bir web sitesi sayfası yükleme hızını analiz etmek için GTmetrix kullanın",

"sürüm": "1.0",

"browser_action": {

"default_icon": "icon.png",

"default_popup": "popup.html"

},

"izinler": [

"aktif sekme"

]

}

Gördüğünüz gibi, ona bir başlık ve temel bir açıklama verdik. Google'dan indirdiğimiz ve tarayıcı çubuğunuzda ve popup.html'de görünecek simgeyi içeren bir tarayıcı eylemi de çağırdık. Popup.html, tarayıcıda uzantı simgesini seçtiğinizde çağrılan şeydir.

Popup.html dosyasını açın ve aşağıdakini içine yapıştırın.

 <!doctype html>

<html>

<kafa>

<title>GTMetrix kullanan Pagespeed Analyzer</title>

http://popup.js

</head>

<body>

<h1>GTMetrix kullanan Sayfa Hızı Analizörü</h1>

<button>Sayfa hızını kontrol edin!</button>

</body>

</html>

Popup.html, tarayıcıda uzantı simgesini seçtiğinizde çağrılan şeydir. Ona bir isim verdik, açılır pencereyi etiketledik ve bir buton ekledik. Düğmeyi seçmek, daha sonra tamamlayacağımız dosya olan popup.js'yi çağıracaktır.

Popup.js dosyasını açın ve aşağıdakini içine yapıştırın:

 Document.addEventListener('DOMContentLoaded', function() {

var checkPageButton = document.getElementById('checkPage');

checkPageButton.addEventListener('tıklama', function() {

chrome.tabs.getSelected(boş, işlev(sekme) {

d = belge;

var f = d.createElement('form');

f.action = 'http://gtmetrix.com/analyze.html?bm';

f.method = 'gönder';

var i = d.createElement('input');

i.type = 'gizli';

i.name = 'url';

i.değer = tab.url;

f.appendChild(i);

d.body.appendChild(f);

f.gönder();

});

}, YANLIŞ);

}, YANLIŞ);

JavaScript biliyormuş gibi yapmayacağım, bu yüzden SitePoint'in dosyanın zaten yerinde olması kullanışlıydı. Tek bildiğim, GTmetrix'e sayfayı mevcut Chrome sekmesinde analiz etmesini söylediği. 'chrome.tabs.getSelected' yazdığı yerde uzantı, etkin sekmeden URL'yi alır ve web formuna girer. Gidebildiğim bu kadar.

Chrome uzantınızı test etme

Şimdi temel çerçeveye sahibiz, nasıl çalıştığını görmek için test etmemiz gerekiyor.

  1. Chrome'u açın, Diğer Araçlar ve Uzantılar'ı seçin.
  2. Etkinleştirmek için Geliştirici modunun yanındaki kutuyu işaretleyin.
  3. Paketlenmemiş uzantıyı yükle'yi seçin ve bu uzantı için oluşturduğunuz dosyaya gidin.
  4. Uzantıyı yüklemek için Tamam'ı seçin ve Uzantılar listenizde görünmelidir.
  5. Listede Etkin'in yanındaki kutuyu işaretleyin ve simge tarayıcınızda görünmelidir.
  6. Açılır pencerenin görünmesi için tarayıcıdaki simgeyi seçin.
  7. Düğmeyi seçin, Şimdi bu sayfayı kontrol edin!

Kontrol edilen sayfayı ve GTmetrix'ten bir performans raporu görmelisiniz. Ana görseldeki kendi sitemden de görebileceğiniz gibi, yeni tasarımımı hızlandırmak için biraz işim var!

Uzantıları ileri alma

Kendi Chrome uzantınızı oluşturmak göründüğü kadar zor değil. Küçük bir kod bilerek bir başlangıç ​​yapmak kesinlikle yardımcı olsa da, bunu size gösterecek çevrimiçi yüzlerce kaynak var. Ayrıca, Google'ın yardımcı olacak büyük bir bilgi, öğretici ve izlenecek yol deposu vardır. Bu uzantıyla ilgili bana yardımcı olması için Google Developer sitesindeki bu sayfayı kullandım. Sayfa, uzantıyı oluşturmanın her aşamasında size yol gösterir ve daha önce kullandığımız simgeyi sağlar.

Yeterli araştırmayla, tarayıcının yapabileceği hemen hemen her şeyi yapan uzantılar oluşturabilirsiniz. Chrome mağazasındaki en iyi uzantılardan bazıları, şirketlere değil bireylere aittir ve gerçekten kendinizinkini oluşturabileceğinizi kanıtlar.

Orijinal kılavuz için SitePoint'ten John Sönmez'e teşekkür ederiz. Zor olanı yaptı, ben sadece biraz yeniden düzenledim ve biraz güncelledim.

Kendi Chrome uzantınızı oluşturdunuz mu? Tanıtmak veya paylaşmak mı istiyorsunuz? Yaparsanız aşağıda bize bildirin!