Chrome eklentisi ile Dosya işlemleri
Bu makalede sizlere Javascript ile chrome extension oluşturma yazımda, bahsettiğim dosya üzeriden okuma, yazma, güncelleme işlemlerini yapabileceğiniz bir Chrome eklentisi örneğini yapacağız. Yapacağımız çalışmanın, kod editörü ve oluşturacağımız dosyaların ne işe yaradıkları ile ilgili bilgiyi buradaki yazımda vermiştim. Teorik kısımları atlayacağımıza göre doğrudan uygulama sürecine girebiliriz.
Not: Yapacağımız uygulamaya Github hesabımdan ulaşabilirsiniz.
Adım 1: Oluşturmamız gereken dosyalar
1)manifest.json
2)popup.html
3)jquery-1.11.1.min.js Buradan ulaşabilirsiniz.
4)popup.js
Dediğim gibi bu dosyaların ne işe yaradığı önceki yazımda anlatmıştım.
Adım 2 : Eklenti Arayüzü
Bu adımda “popup.html” üzerinde çalışacağız. Yapacağımız eklentinin kullanıcıya bir arayüz sunduğu kısımdır. Lafı uzatmadan “popup.html” dosyasında basit bir, kullanıcıya dosya seçtirilen ve metin kutusunda düzenlendikten sonra kaydedip indirilebilen bir arayüz oluşturuyoruz.
Bu html dosyasında belli onclick olaylarına dikkat çekmek isterim. Buton eventlerinin çağırdığı fonksiyonlar bulunmaktadır. Bunların ne işe yaradıkları diğer adımları açıklayacağım.
Get Murat Karabulut’s stories in your inbox
Join Medium for free to get updates from this writer.
Adım 3: Dosya Fonksiyonları
Oluşturulan popup.html sayfasında bahsettiğim bazı Eventler bulunmaktadır. Bu Eventler bilgisayarınızdan metin dosyası seçmenize ve seçtiğiniz dosyayı okumanız için gereklidir. Şimdi tek tek bu fonksiyonların ne işe yaradığına birlikte bakacağız.
Burada popup.html sayfasında tıklanacak buttonların id değerlerine göre dinlenmektedir. Tıklanılmış button değerine göre gerekli fonksiyon çağırılıp işlem yapılmaktadır.
Bu fonksiyonlar..
Dosya Seç ( loadFileAsText())
Dosya kaydet ( saveFile() )
Sonuç olarak ..
Evet arkadaşlar basit bir eklenti üzerinden dosya okuma ve yazma işlemleri yaptık. Bu çalışmaların en temel amacı sizlere bu örnekler üzerinden kullanım fikri vermek ve yeni çalışmalara kaynak olabilmektir. Kaynak kodlarına github adresimden ulaşabilirsiniz. Eğer bu konuda eksikleriniz var ise önceki “Javascript ile chrome eklentisi oluşturma” yazımda anlatmıştım.
Vakit ayırdığınız için teşekkür ederim.
