Skripty na pozadí pro rozšíření prohlížeče: Přechod na JavaScript Service Worker

Oblast vývoje rozšíření pro prohlížeče se neustále vyvíjí. Jednou z nejvýznamnějších nedávných změn je přechod od tradičních persistentních stránek na pozadí k JavaScript Service Workerům pro skripty na pozadí. Tato migrace, z velké části řízená Manifestem V3 (MV3) v prohlížečích založených na Chromiu, přináší řadu výhod, ale také představuje jedinečné výzvy pro vývojáře. Tento komplexní průvodce se ponoří do důvodů této změny, výhod a nevýhod a podrobného postupu migrace, který zajistí hladký přechod pro vaše rozšíření.

Proč přejít na Service Workery?

Hlavní motivací tohoto přechodu je zlepšení výkonu a bezpečnosti prohlížeče. Persistentní stránky na pozadí, které byly běžné v Manifestu V2 (MV2), mohou spotřebovávat značné prostředky i v nečinnosti, což ovlivňuje výdrž baterie a celkovou odezvu prohlížeče. Service Workery jsou naopak řízené událostmi a aktivní pouze v případě potřeby.

Výhody Service Workerů:

• Zlepšený výkon: Service Workery jsou aktivní pouze tehdy, když je spustí událost, jako je volání API nebo zpráva z jiné části rozšíření. Tato "událostmi řízená" povaha snižuje spotřebu zdrojů a zlepšuje výkon prohlížeče.
• Zvýšená bezpečnost: Service Workery pracují v omezenějším prostředí, což zmenšuje prostor pro útoky a zlepšuje celkovou bezpečnost rozšíření.
• Příprava na budoucnost: Většina hlavních prohlížečů přechází na Service Workery jako standard pro zpracování na pozadí v rozšířeních. Migrace nyní zajistí, že vaše rozšíření zůstane kompatibilní a vyhne se budoucím problémům se zastaráním.
• Neblokující operace: Service Workery jsou navrženy tak, aby prováděly úkoly na pozadí bez blokování hlavního vlákna, což zajišťuje plynulejší uživatelský zážitek.

Nevýhody a výzvy:

• Křivka učení: Service Workery představují nový programovací model, který může být pro vývojáře zvyklé na persistentní stránky na pozadí náročný. Událostmi řízená povaha vyžaduje odlišný přístup ke správě stavu a komunikaci.
• Správa persistentního stavu: Udržování persistentního stavu mezi aktivacemi Service Workeru vyžaduje pečlivé zvážení. Klíčovými se stávají techniky jako Storage API nebo IndexedDB.
• Složitost ladění: Ladění Service Workerů může být složitější než ladění tradičních stránek na pozadí kvůli jejich přerušované povaze.
• Omezený přístup k DOM: Service Workery nemohou přímo přistupovat k DOM. Musí komunikovat s obsahovými skripty, aby mohly interagovat s webovými stránkami.

Pochopení základních konceptů

Než se ponoříme do procesu migrace, je nezbytné pochopit základní koncepty, které stojí za Service Workery:

Správa životního cyklu

Service Workery mají odlišný životní cyklus skládající se z následujících fází:

• Instalace: Service Worker se instaluje při prvním načtení nebo aktualizaci rozšíření. Toto je ideální čas pro cachování statických aktiv a provedení počátečních úloh nastavení.
• Aktivace: Po instalaci je Service Worker aktivován. To je bod, kdy může začít zpracovávat události.
• Nečinnost: Service Worker zůstává v nečinnosti a čeká na spuštění událostmi.
• Ukončení: Service Worker je ukončen, když již není potřeba.

Architektura řízená událostmi

Service Workery jsou řízené událostmi, což znamená, že spouštějí kód pouze v reakci na konkrétní události. Běžné události zahrnují:

• install: Spuštěno při instalaci Service Workeru.
• activate: Spuštěno při aktivaci Service Workeru.
• fetch: Spuštěno, když prohlížeč provede síťový požadavek.
• message: Spuštěno, když Service Worker obdrží zprávu z jiné části rozšíření.

Meziprocesová komunikace

