Brauserilaienduste Arendamine: Navigeerimine Manifest V3-s ja JavaScripti API-des

Brauserilaiendused pakuvad võimsat viisi sirvimiskogemuse täiustamiseks ja kohandamiseks. Need võimaldavad arendajatel lisada veebibrauseritele funktsionaalsust, suhelda veebilehtedega ja integreeruda veebiteenustega. See juhend annab põhjaliku ülevaate brauserilaienduste arendamisest, keskendudes Manifest V3-le ja peamistele JavaScripti API-dele, mis neid laiendusi toidavad.

Brauserilaienduste Mõistmine

Brauserilaiendus on väike tarkvaraprogramm, mis laiendab veebibrauseri funktsionaalsust. Laiendused saavad muuta veebilehti, lisada uusi funktsioone ja integreeruda väliste teenustega. Tavaliselt on need kirjutatud JavaScriptis, HTML-is ja CSS-is ning pakendatud ZIP-failina koos manifestifailiga, mis kirjeldab laienduse metaandmeid ja lube.

Populaarsed kasutusjuhud brauserilaiendustele hõlmavad:

• Reklaamiblokeerijad: Eemaldavad veebilehtedelt reklaame.
• Paroolihaldurid: Salvestavad ja haldavad paroole turvaliselt.
• Produktiivsustööriistad: Parandavad töövoogu funktsioonidega nagu ülesannete haldamine ja märkmete tegemine.
• Sisu kohandamine: Muudavad veebilehtede välimust ja käitumist.
• Juurdepääsetavuse tööriistad: Parandavad veebi juurdepääsetavust puuetega kasutajatele.

Manifest V3: Uus Standard

Manifest V3 on brauserilaienduse manifestifaili uusim versioon – JSON-fail, mis kirjeldab laienduse metaandmeid, lube ja ressursse. See toob kaasa olulisi muudatusi laienduste arendusprotsessi, keskendudes peamiselt paremale turvalisusele, privaatsusele ja jõudlusele. Peamised muudatused Manifest V3-s hõlmavad:

• Teenustöötajad (Service Workers): Taustalehtede asendamine teenustöötajatega parema jõudluse ja väiksema mälukasutuse saavutamiseks. Teenustöötajad on sündmuspõhised skriptid, mis töötavad taustal ja tegelevad sündmustega nagu võrgupäringud ja alarmid.
• Deklaratiivse Võrgupäringu API (Declarative Net Request API): Blokeeriva webRequest API asendamine deklaratiivse võrgupäringu API-ga võrgupäringute filtreerimiseks. See parandab privaatsust ja turvalisust, piirates laienduse juurdepääsu võrguliiklusele.
• Sisu Turvalisuse Poliitika (CSP): Rangemate CSP poliitikate jõustamine, et vältida suvalise koodi käivitamist ja leevendada turvariske.
• Manifesti Versioon: Võti manifest_version failis manifest.json peab olema seatud väärtusele 3.

Migreerimine Manifest V2-lt Manifest V3-le

Manifest V2-lt Manifest V3-le migreerimine nõuab hoolikat planeerimist ja koodimuudatusi. Siin on samm-sammuline juhend:

1. Uuendage manifestifaili: Seadke manifest_version väärtuseks 3 ja uuendage välju permissions ja background vastavalt Manifest V3 nõuetele.
2. Asendage taustalehed teenustöötajatega: Kirjutage taustaskriptid ümber teenustöötajateks, käsitledes sündmusi kasutades API-sid chrome.scripting ja chrome.alarms.
3. Migreeruge Deklaratiivse Võrgupäringu API-le: Asendage blokeerivad webRequest API kutsed deklaratiivsete reeglitega, mis on defineeritud declarativeNetRequest API-s.
4. Uuendage sisu turvalisuse poliitikat: Kohandage välja content_security_policy manifestifailis, et see vastaks rangematele CSP nõuetele.
5. Testige põhjalikult: Testige laiendust laialdaselt erinevates brauserites, et tagada ühilduvus ja korrektne funktsionaalsus.

Näide: Taustaskripti Migreerimine Teenustöötajaks

Manifest V2 (background.js):

            chrome.webRequest.onBeforeRequest.addListener(
  function(details) {
    return {cancel: true};
  },
  {urls: ["*.example.com/*"]},
  ["blocking"]
);

            

              
                Copy
              
            
          

Manifest V3 (service-worker.js):

            chrome.declarativeNetRequest.updateDynamicRules({
  removeRuleIds: [1],
  addRules: [{
    "id": 1,
    "priority": 1,
    "action": { "type": "block" },
    "condition": { "urlFilter": "*.example.com/*", "resourceTypes": ["main_frame", "sub_frame", "stylesheet", "script", "image", "object", "xmlhttprequest", "other"] }
  }]
});

            

              
                Copy
              
            
          

