Razvoj razširitev za brskalnike: Manifest V3 in JavaScript API-ji

Razširitve za brskalnike so majhni programski paketi, ki prilagajajo izkušnjo brskanja. Dodajajo lahko nove funkcije, spreminjajo vsebino spletnih strani, blokirajo oglase in še veliko več. S prihodom Manifest V3 se je način izdelave in delovanja razširitev bistveno spremenil. Ta celovit vodnik bo raziskal razvoj razširitev za brskalnike z uporabo Manifest V3 in JavaScript API-jev ter vam ponudil znanje za ustvarjanje zmogljivih in varnih razširitev za sodobne brskalnike.

Kaj so razširitve za brskalnike?

Razširitve za brskalnike so v bistvu mini aplikacije, ki se izvajajo znotraj spletnega brskalnika. Razširjajo funkcionalnost brskalnika in se neopazno integrirajo s spletnimi stranmi. Razširitve so napisane z uporabo standardnih spletnih tehnologij, kot so HTML, CSS in JavaScript, zaradi česar so relativno dostopne spletnim razvijalcem.

Primeri priljubljenih razširitev za brskalnike vključujejo:

• Blokatorji oglasov: Blokirajo oglase na spletnih straneh, izboljšujejo hitrost brskanja in zmanjšujejo motnje.
• Upravitelji gesel: Varno shranjujejo in upravljajo gesla ter jih samodejno vnašajo na spletnih straneh.
• Razširitve za zapiske: Uporabnikom omogočajo, da si delajo zapiske in jih shranjujejo neposredno s spletnih strani.
• Orodja za produktivnost: Povečujejo produktivnost z zagotavljanjem funkcij, kot so upravljanje nalog, sledenje času in načini osredotočanja.
• Orodja za prevajanje jezikov: Prevajajo spletne strani v različne jezike z enim samim klikom. Primer: razširitev Google Translate.
• VPN razširitve: Preusmerjajo internetni promet za obhod geografskih omejitev in povečanje zasebnosti.

Pomen Manifesta V3

Manifest V3 je najnovejša različica manifestne datoteke, ki je datoteka JSON, ki opisuje razširitev brskalniku. Določa ime razširitve, različico, dovoljenja, skripte v ozadju in druge bistvene metapodatke. Manifest V3 uvaja več ključnih sprememb v primerjavi s svojim predhodnikom, Manifestom V2, ki se osredotočajo predvsem na varnost in zmogljivost.

Ključne spremembe v Manifestu V3:

• Servisni delavci (Service Workers): Manifest V3 nadomešča strani v ozadju s servisnimi delavci. Servisni delavci so skripte, ki jih poganjajo dogodki in se izvajajo v ozadju, ne da bi potrebovali trajno stran. So učinkovitejši in porabijo manj virov kot strani v ozadju.
• API za deklarativne omrežne zahteve (Declarative Net Request API): Ta API omogoča razširitvam, da spreminjajo omrežne zahteve, ne da bi jih neposredno prestrezale. Izboljšuje varnost in zmogljivost s prenosom logike filtriranja na brskalnik.
• Strožja varnostna politika vsebine (CSP): Manifest V3 uveljavlja strožja pravila CSP za preprečevanje izvajanja poljubne kode, kar dodatno povečuje varnost.
• API-ji, ki temeljijo na obljubah (Promise-based): Mnogi API-ji zdaj temeljijo na obljubah, kar olajša upravljanje asinhronih operacij.

Zakaj prehod na Manifest V3?

• Povečana varnost: Manifest V3 je zasnovan za izboljšanje varnosti razširitev za brskalnike in zaščito uporabnikov pred zlonamerno kodo.
• Izboljšana zmogljivost: Servisni delavci in API za deklarativne omrežne zahteve prispevajo k boljši zmogljivosti in manjši porabi virov.
• Večja zasebnost: Manifest V3 si prizadeva uporabnikom dati več nadzora nad njihovimi podatki in zasebnostjo.

Priprava razvojnega okolja

Preden začnete razvijati razširitve za brskalnike, morate pripraviti svoje razvojno okolje. To vključuje namestitev urejevalnika kode, izbiro brskalnika za testiranje in razumevanje osnovne strukture datotek razširitve.