Service Workery potřebují způsob, jak komunikovat s ostatními částmi rozšíření, jako jsou obsahové skripty a skripty vyskakovacích oken. Toho se obvykle dosahuje pomocí API chrome.runtime.sendMessage a chrome.runtime.onMessage.

Průvodce migrací krok za krokem

Pojďme si projít proces migrace typického rozšíření prohlížeče z persistentní stránky na pozadí na Service Worker.

Krok 1: Aktualizujte svůj soubor manifestu (manifest.json)

Prvním krokem je aktualizovat váš soubor manifest.json, aby odrážel změnu na Service Worker. Odstraňte pole "background" a nahraďte ho polem "background" obsahujícím vlastnost "service_worker".

Příklad Manifest V2 (Persistentní stránka na pozadí):

{
  "manifest_version": 2,
  "name": "My Extension",
  "version": "1.0",
  "background": {
    "scripts": ["background.js"],
    "persistent": true
  },
  "permissions": [
    "storage",
    "activeTab"
  ]
}

Příklad Manifest V3 (Service Worker):

{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0",
  "background": {
    "service_worker": "background.js"
  },
  "permissions": [
    "storage",
    "activeTab"
  ]
}

Důležitá upozornění:

• Ujistěte se, že vaše manifest_version je nastavena na 3.
• Vlastnost "service_worker" specifikuje cestu k vašemu skriptu Service Workeru.

Krok 2: Refaktorujte váš skript na pozadí (background.js)

Toto je nejdůležitější krok v procesu migrace. Musíte refaktorovat váš skript na pozadí, aby se přizpůsobil událostmi řízené povaze Service Workerů.

1. Odstraňte persistentní proměnné stavu

V MV2 stránkách na pozadí jste se mohli spolehnout na globální proměnné pro udržení stavu mezi různými událostmi. Service Workery jsou však v nečinnosti ukončeny, takže globální proměnné nejsou pro persistentní stav spolehlivé.

Příklad (MV2):

var counter = 0;

chrome.browserAction.onClicked.addListener(function(tab) {
  counter++;
  console.log("Counter: " + counter);
});

Řešení: Použijte Storage API nebo IndexedDB

Storage API (chrome.storage.local nebo chrome.storage.sync) vám umožňuje trvale ukládat a načítat data. IndexedDB je další možností pro složitější datové struktury.

Příklad (MV3 s Storage API):

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.storage.local.get(['counter'], function(result) {
    var counter = result.counter || 0;
    counter++;
    chrome.storage.local.set({counter: counter}, function() {
      console.log("Counter: " + counter);
    });
  });
});

Příklad (MV3 s IndexedDB):

// Funkce pro otevření databáze IndexedDB
function openDatabase() {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open('myDatabase', 1);

    request.onerror = (event) => {
      reject('Error opening database');
    };

    request.onsuccess = (event) => {
      resolve(event.target.result);
    };

    request.onupgradeneeded = (event) => {
      const db = event.target.result;
      db.createObjectStore('myObjectStore', { keyPath: 'id' });
    };
  });
}

// Funkce pro získání dat z IndexedDB
function getData(db, id) {
  return new Promise((resolve, reject) => {
    const transaction = db.transaction(['myObjectStore'], 'readonly');
    const objectStore = transaction.objectStore('myObjectStore');
    const request = objectStore.get(id);

    request.onerror = (event) => {
      reject('Error getting data');
    };

    request.onsuccess = (event) => {
      resolve(request.result);
    };
  });
}

// Funkce pro vložení dat do IndexedDB
function putData(db, data) {
  return new Promise((resolve, reject) => {
    const transaction = db.transaction(['myObjectStore'], 'readwrite');
    const objectStore = transaction.objectStore('myObjectStore');
    const request = objectStore.put(data);

    request.onerror = (event) => {
      reject('Error putting data');
    };

    request.onsuccess = (event) => {
      resolve();
    };
  });
}

chrome.browserAction.onClicked.addListener(async (tab) => {
  try {
    const db = await openDatabase();
    let counterData = await getData(db, 'counter');
    let counter = counterData ? counterData.value : 0;

    counter++;

    await putData(db, { id: 'counter', value: counter });
    db.close();
    console.log("Counter: " + counter);

  } catch (error) {
    console.error("IndexedDB Error: ", error);
  }
});

