Uzantılar, web platformunda kullanılan ve Google Chrome'a göz atma deneyimini özelleştiren sıkıştırılmış HTML, CSS, JavaScript, resim ve diğer dosya paketleridir. Uzantılar, web teknolojisi kullanılarak oluşturulur ve tarayıcının açık web'e sağladığı API'lerin aynılarını kullanabilir.
Uzantılar çok çeşitli işlevsel olanaklara sahiptir. Kullanıcıların gördüğü web içeriğini değiştirebilir, etkileşimde bulunabilir veya tarayıcının davranışını genişletebilir ve değiştirebilirler.
Uzantıları, Chrome tarayıcıyı en kişiselleştirilmiş tarayıcı haline getiren bir ağ geçidi olarak düşünün.
Uzantı dosyaları
Uzantılar dosya türleri ve dizin miktarı açısından farklılık gösterir, ancak tüm uzantıların bir [manifest][doküman manifesti] içermesi gerekir. Bazı temel ama yararlı olan uzantılar yalnızca manifestten ve araç çubuğu simgesinden oluşabilir.
manifest.json başlıklı manifest dosyası, tarayıcıya uzantı hakkında bilgiler (ör. en önemli dosyalar ve uzantının kullanabileceği özellikler) verir.
{
"name": "My Extension",
"version": "2.1",
"description": "Gets information from Google.",
"icons": {
"128": "icon_16.png",
"128": "icon_32.png",
"128": "icon_48.png",
"128": "icon_128.png"
},
"background": {
"persistent": false,
"scripts": ["background_script.js"]
},
"permissions": ["https://*.google.com/", "activeTab"],
"browser_action": {
"default_icon": "icon_16.png",
"default_popup": "popup.html"
}
}
Uzantıların, tarayıcı araç çubuğunda bulunan bir simgesi olmalıdır. Araç çubuğu simgeleri, kolay erişim sağlar ve kullanıcıların hangi uzantıların yüklendiğini bilmelerini sağlar. Çoğu kullanıcı, simgeyi tıklayarak pop-up kullanan bir uzantıyla etkileşimde bulunur.
Bu Google Mail Checker uzantısı bir tarayıcı işlemi kullanır:
Bu Mappy uzantısı bir sayfa işlemi ve content script kullanır:
Dosyalara atıfta bulunma
Bir uzantının dosyalarına, normal bir HTML sayfasındaki dosyalar gibi göreli bir URL kullanılarak referans verilebilir.
<img src="images/my_image.png">
Ayrıca, her dosyaya mutlak URL kullanılarak da erişilebilir.
chrome-extension://EXTENSION_ID/PATH_TO_FILE
Mutlak URL'de EXTENSION_ID, uzantı sisteminin her bir uzantı için oluşturduğu benzersiz bir tanımlayıcıdır. Yüklenen tüm uzantıların kimlikleri chrome://extensions URL'sine gidilerek görüntülenebilir. PATH_TO_FILE, dosyanın uzantının üst klasörü altındaki konumudur ve göreli URL ile eşleşir.
Paketlenmemiş bir uzantı üzerinde çalışırken uzantı kimliği değişebilir. Özellikle, paketlenmemiş bir uzantının kimliği, uzantı farklı bir dizinden yüklenirse değişir; uzantı paketlendiğinde kimlik tekrar değişir. Bir uzantının kodu mutlak URL'ye dayanıyorsa geliştirme sırasında kimliğin kodunu gömmemek için chrome.runtime.getURL() yöntemini kullanabilir.
Mimari
Bir uzantının mimarisi işlevselliğine bağlıdır, ancak birçok güçlü uzantı birden fazla bileşen içerir:
Arka plan komut dosyası
Arka plan komut dosyası, uzantının etkinlik işleyicisidir; uzantı için önemli olan tarayıcı etkinliklerine ait işleyicileri içerir. Bir etkinlik tetiklenene kadar hareketsiz kalır ve belirlenen mantığı uygular. Etkili bir arka plan komut dosyası, yalnızca gerektiğinde yüklenir ve boşta kaldığında boşaltılır.
Kullanıcı arayüzü öğeleri
Uzantının kullanıcı arayüzü amaca yönelik ve minimal olmalıdır. Kullanıcı arayüzü, göz atma deneyimini dikkati dağıtmadan özelleştirmeli veya iyileştirmelidir. Çoğu uzantı bir tarayıcı işlemi veya sayfa işlemi içerir, ancak bağlam menüleri, çok amaçlı adres çubuğu kullanımı veya klavye kısayolu oluşturma gibi başka kullanıcı arayüzü biçimlerini içerebilir.
Pop-up gibi uzantı kullanıcı arayüzü sayfaları, JavaScript mantığına sahip normal HTML sayfaları içerebilir. Uzantılar, uzantıda bulunan ek HTML dosyalarını görüntülemek için tabs.create veya window.open()'yi de çağırabilir.
Sayfa işlemi ve pop-up kullanan uzantılar, declarative API'yi kullanarak arka plan komut dosyasında pop-up'ın kullanıcılara sunulacağı durumlar için kurallar belirleyebilir. Koşullar karşılandığında arka plan komut dosyası, pop-up ile iletişim kurarak simgesini kullanıcılar için tıklanabilir hale getirir.
İçerik komut dosyaları
Web sayfalarını okuyan veya yazan uzantılar bir içerik komut dosyası kullanır. İçerik komut dosyası, tarayıcıya yüklenmiş bir sayfanın bağlamında çalışan JavaScript'i içerir. İçerik komut dosyaları, tarayıcının ziyaret ettiği web sayfalarının DOM'unu okur ve değiştirir.
İçerik komut dosyaları, mesajları gönderip storage API'yi kullanarak değerleri depolayarak üst uzantılarıyla iletişim kurabilir.
Seçenekler sayfası
Uzantılar, kullanıcıların Chrome tarayıcıyı özelleştirmesine izin verdiği gibi, seçenekler sayfası da uzantının özelleştirilmesine olanak tanır. Seçenekler, özellikleri etkinleştirmek ve kullanıcıların ihtiyaçlarıyla hangi işlevin alakalı olduğunu seçmelerine olanak tanımak için kullanılabilir.
Chrome API'lerini kullanma
Uzantılar, web sayfalarıyla aynı API'lere erişmenin yanı sıra tarayıcıyla sıkı entegrasyon oluşturan uzantıya özel API'ler de kullanabilir. Hem uzantılar hem de web sayfaları bir URL'yi açmak için standart window.open() yöntemine erişebilir ancak uzantılar, bunun yerine Chrome API'si tabs.create yöntemini kullanarak ilgili URL'nin hangi pencerede görüntüleneceğini belirtebilir.
Eşzamansız ve eşzamanlı yöntemler
Çoğu Chrome API yöntemi eşzamansızdır: işlemin tamamlanmasını beklemeden hemen geri dönerler. Bir uzantının eşzamansız bir işlemin sonucunu bilmesi gerekiyorsa, yönteme bir geri çağırma işlevi aktarabilir. Geri çağırma daha sonra veya muhtemelen çok daha sonra, yöntem döndürüldükten sonra yürütülür.
Uzantının, kullanıcının seçili sekmesinde yeni bir URL'ye gitmesi gerekiyorsa mevcut sekmenin kimliğini alması ve ardından bu sekmenin adresini yeni URL olarak güncellemesi gerekir.
tabs.query yöntemi eşzamanlı ise aşağıdaki gibi görünebilir.
//THIS CODE DOESN'T WORK
var tab = chrome.tabs.query({'active': true}); //WRONG!!!
chrome.tabs.update(tab.id, {url:newUrl});
someOtherFunction();
query() eşzamansız olduğu için bu yaklaşım başarısız olur. İşin tamamlanmasını beklemeden geri döner ve bir değer döndürmez. Geri çağırma parametresi imzasında bulunuyorsa yöntem eşzamansızdır.
// Signature for an asynchronous method
chrome.tabs.query(object queryInfo, function callback)
Bir sekmeyi doğru şekilde sorgulamak ve URL'sini güncellemek için uzantının geri çağırma parametresini kullanması gerekir.
//THIS CODE WORKS
chrome.tabs.query({'active': true}, function(tabs) {
chrome.tabs.update(tabs[0].id, {url: newUrl});
});
someOtherFunction();
Yukarıdaki kodda, satırlar şu sırayla yürütülür: 1, 4, 2. query() için belirtilen geri çağırma işlevi çağrılır ve ardından 2. satırı yürütür. Ancak bu durumda, seçili sekmeyle ilgili bilgi sağlandıktan sonra. Bu, query() geri döndükten bir süre sonra gerçekleşir. update() eşzamansız olsa da uzantı, güncellemenin sonuçlarıyla ilgili hiçbir şey yapmadığından kod bir geri çağırma parametresi kullanmaz.
// Synchronous methods have no callback option and returns a type of string
string chrome.runtime.getURL()
Bu yöntem, URL'yi string olarak eşzamanlı şekilde döndürür ve başka bir eşzamansız çalışma gerçekleştirmez.
Diğer ayrıntılar
Daha fazla bilgi için Chrome API referans belgelerini inceleyin ve aşağıdaki videoyu izleyin.
Sayfalar arası iletişim
Bir uzantıdaki farklı bileşenlerin genellikle birbirleriyle iletişim kurması gerekir. Farklı HTML sayfaları, getViews() ve getBackgroundPage() gibi chrome.extension yöntemlerini kullanarak birbirini bulabilir. Bir sayfa diğer uzantı sayfalarına referans verdiğinde, ilki diğer sayfalarda işlevleri çağırabilir ve bunların DOM'lerini değiştirebilir. Ayrıca, uzantının tüm bileşenleri, storage API kullanılarak depolanan değerlere erişebilir ve mesaj iletme aracılığıyla iletişim kurabilir.
Veri tasarrufu ve gizli mod
Uzantılar, storage API'yi , HTML5 web depolama alanı API'sini kullanarak veya verilerin kaydedilmesine neden olan sunucu istekleri göndererek verileri kaydedebilir. Uzantının bir öğeyi kaydetmesi gerektiğinde, öncelikle bunun gizli bir pencereden olup olmadığını düşünün. Varsayılan olarak, uzantılar gizli pencerelerde çalışmaz.
Gizli mod, pencerede hiçbir parkur bırakmayacağına dair söz verir. Gizli pencerelerden alınan verilerle çalışırken, uzantılar bu sözü yerine getirmelidir. Bir uzantı normalde tarama geçmişini kaydediyorsa gizli pencerelerdeki geçmişi kaydetmeyin. Ancak uzantılar, gizli olsun veya olmasın herhangi bir pencereden ayar tercihlerini saklayabilir.
Bir pencerenin gizli modda olup olmadığını tespit etmek için ilgili tabs.Tab veya windows.Window nesnesinin incognito özelliğini kontrol edin.
function saveTabData(tab) {
if (tab.incognito) {
return;
} else {
chrome.storage.local.set({data: tab.url});
}
}
Bir sonraki adımı atın
Genel bakışı okuduktan ve Başlarken eğiticisini tamamladıktan sonra geliştiriciler kendi uzantılarını yazmaya hazır olmalıdır. Aşağıdaki kaynaklarla özel Chrome dünyasını daha ayrıntılı inceleyin.
- Uzantıda hata ayıklama için kullanabileceğiniz seçenekler hakkında daha fazla bilgiyi hata ayıklama eğiticisinde bulabilirsiniz.
- Chrome Uzantıları, açık web'de bulunanların ötesinde güçlü API'lere erişim sağlar. Chrome.* API belgelerinde her API adım adım açıklanmıştır.
- Uzantı geliştirmeye genel bakış, gelişmiş uzantı oluşturmayla ilgili belge parçalarına ait düzinelerce ek bağlantı içerir.