Perėjimas: naršyklės plėtinių Manifest V3 JavaScript API migracijos strategijos

Naršyklių plėtinių kūrimo sritis nuolat kinta. Vienas reikšmingiausių pastarųjų metų pokyčių yra Manifest V3 (MV3) įvedimas. Šis atnaujinimas, kuriam vadovauja „Google Chrome“, tačiau kuris daro įtaką kitoms „Chromium“ pagrindu sukurtoms naršyklėms ir vis labiau „Firefox“, siekia pagerinti saugumą, privatumą ir našumą vartotojams visame pasaulyje. Kūrėjams šis perėjimas reikalauja gilaus pokyčių supratimo, ypač susijusio su JavaScript API. Šis išsamus vadovas suteiks jums žinių ir strategijų, kad galėtumėte efektyviai perkelti savo esamus Manifest V2 plėtinius į MV3, užtikrindami, kad jūsų kūriniai ir toliau veiktų ir klestėtų naujoje aplinkoje.

Pagrindinių Manifest V3 pakeitimų supratimas

Manifest V3 atspindi esminį naršyklės plėtinių veikimo permąstymą. Pagrindiniai šių pakeitimų varikliai yra:

• Patobulintas saugumas: MV3 įdiegia griežtesnes saugumo politiką, apriboja kodo tipus, kuriuos plėtiniai gali vykdyti, ir tai, kaip jie gali sąveikauti su žiniatinklio puslapiais.
• Patobulintas privatumas: Naujas modelis pabrėžia naudotojų privatumą, apribodamas prieigą prie tam tikrų slaptų API ir skatindamas skaidresnį duomenų tvarkymą.
• Geresnis našumas: Atsisakydamas kai kurių senesnių architektūrų, MV3 siekia sumažinti plėtinių įtaką naršyklės greičiui ir išteklių naudojimui.

Didžiausią įtaką darantys pakeitimai iš JavaScript API perspektyvos sukasi apie:

• Aptarnavimo darbuotojai pakeičia foninius puslapius: Nuolatinis foninio puslapio modelis pakeičiamas įvykiais pagrįstais aptarnavimo darbuotojais. Tai reiškia, kad jūsų foninė logika bus vykdoma tik tada, kai to reikės, o tai gali žymiai pagerinti našumą, tačiau reikalauja skirtingo požiūrio į būsenos valdymą ir įvykių apdorojimą.
• Žiniatinklio užklausų API modifikavimas: Galingas `chrome.webRequest` API, plačiai naudojamas tinklo užklausų perėmimui, MV3 yra žymiai apribotas. Jis pakeičiamas `declarativeNetRequest` API, kuris siūlo daugiau privatumą užtikrinantį ir našesnį, nors ir mažiau lankstų požiūrį.
• Turinio scenarijų vykdymo pakeitimai: Nors turinio scenarijai išlieka, jų vykdymo kontekstas ir galimybės buvo patobulinti.
• `eval()` ir `new Function()` pašalinimas: Dėl saugumo priežasčių `eval()` ir `new Function()` nebegalimi plėtinio kode.

Pagrindinės JavaScript API migracijos ir strategijos

Panagrinėkime pagrindinių JavaScript API migravimo specifiką ir išnagrinėkime efektyvias kiekvienos strategijas.

1. Foninio scenarijaus migracija į aptarnavimo darbuotoją

Tai neabejotinai pats pagrindinis pakeitimas. Manifest V2 plėtiniai dažnai rėmėsi nuolatiniais foniniais puslapiais, kurie visada veikė. Manifest V3 pristato aptarnavimo darbuotojus, kurie yra įvykių pagrindu valdomi ir vykdomi tik tada, kai juos suaktyvina įvykis (pvz., plėtinio įdiegimas, naršyklės paleidimas arba pranešimas iš turinio scenarijaus).

Kodėl šis pakeitimas?

Nuolatiniai foniniai puslapiai galėjo sunaudoti daug išteklių, ypač kai buvo aktyvūs daugybė plėtinių. Aptarnavimo darbuotojai siūlo efektyvesnį modelį, užtikrinantį, kad plėtinio logika būtų vykdoma tik tada, kai tai būtina, todėl naršyklė paleidžiama greičiau ir sumažėja atminties naudojimas.

Migracijos strategijos:

• Įvykių pagrindu valdoma logika: Pertvarkykite savo foninę logiką, kad ji būtų valdoma įvykių pagrindu. Užuot darę prielaidą, kad jūsų foninis scenarijus visada pasiekiamas, klausykite konkrečių įvykių. Pagrindinis jūsų aptarnavimo darbuotojo įėjimo taškas paprastai bus `install` įvykis, kuriame galite nustatyti klausytojus ir inicijuoti savo plėtinį.
• Pranešimų perdavimas: Kadangi aptarnavimo darbuotojai ne visada aktyvūs, turėsite labai pasikliauti asinchroniniu pranešimų perdavimu tarp skirtingų plėtinio dalių (pvz., turinio scenarijų, iššokančiųjų langų, parinkčių puslapių) ir aptarnavimo darbuotojo. Naudokite `chrome.runtime.sendMessage()` ir `chrome.runtime.onMessage()` komunikacijai. Įsitikinkite, kad jūsų pranešimų tvarkyklės yra patikimos ir gali tvarkyti pranešimus net jei reikia suaktyvinti aptarnavimo darbuotoją.
• Būsenos valdymas: Nuolatiniai foniniai puslapiai gali išlaikyti visuotinę būseną atmintyje. Naudojant aptarnavimo darbuotojus, ši būsena gali būti prarasta, kai darbuotojas nutraukiamas. Naudokite chrome.storage (local arba sync), kad išsaugotumėte būseną, kuri turi išlikti nutraukus aptarnavimo darbuotoją.
• Gyvavimo ciklo supratimas: Supraskite aptarnavimo darbuotojo gyvavimo ciklą. Jis gali būti suaktyvintas, deaktyvintas ir paleistas iš naujo. Jūsų kodas turėtų tvarkingai tvarkyti šiuos perėjimus. Pavyzdžiui, visada iš naujo užregistruokite įvykių klausytojus suaktyvinus.
• Pavyzdys:

  Manifest V2 (background.js):

              chrome.runtime.onInstalled.addListener(() => {
    console.log('Extension installed. Setting up listeners...');
    chrome.alarms.create('myAlarm', { periodInMinutes: 1 });
  });
  
  chrome.alarms.onAlarm.addListener((alarm) => {
    if (alarm.name === 'myAlarm') {
      console.log('Alarm triggered!');
      // Perform some background task
    }
  });
              
  
                
                  Copy
                
              
            

  Manifest V3 (service-worker.js):

              // Service worker installation
  chrome.runtime.onInstalled.addListener(() => {
    console.log('Extension installed. Setting up alarms...');
    chrome.alarms.create('myAlarm', { periodInMinutes: 1 });
  });
  
  // Event listener for alarms
  chrome.alarms.onAlarm.addListener((alarm) => {
    if (alarm.name === 'myAlarm') {
      console.log('Alarm triggered!');
      // Perform some background task
      // Note: If the service worker was terminated, it will be woken up for this event.
    }
  });
  
  // Optional: Handle messages from other parts of the extension
  chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    if (request.action === 'getData') {
      // Simulate fetching data
      sendResponse({ data: 'Some data from service worker' });
    }
    return true; // Keep the message channel open for async response
  });
              
  
                
                  Copy
                
              
            

2. `chrome.webRequest` pakeitimas `declarativeNetRequest`

`chrome.webRequest` API siūlo plačias galimybes perimti, blokuoti, modifikuoti ir peradresuoti tinklo užklausas. Manifest V3 jo galia yra žymiai sumažinta dėl saugumo ir privatumo priežasčių. Pagrindinis pakeitimas yra `declarativeNetRequest` API.

Kodėl šis pakeitimas?

`webRequest` API leido plėtiniams patikrinti ir modifikuoti kiekvieną naršyklės pateiktą tinklo užklausą. Tai sukėlė privatumo riziką, nes plėtiniai galėjo įrašyti slaptus naudotojų duomenis. Tai taip pat turėjo įtakos našumui, nes JavaScript kiekvienos užklausos perėmimas galėjo būti lėtas. `declarativeNetRequest` perkelia perėmimo logiką į naršyklės gimtąjį tinklo dėklą, kuris yra našesnis ir labiau saugo privatumą, nes plėtinys nemato tiesioginės užklausos informacijos, nebent tai aiškiai leidžiama.

Migracijos strategijos:

• Deklaratyvių taisyklių supratimas: Užuot naudoję imperatyvų kodą, `declarativeNetRequest` naudoja deklaratyvų požiūrį. Apibrėžiate taisyklių rinkinį (JSON objektus), kuris nurodo, kokių veiksmų reikia imtis atitinkamoms tinklo užklausoms (pvz., blokuoti, peradresuoti, modifikuoti antraštes).
• Taisyklių apibrėžimas: Taisyklės nurodo sąlygas (pvz., URL šablonus, išteklių tipus, domenus) ir veiksmus. Turėsite perkelti savo `webRequest` blokavimo arba peradresavimo logiką į šiuos taisyklių rinkinius.
• Taisyklių apribojimai: Atminkite taisyklių ir taisyklių rinkinių, kuriuos galite užregistruoti, skaičiaus apribojimus. Sudėtingiems filtravimo scenarijams gali tekti dinamiškai atnaujinti taisyklių rinkinius.
• Jokio dinamiško modifikavimo: Skirtingai nuo `webRequest`, `declarativeNetRequest` neleidžia dinamiškai modifikuoti užklausos kūnų ar antraščių tuo pačiu būdu. Jei pagrindinė jūsų plėtinio funkcija priklauso nuo gilaus užklausos modifikavimo, gali tekti iš naujo įvertinti jo dizainą arba ištirti alternatyvius metodus.
• Blokavimas vs. peradresavimas: Blokuoti užklausas yra paprasta. Norėdami peradresuoti, naudosite `redirect` veiksmą, nurodydami naują URL.
• Antraščių manipuliavimas: MV3 turi apribojimų modifikuoti užklausos antraštes. Galite pridėti arba pašalinti konkrečias antraštes naudodami `requestHeaders` ir `responseHeaders` `declarativeNetRequest`, tačiau sudėtingi transformavimai nepalaikomi.
• Našumo aspektai: Nors paprastai greitesnis, didelio taisyklių skaičiaus valdymas vis tiek gali turėti įtakos našumui. Optimizuokite taisyklių rinkinius, kad jie būtų efektyvūs.
• Pavyzdys:

  Manifest V2 (vaizdo blokavimas):

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

  Manifest V3 (naudojant `declarativeNetRequest`):

  Pirmiausia apibrėžkite taisykles JSON faile (pvz., rules.json):

              [
    {
      "id": 1,
      "priority": 1,
      "action": {"type": "block"},
      "condition": {
        "urlFilter": "*.png",
        "domains": ["example.com"],
        "resourceTypes": ["image"]
      }
    }
  ]
  
              
  
                
                  Copy
                
              
            

  Tada, savo aptarnavimo darbuotoje (arba pradiniame sąrankos scenarijuje):

              chrome.runtime.onInstalled.addListener(() => {
    chrome.declarativeNetRequest.updateDynamicRules({
      addRules: [
        {
          "id": 1,
          "priority": 1,
          "action": {"type": "block"},
          "condition": {
            "urlFilter": "*.png",
            "domains": ["example.com"],
            "resourceTypes": ["image"]
          }
        }
      ],
      removeRuleIds: [1] // To remove if it already exists
    });
  });
  
              
  
                
                  Copy
                
              
            

3. Turinio scenarijaus vykdymo ir komunikacijos tvarkymas

Turinio scenarijai yra JavaScript failai, kurie vykdomi žiniatinklio puslapių kontekste. Nors jų pagrindinis tikslas išlieka tas pats, MV3 patobulina, kaip jie vykdomi ir sąveikauja su likusia plėtinio dalimi.

Pagrindiniai pakeitimai ir strategijos:

• Vykdymo kontekstai: Turinio scenarijai vis dar gali būti įterpiami į puslapius. Tačiau galimybė tiesiogiai įterpti JavaScript naudojant `chrome.scripting.executeScript` dabar yra pageidautinas programinis metodas scenarijams įterpti.
• Asinchroninis įterpimas: Naudojant `chrome.scripting.executeScript`, vykdymas yra asinchroninis. Įsitikinkite, kad jūsų kodas laukia, kol scenarijus bus įterptas ir įvykdytas, prieš bandydamas sąveikauti su jo DOM arba visuotine sritimi.
• `frameId` suvokimas: Jei jūsų plėtinys sąveikauja su įdėtaisiais rėmeliais, atminkite `frameId` savybę, kai įterpiate scenarijus arba siunčiate pranešimus.
• Prieiga prie DOM: Prieiga prie DOM išlieka pagrindine funkcija. Tačiau atminkite, kad DOM manipuliavimas gali trukdyti pagrindinio puslapio scenarijams.
• Komunikacija su aptarnavimo darbuotoju: Turinio scenarijai turės bendrauti su aptarnavimo darbuotoju (kuris pakeičia foninį puslapį) užduotims, kurioms reikia plėtinio vidinės logikos. Naudokite `chrome.runtime.sendMessage()` ir `chrome.runtime.onMessage()`.
• Pavyzdys:

  Scenarijaus įterpimas ir komunikavimas (Manifest V3):

              // From your popup or options page
  chrome.scripting.executeScript({
    target: { tabId: YOUR_TAB_ID },
    files: ['content.js']
  }, (results) => {
    if (chrome.runtime.lastError) {
      console.error(chrome.runtime.lastError);
      return;
    }
    console.log('Content script injected:', results);
  
    // Now communicate with the injected content script
    chrome.tabs.sendMessage(YOUR_TAB_ID, {
      action: "processPage"
    }, (response) => {
      if (chrome.runtime.lastError) {
        console.error(chrome.runtime.lastError);
        return;
      }
      console.log('Response from content script:', response);
    });
  });
  
  // In content.js:
  chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    if (request.action === "processPage") {
      console.log('Processing page...');
      const pageTitle = document.title;
      // Perform some DOM manipulation or data extraction
      sendResponse({ success: true, title: pageTitle });
    }
    return true; // Keep the channel open for async response
  });
  
              
  
                
                  Copy
                
              
            