1. Urejevalnik kode

Izberite urejevalnik kode, s katerim se počutite udobno. Priljubljene možnosti vključujejo:

• Visual Studio Code (VS Code): Brezplačen in zmogljiv urejevalnik kode z odlično podporo za JavaScript in druge spletne tehnologije.
• Sublime Text: Hiter in prilagodljiv urejevalnik kode s širokim naborom vtičnikov.
• Atom: Brezplačen in odprtokoden urejevalnik kode, ki ga je razvil GitHub.

2. Brskalnik za testiranje

Izberite brskalnik za testiranje vaših razširitev. Chrome in Firefox sta najbolj priljubljeni izbiri, saj ponujata robustna razvijalska orodja in podporo za razvoj razširitev.

3. Osnovna struktura datotek

Razširitev za brskalnik običajno sestavljajo naslednje datoteke:

• manifest.json: Ta datoteka vsebuje metapodatke razširitve, kot so ime, različica, dovoljenja in skripte v ozadju.
• background.js (ali skripta servisnega delavca): Ta skripta se izvaja v ozadju in obravnava dogodke, kot so dejanja brskalnika in kliki v kontekstnem meniju.
• content.js: Ta skripta se izvaja v kontekstu spletnih strani in lahko spreminja njihovo vsebino.
• popup.html: Ta datoteka določa uporabniški vmesnik pojavnega okna razširitve.
• popup.js: Ta skripta upravlja logiko pojavnega okna razširitve.
• options.html: Ta datoteka določa uporabniški vmesnik strani z nastavitvami razširitve.
• options.js: Ta skripta upravlja logiko strani z nastavitvami razširitve.
• ikone: To so ikone, ki se uporabljajo za predstavitev razširitve v orodni vrstici brskalnika in na strani za upravljanje razširitev.

Ustvarjanje prve razširitve: "Pozdravljen, svet!"

Ustvarimo preprosto razširitev "Pozdravljen, svet!", da prikažemo osnovna načela razvoja razširitev za brskalnike.

1. Ustvarite manifestno datoteko (manifest.json)

V novi mapi ustvarite datoteko z imenom `manifest.json` in dodajte naslednjo kodo:

{
  "manifest_version": 3,
  "name": "Pozdravljen, svet!",
  "version": "1.0",
  "description": "Preprosta razširitev Pozdravljen, svet!",
  "permissions": [
    "storage"
  ],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/icon16.png",
      "48": "images/icon48.png",
      "128": "images/icon128.png"
    }
  },
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

Pojasnilo:

• `manifest_version`: Določa različico manifestne datoteke (3 za Manifest V3).
• `name`: Ime razširitve.
• `version`: Številka različice razširitve.
• `description`: Kratek opis razširitve.
• `permissions`: Seznam dovoljenj, ki jih razširitev zahteva (npr. "storage").
• `action`: Določa lastnosti pojavnega okna razširitve, vključno s privzeto datoteko pojavnega okna in ikonami.
• `icons`: Določa poti do ikon razširitve.

2. Ustvarite datoteko za pojavno okno (popup.html)

V isti mapi ustvarite datoteko z imenom `popup.html` in dodajte naslednjo kodo:

  
  


  
Pozdravljen, svet!
  
To je preprosta razširitev za brskalnik.

Ta datoteka določa uporabniški vmesnik pojavnega okna razširitve, ki bo prikazal sporočilo "Pozdravljen, svet!".

3. Ustvarite ikone

Ustvarite tri ikone z naslednjimi velikostmi: 16x16, 48x48 in 128x128 slikovnih pik. Shranite jih kot `icon16.png`, `icon48.png` in `icon128.png` v mapo `images` znotraj mape vaše razširitve.

4. Naložite razširitev v svoj brskalnik

Chrome:

1. Odpri Chrome in pojdi na `chrome://extensions`.
2. V zgornjem desnem kotu omogoči "Razvijalski način".
3. Klikni "Naloži nepakirano" in izberi mapo, ki vsebuje datoteke tvoje razširitve.

