Service Worker'larla etkinlikleri işleme

Uzantı hizmeti çalışanı kavramlarını kapsayan eğitim

Genel Bakış

Bu eğitimde, Chrome Uzantısı hizmet çalışanları tanıtılır. Bunun bir parçası olarak eğiticisinde, kullanıcıların Chrome API referansına hızlıca gitmesine olanak tanıyan bir uzantı derleyeceksiniz. sayfaları kontrol edebilirsiniz. Bu derslere katılarak:

• Hizmet çalışanınızı kaydedin ve modülleri içe aktarın.
• Uzantı hizmeti çalışanınızda hata ayıklayın.
• Durumu yönetme ve etkinlikleri işleme.
• Periyodik etkinlikleri tetikleyin.
• İçerik senaryolarıyla iletişim kurma.

Başlamadan önce

Bu kılavuzda, temel web geliştirme deneyiminiz olduğu varsayılır. Şunu incelemenizi öneririz: Uzantılar 101 ve Hello World uzantı geliştirmeyi deneyin.

Uzantıyı oluşturma

Uzantı dosyalarını saklamak için quick-api-reference adlı yeni bir dizin oluşturarak başlayın veya kaynak kodu GitHub örnekleri depomuzdan indirin.

1. Adım: Hizmet çalışanını kaydedin

Projenin kök dizininde manifest dosyasını oluşturun ve şu kodu ekleyin:

manifest.json:

{
  "manifest_version": 3,
  "name": "Open extension API reference",
  "version": "1.0.0",
  "icons": {
    "16": "images/icon-16.png",
    "128": "images/icon-128.png"
  },
  "background": {
    "service_worker": "service-worker.js"
  }
}

Uzantılar, hizmet çalışanlarını yalnızca tek bir JavaScript dosyası alan manifest'e kaydeder. Bir web sayfasında olduğu gibi navigator.serviceWorker.register() numarasını aramanız gerekmez.

Bir images klasörü oluşturup simgeleri bu klasöre indirin.

Manifest dosyasındaki uzantının meta verileri ve simgeleri hakkında daha fazla bilgi edinmek için Okuma süresi eğiticisinin ilk adımlarına göz atın.

2. Adım: Birden fazla Service Worker modülünü içe aktarın

Service Worker'ımızın iki özelliği vardır. Daha iyi sürdürülebilirlik sağlamak için her bir özelliği ayrı bir modülde uygulayacağız. Öncelikle, Service Worker'ı manifest dosyamızda ES Modülü olarak tanımlamamız gerekir. Bu modül, Service Worker'ımızdaki modülleri içe aktarmamıza olanak tanır.

manifest.json:

{
 "background": {
    "service_worker": "service-worker.js",
    "type": "module"
  },
}

service-worker.js dosyasını oluşturun ve iki modülü içe aktarın:

import './sw-omnibox.js';
import './sw-tips.js';

Bu dosyaları oluşturun ve her birine bir konsol günlüğü ekleyin.

console.log("sw-omnibox.js");

console.log("sw-tips.js");

Bir hizmet çalışanında birden fazla dosyayı içe aktarmanın diğer yollarını öğrenmek için Komut dosyalarını içe aktarma başlıklı makaleye bakın.

İsteğe bağlı: Hizmet çalışanında hata ayıklama

Service Worker günlüklerinin nasıl bulunacağını ve sonlandırıldığında nasıl bulunacağını açıklayacağım. İlk olarak Paketlenmemiş bir uzantı yükleme talimatlarını uygulayın.

30 saniye sonra "hizmet çalışanı (etkin değil)" mesajını görürsünüz Bu, hizmet çalışanının sonlandırıldığı anlamına gelir. "Hizmet çalışanı (etkin değil)" seçeneğini tıklayın bağlantısını tıklayın. Aşağıdaki animasyonda bu durum gösterilmektedir.

