Mimariye genel bakış

Uzantılar; HTML, CSS, JavaScript, resim ve web'de kullanılan diğer dosyaların sıkıştırılmış dosya paketleridir özel bir platformdur. Uzantılar web kullanılarak oluşturulur teknolojisi ve tarayıcının açık web'de sağladığı API'lerin aynılarını kullanabilir.

Uzantılar çok çeşitli işlevsel olasılıklar sunar. Kullanıcıların gördüğü web içeriğini değiştirebilir Tarayıcının kendisiyle etkileşimde bulunma veya çalışma biçimini genişletme ve değiştirme.

Uzantılar, Chrome tarayıcıyı en kişiselleştirilmiş tarayıcı haline getiren bir tarayıcıdır.

Uzantı dosyaları

Uzantılar dosya türleri ve dizin miktarı açısından farklılık gösterir, ancak bunların hepsinde bir [manifest][doküman-manifest]. Bazı temel ancak yararlı uzantılar, yalnızca manifest ve simgesini tıklayın.

manifest.json başlıklı manifest dosyası, tarayıcıya uzantı hakkında bilgi verir. Örneğin: özellik olarak kullanabilirsiniz.

{
  "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 bir simgesi olmalıdır. Araç çubuğu simgeleri kolay erişime olanak tanır ve Kullanıcıları hangi uzantıların yüklü olduğundan haberdar etme Çoğu kullanıcı Kullanıcı, simgeyi tıklayarak bir pop-up kullandığında.

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

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

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

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

Dosyalara başvuruda bulunma

Bir uzantının dosyaları, normal bir HTML'deki dosyalar gibi göreli bir URL kullanılarak anılabilir sayfasını ziyaret edin.

<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şturulur. Yüklenen tüm uzantıların kimlikleri URL'ye gidilerek görüntülenebilir chrome://extensions adresini ziyaret edin. PATH_TO_FILE, uzantının üst klasörü; göreli URL ile eşleşir.

Paketlenmemiş bir uzantı üzerinde çalışırken uzantı kimliği değişebilir. Daha açık belirtmek gerekirse, paketlenmemiş uzantı, uzantı farklı bir dizinden yüklenirse değişir; kimlik Uzantı paketlendiğinde tekrar değişir. Mutlak URL'ye dayanan bir uzantının kodu sırasında kimliğin koda gömülmesini önlemek için chrome.runtime.getURL() yöntemini kullanabilir. bahsedeceğim.

Mimari

Uzantının mimarisi işlevselliğine bağlıdır, ancak birçok sağlam uzantı işlevselliğe bağlıdır birkaç bileşen içerir:

Arka plan komut dosyası

background komut dosyası, uzantının etkinlik işleyicisidir; dinleyicileri içerir ve uzantı için önemli olan tarayıcı etkinliklerini izleyin. Bir etkinlik tetiklenene kadar hareketsiz kalır ve ardından belirtilen mantığı gerçekleştirir. Etkili bir arka plan komut dosyası yalnızca gerekli olduğunda yüklenir ve boşta kaldığında kaldırılır.

kullanıcı arayüzü öğeleri

Uzantının kullanıcı arayüzü amaca yönelik ve minimum düzeyde olmalıdır. Kullanıcı arayüzü, daha iyi bir gezinme deneyimi sağlar. Çoğu uzantının tarayıcısı vardır eylem veya sayfa işlemi içerir, ancak diğer kullanıcı arayüzü, bağlam menüleri, çok amaçlı adres çubuğunun kullanımı veya bir klavye kısayolu.

Pop-up gibi uzantı kullanıcı arayüzü sayfaları, JavaScript içeren normal HTML sayfaları içerebilir. mantığıyla başlayalım. Uzantılar, görüntülemek için tabs.create veya window.open() komutunu da çağırabilir ek HTML dosyalarından yararlanabilirsiniz.

Sayfa işlemi ve pop-up kullanan uzantılar, bildirim content API'si aracılığıyla arka plan komut dosyasında pop-up'ın olanak tanıyor. Koşullar karşılandığında arka plan komut dosyası pop-up ile iletişim kurar simgesini tıklayın.

Pop-up görüntüleyen 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. İlgili içeriği oluşturmak için kullanılan içerik komut dosyası, aynı hızdaki komut dosyasını kullanarak tarayıcı. İçerik komut dosyaları, tarayıcının ziyaret ettiği web sayfalarının DOM'sini okur ve değiştirir.

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

İçerik komut dosyaları, mesaj alışverişinde bulunarak ana uzantılarıyla iletişim kurabilir. ve değerleri storage API kullanarak depolama.

İç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ştirmelerine olanak tanıması gibi, seçenekler sayfası da uzantının özelleştirilmesini sağlar. Seçenekler, özellikleri etkinleştirmek ve kullanıcıların şunları yapmasına izin vermek için kullanılabilir: hangi işlevin ihtiyaçlarına uygun olduğunu seçmeye çalışın.

Chrome API'lerini kullanma

Uzantılar, web sayfalarıyla aynı API'lara erişmenin yanı sıra, Tarayıcı ile sıkı entegrasyon oluşturan uzantıya özgü API'ler. Uzantılar ve Web sayfaları da bir URL'yi açmak için standart window.open() yöntemine erişebilir ancak uzantılar Chrome API'yi kullanarak bu URL'nin hangi pencerede görüntülenmesi gerektiğini belirtin tabs.create yöntemini kullanın.

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

Chrome API yöntemlerinin çoğu eşzamansızdır: İşlem beklenmeden hemen geri dönerler. tıklayın. Bir uzantı, eşzamansız bir işlemin sonucunu bilmesi gerekiyorsa geri çağırma işlevini yönteme ekler. Geri çağırma, yöntemi döndürür.

Uzantının, kullanıcının şu anda seçili olan sekmesinde yeni bir URL'ye gitmesi gerekiyorsa geçerli sekmenin kimliğini alabilir ve ardından söz konusu sekmenin adresini yeni URL ile güncelleyebilirsiniz.

tabs.query yöntemi eşzamanlıysa 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ğundan bu yaklaşım başarısız olacaktır. Çalışmayı beklemeden geri dönüyor vardır ve bir değer döndürmez. Geri çağırma parametresi şu olduğunda bir yöntem eşzamansız olur kullanılabilir.

// 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ı, geri çağırma parametresini kullanmalıdır.

//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. Geri çağırma işlevi çağrısı, query() için belirtilir ve ardından 2. satırı yürütür, ancak kullanılabilir durumda olduğundan emin olun. Bu işlem, query() ürünü iade edildikten bir süre sonra gerçekleşir. Her ne kadar update() eşzamansız olduğunda kod, uzantı çalışmadığı için geri çağırma parametresi kullanmaz herhangi bir şey yok.

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

Bu yöntem, URL'yi eşzamanlı olarak bir string olarak 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 dokümanlarını inceleyin ve aşağıdaki adımları izleyin videosunu izleyin.

Sayfalar arasındaki iletişim

Bir uzantıdaki farklı bileşenlerin genellikle birbiriyle iletişim kurması gerekir. Farklı HTML sayfaları getViews() gibi chrome.extension yöntemlerini kullanarak birbirlerini bulabilir ve getBackgroundPage(). Bir sayfa diğer uzantı sayfalarına referans içeriyorsa ilk uzantı, diğer sayfalardaki işlevleri çağırabilir ve DOM'lerini değiştirebilir. Buna ek olarak, uzantısı, storage API'yi kullanarak depolanan değerlere erişebilir ve mesaj iletme.

Veri tasarrufu ve gizli mod

Uzantılar, verileri depolama alanı API'si olan HTML5 web depolama alanını kullanarak kaydedebilir. API kullanarak ya da verilerin kaydedilmesiyle sonuçlanan sunucu isteklerinde bulunarak. Uzantı bir şey kaydetmesi gerekiyorsa, öncelikle içeriğin gizli bir pencereden olup olmadığını düşünün. Uzantılar, varsayılan olarak gizli pencerelerde çalışmaz.

Gizli mod, pencereden hiçbir parça bırakılmayacağını taahhüt eder. Veri analisti verileri uzantılar söz konusu olduğunda bu vaadi yerine getirmelidir. Bir uzantı normalde göz atmayı kaydediyorsa gizli pencerelerdeki geçmişi kaydetme. Ancak uzantılar, ayarları gizli modda olsun ya da olmasın, herhangi bir pencereden tercihlerinizi değiştirebilirsiniz.

Bir pencerenin gizli modda olup olmadığını belirlemek için ilgili pencerenin incognito özelliğini kontrol edin. tabs.Tab veya windows.Window nesnesini tıklayın.

function saveTabData(tab) {
  if (tab.incognito) {
    return;
  } else {
    chrome.storage.local.set({data: tab.url});
  }
}

Bir sonraki adımı atın

Genel bakışı okuyup Başlangıç eğitimini tamamladıktan sonra geliştiricilerin kendi uzantılarını yazmaya hazır olması gerekir. Dünyayı daha yakından tanıyın özel Chrome'u seçin.