Firefox:

1. Odpri Firefox in pojdi na `about:debugging#/runtime/this-firefox`.
2. Klikni "Naloži začasni dodatek..." in izberi datoteko `manifest.json`.

Vaša razširitev "Pozdravljen, svet!" bi morala biti zdaj nameščena in vidna v orodni vrstici brskalnika. Kliknite ikono razširitve, da odprete pojavno okno in vidite sporočilo "Pozdravljen, svet!".

Delo z JavaScript API-ji

Razširitve za brskalnike lahko komunicirajo z brskalnikom in spletnimi stranmi z uporabo JavaScript API-jev. Ti API-ji omogočajo dostop do različnih funkcionalnosti, kot so:

• API za zavihke (Tabs API): Omogoča upravljanje zavihkov brskalnika, vključno z ustvarjanjem, posodabljanjem in poizvedovanjem po zavihkih.
• API za shranjevanje (Storage API): Omogoča trajno shranjevanje in pridobivanje podatkov znotraj razširitve.
• API za alarme (Alarms API): Omogoča načrtovanje nalog, ki se izvedejo ob določenih časih.
• API za obvestila (Notifications API): Omogoča prikazovanje obvestil uporabniku.
• API za kontekstne menije (Context Menus API): Omogoča dodajanje lastnih elementov v kontekstni meni brskalnika (meni z desnim klikom).
• API za spletne zahteve (Web Request API) (Declarative Net Request v Manifestu V3): Omogoča prestrezanje in spreminjanje omrežnih zahtev.
• API za skriptiranje (Scripting API): Omogoča vstavljanje skript v spletne strani.

Primer: Uporaba API-ja za shranjevanje

Ustvarimo razširitev, ki shranjuje in pridobiva uporabnikovo ime z uporabo API-ja za shranjevanje.

1. Posodobite manifestno datoteko (manifest.json)

Prepričajte se, da seznam `permissions` v vaši datoteki `manifest.json` vključuje `"storage"`:

{
  "manifest_version": 3,
  "name": "Primer shranjevanja",
  "version": "1.0",
  "description": "Razširitev, ki uporablja API za shranjevanje",
  "permissions": [
    "storage"
  ],
  "action": {
    "default_popup": "popup.html"
  },
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

2. Ustvarite datoteko za pojavno okno (popup.html)

Ustvarite ali posodobite datoteko `popup.html` z naslednjo vsebino:

  
  


  
Primer shranjevanja
  Vnesite svoje ime:
  
  Shrani
  

  

3. Ustvarite skripto za pojavno okno (popup.js)

Ustvarite datoteko z imenom `popup.js` in dodajte naslednjo kodo:

document.addEventListener('DOMContentLoaded', () => {
  const nameInput = document.getElementById('name');
  const saveButton = document.getElementById('save');
  const greeting = document.getElementById('greeting');

  // Naloži shranjeno ime iz shrambe
  chrome.storage.sync.get('name', (data) => {
    if (data.name) {
      nameInput.value = data.name;
      greeting.textContent = `Pozdravljen, ${data.name}!`;
    }
  });

  // Shrani ime v shrambo, ko je gumb kliknjen
  saveButton.addEventListener('click', () => {
    const name = nameInput.value;
    chrome.storage.sync.set({ name: name }, () => {
      greeting.textContent = `Pozdravljen, ${name}!`;
    });
  });
});

Pojasnilo:

• Skripta posluša dogodek `DOMContentLoaded`, da zagotovi, da je DOM v celoti naložen pred izvedbo kode.
• Pridobi reference na vnosno polje, gumb za shranjevanje in odstavek s pozdravom.
• Naloži shranjeno ime iz shrambe z uporabo `chrome.storage.sync.get()`.
• Shrani ime v shrambo, ko je gumb za shranjevanje kliknjen, z uporabo `chrome.storage.sync.set()`.
• Posodobi odstavek s pozdravom s shranjenim ali vnesenim imenom.

Ponovno naložite razširitev v brskalniku. Sedaj, ko odprete pojavno okno, lahko vnesete svoje ime, ga shranite in vidite pozdravno sporočilo. Ime bo shranjeno v shrambi razširitve in se bo naložilo naslednjič, ko odprete pojavno okno.

Primer: Uporaba API-ja za zavihke

Ustvarimo razširitev, ki v pojavnem oknu prikaže URL trenutnega zavihka.

1. Posodobite manifestno datoteko (manifest.json)

V seznam `permissions` v datoteki `manifest.json` dodajte dovoljenje `"tabs"`:

{
  "manifest_version": 3,
  "name": "Primer zavihkov",
  "version": "1.0",
  "description": "Razširitev, ki uporablja API za zavihke",
  "permissions": [
    "tabs"
  ],
  "action": {
    "default_popup": "popup.html"
  },
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

2. Ustvarite datoteko za pojavno okno (popup.html)

Ustvarite ali posodobite datoteko `popup.html` z naslednjo vsebino:

  
  


  
Primer zavihkov
  
URL trenutnega zavihka:
  

  

3. Ustvarite skripto za pojavno okno (popup.js)

Ustvarite datoteko z imenom `popup.js` in dodajte naslednjo kodo:

document.addEventListener('DOMContentLoaded', () => {
  const urlDisplay = document.getElementById('url');

  // Pridobi URL trenutnega zavihka
  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
    const tab = tabs[0];
    urlDisplay.textContent = tab.url;
  });
});