Service Worker'ı incelediğinizde cihazı uyandırdığınızı fark ettiniz mi? Service Worker, geliştirici araçlarında açıldığında etkin kalır. Service Worker'ınız sonlandırıldığında uzantınızın doğru şekilde davrandığından emin olmak için Geliştirici Araçları'nı kapatmayı unutmayın.

Şimdi, hataları nerede bulacağınızı öğrenmek için uzantıyı kaldırın. Bunu yapmanın bir yolu ".js" dosyasını silmektir service-worker.js dosyasındaki './sw-omnibox.js' içe aktarımından. Chrome, hizmet çalışanını kaydedemeyecek.

chrome://extensions sayfasına geri dönün ve uzantıyı yenileyin. İki hata görürsünüz:

Service worker registration failed. Status code: 3.

An unknown error occurred when fetching the script.

Uzantı hizmet çalışanında hata ayıklamanın diğer yolları için Uzantılarda hata ayıklama bölümüne göz atın.

4. Adım: Durumu başlatın

Chrome, ihtiyaç duyulmayan hizmet çalışanlarını kapatır. Service Worker oturumlarında durumu korumak için chrome.storage API'yi kullanırız. Depolama alanına erişim için manifest dosyasında izin istememiz gerekir:

manifest.json:

{
  ...
  "permissions": ["storage"],
}

Öncelikle, varsayılan önerileri depolama alanına kaydedin. runtime.onInstalled() etkinliğini dinleyerek uzantı ilk yüklendiğinde durumu başlatabiliriz:

sw-omnibox.js:

...
// Save default API suggestions
chrome.runtime.onInstalled.addListener(({ reason }) => {
  if (reason === 'install') {
    chrome.storage.local.set({
      apiSuggestions: ['tabs', 'storage', 'scripting']
    });
  }
});

Service Worker'lar window nesnesine doğrudan erişimi olmadığından Değerleri depolamak için window.localStorage. Ayrıca Service Worker'lar kısa ömürlü yürütme ortamlarıdır. bir kullanıcının tarayıcı oturumu sırasında sürekli olarak sonlandırılmasından dolayı, kullanabilirsiniz. Bunun yerine, verileri yerel makinede depolayan chrome.storage.local aracını kullanın.

Uzantı hizmeti çalışanlarına yönelik diğer depolama seçenekleri hakkında bilgi edinmek için Genel değişkenleri kullanmak yerine verileri koruma başlıklı makaleyi inceleyin.

5. adım: Etkinliklerinizi kaydedin

Tüm etkinlik işleyicilerin, Service Worker'ın global kapsamında statik olarak kayıtlı olması gerekir. Başka bir deyişle, etkinlik işleyiciler eşzamansız işlevler içine yerleştirilmemelidir. Bu şekilde Chrome, Service Worker'ın yeniden başlatılması durumunda tüm etkinlik işleyicilerin geri yüklenmesini sağlayabilir.

Bu örnekte chrome.omnibox API'yi kullanacağız ancak önce manifest dosyasında çok amaçlı adres çubuğu anahtar kelime tetikleyicisini açıklamamız gerekir:

manifest.json:

{
  ...
  "minimum_chrome_version": "102",
  "omnibox": {
    "keyword": "api"
  },
}

Şimdi, çok amaçlı adres çubuğu etkinlik işleyicilerini komut dosyasının en üst düzeyinde kaydedin. Kullanıcı adres çubuğuna çok amaçlı adres çubuğu anahtar kelimesini (api) ve ardından sekme ya da boşluğa girdiğinde Chrome, depolama alanındaki anahtar kelimelere dayalı bir öneri listesi görüntüler. Bu önerilerin doldurulmasından mevcut kullanıcı girişini ve suggestResult nesnesini alan onInputChanged() etkinliği sorumludur.

sw-omnibox.js:

...
const URL_CHROME_EXTENSIONS_DOC =
  'https://developer.chrome.com/docs/extensions/reference/';