manifest.json (Manifest V3):

            {
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0",
  "description": "A simple extension",
  "permissions": [
    "declarativeNetRequest",
    "declarativeNetRequestFeedback",
    "storage"
  ],
  "background": {
    "service_worker": "service-worker.js"
  },
  "declarative_net_request": {
    "rule_resources": [{
      "id": "ruleset_1",
      "enabled": true,
      "path": "rules.json"
    }]
  }
}

            

              
                Copy
              
            
          

Olulised JavaScripti API-d Brauserilaiendustele

Brauserilaiendused tuginevad hulgale JavaScripti API-dele, et suhelda brauseri ja veebilehtedega. Siin on mõned kõige olulisemad API-d:

1. chrome.runtime

API chrome.runtime pakub juurdepääsu laienduse käituskeskkonnale. See võimaldab laiendustel suhelda taustaskriptiga, pääseda juurde manifestifailile ja hallata laienduse elutsüklit.

Peamised meetodid:

• chrome.runtime.sendMessage(): Saadab sõnumi taustaskriptile või teistele laiendustele.
• chrome.runtime.onMessage.addListener(): Kuulab sõnumeid teistelt skriptidelt.
• chrome.runtime.getManifest(): Tagastab laienduse manifestifaili JavaScripti objektina.
• chrome.runtime.reload(): Laadib laienduse uuesti.

Näide: Sõnumi Saatmine Sisuskriptist Taustaskriptile

Sisuskript (content.js):

            chrome.runtime.sendMessage({message: "Hello from content script!"}, function(response) {
  console.log("Response from background script: ", response.message);
});

            

              
                Copy
              
            
          

Taustaskript (service-worker.js):

            chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    console.log("Message from content script: ", request.message);
    sendResponse({message: "Hello from background script!"});
  }
);

            

              
                Copy
              
            
          

2. chrome.storage

API chrome.storage pakub mehhanismi andmete salvestamiseks ja pärimiseks laienduse sees. See pakub nii lokaalseid kui ka sünkroniseeritud salvestusvõimalusi.

Peamised meetodid:

• chrome.storage.local.set(): Salvestab andmeid lokaalselt.
• chrome.storage.local.get(): Pärineb andmeid lokaalsest salvestusruumist.
• chrome.storage.sync.set(): Salvestab andmeid, mis sünkroniseeritakse kasutaja seadmete vahel.
• chrome.storage.sync.get(): Pärineb andmeid sünkroniseeritud salvestusruumist.

Näide: Andmete Salvestamine ja Pärimine Lokaalsest Salvestusruumist

            // Salvesta andmed
chrome.storage.local.set({key: "value"}, function() {
  console.log("Väärtus on seatud kui " + "value");
});

// Pärine andmed
chrome.storage.local.get(["key"], function(result) {
  console.log("Praegune väärtus on " + result.key);
});

            

              
                Copy
              
            
          

3. chrome.tabs

API chrome.tabs võimaldab laiendustel suhelda brauseri vahelehtedega. See pakub meetodeid vahelehtede loomiseks, päringute tegemiseks, muutmiseks ja sulgemiseks.

Peamised meetodid:

• chrome.tabs.create(): Loob uue vahelehe.
• chrome.tabs.query(): Teeb päringu vahelehtedele, mis vastavad kindlatele kriteeriumitele.
• chrome.tabs.update(): Uuendab vahelehe omadusi.
• chrome.tabs.remove(): Sulgeb vahelehe.
• chrome.tabs.executeScript(): Käivitab JavaScripti koodi vahelehel.

Näide: Uue Vahelehe Loomine

            chrome.tabs.create({url: "https://www.example.com"}, function(tab) {
  console.log("Uus vaheleht loodud ID-ga: " + tab.id);
});

            

              
                Copy
              
            
          

4. chrome.alarms

API chrome.alarms võimaldab laiendustel ajastada ülesandeid, mis käivitatakse kindlal ajal või pärast määratud intervalli. See on eriti oluline Manifest V3-s, kuna see asendab taimerite kasutamist taustalehtedel, mida enam ei toetata.

Peamised meetodid:

• chrome.alarms.create(): Loob uue alarmi.
• chrome.alarms.get(): Pärineb olemasoleva alarmi.
• chrome.alarms.clear(): Kustutab alarmi.
• chrome.alarms.getAll(): Pärineb kõik alarmid.
• chrome.alarms.onAlarm.addListener(): Kuulab alarmi sündmusi.

Näide: Alarmi Loomine

            chrome.alarms.create("myAlarm", {delayInMinutes: 1, periodInMinutes: 1});