Pojasnilo:

• Skripta posluša dogodek `DOMContentLoaded`.
• Uporablja `chrome.tabs.query()`, da pridobi trenutno aktivni zavihek v trenutnem oknu.
• Pridobi URL zavihka in ga prikaže v odstavku `url`.

Ponovno naložite razširitev v brskalniku. Sedaj, ko odprete pojavno okno, bo prikazan URL trenutnega zavihka.

Skripte v ozadju in servisni delavci

V Manifestu V3 so skripte v ozadju nadomeščene s servisnimi delavci. Servisni delavci so skripte, ki jih poganjajo dogodki in se izvajajo v ozadju, ne da bi potrebovali trajno stran. So učinkovitejši in porabijo manj virov kot strani v ozadju.

Ključne značilnosti servisnih delavcev:

• Poganjani z dogodki: Servisni delavci se odzivajo na dogodke, kot so dejanja brskalnika, alarmi in sporočila iz vsebinskih skript.
• Asinhroni: Servisni delavci uporabljajo asinhrone API-je, da se izognejo blokiranju glavne niti.
• Prekinejo se v mirovanju: Servisni delavci se prekinejo, ko ne obravnavajo aktivno dogodkov, s čimer varčujejo z viri.

Primer: Uporaba servisnega delavca

Ustvarimo razširitev, ki prikaže obvestilo ob zagonu brskalnika.

1. Posodobite manifestno datoteko (manifest.json)

Posodobite datoteko `manifest.json` z naslednjo vsebino:

{
  "manifest_version": 3,
  "name": "Primer servisnega delavca",
  "version": "1.0",
  "description": "Razširitev, ki uporablja servisnega delavca",
  "permissions": [
    "notifications"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

Pojasnilo:

• Lastnost `"background"` določa pot do skripte servisnega delavca (`background.js`).
• Seznam `"permissions"` vključuje `"notifications"`, kar je potrebno za prikazovanje obvestil.

2. Ustvarite skripto servisnega delavca (background.js)

Ustvarite datoteko z imenom `background.js` in dodajte naslednjo kodo:

chrome.runtime.onStartup.addListener(() => {
  // Prikaži obvestilo ob zagonu brskalnika
  chrome.notifications.create('startup-notification', {
    type: 'basic',
    iconUrl: 'images/icon48.png',
    title: 'Brskalnik zagnan',
    message: 'Brskalnik se je zagnal.',
  });
});

Pojasnilo:

• Skripta posluša dogodek `chrome.runtime.onStartup`, ki se sproži ob zagonu brskalnika.
• Uporablja `chrome.notifications.create()`, da prikaže obvestilo z določenimi lastnostmi.

Ponovno naložite razširitev v brskalniku. Sedaj, ko ponovno zaženete brskalnik, bi morali videti obvestilo iz razširitve.

Vsebinske skripte

Vsebinske skripte so JavaScript datoteke, ki se izvajajo v kontekstu spletnih strani. Lahko dostopajo do DOM-a spletnih strani in ga spreminjajo, kar vam omogoča prilagajanje obnašanja in videza spletnih mest.

Ključne značilnosti vsebinskih skript:

• Dostop do DOM-a: Vsebinske skripte lahko dostopajo do DOM-a spletnih strani in ga manipulirajo.
• Izolacija od skript spletnih strani: Vsebinske skripte se izvajajo v izoliranem okolju, kar preprečuje konflikte s skriptami spletnih strani.
• Komunikacija s skriptami v ozadju: Vsebinske skripte lahko komunicirajo s skriptami v ozadju z uporabo posredovanja sporočil.

Primer: Uporaba vsebinske skripte

Ustvarimo razširitev, ki spremeni barvo ozadja spletnih strani v svetlo modro.

1. Posodobite manifestno datoteko (manifest.json)

Posodobite datoteko `manifest.json` z naslednjo vsebino:

{
  "manifest_version": 3,
  "name": "Primer vsebinske skripte",
  "version": "1.0",
  "description": "Razširitev, ki uporablja vsebinsko skripto",
  "permissions": [
    "activeTab",
    "scripting"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": [""],
      "js": ["content.js"]
    }
  ],
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

Pojasnilo:

• Lastnost `"content_scripts"` določa seznam vsebinskih skript, ki se bodo vstavile v spletne strani.
• `"matches"` določa URL-je, v katere naj se vstavi vsebinska skripta (`` se ujema z vsemi URL-ji).
• `"js"` določa pot do vsebinske skripte (`content.js`).
• Seznam `"permissions"` vključuje `"activeTab"` in `"scripting"`, ki sta potrebna za vstavljanje skript.

2. Ustvarite vsebinsko skripto (content.js)

Ustvarite datoteko z imenom `content.js` in dodajte naslednjo kodo:

document.body.style.backgroundColor = 'lightblue';

3. Ustvarite servisnega delavca (background.js)

Ustvarite datoteko z imenom `background.js` in dodajte naslednjo kodo:

chrome.action.onClicked.addListener((tab) => {
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: () => {
      document.body.style.backgroundColor = 'lightblue';
    }
  });
});

Pojasnilo:

• Vsebinska skripta preprosto nastavi barvo ozadja elementa `body` na svetlo modro.
• Servisni delavec posluša dogodek klika in izvede funkcijo znotraj trenutnega zavihka, ki spremeni barvo ozadja.

Ponovno naložite razširitev v brskalniku. Sedaj, ko odprete katero koli spletno stran, bo barva ozadja svetlo modra.

Odpravljanje napak v razširitvah za brskalnike

Odpravljanje napak v razširitvah za brskalnike je bistven del razvojnega procesa. Chrome in Firefox ponujata odlična razvijalska orodja za odpravljanje napak v razširitvah.

Odpravljanje napak v Chromu:

1. Odpri Chrome in pojdi na `chrome://extensions`.
2. V zgornjem desnem kotu omogoči "Razvijalski način".
3. Za vašo razširitev kliknite "Preglej poglede: stran v ozadju". To bo odprlo Chrome DevTools za skripto v ozadju.
4. Za odpravljanje napak v vsebinskih skriptah odprite spletno stran, kjer je vstavljena vsebinska skripta, in nato odprite Chrome DevTools za to stran. Vaša vsebinska skripta bi morala biti navedena v plošči "Viri".

Odpravljanje napak v Firefoxu:

1. Odpri Firefox in pojdi na `about:debugging#/runtime/this-firefox`.
2. Poišči svojo razširitev na seznamu in klikni "Preglej". To bo odprlo Firefox Developer Tools za razširitev.
3. Za odpravljanje napak v vsebinskih skriptah odprite spletno stran, kjer je vstavljena vsebinska skripta, in nato odprite Firefox Developer Tools za to stran. Vaša vsebinska skripta bi morala biti navedena v plošči "Razhroščevalnik".

