Naršyklės plėtinių kūrimas: darbas su „Manifest V3“ ir „JavaScript“ API

Naršyklės plėtiniai suteikia galingą būdą pagerinti ir pritaikyti naršymo patirtį. Jie leidžia kūrėjams pridėti funkcionalumo prie interneto naršyklių, sąveikauti su tinklalapiais ir integruotis su interneto paslaugomis. Šiame vadove pateikiama išsami naršyklės plėtinių kūrimo apžvalga, sutelkiant dėmesį į „Manifest V3“ ir pagrindines „JavaScript“ API, kurios maitina šiuos plėtinius.

Kas yra naršyklės plėtiniai?

Naršyklės plėtinys yra nedidelė programinė įranga, kuri praplečia interneto naršyklės funkcionalumą. Plėtiniai gali modifikuoti tinklalapius, pridėti naujų funkcijų ir integruotis su išorinėmis paslaugomis. Jie paprastai rašomi naudojant „JavaScript“, HTML ir CSS, ir supakuojami kaip ZIP failas su manifesto failu, kuriame aprašomi plėtinio metaduomenys ir leidimai.

Populiarūs naršyklės plėtinių naudojimo pavyzdžiai:

• Reklamų blokatoriai: Pašalina reklamas iš tinklalapių.
• Slaptažodžių tvarkyklės: Saugiai saugo ir tvarko slaptažodžius.
• Produktyvumo įrankiai: Pagerina darbo eigą su tokiomis funkcijomis kaip užduočių valdymas ir užrašų darymas.
• Turinio pritaikymas: Keičia tinklalapių išvaizdą ir elgseną.
• Prieinamumo įrankiai: Pagerina interneto prieinamumą vartotojams su negalia.

„Manifest V3“: naujasis standartas

„Manifest V3“ yra naujausia naršyklės plėtinio manifesto failo versija – tai JSON failas, kuriame aprašomi plėtinio metaduomenys, leidimai ir ištekliai. Ji įveda reikšmingus pokyčius plėtinių kūrimo procese, daugiausia dėmesio skiriant saugumo, privatumo ir našumo gerinimui. Pagrindiniai „Manifest V3“ pakeitimai apima:

• Paslaugų darbuotojai (Service Workers): Fono puslapių pakeitimas paslaugų darbuotojais siekiant geresnio našumo ir mažesnio atminties suvartojimo. Paslaugų darbuotojai yra įvykiais pagrįsti scenarijai, veikiantys fone ir tvarkantys tokius įvykius kaip tinklo užklausos ir žadintuvai.
• Deklaratyvioji tinklo užklausų API: Blokuojančios „webRequest“ API pakeitimas „Declarative Net Request“ API, skirta tinklo užklausų filtravimui. Tai padidina privatumą ir saugumą, apribodama plėtinio prieigą prie tinklo srauto.
• Turinio saugumo politika (CSP): Griežtesnių CSP politikų taikymas, siekiant išvengti savavališko kodo vykdymo ir sumažinti saugumo rizikas.
• Manifesto versija: „manifest_version“ raktas „manifest.json“ faile turi būti nustatytas į 3.

Perkėlimas iš „Manifest V2“ į „Manifest V3“

Perkėlimas iš „Manifest V2“ į „Manifest V3“ reikalauja kruopštaus planavimo ir kodo pakeitimų. Štai žingsnis po žingsnio vadovas:

1. Atnaujinkite manifesto failą: Nustatykite manifest_version į 3 ir atnaujinkite permissions bei background laukus, kad atitiktų „Manifest V3“ reikalavimus.
2. Pakeiskite fono puslapius paslaugų darbuotojais: Perrašykite fono scenarijus kaip paslaugų darbuotojus, tvarkydami įvykius naudojant chrome.scripting ir chrome.alarms API.
3. Pereikite prie „Declarative Net Request“ API: Pakeiskite blokuojančius webRequest API iškvietimus deklaratyviomis taisyklėmis, apibrėžtomis declarativeNetRequest API.
4. Atnaujinkite turinio saugumo politiką: Sureguliuokite content_security_policy lauką manifesto faile, kad atitiktų griežtesnius CSP reikalavimus.
5. Kruopščiai išbandykite: Išsamiai išbandykite plėtinį skirtingose naršyklėse, kad užtikrintumėte suderinamumą ir tinkamą funkcionalumą.

Pavyzdys: fono scenarijaus perkėlimas į paslaugų darbuotoją

„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
              
            
          