chrome.alarms.onAlarm.addListener(function(alarm) {
  if (alarm.name === "myAlarm") {
    console.log("Alarm käivitus!");
  }
});

            

              
                Copy
              
            
          

5. chrome.scripting

API chrome.scripting võimaldab laiendustel süstida JavaScripti ja CSS-i veebilehtedele. See API on Manifest V3 võtmekomponent ja teenustöötajad kasutavad seda veebilehtedega suhtlemiseks pärast nende laadimist.

Peamised meetodid:

• chrome.scripting.executeScript(): Käivitab JavaScripti koodi vahelehel või raamis.
• chrome.scripting.insertCSS(): Lisab CSS-i vahelehele või raami.

Näide: JavaScripti Süstimine Vahelehele

            chrome.scripting.executeScript({
  target: {tabId: tabId},
  function: function() {
    console.log("Süstitud skript!");
    document.body.style.backgroundColor = 'red';
  }
});

            

              
                Copy
              
            
          

6. chrome.notifications

API chrome.notifications võimaldab laiendustel kuvada kasutajale teavitusi. See on kasulik uuenduste, hoiatuste ja muu olulise teabe edastamiseks.

Peamised meetodid:

• chrome.notifications.create(): Loob uue teavituse.
• chrome.notifications.update(): Uuendab olemasolevat teavitust.
• chrome.notifications.clear(): Kustutab teavituse.
• chrome.notifications.getAll(): Pärineb kõik teavitused.

Näide: Teavituse Loomine

            chrome.notifications.create('myNotification', {
  type: 'basic',
  iconUrl: 'icon.png',
  title: 'My Extension',
  message: 'Hello from my extension!'
}, function(notificationId) {
  console.log('Teavitus loodud ID-ga: ' + notificationId);
});

            

              
                Copy
              
            
          

7. chrome.contextMenus

API chrome.contextMenus võimaldab laiendustel lisada elemente brauseri kontekstimenüüsse (paremkliki menüü). See pakub kasutajatele mugavat viisi laienduse funktsionaalsusele otse veebilehtedelt juurde pääsemiseks.

Peamised meetodid:

• chrome.contextMenus.create(): Loob uue kontekstimenüü elemendi.
• chrome.contextMenus.update(): Uuendab olemasolevat kontekstimenüü elementi.
• chrome.contextMenus.remove(): Eemaldab kontekstimenüü elemendi.
• chrome.contextMenus.removeAll(): Eemaldab kõik laienduse loodud kontekstimenüü elemendid.

Näide: Kontekstimenüü Elemendi Loomine

            chrome.contextMenus.create({
  id: "myContextMenuItem",
  title: "Minu Kontekstimenüü Element",
  contexts: ["page", "selection"]
}, function() {
  console.log("Kontekstimenüü element loodud.");
});

chrome.contextMenus.onClicked.addListener(function(info, tab) {
  if (info.menuItemId === "myContextMenuItem") {
    console.log("Kontekstimenüü elemendile klõpsati!");
    alert("Klõpsasite kontekstimenüü elemendile!");
  }
});

            

              
                Copy
              
            
          

8. chrome.i18n

API-t chrome.i18n kasutatakse teie laienduse rahvusvahelistamiseks, muutes selle kättesaadavaks eri keeltes ja piirkondades olevatele kasutajatele. See võimaldab teil pakkuda oma laienduse kasutajaliidesest ja sõnumitest lokaliseeritud versioone.

Peamised meetodid:

• chrome.i18n.getMessage(): Pärineb lokaliseeritud stringi laienduse _locales kaustast.

Näide: chrome.i18n Kasutamine Lokaliseerimiseks

Esmalt looge oma laienduse juurkausta kaust nimega _locales. Selle sisse looge keelespetsiifilised kaustad nagu en, es, fr jne.

Igas keelekaustas looge fail nimega messages.json. Näiteks failis _locales/et/messages.json:

            {
  "extensionName": {
    "message": "Minu Laiendus",
    "description": "Laienduse nimi."
  },
  "greetingMessage": {
    "message": "Tere, maailm!",
    "description": "Lihtne tervitussõnum."
  }
}

            

              
                Copy
              
            
          

Seejärel oma JavaScripti koodis:

            let extensionName = chrome.i18n.getMessage("extensionName");
let greeting = chrome.i18n.getMessage("greetingMessage");
console.log(extensionName); // Väljund: Minu Laiendus
console.log(greeting);      // Väljund: Tere, maailm!

            

              
                Copy
              
            
          

Brauseriülene Ühilduvus

Kuigi Chrome on laienduste arendamiseks kõige populaarsem brauser, on oluline arvestada brauseriülese ühilduvusega. Firefox, Safari ja teised brauserid toetavad samuti laiendusi, kuid nende API-d ja manifestivormingud võivad veidi erineda.