const NUMBER_OF_PREVIOUS_SEARCHES = 4;

// Display the suggestions after user starts typing
chrome.omnibox.onInputChanged.addListener(async (input, suggest) => {
  await chrome.omnibox.setDefaultSuggestion({
    description: 'Enter a Chrome API or choose from past searches'
  });
  const { apiSuggestions } = await chrome.storage.local.get('apiSuggestions');
  const suggestions = apiSuggestions.map((api) => {
    return { content: api, description: `Open chrome.${api} API` };
  });
  suggest(suggestions);
});

Kullanıcı bir öneriyi seçtikten sonra onInputEntered() ilgili Chrome API referans sayfasını açar.

sw-omnibox.js:

...
// Open the reference page of the chosen API
chrome.omnibox.onInputEntered.addListener((input) => {
  chrome.tabs.create({ url: URL_CHROME_EXTENSIONS_DOC + input });
  // Save the latest keyword
  updateHistory(input);
});

updateHistory() işlevi, çok amaçlı adres çubuğu girişini alıp storage.local hedefine kaydeder. Bu şekilde, en son arama terimi daha sonra çok amaçlı adres çubuğu önerisi olarak kullanılabilir.

sw-omnibox.js:

...
async function updateHistory(input) {
  const { apiSuggestions } = await chrome.storage.local.get('apiSuggestions');
  apiSuggestions.unshift(input);
  apiSuggestions.splice(NUMBER_OF_PREVIOUS_SEARCHES);
  return chrome.storage.local.set({ apiSuggestions });
}

6. Adım: Düzenli bir etkinlik oluşturun

setTimeout() veya setInterval() yöntemleri, gecikmeli veya periyodik işlemler için yaygın olarak kullanılır. görevlerden biridir. Ancak bu API'ler, hizmet başlatıldığında zamanlayıcıları iptal edeceğinden başarısız olabilir. feshedilir. Uzantılar bunun yerine chrome.alarms API'yi kullanabilir.

Manifest dosyasında "alarms" iznini isteyerek başlayın. Ayrıca, uzaktaki barındırılan bir konumdan uzantı ipuçlarını getirmek için ana makine izni istemeniz gerekir:

manifest.json:

{
  ...
  "permissions": ["storage"],
  "permissions": ["storage", "alarms"],
  "host_permissions": ["https://extension-tips.glitch.me/*"],
}

Uzantı tüm ipuçlarını getirir, rastgele bir ipucu seçer ve depolama alanına kaydeder. İpucunu güncellemek için günde bir kez tetiklenecek bir alarm oluşturacağız. Chrome'u kapattığınızda alarmlar kaydedilmez. Alarmın mevcut olup olmadığını kontrol etmemiz ve yoksa oluşturmamız gerekiyor.

sw-ipuçları.js:

// Fetch tip & save in storage
const updateTip = async () => {
  const response = await fetch('https://extension-tips.glitch.me/tips.json');
  const tips = await response.json();
  const randomIndex = Math.floor(Math.random() * tips.length);
  return chrome.storage.local.set({ tip: tips[randomIndex] });
};

const ALARM_NAME = 'tip';

// Check if alarm exists to avoid resetting the timer.
// The alarm might be removed when the browser session restarts.
async function createAlarm() {
  const alarm = await chrome.alarms.get(ALARM_NAME);
  if (typeof alarm === 'undefined') {
    chrome.alarms.create(ALARM_NAME, {
      delayInMinutes: 1,
      periodInMinutes: 1440
    });
    updateTip();
  }
}

createAlarm();

// Update tip once a day
chrome.alarms.onAlarm.addListener(updateTip);

7. adım: Diğer bağlamlarla iletişim kurma

Uzantılar, sayfanın içeriğini okumak ve değiştirmek için içerik komut dosyalarını kullanır. Kullanıcı bir Chrome API referans sayfasını ziyaret ettiğinde uzantının içerik komut dosyası sayfayı günün ipucunu içerecek şekilde günceller. Hizmet çalışanından günün ipucunu istemek için bir mesaj gönderir.