Esminės „JavaScript“ API naršyklės plėtiniams

Naršyklės plėtiniai naudoja „JavaScript“ API rinkinį, kad galėtų sąveikauti su naršykle ir tinklalapiais. Štai keletas svarbiausių API:

1. chrome.runtime

chrome.runtime API suteikia prieigą prie plėtinio vykdymo aplinkos. Ji leidžia plėtiniams bendrauti su fono scenarijumi, pasiekti manifesto failą ir valdyti plėtinio gyvavimo ciklą.

Pagrindiniai metodai:

• chrome.runtime.sendMessage(): Siunčia pranešimą fono scenarijui ar kitiems plėtiniams.
• chrome.runtime.onMessage.addListener(): Laukia pranešimų iš kitų scenarijų.
• chrome.runtime.getManifest(): Grąžina plėtinio manifesto failą kaip „JavaScript“ objektą.
• chrome.runtime.reload(): Perkrauna plėtinį.

Pavyzdys: pranešimo siuntimas iš turinio scenarijaus į fono scenarijų

Turinio scenarijus (content.js):

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

            

              
                Copy
              
            
          

Fono scenarijus (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

chrome.storage API suteikia mechanizmą duomenims saugoti ir gauti plėtinio viduje. Ji siūlo tiek vietinę, tiek sinchronizuotą saugojimo parinktis.

Pagrindiniai metodai:

• chrome.storage.local.set(): Saugo duomenis vietiškai.
• chrome.storage.local.get(): Gauna duomenis iš vietinės saugyklos.
• chrome.storage.sync.set(): Saugo duomenis, kurie sinchronizuojami tarp vartotojo įrenginių.
• chrome.storage.sync.get(): Gauna duomenis iš sinchronizuotos saugyklos.

Pavyzdys: duomenų saugojimas ir gavimas vietinėje saugykloje

            // Store data
chrome.storage.local.set({key: "value"}, function() {
  console.log("Value is set to " + "value");
});

// Retrieve data
chrome.storage.local.get(["key"], function(result) {
  console.log("Value currently is " + result.key);
});

            

              
                Copy
              
            
          

3. chrome.tabs

chrome.tabs API leidžia plėtiniams sąveikauti su naršyklės kortelėmis. Ji suteikia metodus kortelėms kurti, ieškoti, modifikuoti ir uždaryti.

Pagrindiniai metodai:

• chrome.tabs.create(): Sukuria naują kortelę.
• chrome.tabs.query(): Ieško kortelių, atitinkančių tam tikrus kriterijus.
• chrome.tabs.update(): Atnaujina kortelės savybes.
• chrome.tabs.remove(): Uždaro kortelę.
• chrome.tabs.executeScript(): Vykdo „JavaScript“ kodą kortelėje.

Pavyzdys: naujos kortelės sukūrimas

            chrome.tabs.create({url: "https://www.example.com"}, function(tab) {
  console.log("New tab created with ID: " + tab.id);
});

            

              
                Copy
              
            
          

4. chrome.alarms

chrome.alarms API leidžia plėtiniams planuoti užduotis, kurios bus vykdomos tam tikru laiku arba po nurodyto intervalo. Tai ypač svarbu „Manifest V3“, nes pakeičia laikmačių naudojimą fono puslapiuose, kurie nebėra palaikomi.

Pagrindiniai metodai:

• chrome.alarms.create(): Sukuria naują žadintuvą.
• chrome.alarms.get(): Gauna esamą žadintuvą.
• chrome.alarms.clear(): Išvalo žadintuvą.
• chrome.alarms.getAll(): Gauna visus žadintuvus.
• chrome.alarms.onAlarm.addListener(): Laukia žadintuvo įvykių.

Pavyzdys: žadintuvo sukūrimas

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

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

            

              
                Copy
              
            
          

5. chrome.scripting

chrome.scripting API leidžia plėtiniams įterpti „JavaScript“ ir CSS į tinklalapius. Ši API yra pagrindinis „Manifest V3“ komponentas ir naudojama paslaugų darbuotojų sąveikai su tinklalapiais po jų įkėlimo.

Pagrindiniai metodai:

• chrome.scripting.executeScript(): Vykdo „JavaScript“ kodą kortelėje ar rėmelyje.
• chrome.scripting.insertCSS(): Įterpia CSS į kortelę ar rėmelį.

Pavyzdys: „JavaScript“ įterpimas į kortelę

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

            

              
                Copy
              
            
          

6. chrome.notifications

chrome.notifications API leidžia plėtiniams rodyti pranešimus vartotojui. Tai naudinga teikiant atnaujinimus, įspėjimus ir kitą svarbią informaciją.

Pagrindiniai metodai:

• chrome.notifications.create(): Sukuria naują pranešimą.
• chrome.notifications.update(): Atnaujina esamą pranešimą.
• chrome.notifications.clear(): Išvalo pranešimą.
• chrome.notifications.getAll(): Gauna visus pranešimus.

Pavyzdys: pranešimo sukūrimas

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

            

              
                Copy
              
            
          

7. chrome.contextMenus

chrome.contextMenus API leidžia plėtiniams pridėti elementų į naršyklės kontekstinį meniu (dešiniojo pelės mygtuko paspaudimo meniu). Tai suteikia patogų būdą vartotojams pasiekti plėtinio funkcionalumą tiesiai iš tinklalapių.

Pagrindiniai metodai:

• chrome.contextMenus.create(): Sukuria naują kontekstinio meniu elementą.
• chrome.contextMenus.update(): Atnaujina esamą kontekstinio meniu elementą.
• chrome.contextMenus.remove(): Pašalina kontekstinio meniu elementą.
• chrome.contextMenus.removeAll(): Pašalina visus plėtinio sukurtus kontekstinio meniu elementus.

Pavyzdys: kontekstinio meniu elemento sukūrimas

            chrome.contextMenus.create({
  id: "myContextMenuItem",
  title: "My Context Menu Item",
  contexts: ["page", "selection"]
}, function() {
  console.log("Context menu item created.");
});

chrome.contextMenus.onClicked.addListener(function(info, tab) {
  if (info.menuItemId === "myContextMenuItem") {
    console.log("Context menu item clicked!");
    alert("You clicked the context menu item!");
  }
});

            

              
                Copy
              
            
          

8. chrome.i18n

chrome.i18n API naudojama jūsų plėtinio internacionalizavimui, kad jis būtų prieinamas vartotojams skirtingomis kalbomis ir skirtinguose regionuose. Ji leidžia pateikti lokalizuotas plėtinio vartotojo sąsajos ir pranešimų versijas.

Pagrindiniai metodai:

• chrome.i18n.getMessage(): Gauna lokalizuotą eilutę iš plėtinio _locales katalogo.

Pavyzdys: chrome.i18n naudojimas lokalizavimui

Pirmiausia, sukurkite _locales katalogą savo plėtinio pagrindiniame aplanke. Jame sukurkite kalbų aplankus, pvz., en, es, fr ir t.t.

Kiekviename kalbos aplanke sukurkite messages.json failą. Pavyzdžiui, _locales/en/messages.json:

            {
  "extensionName": {
    "message": "My Extension",
    "description": "The name of the extension."
  },
  "greetingMessage": {
    "message": "Hello, world!",
    "description": "A simple greeting message."
  }
}

            

              
                Copy
              
            
          

Tada, savo „JavaScript“ kode:

            let extensionName = chrome.i18n.getMessage("extensionName");
let greeting = chrome.i18n.getMessage("greetingMessage");
console.log(extensionName); // Output: My Extension
console.log(greeting);      // Output: Hello, world!

            

              
                Copy
              
            
          

Suderinamumas su įvairiomis naršyklėmis

Nors „Chrome“ yra populiariausia naršyklė plėtinių kūrimui, svarbu atsižvelgti į suderinamumą su įvairiomis naršyklėmis. „Firefox“, „Safari“ ir kitos naršyklės taip pat palaiko plėtinius, tačiau jų API ir manifesto formatai gali šiek tiek skirtis.

Kad užtikrintumėte suderinamumą su įvairiomis naršyklėmis:

• Naudokite „WebExtensions“ API: „WebExtensions“ API yra standartizuota API naršyklės plėtinių kūrimui, kurią palaiko kelios naršyklės.
• Testuokite skirtingose naršyklėse: Išbandykite savo plėtinį skirtingose naršyklėse, kad nustatytumėte ir ištaisytumėte suderinamumo problemas.
• Naudokite polifilus: Naudokite polifilus (polyfills), kad pateiktumėte trūkstamą API funkcionalumą skirtingose naršyklėse.
• Sąlyginis kodas: Naudokite sąlyginį kodą, kad prisitaikytumėte prie naršyklėms būdingų skirtumų. Pavyzdžiui: if (typeof browser === "undefined") { var browser = chrome; }

Geriausios naršyklės plėtinių kūrimo praktikos

Štai keletas geriausių praktikų, kurių reikėtų laikytis kuriant naršyklės plėtinius:

• Sumažinkite leidimus: Prašykite tik tų leidimų, kurių jūsų plėtiniui absoliučiai reikia. Tai didina vartotojų privatumą ir saugumą.
• Naudokite saugaus programavimo praktikas: Laikykitės saugaus programavimo praktikų, kad išvengtumėte pažeidžiamumų, tokių kaip tarpvietinis scenarijų rašymas (XSS) ir kodo įterpimas.
• Optimizuokite našumą: Optimizuokite savo plėtinio našumą, kad sumažintumėte jo poveikį naršyklės veikimui.
• Pateikite aiškią ir glaustą dokumentaciją: Pateikite aiškią ir glaustą dokumentaciją, kad padėtumėte vartotojams suprasti, kaip naudoti jūsų plėtinį.
• Korektiškai tvarkykite klaidas: Įdiekite klaidų tvarkymą, kad jūsų plėtinys nesugriūtų ir nesukeltų netikėtos elgsenos.
• Atnaujinkite savo plėtinį: Reguliariai atnaujinkite savo plėtinį, kad ištaisytumėte klaidas, saugumo pažeidžiamumus ir suderinamumo problemas.
• Apsvarstykite internacionalizavimą (i18n): Kurkite savo plėtinį taip, kad jį būtų lengva lokalizuoti į skirtingas kalbas. Naudokite chrome.i18n API.
• Gerbkite vartotojų privatumą: Būkite skaidrūs dėl to, kaip jūsų plėtinys renka ir naudoja vartotojų duomenis, ir, kai reikia, gaukite vartotojo sutikimą. Laikykitės atitinkamų privatumo reglamentų, tokių kaip GDPR ir CCPA.

Plėtinio pateikimas į parduotuves

Kai jūsų plėtinys yra sukurtas ir išbandytas, norėsite jį pateikti į naršyklės plėtinių parduotuves, kad jis būtų prieinamas vartotojams. Kiekviena naršyklė turi savo parduotuvę ir pateikimo procesą:

• „Chrome“ internetinė parduotuvė: Pateikite savo plėtinį į „Chrome“ internetinę parduotuvę „Chrome“ vartotojams. Procesas apima kūrėjo paskyros sukūrimą, plėtinio supakavimą ir įkėlimą į parduotuvę.
• „Firefox“ priedai: Pateikite savo plėtinį į „Firefox“ priedus „Firefox“ vartotojams. Procesas yra panašus į „Chrome“ internetinės parduotuvės ir apima kūrėjo paskyros sukūrimą bei plėtinio pateikimą peržiūrai.
• „Safari“ plėtinių galerija: Pateikite savo plėtinį į „Safari“ plėtinių galeriją „Safari“ vartotojams. Procesas apima kūrėjo sertifikato gavimą iš „Apple“ ir plėtinio pateikimą peržiūrai.

Pateikdami savo plėtinį, būtinai pateikite tikslią ir išsamią informaciją, įskaitant aprašomąjį pavadinimą, išsamų aprašymą, ekrano nuotraukas ir privatumo politiką. Plėtinių parduotuvės peržiūri pateikimus, kad užtikrintų, jog jie atitinka jų politiką ir gaires.

Išvada

Naršyklės plėtinių kūrimas su „Manifest V3“ ir „JavaScript“ API suteikia galingą būdą pritaikyti ir pagerinti naršymo patirtį. Suprasdami pagrindines sąvokas, laikydamiesi geriausių praktikų ir atsižvelgdami į suderinamumą su įvairiomis naršyklėmis, kūrėjai gali sukurti vertingus ir patrauklius plėtinius vartotojams visame pasaulyje. Internetui evoliucionuojant, naršyklės plėtiniai ir toliau atliks gyvybiškai svarbų vaidmenį formuojant interneto ateitį.

Kurdami plėtinius, visada teikite pirmenybę vartotojų privatumui ir saugumui. Laikydamiesi šių principų, galite sukurti plėtinius, kurie yra ir naudingi, ir patikimi.

Šis vadovas suteikia tvirtą pagrindą norintiems pradėti kurti naršyklės plėtinius. Gilindamiesi toliau, tyrinėkite įvairias prieinamas API ir funkcijas bei eksperimentuokite su skirtingomis technikomis, kad sukurtumėte novatoriškus ir paveikius plėtinius.