Mimariye genel bakış

Uzantılar, Google Chrome tarama deneyimini özelleştiren ve web platformunda kullanılan HTML, CSS, JavaScript, resimler ve diğer dosyaların bulunduğu sıkıştırılmış paketlerdir. Uzantılar, web teknolojisi kullanılarak oluşturulur ve tarayıcının açık web'e sağladığı API'leri kullanabilir.

Uzantılar, çok çeşitli işlevsel olanaklar sunar. Kullanıcıların gördüğü ve etkileşimde bulunduğu web içeriklerini değiştirebilir veya tarayıcının davranışını genişletip değiştirebilirler.

Uzantılar, Chrome tarayıcıyı en kişiselleştirilmiş tarayıcı haline getirmenin kapısıdır.

Genişletme dosyaları

Uzantılar, dosya türleri ve dizin miktarı bakımından farklılık gösterse de hepsinde [manifest][docs-manifest] bulunması gerekir. Bazı temel ancak faydalı uzantılar yalnızca manifest ve araç çubuğu simgesinden oluşabilir.

manifest.json adlı manifest dosyası, tarayıcıya uzantıyla ilgili bilgiler verir. Örneğin, en önemli dosyalar ve uzantının kullanabileceği özellikler.

{
  "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ı hangi uzantıların yüklendiği konusunda bilgilendirir. Çoğu kullanıcı, simgeyi tıklayarak pop-up kullanan bir uzantıyla etkileşime girer.

Bu Google Mail Checker uzantısı, tarayıcı işlemi kullanır:

Google Mail Checker uzantısının ekran görüntüsü

Bu Mappy uzantısı, sayfa işlemi ve içerik komut dosyası kullanır:

Mappy uzantısının ekran görüntüsü

Dosyalara referans verme

Uzantı dosyalarına, normal bir HTML sayfasındaki dosyalar gibi göreli URL kullanılarak başvurulabilir.

<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ı sistemi tarafından her uzantı için oluşturulan benzersiz bir tanımlayıcıdır. Yüklenen tüm uzantıların kimliklerini chrome://extensions URL'sine giderek görüntüleyebilirsiniz. PATH_TO_FILE, dosyanın uzantının üst klasöründeki konumudur ve göreli URL ile eşleşir.

Paketlenmemiş bir uzantı üzerinde çalışırken uzantı kimliği değişebilir. Daha net bir ifadeyle, paketlenmemiş bir uzantının kimliği, uzantı farklı bir dizinden yüklendiğinde 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 sabit kodlanmasını önlemek için chrome.runtime.getURL() yöntemini kullanabilir.

Mimari

Uzantıların mimarisi işlevselliğine bağlıdır ancak birçok sağlam 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ı etkinliklerinin dinleyicilerini içerir. Bir etkinlik tetiklenene kadar pasif kalır, ardından talimat verilen mantığı uygular. Etkili bir arka plan komut dosyası yalnızca gerektiğinde yüklenir ve boşta kaldığında kaldırılır.

Kullanıcı arayüzü öğeleri

Uzantıların kullanıcı arayüzü, amaca uygun ve minimal olmalıdır. Kullanıcı arayüzü, göz atma deneyimini dikkat dağıtmadan özelleştirmeli veya geliştirmelidir. Çoğu uzantıda browser action veya page action bulunur ancak bağlam menüleri, omnibox kullanımı veya klavye kısayolu oluşturma gibi başka kullanıcı arayüzü biçimleri de içerebilir.

Pop-up gibi uzantı kullanıcı arayüzü sayfaları, JavaScript mantığı içeren normal HTML sayfaları içerebilir. Uzantılar, uzantıda bulunan ek HTML dosyalarını göstermek için tabs.create veya window.open() işlevini de çağırabilir.

Sayfa işlemi ve pop-up kullanan bir uzantı, pop-up'ın kullanıcılar tarafından kullanılabilir olduğu zamanlarla ilgili kuralları arka plan komut dosyasında ayarlamak için declarative content API'sini kullanabilir. Koşullar karşılandığında arka plan komut dosyası, simgesinin kullanıcılar tarafından tıklanabilir olması için pop-up ile iletişim kurar.

Pop-up gösteren bir sayfa işlemi içeren tarayıcı penceresi

İçerik komut dosyaları

Web sayfalarını okuyan veya web sayfalarına yazan uzantılar içerik komut dosyası kullanır. İçerik komut dosyası, tarayıcıya yüklenen bir sayfanın bağlamlarında yürütülen 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.

Sayfa işlemi ve içerik komut dosyası içeren bir tarayıcı penceresi

İçerik komut dosyaları, mesaj alışverişi yaparak ve storage API'yi kullanarak değerleri depolayarak üst uzantılarıyla iletişim kurabilir.

İçerik komut dosyası ile üst uzantı arasındaki iletişim yolunu gösterir.

Seçenekler sayfası

Uzantılar, kullanıcıların Chrome tarayıcıyı özelleştirmesine olanak tanır. Seçenekler sayfası ise uzantının özelleştirilmesini sağlar. Seçenekler, özellikleri etkinleştirmek ve kullanıcıların ihtiyaçlarına uygun işlevleri 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 sağlayan uzantıya özel API'leri de kullanabilir. Uzantılar ve web sayfaları, URL açmak için standart window.open() yöntemine erişebilir. Ancak uzantılar, Chrome API'deki tabs.create yöntemini kullanarak URL'nin hangi pencerede gösterileceğini belirleyebilir.

Eşzamansız ve eşzamanlı yöntemler

Çoğu Chrome API yöntemi eşzamansızdır: işlemin tamamlanmasını beklemeden hemen sonuç döndürür. Bir uzantının eşzamansız bir işlemin sonucunu bilmesi gerekiyorsa yönteme bir geri çağırma işlevi iletebilir. Geri çağırma, yöntem döndükten sonra, hatta çok daha sonra yürütülür.

Uzantının, kullanıcının şu anda seçili sekmesini yeni bir URL'ye yönlendirmesi gerekiyorsa mevcut sekmenin kimliğini alması ve ardından bu sekmenin adresini yeni URL ile güncellemesi gerekir.

tabs.query yöntemi senkronize olsaydı aşağıdaki gibi görünebilirdi.

//THIS CODE DOESN'T WORK
var tab = chrome.tabs.query({'active': true}); //WRONG!!!
chrome.tabs.update(tab.id, {url:newUrl});
someOtherFunction();

Bu yaklaşım, query() eşzamansız olduğu için başarısız olur. İşin tamamlanmasını beklemeden geri döner ve değer döndürmez. Geri çağırma parametresi imzasında mevcutsa yöntem eşzamansız olur.

// Signature for an asynchronous method
chrome.tabs.query(object queryInfo, function callback)

Uzantının bir sekmeyi doğru şekilde sorgulaması ve URL'sini güncellemesi için 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ülür ancak bu yalnızca şu anda seçili sekme hakkında bilgi mevcut olduğunda gerçekleşir. Bu işlem, query() döndükten bir süre sonra gerçekleşir. update() eşzamansız olmasına rağmen uzantı, güncelleme sonuçlarıyla herhangi bir işlem yapmadığından kodda geri çağırma parametresi kullanılmaz.

// Synchronous methods have no callback option and returns a type of string
string chrome.runtime.getURL()

Bu yöntem, URL'yi eşzamanlı olarak string olarak döndürür ve başka eşzamansız işlem yapmaz.

Diğer ayrıntılar

Daha fazla bilgi için Chrome API referans dokümanlarını inceleyin ve aşağıdaki videoyu izleyin.

Sayfalar arasındaki 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 ilk sayfa, diğer sayfalardaki işlevleri çağırabilir ve DOM'larını değiştirebilir. Ayrıca, uzantının tüm bileşenleri storage API kullanılarak depolanan değerlere erişebilir ve mesaj iletme yoluyla iletişim kurabilir.

Veri tasarrufu ve gizli mod

Uzantılar, storage API'sini , HTML5 web storage API'sini kullanarak veya veri kaydedilmesine neden olan sunucu istekleri göndererek veri kaydedebilir. Uzantının bir şeyi kaydetmesi gerektiğinde öncelikle bunun gizli pencereden olup olmadığını kontrol edin. Uzantılar varsayılan olarak gizli pencerelerde çalışmaz.

Gizli mod, pencerenin iz bırakmayacağını garanti eder. Uzantılar, gizli pencerelerdeki verilerle çalışırken bu sözü tutmalıdır. Bir uzantı normalde tarama geçmişini kaydediyorsa gizli pencerelerdeki geçmişi kaydetmeyin. Ancak uzantılar, gizli olsun veya olmasın tüm pencerelerdeki ayar tercihlerini saklayabilir.

Bir pencerenin gizli modda olup olmadığını algılamak 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

Geliştiriciler, genel bakışı okuyup Başlangıç eğitimini tamamladıktan sonra kendi uzantılarını yazmaya başlayabilir. Aşağıdaki kaynaklarla özel Chrome dünyasına daha yakından göz atın.