Pogoste tehnike odpravljanja napak:

• Zapisovanje v konzolo: Uporabite `console.log()` za izpis sporočil v konzolo.
• Prekinitvene točke: Postavite prekinitvene točke v svojo kodo, da zaustavite izvajanje in pregledate spremenljivke.
• Izvorne preslikave (Source maps): Uporabite izvorne preslikave za odpravljanje napak v vaši kodi v njeni izvirni obliki, tudi če je bila pomanjšana ali prevedena.
• Obravnavanje napak: Implementirajte obravnavanje napak za zajemanje in beleženje napak.

Objava vaše razširitve

Ko ste razvili in testirali svojo razširitev, jo lahko objavite v Spletni trgovini Chrome ali na tržnici dodatkov za Firefox.

Objava v Spletni trgovini Chrome:

1. Ustvarite razvijalski račun v Spletni trgovini Chrome.
2. Zapakirajte svojo razširitev v datoteko `.zip`.
3. Naložite datoteko `.zip` v Spletno trgovino Chrome.
4. Navedite zahtevane metapodatke, kot so ime razširitve, opis in posnetki zaslona.
5. Oddajte svojo razširitev v pregled.

Objava na tržnici dodatkov za Firefox:

1. Ustvarite razvijalski račun na tržnici dodatkov za Firefox.
2. Zapakirajte svojo razširitev v datoteko `.zip`.
3. Naložite datoteko `.zip` na tržnico dodatkov za Firefox.
4. Navedite zahtevane metapodatke, kot so ime razširitve, opis in posnetki zaslona.
5. Oddajte svojo razširitev v pregled.

Najboljše prakse za objavo:

• Napišite jasen in jedrnat opis vaše razširitve.
• Zagotovite visokokakovostne posnetke zaslona in videoposnetke za predstavitev funkcij vaše razširitve.
• Pred oddajo temeljito testirajte svojo razširitev.
• Hitro se odzivajte na ocene in povratne informacije uporabnikov.
• Posodabljajte svojo razširitev z najnovejšimi različicami brskalnikov in varnostnimi popravki.

Varnostni vidiki

Varnost je ključen vidik razvoja razširitev za brskalnike. Razširitve lahko potencialno dostopajo do občutljivih podatkov uporabnikov in spreminjajo vsebino spletnih strani, zato je nujno upoštevati najboljše varnostne prakse za zaščito uporabnikov pred zlonamerno kodo.

Ključni varnostni vidiki:

• Minimizirajte dovoljenja: Zahtevajte samo tista dovoljenja, ki jih vaša razširitev dejansko potrebuje.
• Preverjajte vnos uporabnika: Očistite in preverite ves vnos uporabnika, da preprečite napade z vrivanjem skript (XSS).
• Uporabljajte HTTPS: Vedno uporabljajte HTTPS za komunikacijo z oddaljenimi strežniki.
• Varnostna politika vsebine (CSP): Uveljavite strogo CSP za preprečevanje izvajanja poljubne kode.
• Redno posodabljajte svojo razširitev: Posodabljajte svojo razširitev z najnovejšimi varnostnimi popravki.

Z upoštevanjem teh varnostnih smernic lahko pripomorete k zagotavljanju, da je vaša razširitev za brskalnik varna za uporabnike.

Zaključek

Razvoj razširitev za brskalnike z uporabo Manifest V3 in JavaScript API-jev ponuja zmogljiv način za prilagajanje izkušnje brskanja in dodajanje novih funkcij spletnim brskalnikom. Z razumevanjem ključnih konceptov, API-jev in najboljših praks, opisanih v tem vodniku, lahko ustvarite zmogljive in varne razširitve, ki povečujejo produktivnost, izboljšujejo varnost in zagotavljajo boljšo izkušnjo brskanja za uporabnike po vsem svetu. Ker se splet nenehno razvija, bodo razširitve za brskalnike igrale vse pomembnejšo vlogo pri oblikovanju prihodnosti spletnih interakcij. Izkoristite priložnosti, ki jih ponujata Manifest V3 in bogastvo JavaScript API-jev, za izgradnjo inovativnih in dragocenih razširitev.