5 Mart 2016 Cumartesi

Chrome Eklenti ile Sayfa İçeriğine Erişim

Chrome bir çoğumuzun kullandığı hemen her konuda eklenti desteğine sahip bir tarayıcı.
Chrome Extensions olarak geçen Chrome eklentileri de aynı bir web sayfası gibi js, json, css ve html kullanılarak yazılıyor. Bir arayüze ihtiyacınız yoksa sadece json ve javascript de yeterli olacaktır.
Temel olarak Chrome’a eklenti yazmak için 2 şeye ihtiyacımız var. Birisi Chrome diğeri de bir metin / kod editörü.
Ben bu yazı da komple eklenti yazmayı değil sadece sayfa içeriğine müdahale etmeyi anlatacağım için  chrome eklentileriyle ilgili detaylı bilgiyi buradan alabilirsiniz.
Chrome’a eklenti hazırlarken ilk olarak manifest.json adında bir json dosyası oluşturmak gerekiyor.
Bu dosya eklenti ile ilgili temel bilgi ve ayarlamaları içerecek.
Temel Ayarlamalar hakkında bilgi vermek gerekirse :
Name : Eklentinin Adı
Version : Eklentinizin Versiyonu
Manifest_Version : Kullanılan Manifest Versiyonu
Description : Eklenti Açıklaması, uzantılar bölümünde eklentinin altında yazan bölüm
Browser_Action : Tarayıcıyla ilgili Eklenti ayarlarının olduğu bölüm, eklenti ikonu gibi
Content_Scripts : Eklentinin kod dosyalarının tanımlandığı ya da direkt olarak kod yazılabilen bölüm

Sayfa içeriğine müdahele edebilmek için yani mevcut içerik üzerinde düzenleme ve ekleme yapabilmek için manifest.json dosyası içerisinde Content_Scripts bölümüne bazı eklemeler yapmamız gerekiyor.
Matches : Eklentinin hangi sayfalarda devreye gireceği. Sayfa adını yazarken * kullanarak eklentinin çalışma alanını genişletebiliriz. Örneğin :
http://www.google.com/*  :  Eklenti www.google.com/ ile başlayan sayfalarda çalışır.
*://www.google.com/*  : Eklenti www.google.com/ ile başlayan sayfaların http, https, ftp kısacası bütün sürümlerinde çalışır.
*://*.google.com/*  : Eklenti google.com ‘un bütün sayfalarında çalışır.
*: Eklenti bütün sayfalarda çalışır.
Js : Javascript kodlarının olduğu bölüm. Buraya adı girilen dosyalardaki kodlar eklenti devreye girdiğinde çalışır. Chrome eklentisi yazarken jquery kullanmak istiyorsanız jquery’yi eklenti klasörünün içine attıktan sonra buraya eklemeniz yeterli olacaktır.
Run_at : Matches bölümünden ayarladığınız sayfalarda eklentinin ne zaman devreye gireceğini ayarlamak için kullanılır. “document_start”, “document_end”, “document_idle” değerlerini alabilir. Varsayılan olarak “document_idle” dir.

Bu kadar şeyi yazdık da sayfa içeriğine nasıl müdahale edeceğiz ?
Manifest dosyasında bu ayarlamaları yaptıktan sonra js bölümüne yazdığınız her kod zaten sayfa içinde çalıştırılacaktır. Örnek olarak manifest dosyasında js bölümünde kod.js adında bir dosya tanımlamış olalım :
Bu şekilde bir kod eklentinin devreye girdiği her sayfanın arkaplanını siyah yapacaktır.
Jquery kütüphanesini eklerseniz jquery ile eklenti yazabilirsiniz.
Sonuç : Chrome Eklentisinde sayfaya nasıl kod ekleneceğini anlatmaya çalıştım. Pek anlaşılır bir yazı olmadığını ben de fark ettim, anlamadığınız noktaları yorum olarak yazarsanız açıklamaya çalışırım.