Brauseriülese ühilduvuse tagamiseks:

• Kasutage WebExtensions API-t: WebExtensions API on standardiseeritud API brauserilaienduste arendamiseks, mida toetavad mitmed brauserid.
• Testige erinevates brauserites: Testige oma laiendust erinevates brauserites, et tuvastada ja parandada ühilduvusprobleeme.
• Kasutage polüfille (polyfills): Kasutage polüfille, et pakkuda puuduvat API funktsionaalsust erinevates brauserites.
• Tingimuslik kood: Kasutage tingimuslikku koodi, et kohaneda brauserispetsiifiliste erinevustega. Näiteks: if (typeof browser === "undefined") { var browser = chrome; }

Brauserilaienduste Arendamise Parimad Tavad

Siin on mõned parimad tavad, mida brauserilaienduste arendamisel järgida:

• Minimeerige load: Küsige ainult neid lube, mida teie laiendus absoluutselt vajab. See parandab kasutaja privaatsust ja turvalisust.
• Kasutage turvalisi kodeerimistavasid: Järgige turvalisi kodeerimistavasid, et vältida haavatavusi nagu saidiülene skriptimine (XSS) ja koodisüstimine.
• Optimeerige jõudlust: Optimeerige oma laienduse jõudlust, et minimeerida selle mõju brauseri jõudlusele.
• Pakkuge selget ja lühidat dokumentatsiooni: Pakkuge selget ja lühidat dokumentatsiooni, et aidata kasutajatel mõista, kuidas teie laiendust kasutada.
• Käsitlege vigu sujuvalt: Rakendage veakäsitlust, et vältida laienduse krahhimist või ootamatu käitumise põhjustamist.
• Hoidke oma laiendus ajakohasena: Uuendage oma laiendust regulaarselt, et lahendada vigu, turvaauke ja ühilduvusprobleeme.
• Kaaluge rahvusvahelistamist (i18n): Kujundage oma laiendus nii, et seda oleks lihtne lokaliseerida erinevatesse keeltesse. Kasutage chrome.i18n API-t.
• Austage kasutaja privaatsust: Olge läbipaistev selles, kuidas teie laiendus kogub ja kasutab kasutajaandmeid, ning hankige vajadusel kasutaja nõusolek. Järgige asjakohaseid privaatsusmäärusi nagu GDPR ja CCPA.

Laienduse Esitamine Poodidesse

Kui teie laiendus on välja arendatud ja testitud, soovite selle esitada brauserilaienduste poodidesse, et see kasutajatele kättesaadavaks teha. Igal brauseril on oma pood ja esitamisprotsess:

• Chrome Web Store: Esitage oma laiendus Chrome'i kasutajatele Chrome'i veebipoodi. Protsess hõlmab arendajakonto loomist, laienduse pakendamist ja selle poodi üleslaadimist.
• Firefox Add-ons: Esitage oma laiendus Firefoxi kasutajatele Firefox Add-ons lehele. Protsess sarnaneb Chrome'i veebipoe omale ja hõlmab arendajakonto loomist ning laienduse ülevaatamiseks esitamist.
• Safari Extensions Gallery: Esitage oma laiendus Safari kasutajatele Safari laienduste galeriisse. Protsess hõlmab arendajasertifikaadi hankimist Apple'ilt ja laienduse ülevaatamiseks esitamist.

Laienduse esitamisel esitage kindlasti täpne ja täielik teave, sealhulgas kirjeldav pealkiri, üksikasjalik kirjeldus, ekraanipildid ja privaatsuspoliitika. Laienduste poed vaatavad esildised üle, et tagada nende vastavus oma eeskirjadele ja juhistele.

Kokkuvõte

Brauserilaienduste arendamine Manifest V3 ja JavaScripti API-dega pakub võimsat viisi sirvimiskogemuse kohandamiseks ja täiustamiseks. Mõistes põhimõisteid, järgides parimaid tavasid ja arvestades brauseriülest ühilduvust, saavad arendajad luua väärtuslikke ja kaasahaaravaid laiendusi kasutajatele üle kogu maailma. Veebi arenedes mängivad brauserilaiendused jätkuvalt olulist rolli interneti tuleviku kujundamisel.

Pidage meeles, et laienduste arendamisel tuleb alati eelistada kasutaja privaatsust ja turvalisust. Nende põhimõtetega arvestades saate luua laiendusi, mis on nii kasulikud kui auch usaldusväärsed.

See juhend annab kindla aluse brauserilaienduste arendamisega alustamiseks. Süvenedes uurige erinevaid saadaolevaid API-sid ja funktsioone ning katsetage erinevaid tehnikaid, et luua uuenduslikke ja mõjusaid laiendusi.