Põhjalik ülevaade veebilehitseja laienduste arendamisest, kasutades Manifest V3 ja JavaScripti API-sid. Õppige looma võimsaid ja turvalisi laiendusi moodsatele brauseritele.
Veebilehitseja laienduste arendamine: Manifest V3 ja JavaScripti API-d
Veebilehitseja laiendused on väikesed tarkvaraprogrammid, mis kohandavad sirvimiskogemust. Nad võivad lisada uusi funktsioone, muuta veebisaitide sisu, blokeerida reklaame ja palju muud. Manifest V3 tulekuga on laienduste ehitamise ja toimimise viis läbinud olulisi muutusi. See põhjalik juhend uurib veebilehitseja laienduste arendamist, kasutades Manifest V3 ja JavaScripti API-sid, andes teile teadmised, kuidas luua võimsaid ja turvalisi laiendusi moodsatele brauseritele.
Mis on veebilehitseja laiendused?
Veebilehitseja laiendused on sisuliselt minirakendused, mis töötavad veebibrauseris. Nad laiendavad brauseri funktsionaalsust ja integreeruvad sujuvalt veebilehtedega. Laiendused on kirjutatud standardsete veebitehnoloogiate abil, nagu HTML, CSS ja JavaScript, mis muudab need veebiarendajatele suhteliselt kättesaadavaks.
Populaarsete veebilehitseja laienduste näited on järgmised:
- Reklaamiblokeerijad: blokeerivad reklaame veebilehtedel, parandades sirvimiskiirust ja vähendades segajaid.
- Paroolihaldurid: salvestavad ja haldavad paroole turvaliselt, täites need veebisaitidel automaatselt.
- Märkmete tegemise laiendused: võimaldavad kasutajatel teha märkmeid ja salvestada neid otse veebilehtedelt.
- Produktiivsustööriistad: suurendavad tootlikkust, pakkudes funktsioone nagu ülesannete haldamine, ajajälgimine ja keskendumisrežiimid.
- Keeletõlke tööriistad: tõlgivad veebilehti ühe klõpsuga erinevatesse keeltesse. Näide: Google Translate'i laiendus.
- VPN-laiendused: suunavad internetiliikluse puhverserveri kaudu, et mööda minna geograafilistest piirangutest ja suurendada privaatsust.
Manifest V3 olulisus
Manifest V3 on manifestifaili uusim versioon. See on JSON-fail, mis kirjeldab laiendust brauserile. See määratleb laienduse nime, versiooni, load, taustaskriptid ja muud olulised metaandmed. Manifest V3 toob võrreldes oma eelkäija Manifest V2-ga kaasa mitmeid olulisi muudatusi, keskendudes peamiselt turvalisusele ja jõudlusele.
Peamised muudatused Manifest V3-s:
- Teenustöötajad (Service Workers): Manifest V3 asendab taustalehed teenustöötajatega. Teenustöötajad on sündmuspõhised skriptid, mis töötavad taustal ilma püsivat lehte vajamata. Nad on tõhusamad ja vähem ressursinõudlikud kui taustalehed.
- Deklaratiivne võrgupäringu API (Declarative Net Request API): See API võimaldab laiendustel muuta võrgupäringuid ilma neid otse kinni püüdmata. See suurendab turvalisust ja jõudlust, delegeerides filtreerimisloogika brauserile.
- Rangem sisuturvalisuse poliitika (CSP): Manifest V3 rakendab rangemaid CSP-reegleid, et vältida suvalise koodi käivitamist, suurendades veelgi turvalisust.
- Lubaduspõhised (Promise-based) API-d: Paljud API-d on nüüd lubaduspõhised, mis teeb asünkroonsete operatsioonide haldamise lihtsamaks.
Miks üleminek Manifest V3-le?
- Suurendatud turvalisus: Manifest V3 on loodud selleks, et parandada veebilehitseja laienduste turvalisust ja kaitsta kasutajaid pahatahtliku koodi eest.
- Parem jõudlus: Teenustöötajad ja deklaratiivne võrgupäringu API aitavad kaasa paremale jõudlusele ja vähendatud ressursitarbimisele.
- Suurem privaatsus: Manifest V3 eesmärk on anda kasutajatele rohkem kontrolli oma andmete ja privaatsuse üle.
Arenduskeskkonna seadistamine
Enne veebilehitseja laienduste arendamise alustamist peate seadistama oma arenduskeskkonna. See hõlmab koodiredaktori installimist, testimiseks brauseri valimist ja laienduse põhifailistruktuuri mõistmist.
1. Koodiredaktor
Valige koodiredaktor, millega tunnete end mugavalt. Populaarsed valikud on:
- Visual Studio Code (VS Code): Tasuta ja võimas koodiredaktor, millel on suurepärane tugi JavaScriptile ja teistele veebitehnoloogiatele.
- Sublime Text: Kiire ja kohandatav koodiredaktor laia pistikprogrammide valikuga.
- Atom: Tasuta ja avatud lähtekoodiga koodiredaktor, mille on arendanud GitHub.
2. Brauser testimiseks
Valige brauser oma laienduste testimiseks. Chrome ja Firefox on kõige populaarsemad valikud, kuna nad pakuvad tugevaid arendajate tööriistu ja tuge laienduste arendamiseks.
3. Põhiline failistruktuur
Veebilehitseja laiendus koosneb tavaliselt järgmistest failidest:
- manifest.json: See fail sisaldab laienduse metaandmeid, nagu selle nimi, versioon, load ja taustaskriptid.
- background.js (või teenustöötaja skript): See skript töötab taustal ja tegeleb sündmustega, nagu brauseri toimingud ja kontekstimenüü klõpsud.
- content.js: See skript töötab veebilehtede kontekstis ja saab muuta nende sisu.
- popup.html: See fail määratleb laienduse hüpikakna kasutajaliidese.
- popup.js: See skript tegeleb laienduse hüpikakna loogikaga.
- options.html: See fail määratleb laienduse valikute lehe kasutajaliidese.
- options.js: See skript tegeleb laienduse valikute lehe loogikaga.
- ikoonid: Need on ikoonid, mida kasutatakse laienduse esindamiseks brauseri tööriistaribal ja laienduste haldamise lehel.
Esimese laienduse loomine: "Tere, maailm!"
Loome lihtsa "Tere, maailm!" laienduse, et demonstreerida veebilehitseja laienduste arendamise põhiprintsiipe.
1. Manifestifaili loomine (manifest.json)
Looge uude kausta fail nimega `manifest.json` ja lisage järgmine kood:
{
"manifest_version": 3,
"name": "Hello, World!",
"version": "1.0",
"description": "A simple Hello, World! extension",
"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"
}
}
Selgitus:
- `manifest_version`: Määrab manifestifaili versiooni (3 Manifest V3 jaoks).
- `name`: Laienduse nimi.
- `version`: Laienduse versiooninumber.
- `description`: Laienduse lühikirjeldus.
- `permissions`: Massiiv lubadest, mida laiendus nõuab (nt "storage").
- `action`: Määratleb laienduse hüpikakna omadused, sealhulgas vaikimisi hüpikakna faili ja ikoonid.
- `icons`: Määrab teed laienduse ikoonideni.
2. Hüpikakna faili loomine (popup.html)
Looge samasse kausta fail nimega `popup.html` ja lisage järgmine kood:
<!DOCTYPE html>
<html>
<head>
<title>Hello, World!</title>
<style>
body {
width: 200px;
padding: 10px;
font-family: sans-serif;
}
</style>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a simple browser extension.</p>
</body>
</html>
See fail määratleb laienduse hüpikakna kasutajaliidese, mis kuvab teate "Hello, World!".
3. Ikoonipiltide loomine
Looge kolm ikoonipilti järgmiste suurustega: 16x16, 48x48 ja 128x128 pikslit. Salvestage need failidena `icon16.png`, `icon48.png` ja `icon128.png` oma laienduse kausta alamkausta `images`.
4. Laienduse laadimine oma brauserisse
Chrome:
- Avage Chrome ja minge aadressile `chrome://extensions`.
- Lubage paremas ülanurgas "Arendajarežiim" (Developer mode).
- Klõpsake "Laadi lahtipakitud laiendus" (Load unpacked) ja valige kaust, mis sisaldab teie laienduse faile.
Firefox:
- Avage Firefox ja minge aadressile `about:debugging#/runtime/this-firefox`.
- Klõpsake "Laadi ajutine lisandmoodul..." (Load Temporary Add-on...) ja valige `manifest.json` fail.
Teie "Hello, World!" laiendus peaks nüüd olema installitud ja nähtav brauseri tööriistaribal. Klõpsake laienduse ikoonil, et avada hüpikaken ja näha teadet "Hello, World!".
Töötamine JavaScripti API-dega
Veebilehitseja laiendused saavad brauseri ja veebilehtedega suhelda JavaScripti API-de abil. Need API-d pakuvad juurdepääsu erinevatele funktsioonidele, näiteks:
- Vahelehtede API (Tabs API): Võimaldab hallata brauseri vahelehti, sealhulgas luua, uuendada ja pärida vahelehti.
- Salvestusruumi API (Storage API): Pakub võimalust andmeid püsivalt laienduse sees salvestada ja neid sealt kätte saada.
- Häirete API (Alarms API): Võimaldab ajastada ülesandeid kindlatel aegadel täitmiseks.
- Märguannete API (Notifications API): Võimaldab kuvada kasutajale märguandeid.
- Kontekstimenüüde API (Context Menus API): Võimaldab lisada kohandatud üksusi brauseri kontekstimenüüsse (paremklõpsu menüü).
- Veebipäringute API (Web Request API) (Manifest V3-s Deklaratiivne võrgupäring): Võimaldab kinni püüda ja muuta võrgupäringuid.
- Skriptimise API (Scripting API): Võimaldab süstida skripte veebilehtedele.
Näide: salvestusruumi (Storage) API kasutamine
Loome laienduse, mis salvestab ja hangib kasutaja nime, kasutades salvestusruumi API-d.
1. Manifestifaili uuendamine (manifest.json)
Veenduge, et teie `manifest.json` faili `permissions` massiiv sisaldab luba `"storage"`:
{
"manifest_version": 3,
"name": "Storage Example",
"version": "1.0",
"description": "An extension that uses the Storage API",
"permissions": [
"storage"
],
"action": {
"default_popup": "popup.html"
},
"icons": {
"16": "images/icon16.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
}
}
2. Hüpikakna faili loomine (popup.html)
Looge või uuendage oma `popup.html` fail järgmise sisuga:
<!DOCTYPE html>
<html>
<head>
<title>Storage Example</title>
<style>
body {
width: 250px;
padding: 10px;
font-family: sans-serif;
}
</style>
</head>
<body>
<h1>Storage Example</h1>
<label for="name">Enter your name:</label>
<input type="text" id="name">
<button id="save">Save</button>
<p id="greeting"></p>
<script src="popup.js"></script>
</body>
</html>
3. Hüpikakna skripti loomine (popup.js)
Looge fail nimega `popup.js` ja lisage järgmine kood:
document.addEventListener('DOMContentLoaded', () => {
const nameInput = document.getElementById('name');
const saveButton = document.getElementById('save');
const greeting = document.getElementById('greeting');
// Load the saved name from storage
chrome.storage.sync.get('name', (data) => {
if (data.name) {
nameInput.value = data.name;
greeting.textContent = `Hello, ${data.name}!`;
}
});
// Save the name to storage when the button is clicked
saveButton.addEventListener('click', () => {
const name = nameInput.value;
chrome.storage.sync.set({ name: name }, () => {
greeting.textContent = `Hello, ${name}!`;
});
});
});
Selgitus:
- Skript kuulab `DOMContentLoaded` sündmust, et tagada DOM-i täielik laadimine enne koodi käivitamist.
- See hangib viited sisestusväljale, salvestusnupule ja tervituslõigule.
- See laadib salvestatud nime mälust, kasutades `chrome.storage.sync.get()`.
- See salvestab nime mällu, kui salvestusnuppu klõpsatakse, kasutades `chrome.storage.sync.set()`.
- See uuendab tervituslõiku salvestatud või sisestatud nimega.
Laadige laiendus oma brauseris uuesti. Nüüd, kui avate hüpikakna, saate sisestada oma nime, selle salvestada ja näha tervitussõnumit. Nimi salvestatakse laienduse mällu ja laaditakse järgmisel korral, kui hüpikakna avate.
Näide: vahelehtede (Tabs) API kasutamine
Loome laienduse, mis kuvab hüpikaknas praeguse vahelehe URL-i.
1. Manifestifaili uuendamine (manifest.json)
Lisage luba `"tabs"` oma `manifest.json` faili `permissions` massiivi:
{
"manifest_version": 3,
"name": "Tabs Example",
"version": "1.0",
"description": "An extension that uses the Tabs API",
"permissions": [
"tabs"
],
"action": {
"default_popup": "popup.html"
},
"icons": {
"16": "images/icon16.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
}
}
2. Hüpikakna faili loomine (popup.html)
Looge või uuendage oma `popup.html` fail järgmise sisuga:
<!DOCTYPE html>
<html>
<head>
<title>Tabs Example</title>
<style>
body {
width: 300px;
padding: 10px;
font-family: sans-serif;
}
</style>
</head>
<body>
<h1>Tabs Example</h1>
<p>Current Tab URL:</p>
<p id="url"></p>
<script src="popup.js"></script>
</body>
</html>
3. Hüpikakna skripti loomine (popup.js)
Looge fail nimega `popup.js` ja lisage järgmine kood:
document.addEventListener('DOMContentLoaded', () => {
const urlDisplay = document.getElementById('url');
// Get the current tab's URL
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
const tab = tabs[0];
urlDisplay.textContent = tab.url;
});
});
Selgitus:
- Skript kuulab `DOMContentLoaded` sündmust.
- See kasutab `chrome.tabs.query()`, et saada hetkel aktiivne vaheleht praeguses aknas.
- See hangib vahelehe URL-i ja kuvab selle `url` lõigus.
Laadige laiendus oma brauseris uuesti. Nüüd, kui avate hüpikakna, kuvab see praeguse vahelehe URL-i.
Taustaskriptid ja teenustöötajad
Manifest V3-s on taustaskriptid asendatud teenustöötajatega (service workers). Teenustöötajad on sündmuspõhised skriptid, mis töötavad taustal ilma püsivat lehte vajamata. Nad on tõhusamad ja vähem ressursinõudlikud kui taustalehed.
Teenustöötajate peamised omadused:
- Sündmuspõhised: Teenustöötajad reageerivad sündmustele, nagu brauseri toimingud, häired ja sõnumid sisuskriptidest.
- Asünkroonsed: Teenustöötajad kasutavad asünkroonseid API-sid, et vältida põhilõime blokeerimist.
- Lõpetavad tegevuse jõudeolekul: Teenustöötajad lõpetatakse, kui nad aktiivselt sündmusi ei käsitle, säästes seeläbi ressursse.
Näide: teenustöötaja kasutamine
Loome laienduse, mis kuvab märguande, kui brauser käivitub.
1. Manifestifaili uuendamine (manifest.json)
Uuendage oma `manifest.json` faili järgmise sisuga:
{
"manifest_version": 3,
"name": "Service Worker Example",
"version": "1.0",
"description": "An extension that uses a service worker",
"permissions": [
"notifications"
],
"background": {
"service_worker": "background.js"
},
"icons": {
"16": "images/icon16.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
}
}
Selgitus:
- Atribuut `"background"` määrab tee teenustöötaja skriptini (`background.js`).
- Massiiv `"permissions"` sisaldab luba `"notifications"`, mis on vajalik märguannete kuvamiseks.
2. Teenustöötaja skripti loomine (background.js)
Looge fail nimega `background.js` ja lisage järgmine kood:
chrome.runtime.onStartup.addListener(() => {
// Display a notification when the browser starts
chrome.notifications.create('startup-notification', {
type: 'basic',
iconUrl: 'images/icon48.png',
title: 'Browser Started',
message: 'The browser has started.',
});
});
Selgitus:
- Skript kuulab `chrome.runtime.onStartup` sündmust, mis käivitub brauseri käivitamisel.
- See kasutab `chrome.notifications.create()`, et kuvada määratud omadustega märguanne.
Laadige laiendus oma brauseris uuesti. Nüüd, kui taaskäivitate oma brauseri, peaksite nägema laienduse märguannet.
Sisuskriptid (Content Scripts)
Sisuskriptid on JavaScripti failid, mis töötavad veebilehtede kontekstis. Nad saavad juurdepääsu veebilehtede DOM-ile ja seda muuta, võimaldades teil kohandada veebisaitide käitumist ja välimust.
Sisuskriptide peamised omadused:
- Juurdepääs DOM-ile: Sisuskriptid saavad juurdepääsu veebilehtede DOM-ile ja seda manipuleerida.
- Isoleeritus veebilehe skriptidest: Sisuskriptid töötavad isoleeritud keskkonnas, vältides konflikte veebilehe skriptidega.
- Suhtlus taustaskriptidega: Sisuskriptid saavad suhelda taustaskriptidega sõnumite edastamise teel.
Näide: sisuskripti kasutamine
Loome laienduse, mis muudab veebilehtede taustavärvi helesiniseks.
1. Manifestifaili uuendamine (manifest.json)
Uuendage oma `manifest.json` faili järgmise sisuga:
{
"manifest_version": 3,
"name": "Content Script Example",
"version": "1.0",
"description": "An extension that uses a content script",
"permissions": [
"activeTab",
"scripting"
],
"background": {
"service_worker": "background.js"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content.js"]
}
],
"icons": {
"16": "images/icon16.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
}
}
Selgitus:
- Atribuut `"content_scripts"` määrab massiivi sisuskriptidest, mis süstitakse veebilehtedele.
- `"matches"` määrab URL-id, kuhu sisuskript tuleks süstida (`<all_urls>` sobib kõigi URL-idega).
- `"js"` määrab tee sisuskriptini (`content.js`).
- Massiiv `"permissions"` sisaldab lube `"activeTab"` ja `"scripting"`, mis on vajalikud skriptide süstimiseks.
2. Sisuskripti loomine (content.js)
Looge fail nimega `content.js` ja lisage järgmine kood:
document.body.style.backgroundColor = 'lightblue';
3. Teenustöötaja loomine (background.js)
Looge fail nimega `background.js` ja lisage järgmine kood:
chrome.action.onClicked.addListener((tab) => {
chrome.scripting.executeScript({
target: { tabId: tab.id },
function: () => {
document.body.style.backgroundColor = 'lightblue';
}
});
});
Selgitus:
- Sisuskript lihtsalt seab `body` elemendi taustavärvi helesiniseks.
- Teenustöötaja kuulab klõpsusündmust ja käivitab praegusel vahelehel funktsiooni, mis muudab taustavärvi.
Laadige laiendus oma brauseris uuesti. Nüüd, kui avate mis tahes veebilehe, on taustavärv helesinine.
Veebilehitseja laienduste silumine
Veebilehitseja laienduste silumine on arendusprotsessi oluline osa. Chrome ja Firefox pakuvad suurepäraseid arendajate tööriistu laienduste silumiseks.
Silumine Chrome'is:
- Avage Chrome ja minge aadressile `chrome://extensions`.
- Lubage paremas ülanurgas "Arendajarežiim" (Developer mode).
- Klõpsake oma laienduse juures "Kontrolli vaateid taustaleht" (Inspect views background page). See avab Chrome'i arendajatööriistad taustaskripti jaoks.
- Sisuskriptide silumiseks avage veebileht, kuhu sisuskript on süstitud, ja seejärel avage selle lehe jaoks Chrome'i arendajatööriistad. Peaksite nägema oma sisuskripti paneelis "Allikad" (Sources).
Silumine Firefoxis:
- Avage Firefox ja minge aadressile `about:debugging#/runtime/this-firefox`.
- Leidke oma laiendus loendist ja klõpsake "Kontrolli" (Inspect). See avab Firefoxi arendajatööriistad laienduse jaoks.
- Sisuskriptide silumiseks avage veebileht, kuhu sisuskript on süstitud, ja seejärel avage selle lehe jaoks Firefoxi arendajatööriistad. Peaksite nägema oma sisuskripti paneelis "Silur" (Debugger).
Levinud silumistehnikad:
- Konsooli logimine: Kasutage `console.log()`, et printida sõnumeid konsooli.
- Katkestuspunktid: Seadke oma koodis katkestuspunkte, et peatada täitmine ja kontrollida muutujaid.
- Lähtekoodi kaardid (Source maps): Kasutage lähtekoodi kaarte, et siluda oma koodi selle algsel kujul, isegi kui see on minimeeritud või transpileeritud.
- Vigade käsitlemine: Rakendage vigade käsitlemist, et püüda ja logida vigu.
Oma laienduse avaldamine
Kui olete oma laienduse arendanud ja testinud, saate selle avaldada Chrome'i veebipoes või Firefoxi lisandmoodulite turul.
Avaldamine Chrome'i veebipoes:
- Looge arendajakonto Chrome'i veebipoes.
- Pakkige oma laiendus `.zip` faili.
- Laadige `.zip` fail üles Chrome'i veebipoodi.
- Esitage nõutavad metaandmed, nagu laienduse nimi, kirjeldus ja ekraanipildid.
- Esitage oma laiendus ülevaatamiseks.
Avaldamine Firefoxi lisandmoodulite turul:
- Looge arendajakonto Firefoxi lisandmoodulite turul.
- Pakkige oma laiendus `.zip` faili.
- Laadige `.zip` fail üles Firefoxi lisandmoodulite turule.
- Esitage nõutavad metaandmed, nagu laienduse nimi, kirjeldus ja ekraanipildid.
- Esitage oma laiendus ülevaatamiseks.
Avaldamise parimad tavad:
- Kirjutage oma laiendusele selge ja lühike kirjeldus.
- Esitage kvaliteetseid ekraanipilte ja videoid, et tutvustada oma laienduse funktsioone.
- Testige oma laiendust põhjalikult enne selle esitamist.
- Vastake kiiresti kasutajate arvustustele ja tagasisidele.
- Hoidke oma laiendus ajakohasena uusimate brauseriversioonide ja turvapaikadega.
Turvalisusega seotud kaalutlused
Turvalisus on veebilehitseja laienduste arendamisel kriitilise tähtsusega aspekt. Laiendused võivad potentsiaalselt pääseda juurde tundlikele kasutajaandmetele ja muuta veebilehtede sisu, seega on oluline järgida turvalisuse parimaid tavasid, et kaitsta kasutajaid pahatahtliku koodi eest.
Peamised turvalisusega seotud kaalutlused:
- Minimeerige lubasid: Küsige ainult neid lubasid, mida teie laiendus tegelikult vajab.
- Valideerige kasutaja sisendit: Puhastage ja valideerige kogu kasutaja sisend, et vältida saidiülest skriptimist (XSS) rünnakuid.
- Kasutage HTTPS-i: Kasutage alati HTTPS-i kaugserveritega suhtlemiseks.
- Sisuturvalisuse poliitika (CSP): Rakendage ranget CSP-d, et vältida suvalise koodi käivitamist.
- Uuendage regulaarselt oma laiendust: Hoidke oma laiendus ajakohasena uusimate turvapaikadega.
Nende turvajuhiste järgimisega saate aidata tagada, et teie veebilehitseja laiendus on kasutajatele ohutu ja turvaline.
Kokkuvõte
Veebilehitseja laienduste arendamine Manifest V3 ja JavaScripti API-de abil pakub võimsat viisi sirvimiskogemuse kohandamiseks ja veebibrauseritele uute funktsioonide lisamiseks. Mõistes selles juhendis kirjeldatud põhimõisteid, API-sid ja parimaid tavasid, saate luua võimsaid ja turvalisi laiendusi, mis suurendavad tootlikkust, parandavad turvalisust ja pakuvad paremat sirvimiskogemust kasutajatele üle maailma. Veebi arenedes mängivad veebilehitseja laiendused üha olulisemat rolli veebisuhtluse tuleviku kujundamisel. Kasutage ära Manifest V3 ja rikkalike JavaScripti API-de pakutavaid võimalusi, et luua uuenduslikke ja väärtuslikke laiendusi.