Chrome Extension Geliştirirken Karşılaştığım 6 Sorun ve Çözümleri

Merhaba, bu yazımda Google Chrome’a extension yazarken karşılaştığım sorunlar ve bunları nasıl aştığımdan bahsedeceğim. Sıfırdan geliştirmeye başlayıp, Google Store’a göndermeye kadar geçen süreçte yaşanılabilecek durumları içerecek.

Yazmaya başladıktan sonra, aklıma gelen her soruyu — takıldığım her noktayı ekledim ve bulduğum cevapları da açıklamaya çalışacağım.

Aynı durumlarla karşılaştığınızda size zaman kazandırmasını umuyorum. Hadi başlayalım 🆙

1. Sıfırdan başlıyorum, kılavuz olarak ne kullanayım? Kaynak?

• Google’ın kendi dokümantasyonu oldukça iyi, ilk sıraya bunu ekleyebilirim. Google Chrome Doc
• İkinci sıraya ise, takip ettiğim şu blog yazısını önerebilirim.

2. background.js ve content.js arasındaki iletişimi nasıl sağlarım?

• Tarayıcı üzerinde bir işlem gerçekleştiği zaman(buton click gibi) background.js tetiklenir.
• Chrome API kullanılarak content.js’e bir mesaj gönderilir.
• Content.js’de işlenen veri tekrardan background.js’e response olarak döndürülür.
• Her ikisi arasında bu şekilde bir bilgi iletişim sistemi mevcuttur.

3. İki script arasındaki veri iletişimini başka nasıl sağlayabilirim?

• Chrome storage kullanılabilir.
• Elimizde bulunan bir değer background.js’de storage’e yüklenir.
• Daha sonrasında content.js’de storage’den yüklediğimiz key bilgisi ile get yapılarak değere ulaşabiliriz.
• Burada işlemleri yaptıktan sonra storage’i temizlemeyi unutmamamız gerekiyor.

4. DOM Elementinin değerini değiştirdim, fakat arkada yine boş geliyor? Sorun nedir?

Extension’daki content.js scriptinin çalıştığı sayfa üzerindeki bir textarea’nın değerini değiştirdiğim zaman bu sorunu yaşamıştım.

document.getElementsByTagName(‘textarea’).value = “Chrome Extension”

Bu kodu eklediğimizde ön tarafta değer değişiyor, fakat siz o değeri uygulamanızda işlemek istediğinizde boş dönecektir. Bu yüzden değeri atadıktan sonra ek olarak;

document.getElementsByTagName(‘textarea’).dispatchEvent(new Event(‘input’));

satırını da eklememiz gerekiyor. Bu adım özellikle çok fazla zamanımı alıp uğraştırmıştı😠

5. Manifest.json’ı nasıl yönetebilirim? İzinlerin önemi nedir?

• Bu dosya bizim extension hakkındaki version, isim, logo bilgilerini tutar.
• Bunların yanında izinlerin de yönetildiği yerdir.
• Content.js ve background.js scriptlerimizin hangi sayfalara erişeceğini bu dosyada yönetiriz.
• permissions kısmında ise extension’da ne gibi yetkiler olacak, bunun yönetimini yaparız.
• Burada dikkat etmemiz gereken, her izni minimumda tutmak. Yani scriptlerimizin çalışacağı sayfalar belliyse sadece o sayfalar için izin istemeliyiz.
• Extension’da olmayacak bir feature için permission kısmında fazladan bir yetki eklemememiz gerekir.

6. Her şey hazır hadi markete gönderelim, nasıl yapıyoruz?

• Öncelikle manifest.json’daki izinlerimizin minimumda olduğundan emin olmamız gerekiyor.
• Google, her izni hangi amaçla istediğimizi soracak bize. Tatmin edici bir açıklamamızın olması gerekiyor.
• Store’a gönderme işleminde girdiğimiz bilgileri tam ve eksiksiz girmemiz gerekiyor.
• Çünkü açıklaması yetersiz bir bilgiyle gönderdiğimiz extension Store’a kabul edilmiyor.
• İzinler minimum ve açıklamalarımız yeterli ise extension store’a sorunsuz bir şekilde gönderilebilir.

“Bir extension nasıl yazılır” ile ilgili bulunabilecek birçok yazı mevcut. Bunlardan ben de çok faydalandım. Fakat benim bu süreçte yaptığım hatalardan, öğrenilen bilgilerden çıkardığım tecrübelerimi aktarmak istedim. Bunları önceden bilmek, özellikle en son adım olan store’a gönderirken size zaman kazandıracaktır.