Bir Chrome kullanıcısıysanız, bir veya daha fazla uzantı kullanmanız olasıdır. İster reklamları engellemek, ister özellik eklemek olsun, uzantılar tarayıcıya birçok yardımcı program ekler. Öyleyse kendi Chrome uzantınızı oluşturabilseydiniz harika olmaz mıydı? Bu sana tam olarak burada göstereceğim şey.
Ayrıca makalemize bakın En İyi Dokunmatik Ekranlı Chromebook'lar
Müşteriler için web siteleri oluştururken, her sitenin sayfa yükleme konusunda nasıl performans gösterdiğini bilmek isterim. Google şimdi SEO hesaplamalarında yükleme sürelerini kullandığından, bir sayfanın yüklenmesinin ne kadar hızlı veya yavaş olduğunu bilmek bir siteyi optimize ederken önemli bir ölçümdür. Bir web sitesini mobil cihazlar için optimize ederken bu daha doğrudur. Google’da yüksek puan almak için hafif, hızlı ve hatasız olmak zorunda.
Buna ek olarak, SitePoint'teki girişimci bir kişinin de sayfa hızlarını kontrol etmek için yaptığım web sitesini kullanması, GTmetrix ve kontrol etmek için bir Chrome uzantısı geliştirdi, aynı şeyi yapacağımı ve size yol göstereceğimi düşündüm.
Chrome Uzantıları
Chrome Uzantıları, çekirdek tarayıcıya özellikler ekleyen küçük programlardır. Bunlar oluşturacağımız kadar basit veya güvenli parola yöneticileri veya komut dosyası emülatörleri kadar karmaşık olabilirler. HTML, CSS ve JavaScript gibi uyumlu dillerde yazılmış, tarayıcının yanında yer alan kendi kendine yeten dosyalardır.
Gerekirse, çoğu uzantı, belirli bir işlemi gerçekleştiren basit simge tıklama yürütmeleridir. Bu işlem tam anlamıyla Chrome'un yapmasını istediğiniz herhangi bir şey olabilir.
Kendi Chrome uzantınızı oluşturun
Küçük bir araştırma ile ne istersen yapman için eklentini değiştirebilirsin, ama bir tuşla hız kontrolü fikrini seviyorum, bu yüzden devam ediyorum.
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 öğesine basarsınız. Sadece birkaç saniye sürer, ancak tarayıcınızdaki bir simgeyi seçip sizin için yapabilseydiniz hoş olmaz mıydı? Bu eğitimde çalıştıktan sonra, tam olarak bunu yapabileceksiniz.
Her şeyi içeride tutmak için bilgisayarınızda bir klasör oluşturmanız gerekir. Üç boş dosya oluşturun (manifest.json, popup.html ve popup.js). Yeni klasörü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 dosyasının bir HTML dosyası olarak ve popup.js dosyasının bir JavaScript dosyası olarak kaydedildiğinden emin olun. Bu örnek simgeyi Google’dan da bu eğitimin amaçları için indirin.
Manifest.json dosyasını seçin ve aşağıdakileri yapıştırın:
{"manifest_version": 2, "name": "GTmetrix Page Speed Analyzer", "açıklama": "Web sitesi sayfasının yüklenme 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":}
Gördüğünüz gibi, biz bir başlık ve temel bir açıklama verdik. Ayrıca, Google’dan indirdiğimiz ve tarayıcı çubuğunuzda ve popup.html’de görünecek olan simgeyi içeren bir tarayıcı işlemi de yaptık. Tarayıcıda uzantı simgesini seçtiğinizde Popup.html adı verilen şeydir.
Popup.html dosyasını açın ve aşağıdakileri yapıştırın.
GTMetrix kullanarak Pagespeed Analyzer
Tarayıcıda uzantı simgesini seçtiğinizde Popup.html adı verilen şeydir. Ona bir isim verdik, açılır pencereyi etiketledik ve bir düğme ekledik. Düğmeyi seçmek, bir sonraki tamamlayacağımız dosya olan popup.js'yi çağıracak.
Popup.js dosyasını açın ve aşağıdakileri yapıştırın:
document.addEventListener ('DOMContentLoaded', function () {var checkPageButton = document.getElementById ('checkPage'); checkPageButton.addEventListener ('click', function () {chrome.tabs.getSelected (null, function {tab), function () = document; var f = d.createElement ('form'); f.action = 'http://gtmetrix.com/analyze.html?bm'; f.method = 'post'; var i = d.createElement ( 'input'); i.type = 'hidden'; i.name = 'url'; i.value = tab.url; f.appendChild (i); d.body.appendChild (f); f.submit () ;});}, yanlış);}, yanlış);
JavaScript bilmiş gibi davranmayacağım, bu yüzden SitePoint'in zaten yerinde olması çok kullanışlıydı. Tek bildiğim, GTmetrix’e mevcut Chrome sekmesindeki sayfayı analiz etmesini söylemesi. 'Chrome.tabs.getSelected' yazdığı yerde, uzantı URL'yi etkin sekmeden alır ve web formuna girer. Bu gidebildiğim kadarıyla.
Chrome uzantınızın test edilmesi
Şimdi temel çerçeveye sahibiz, nasıl çalıştığını görmek için test etmemiz gerekiyor.
- Chrome'u açın, Diğer Araçlar ve Uzantılar'ı seçin.
- Etkinleştirmek için Geliştirici modunun yanındaki kutuyu işaretleyin.
- Paketlenmemiş uzantı yükle seçeneğini seçin ve bu uzantı için oluşturduğunuz dosyaya gidin.
- Uzantıyı yüklemek için Tamam'ı seçin; uzantılar listenizde görünmelidir.
- Listede Etkin'in yanındaki kutuyu işaretleyin, tarayıcınızda simgenin görünmesi gerekir.
- Tarayıcıda simgeyi seçin, böylece açılır pencere görünecektir.
- Düğmeyi seçin, Şimdi bu sayfayı kontrol edin!
Kontrol edilen sayfayı ve GTmetrix'ten bir performans raporunu görmelisiniz. Ana sitedeki kendi sitemden görebileceğiniz gibi, yeni tasarımımı hızlandırmak için küçük bir işim var!
Uzantıları ileri almak
Kendi Chrome uzantınızı oluşturmak, göründüğü kadar zor değildir. Küçük bir kodu bilerek başınızın başlaması kesinlikle yardımcı olsa da, size bunu gösterecek yüzlerce çevrimiçi kaynak var. Ayrıca, Google’ın yardımcı olacak çok sayıda bilgi, eğitim ve çalışma alanı bulunmaktadır. Bu uzantı ile ilgili bana yardımcı olmak için bu sayfayı Google Geliştirici sitesinden kullandım. Sayfa, uzantı oluşturmanın her bölümünde size kılavuzluk eder ve daha önce kullandığımız simgeyi sağlar.
Yeterli araştırma ile, 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ı, şirketinizi değil, kendinizinkini oluşturabileceğinizi kanıtlayan şirketlerden değil.
Orijinal kılavuz için SitePoint'teki John Sonmez'e verilen tüm kredi. Zor işleri yaptı, ben sadece biraz düzenledi ve biraz güncelledim.
Kendi Chrome uzantınızı oluşturdunuz mu? Tanıtmak veya paylaşmak ister misiniz? Aşağıdaki durumlarda bize bildirin!