4. `eval()` ir `new Function()` pašalinimas

Dėl saugumo priežasčių `eval()` ir `new Function()` naudojimas plėtinio kode yra draudžiamas Manifest V3. Šios funkcijos leidžia vykdyti savavališką kodą, o tai gali būti didelis saugumo pažeidžiamumas.

Migracijos strategijos:

• Kodo pertvarkymas: Patikimiausias sprendimas yra pertvarkyti kodą, kad būtų išvengta dinamiško kodo vykdymo. Jei dinamiškai generuojate funkcijų pavadinimus arba kodo fragmentus, apsvarstykite galimybę naudoti iš anksto apibrėžtas struktūras, konfigūracijos objektus arba šablonų literales.
• JSON analizė: Jei `eval()` buvo naudojamas JSON analizei, perjunkite į `JSON.parse()`. Tai yra standartinis ir saugus būdas tvarkyti JSON duomenis.
• Objekto susiejimas: Jei `new Function()` buvo naudojamas funkcijoms kurti dinamiškai pagal įvestį, išnagrinėkite galimybę naudoti objektų žemėlapius arba switch teiginius, kad susietumėte įvestis su iš anksto apibrėžtomis funkcijomis.
• Pavyzdys:

  Prieš (Manifest V2, NEREKOMENDUOJAMA):

              const dynamicFunctionName = 'myDynamicFunc';
  const code = 'console.log("Hello from dynamic function!");';
  
  const dynamicFunc = new Function(code);
  dynamicFunc();
  
  // Or for JSON parsing:
  const jsonString = '{"key": "value"}';
  const jsonData = eval('(' + jsonString + ')'); // Insecure
  
              
  
                
                  Copy
                
              
            

  Po (Manifest V3, saugus):

              // For dynamic functions:
  function myDynamicFunc() {
    console.log("Hello from pre-defined function!");
  }
  
  // If you need to call it dynamically based on a string, you can use an object map:
  const availableFunctions = {
    myDynamicFunc: myDynamicFunc
  };
  
  const functionToCall = 'myDynamicFunc';
  if (availableFunctions[functionToCall]) {
    availableFunctions[functionToCall]();
  } else {
    console.error('Function not found');
  }
  
  // For JSON parsing:
  const jsonString = '{"key": "value"}';
  const jsonData = JSON.parse(jsonString); // Secure and standard
  console.log(jsonData.key); // "value"
  
              
  
                
                  Copy
                
              
            

5. Kitos svarbios API pastabos

Manifest V3 turi įtakos keliems kitiems API, todėl svarbu žinoti šiuos pakeitimus:

• `chrome.tabs` API: Kai kurie `chrome.tabs` API metodai gali veikti skirtingai, ypač atsižvelgiant į skirtukų kūrimą ir valdymą. Įsitikinkite, kad naudojate naujausius rekomenduojamus modelius.
• `chrome.storage` API: `chrome.storage` API (local ir sync) išlieka iš esmės tokia pati ir yra būtina norint išsaugoti duomenis nutraukus aptarnavimo darbuotoją.
• Leidimai: Iš naujo įvertinkite savo plėtinio leidimus. MV3 skatina prašyti tik reikalingų leidimų ir siūlo daugiau detalios kontrolės.
• Naudotojo sąsajos elementai: Plėtinių iššokantys langai ir parinkčių puslapiai išlieka pagrindiniai vartotojo sąsajos elementai. Įsitikinkite, kad jie atnaujinti, kad veiktų su nauja aptarnavimo darbuotojo architektūra.

Migracijos įrankiai ir geriausia praktika

Plėtinio migracija gali būti sudėtingas procesas. Laimei, yra įrankių ir geriausios praktikos, kurios gali jį palengvinti:

• Oficiali dokumentacija: Naršyklių pardavėjų (ypač „Chrome“ ir „Firefox“) dokumentacija yra jūsų pagrindinis šaltinis. Atidžiai perskaitykite Manifest V3 migracijos vadovus.
• Naršyklės kūrėjo įrankiai: Pasinaudokite tikslinės naršyklės kūrėjo įrankiais. Jie suteikia neįkainojamų įžvalgų apie klaidas, aptarnavimo darbuotojo gyvavimo ciklą ir tinklo veiklą.
• Laipsniška migracija: Jei turite didelį plėtinį, apsvarstykite laipsnišką migracijos strategiją. Migruokite vieną funkciją arba API vienu metu, kruopščiai patikrinkite ir tada pereikite prie kitos.
• Automatinis testavimas: Įdiekite patikimą testavimo paketą. Automatiniai testai yra labai svarbūs norint aptikti regresijas ir užtikrinti, kad jūsų migruotas plėtinys veiktų taip, kaip tikėtasi, įvairiais scenarijais.
• Kodo tikrinimas ir analizė: Naudokite linters (pvz., ESLint), sukonfigūruotus MV3 kūrimui, kad anksti aptiktumėte galimas problemas.
• Bendruomenės forumai ir palaikymas: Bendraukite su kūrėjų bendruomenėmis. Daugelis kūrėjų susiduria su panašiais iššūkiais, o dalijimasis patirtimi gali padėti rasti veiksmingų sprendimų.
• Apsvarstykite alternatyvas blokuotam funkcionalumui: Jei pagrindinė jūsų plėtinio funkcija rėmėsi API, kuri yra labai apribota arba pašalinta MV3 (pvz., tam tikros `webRequest` funkcijos), išnagrinėkite alternatyvius metodus. Tai gali apimti naršyklės API, kurie vis dar pasiekiami, kliento pusės euristikos naudojimą arba netgi funkcijos įgyvendinimo permąstymą.

Pasauliniai Manifest V3 aspektai

Kadangi kūrėjai orientuojasi į pasaulinę auditoriją, svarbu apsvarstyti, kaip MV3 pakeitimai gali paveikti naudotojus skirtinguose regionuose ir kontekstuose:

• Našumas skirtinguose įrenginiuose: Aptarnavimo darbuotojų efektyvumo pagerėjimas ypač naudingas naudotojams, turintiems mažiau galingų įrenginių arba lėtesnį interneto ryšį, kuris vyrauja daugelyje besiformuojančių rinkų.
• Susirūpinimas dėl privatumo visame pasaulyje: Padidinta privatumo apsauga MV3 atitinka augančius pasaulinius duomenų privatumo reglamentus (pvz., GDPR, CCPA) ir naudotojų lūkesčius. Tai gali paskatinti didesnį pasitikėjimą tarp įvairios naudotojų bazės.
• Žiniatinklio standartų suderinimas: Nors MV3 iš esmės valdo „Chromium“, siekis sukurti saugesnius ir privatumą labiau saugančius žiniatinklio plėtinių modelius yra pasaulinė tendencija. Būdamas priekyje šių pokyčių, jūsų plėtiniai paruošiami platesniam platformos suderinamumui ir būsimiems žiniatinklio standartams.
• Dokumentacijos prieinamumas: Užtikrinkite, kad migracijos ištekliai, kuriais pasikliaujate, būtų prieinami ir aiškiai išversti, jei reikia. Nors šis įrašas yra anglų kalba, kūrėjai visame pasaulyje gali ieškoti lokalizuotų išteklių.
• Testavimas skirtinguose regionuose: Jei jūsų plėtinio funkcija priklauso nuo tinklo arba gali turėti subtilių vartotojo sąsajos skirtumų skirtingose lokalėse, įsitikinkite, kad jūsų testavimas apima įvairias geografines vietas ir tinklo sąlygas.

Naršyklių plėtinių ateitis su Manifest V3

Manifest V3 yra ne tik atnaujinimas; tai reikšmingas žingsnis link saugesnės, privatesnės ir našesnės žiniatinklio plėtinių ekosistemos. Nors migracija kelia iššūkių, ji taip pat suteikia galimybių kūrėjams kurti geresnius, atsakingesnius plėtinius. Suprasdami pagrindinius API pakeitimus ir taikydami strateginius migracijos metodus, galite užtikrinti, kad jūsų naršyklių plėtiniai išliks aktualūs ir vertingi naudotojams visame pasaulyje.

Priimkite perėjimą, pasinaudokite naujomis galimybėmis ir toliau diekite naujoves. Naršyklių plėtinių ateitis yra čia, ir ji sukurta ant patobulinto saugumo ir naudotojų pasitikėjimo pamato.