Chrome Eklentisi Geliştirme #1

Google Chrome web tarayıcısı için eklenti geliştirme hakkında kısa yazılar yazmaya karar verdim. Bu yazılardan ilkine hoşgeldiniz. Bu ilk yazımızda çalışma ortamımızı kurmak ile işe başlayacağız.

İlk olarak yeoman ı kuruyoruz. Yeoman ı kullanabilmek için sistemizde nodejs nin ve npm nin kurulu olması gerekmekte.

Aşağıdaki komutla yeoman ı ve sonrasında grunt ı indiriyoruz.

npm install -g yo
npm install -g grunt-cli

Yeoman ı ve grunt ı kurduk şimdi sırada istediğimiz şekilde chrome eklentisi kodlarını yeoman ile hazırlayan modülü indiriyoruz.

npm install -g generator-chrome-extension

Şimdi terminalde yo yazarak enter a tıkladığımızda karşımıza yüklü generator ler çıkacak. Eklenti komutları çalıştırdığımız dizinde kurulacağından eklenti için bir klasör oluşturmanız faydalı olabilir. Chrome Extension ı aşağı/yukarı tuşları ile seçerek enter a tıklıyoruz.

Çıkan seçenekde eklentinin adını yazıyoruz ve enter a tıklıyoruz.

Çıkan seçenekde eklentimizin ne hakkında olduğunuzu yazıyoruz ve enter a tıklıyoruz.

Çıkan seçenekde eklentimizde UI işlevi kullanmak istiyorsak hangisini kullanacağımızı soruyor. Browser ı seçerek devam ediyorum no yu seçerek ui işlevi eklemeyebilir yada page i deneyebilirsiniz.

Content Scripts  i seçerek devam ediyorum daha sonra diğerlerinin ne işe yaradıklarına değineceğiz.

Eklentinin içermesini istediğimiz izinleri belirliyoruz. Örneği aktif sekmenin adresine ulaşabilmek için tabs yani sekmeleri izinli hale getirmemiz gerek.

Enter a tıkladığınızda eklenti dosyaları oluşturulmuş olacak.

Şimdi ilk olarak grunt ı ve diğer gerekli modülleri indiriyoruz.

npm install --save

Ve şimdi grunt ile build işlemini gerçekleştiriyoruz.

grunt build

Eklenti dosyalarımız başarılı bir şekilde hazırlandığına göre şimdi eklentimizin kurulumuna geçebiliriz.

Google Chrome u açıyoruz. chrome://extensions/ sayfasını açıyoruz ve geliştirici modunu aktif hale getiriyoruz. Bunu yapmamızın nedeni paketlenmemiş eklentileri tarayıcımıza kurabilmek.

Eklentinin oluşturulduğu klasörden app klasörünü seçiyoruz. Ana eklenti dosyalarımız bu klasörde.

Klasörü seçip aça tıkladığımızda eklentimiz kurulmuş olacak.

Eklenti ikonları kısmında ikonunu görebileceğiniz eklentiye tıklayarak 'Allo 'Allo! yazısını görebilirsiniz.

'Allo 'Allo! nun ne olduğunu bende merak ediyordum BBC de 1982 ve 92 arasında yayınlanan bir sitcom programıymış. https://en.wikipedia.org/wiki/%27Allo_%27Allo!

İlerleyen derslerimizde sekmelere erişim,sayfalara javascript ve css kodları dahil etme gibi konular ile devam edeceğiz. İlerleyen derslerde görüşmek üzere.