Manifest dosyasında içerik komut dosyasını tanımlayarak başlayın ve Chrome API referans dokümanlarına karşılık gelen eşleşme kalıbını ekleyin.

manifest.json:

{
  ...
  "content_scripts": [
    {
      "matches": ["https://developer.chrome.com/docs/extensions/reference/*"],
      "js": ["content.js"]
    }
  ]
}

Yeni bir içerik dosyası oluşturun. Aşağıdaki kod, hizmet çalışanına ipucu isteğinde bulunan bir mesaj gönderir. Ardından, uzantı ipucunu içeren bir pop-up'ı açan bir düğme ekler. Bu kod, yeni web platformu Popover API'yi kullanır.

content.js:

(async () => {
  // Sends a message to the service worker and receives a tip in response
  const { tip } = await chrome.runtime.sendMessage({ greeting: 'tip' });

  const nav = document.querySelector('.upper-tabs > nav');
  
  const tipWidget = createDomElement(`
    <button type="button" popovertarget="tip-popover" popovertargetaction="show" style="padding: 0 12px; height: 36px;">
      <span style="display: block; font: var(--devsite-link-font,500 14px/20px var(--devsite-primary-font-family));">Tip</span>
    </button>
  `);

  const popover = createDomElement(
    `<div id='tip-popover' popover style="margin: auto;">${tip}</div>`
  );

  document.body.append(popover);
  nav.append(tipWidget);
})();

function createDomElement(html) {
  const dom = new DOMParser().parseFromString(html, 'text/html');
  return dom.body.firstElementChild;
}

Son adım, Service Worker'ımıza içerik komut dosyasına günlük ipucuyla yanıt gönderen bir mesaj işleyici eklemektir.

sw-ipuçları.js:

...
// Send tip to content script via messaging
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.greeting === 'tip') {
    chrome.storage.local.get('tip').then(sendResponse);
    return true;
  }
});

Çalışıp çalışmadığını test etme

Projenizin dosya yapısının şu şekilde göründüğünü doğrulayın:

Uzantınızı yerel olarak yükleme

Paketlenmemiş bir uzantıyı geliştirici modunda yüklemek için Merhaba dünya bölümündeki adımları uygulayın.

Referans sayfası açın

1. "api" anahtar kelimesini girin yazın.
2. "Sekme"ye basın veya "boşluk" olarak tanımlar.
3. API'nin tam adını girin.
   • VEYA geçmiş aramalar listesinden seçim yapın
4. Chrome API referans sayfası yeni bir sayfa açılır.

Aşağıdaki gibi görünmelidir:

Günün ipucunu aç

Uzantıyla ilgili ipucunu açmak için gezinme çubuğunda bulunan İpucu düğmesini tıklayın.

ziyaret edin.

🎯 Olası geliştirmeler

Bugün öğrendiklerinizi temel alarak aşağıdakilerden birini yapmaya çalışın:

• Çok amaçlı adres çubuğu önerilerini uygulamanın başka bir yolunu keşfedin.
• Uzantı ipucunu görüntülemek için kendi özel modelinizi oluşturun.
• MDN'nin Web Extensions referans API sayfaları için ek bir sayfa açın.

Geliştirmeye devam edin.

Tebrikler! Bu eğitimi tamamladınız 🎉. Diğer görevleri tamamlayarak becerilerinizi geliştirmeye devam edin yeni başlayanlar için eğiticiler:

Keşfetmeye devam et

Uzantı hizmeti çalışanı öğrenme rotanıza devam etmek için aşağıdaki makaleleri incelemenizi öneririz:

• Uzantı hizmeti çalışanları hakkında
• Uzantı hizmeti çalışanının yaşam döngüsü.
• Hizmet çalışanlarındaki etkinlikler