2. Nahraďte posluchače událostí předáváním zpráv

Pokud váš skript na pozadí komunikuje s obsahovými skripty nebo jinými částmi rozšíření, budete muset použít předávání zpráv.

Příklad (Odeslání zprávy ze skriptu na pozadí do obsahového skriptu):

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (request.message === "get_data") {
      // Udělejte něco pro získání dat
      let data = "Example Data";
      sendResponse({data: data});
    }
  }
);

Příklad (Odeslání zprávy z obsahového skriptu do skriptu na pozadí):

chrome.runtime.sendMessage({message: "get_data"}, function(response) {
  console.log("Received data: " + response.data);
});

3. Zpracujte inicializační úkoly v události install

Událost install je spuštěna, když je Service Worker poprvé instalován nebo aktualizován. Toto je ideální místo pro provedení inicializačních úkolů, jako je vytváření databází nebo cachování statických aktiv.

Příklad:

chrome.runtime.onInstalled.addListener(function() {
  console.log("Service Worker installed.");
  // Zde proveďte inicializační úkoly
  chrome.storage.local.set({initialized: true});
});

4. Zvažte použití Offscreen Documents

Manifest V3 zavedl offscreen dokumenty pro zpracování úkolů, které dříve vyžadovaly přístup k DOM na stránkách na pozadí, jako je přehrávání zvuku nebo interakce se schránkou. Tyto dokumenty běží v samostatném kontextu, ale mohou interagovat s DOM jménem service workeru.

Pokud vaše rozšíření potřebuje rozsáhle manipulovat s DOM nebo provádět úkoly, které nejsou snadno dosažitelné pomocí předávání zpráv a obsahových skriptů, offscreen dokumenty by mohly být správným řešením.

Příklad (Vytvoření Offscreen Document):

// Ve vašem skriptu na pozadí:
async function createOffscreen() {
  if (await chrome.offscreen.hasDocument({
    reasons: [chrome.offscreen.Reason.WORKER],
    justification: 'reason for needing the document'
  })) {
    return;
  }
  await chrome.offscreen.createDocument({
    url: 'offscreen.html',
    reasons: [chrome.offscreen.Reason.WORKER],
    justification: 'reason for needing the document'
  });
}

chrome.runtime.onStartup.addListener(createOffscreen);
chrome.runtime.onInstalled.addListener(createOffscreen);

Příklad (offscreen.html):

<!DOCTYPE html>
<html>
<head>
  <title>Offscreen Document</title>
</head>
<body>
  <script src="offscreen.js"></script>
</body>
</html>

Příklad (offscreen.js, který běží v offscreen dokumentu):

// Poslouchá zprávy od service workeru
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === 'doSomething') {
    // Zde proveďte něco s DOM
    document.body.textContent = 'Action performed!';
    sendResponse({ result: 'success' });
  }
});

Krok 3: Důkladně otestujte své rozšíření

Po refaktorování vašeho skriptu na pozadí je klíčové důkladně otestovat vaše rozšíření, abyste se ujistili, že v novém prostředí Service Workeru funguje správně. Věnujte zvláštní pozornost následujícím oblastem:

• Správa stavu: Ověřte, že váš persistentní stav je správně ukládán a načítán pomocí Storage API nebo IndexedDB.
• Předávání zpráv: Ujistěte se, že zprávy jsou správně odesílány a přijímány mezi skriptem na pozadí, obsahovými skripty a skripty vyskakovacích oken.
• Zpracování událostí: Otestujte všechny posluchače událostí, abyste se ujistili, že jsou spouštěny podle očekávání.
• Výkon: Sledujte výkon vašeho rozšíření, abyste se ujistili, že nespotřebovává nadměrné zdroje.

Krok 4: Ladění Service Workerů

Ladění Service Workerů může být náročné kvůli jejich přerušované povaze. Zde je několik tipů, které vám pomohou při ladění vašeho Service Workeru:

• Chrome DevTools: Použijte Chrome DevTools k inspekci Service Workeru, zobrazení protokolů konzole a nastavení breakpointů. Service Worker naleznete v záložce "Application".
• Persistentní protokoly konzole: Hojně používejte příkazy console.log ke sledování toku provádění vašeho Service Workeru.
• Breakpointy: Nastavte breakpointy ve vašem kódu Service Workeru, abyste pozastavili provádění a mohli zkontrolovat proměnné.
• Inspektor Service Workeru: Použijte inspektor Service Workeru v Chrome DevTools k zobrazení stavu Service Workeru, událostí a síťových požadavků.

Osvědčené postupy pro migraci na Service Worker

Zde jsou některé osvědčené postupy, které je třeba dodržovat při migraci vašeho rozšíření prohlížeče na Service Workery:

• Začněte včas: Nečekejte s migrací na Service Workery na poslední chvíli. Začněte proces migrace co nejdříve, abyste měli dostatek času na refaktorování kódu a otestování rozšíření.
• Rozdělte úkol: Rozdělte proces migrace na menší, lépe zvládnutelné úkoly. Díky tomu bude proces méně skličující a snáze sledovatelný.
• Testujte často: Testujte své rozšíření často v průběhu celého procesu migrace, abyste včas odhalili chyby.
• Použijte Storage API nebo IndexedDB pro persistentní stav: Nespoléhejte se na globální proměnné pro persistentní stav. Místo toho použijte Storage API nebo IndexedDB.
• Použijte předávání zpráv pro komunikaci: Použijte předávání zpráv pro komunikaci mezi skriptem na pozadí, obsahovými skripty a skripty vyskakovacích oken.
• Optimalizujte svůj kód: Optimalizujte svůj kód pro výkon, abyste minimalizovali spotřebu zdrojů.
• Zvažte použití Offscreen Documents: Pokud potřebujete rozsáhle manipulovat s DOM, zvažte použití offscreen dokumentů.

Aspekty internacionalizace

Při vývoji rozšíření prohlížečů pro globální publikum je klíčové zvážit internacionalizaci (i18n) a lokalizaci (l10n). Zde je několik tipů, jak zajistit, aby bylo vaše rozšíření přístupné uživatelům po celém světě:

• Použijte složku `_locales`: Ukládejte přeložené řetězce vašeho rozšíření do složky _locales. Tato složka obsahuje podsložky pro každý podporovaný jazyk se souborem messages.json obsahujícím překlady.
• Použijte syntaxi `__MSG_messageName__`: Použijte syntaxi __MSG_messageName__ k odkazování na vaše přeložené řetězce ve vašem kódu a souboru manifestu.
• Podporujte jazyky psané zprava doleva (RTL): Ujistěte se, že rozvržení a stylování vašeho rozšíření se správně přizpůsobí RTL jazykům, jako je arabština a hebrejština.
• Zvažte formátování data a času: Používejte vhodné formátování data a času pro každou lokalitu.
• Poskytujte kulturně relevantní obsah: Přizpůsobte obsah vašeho rozšíření tak, aby byl kulturně relevantní pro různé regiony.

Příklad (_locales/en/messages.json):

{
  "extensionName": {
    "message": "My Extension",
    "description": "The name of the extension"
  },
  "buttonText": {
    "message": "Click Me",
    "description": "The text for the button"
  }
}

Příklad (Odkazování na přeložené řetězce ve vašem kódu):

document.getElementById('myButton').textContent = chrome.i18n.getMessage("buttonText");

Závěr

Migrace skriptu na pozadí vašeho rozšíření prohlížeče na JavaScript Service Worker je významným krokem ke zlepšení výkonu, bezpečnosti a zajištění budoucí kompatibility vašeho rozšíření. Ačkoli přechod může představovat určité výzvy, přínosy stojí za námahu. Dodržováním kroků uvedených v tomto průvodci a osvojením si osvědčených postupů můžete zajistit hladkou a úspěšnou migraci a poskytnout lepší zážitek pro vaše uživatele po celém světě. Nezapomeňte důkladně testovat a přizpůsobit se nové architektuře řízené událostmi, abyste plně využili sílu Service Workerů.

Další zdroje

• Dokumentace k Manifest V3 pro rozšíření Chrome
• Dokumentace k Service Worker API od Mozilly
• Základy Service Workerů