Crome web böngésző bővítmény készítése alapok

 Crome web böngésző bővítmény készítése alapok

Chrome Bővítmény Fejlesztés Alapjai: Weboldalak Natív PDF Exportálása

A böngészőbővítmények standard webes technológiákra (HTML, CSS, JavaScript) épülő, a böngésző funkcióit kiterjesztő szoftvermodulok.

Jelen technikai cikk egy weblapokat PDF formátumba mentő Chrome bővítmény elkészítésén keresztül mutatja be az alapvető architektúrát és a Manifest V3 szabványt.

Technológiai megközelítés: Miért a natív motor?

A weblapok PDF-be konvertálására gyakran használnak kliensoldali JavaScript könyvtárakat (például html2canvas vagy jsPDF).

Ezek a megoldások pontatlanul renderelik a komplex CSS elrendezéseket és a dinamikus DOM-elemeket.

A professzionális megközelítés a Chrome DevTools Protocol (CDP) natív Page.printToPDF metódusának meghívása.

Ez a böngésző beépített renderelő motorját használja, így garantálja a pixelpontos, natív nyomtatási minőséget.

1. A konfigurációs állomány: manifest.json

Minden Chrome bővítmény alapja egy JSON formátumú konfigurációs fájl.

Ez deklarálja a metaadatokat, a futtatási környezetet és a szükséges rendszerjogosultságokat.

A Manifest V3 szabvány szigorú biztonsági előírásokat alkalmaz.

JSON

{
  "manifest_version": 3,
  "name": "Natív PDF Exportáló",
  "version": "1.0",
  "description": "A Chrome DevTools Protocol használatával PDF formátumba menti az aktuális weblapot.",
  "permissions": [
    "activeTab",
    "debugger",
    "downloads"
  ],
  "action": {
    "default_title": "Mentés PDF-be"
  },
  "background": {
    "service_worker": "background.js"
  }
}

A jogosultságok (permissions) kritikusak a működéshez.

– Az activeTab az aktuális fülhöz ad szigorúan korlátozott hozzáférést.

– A debugger a CDP protokoll használatát engedélyezi.

– A downloads pedig a fájlrendszerbe történő mentéshez szükséges.

2. A háttérfolyamat: background.js

A Service Worker a háttérben futó szkript, amely a böngésző eseményeit kezeli, vizuális felület nélkül.

A feladata a CDP kapcsolat felépítése, a parancs kiadása és a kapott adat letöltése.

Az aszinkron műveletek (async/await) és a robusztus hibakezelés (try-catch) elengedhetetlenek a böngésző stabilitásának megőrzéséhez.

JavaScript

chrome.action.onClicked.addListener(async (tab) => {
  if (!tab.id) return;
  const target = { tabId: tab.id };

  try {
    // Kapcsolódás az aktuális fülhöz
    await chrome.debugger.attach(target, "1.3");
    
    // Natív PDF generálási parancs kiadása
    const result = await chrome.debugger.sendCommand(target, "Page.printToPDF", {
      landscape: false,
      printBackground: true,
      preferCSSPageSize: true
    });

    // Kapcsolat kötelező lezárása
    await chrome.debugger.detach(target);

    // Adat letöltése a fájlrendszerbe
    const dataUrl = `data:application/pdf;base64,${result.data}`;
    await chrome.downloads.download({
      url: dataUrl,
      filename: `weblap-export-${tab.id}.pdf`,
      saveAs: true
    });

  } catch (error) {
    console.error("Kritikus PDF generálási hiba:", error);
    await chrome.debugger.detach(target).catch(() => {});
  }
});

A fenti kód a bővítmény ikonjára történő kattintáskor indul el.

A Page.printToPDF parancs a renderelés után egy Base64 kódolású adatfolyamot ad vissza.

Ezt a rendszer Data URI formátummá alakítja, majd a chrome.downloads API segítségével elmenti a lokális gépre.

3. Továbbfejlesztés: Interaktív Felhasználói Felület

A fixen beégetett (hardcoded) paraméterek helyett a professzionális szoftverek grafikus felületet (UI) biztosítanak a testreszabáshoz.

A manifest.json fájlban az action blokkon belül a default_popup attribútummal definiálható egy HTML dokumentum.

Ez egy felugró ablakot hoz létre az ikon alatt, ahol űrlap elemekkel bekérhető a tájolás vagy a háttérgrafikák nyomtatási igénye.

A felület és a háttérszkript közötti kommunikáció a böngésző beépített chrome.runtime.sendMessage üzenetküldési rendszerével történik.

Biztonsági protokollok és korlátozások

A debugger API használata mély rendszerhozzáférést igényel a Chrome belső folyamataihoz.

A böngésző biztonsági okokból egy jól látható, sárga figyelmeztető sávot jelenít meg az aktív fülön a folyamat futása alatt.

Ez a vizuális elem a végfelhasználó védelmét szolgálja, és a kliensoldali kódból szándékosan nem rejthető el.

A Google manuális és szigorú kódellenőrzésnek veti alá az ezt a protokollt használó bővítményeket a Chrome Web Store-ban történő publikálás során.