Chrome Extension İle Neler Yaptık?

Chrome Extension aşkıyla tutuşurken, neler yaptık nasıl yaptık sizinle paylaşmak istedim. Artık şuna ‘eklenti’ diyerek devam edeceğim, biliyorum Extension kelimesini ilerde kesin yanlış yazacağım.

INSTA-DOWNLOAD

Her şey Melih Mucuk’un ‘Kardo insta-download diye bir şey yaptım baksana’ demesiyle başladı. Insta-download web instagram üzerindeki resimlerin üzerine bir ‘Save’ butonu koyarak, resimleri daha kolay bir şekilde indirmenizi sağlıyor.

Sanırım bu ara fenomen Metin Hara

Eklenti yazmanın en büyük sıkıntısı döküman. Döküman oldukça kötü durumda. Dökümanda bir şey aramak yerine stackoverflow.com daha iyi iş görüyor diyebilirim.

HELLO BANKO

Development

Eklenti yazmanın en güzel yanı istenen sayfasının içine istediğiniz HTML tagini istediğiniz şekilde eklemek olsa gerek, ki ben buna aşık oldum. Bunu gördükten sonra kendime bir eklenti yapmak artık şart olmuştu. Kendi projem olan “Hello Banko” uygulamam zaten vardı, buna bir şeyler eklemenin daha keyifli olacağını düşünerek başladım.

Ve işte o an bana göre çılgın fikir bir anda Melih’in ağzından çıktı “Abi bence bilyoner üzerinde senin tavsiye ettiğin maçları koyalım”. Ağızdan çıktığı an projeyi açmış, kendi web tarayıcıma eklentiyi yüklemiştim bile. Eklenti üzerinde ‘Günün Maçları’ api çağrıları hazırdı. Eklentiler üzerinde http request atmak biraz sıkıntılı olabiliyor. Herhangi bir node modülü ekleyemiyoruz. Ben şansımı XHR’dan(eminim çok seversiniz) yana kullandım. Ufak bir not: HTTP çağrısı yaparken manifest üzerinden domain’e izin vermeyi unutmayın!. Bunları yaptıktan sonra sıra bilyoner bültene Hello Banko ikonu eklemekteydi. İşte burası bence en eğlenceli kısmı. MBS’nin soluna Hello Banko diye bir sütün açmaya karar verdim.

Bu adımlar normal HTML parse. Burada ki en büyük sorun şuydu; satırlar maçId ile beraber dynamic olarak üretiliyordu ve ben onları yakalayamıyordum. Bu yüzden ilk önce Hello Banko’dan bütün bülteni çekip satırları tek tek yakalamam gerekti.

Artık Hello Banko ikonunu sütun içindeki satırlara koyma zamanı gelmişti. Image (eklenti içinde sizin paketiniz dahilinde ki bir image’ı kullanacaksanız chrome.extension.getURL size yardımcı olacaktır.) üzerine gelindiğinde bir event ile tahminPopup gösterdim. Bunu da yaptıktan sonra Hello Banko eklentisi hazırdı!

Release Time

Chrome developer olmak için 5$ ödeme yapamız gerekiyormuş. Uygulamayı yüklemek için uygulama klasörünü sıkıştırıp yüklemeniz yeterli. Evet bu kadar basit! Resimleri hazırladıktan sonra 30dk içinde uygulama Chrome Store’a çıkmış oluyor.

Ekşi Gündem

Development

Artık Melih’le beraber bir eklenti yapma zamanı gelmişti. Aklımıza ilk önce, son zamanlarda uygulaması çıktığı için olsa gerek, Ekşi Sözlük geldi. Bunun gündem sayfasını bir eklenti haline getirip koyalım dedik ve adını EkşiGündem koyduk. Bu eklentideki fark şuydu: başka bir HTML içine değil kendi oluşturduğumuz HTML üzerine bir şeyler ekleyecekti. Tıpkı Product Hunt eklentisi gibi.

İlk olarak popüler başlıkları çekip bunların altında en çok beğeni almış entryleri çekmemiz gerekiyordu. Api çağrılarını ilk olarak eklenti içine koyduk. Bu zaman zaman 2–3 saniye cevap beklememize sebep oluyordu. Artık ufak bir api yazma zamanımız gelmişti.

İlk olarak eklentide yaptığımız bütün api çağrılarını kendi yazdığımız back-end’e çektik. Back-end’de nodeJS hapi koşuyor. Burada 2 dakikalık bir cache ile devam etmek bizim başımıza şöyle bir iş açtı, apinin attığı bütün requestler 5–6 saniye sürmeye başladı. Bu durumda içimizden bir kişinin 2 dakika da bir beklemesine sebep oldu. Bunu bir cron’a bağlayıp cacheleyerek çözdük. Artık çılgınlar gibi hazırdık :)

Artık web tarayıcım bu şekilde =)

Türerkan İnce kulakların çınlasın!

Bence herkes eklenti yazmayı hobi amaçlı dahi olsa deneyimlemeli.

Her şey için teşekkür Melih Mucuk.