ബ്രൗസർ എക്സ്റ്റൻഷൻ ബാക്ക്ഗ്രൗണ്ട് സ്ക്രിപ്റ്റുകൾ: ജാവാസ്ക്രിപ്റ്റ് സർവീസ് വർക്കർ മൈഗ്രേഷൻ സ്വീകരിക്കുന്നു

ബ്രൗസർ എക്സ്റ്റൻഷൻ ഡെവലപ്‌മെൻ്റിൻ്റെ ലോകം നിരന്തരം മാറിക്കൊണ്ടിരിക്കുകയാണ്. സമീപകാലത്തെ ഏറ്റവും പ്രധാനപ്പെട്ട മാറ്റങ്ങളിലൊന്ന്, പരമ്പരാഗത പെർസിസ്റ്റൻ്റ് ബാക്ക്ഗ്രൗണ്ട് പേജുകളിൽ നിന്ന് ബാക്ക്ഗ്രൗണ്ട് സ്ക്രിപ്റ്റുകൾക്കായി ജാവാസ്ക്രിപ്റ്റ് സർവീസ് വർക്കറുകളിലേക്കുള്ള മാറ്റമാണ്. ക്രോമിയം അധിഷ്‌ഠിത ബ്രൗസറുകളിൽ മാനിഫെസ്റ്റ് V3 (MV3) ആണ് ഈ മാറ്റത്തിന് പ്രധാനമായും കാരണം. ഇത് നിരവധി നേട്ടങ്ങൾ നൽകുന്നുണ്ടെങ്കിലും, ഡെവലപ്പർമാർക്ക് ചില വെല്ലുവിളികളും ഉയർത്തുന്നു. ഈ മാറ്റത്തിന് പിന്നിലെ കാരണങ്ങൾ, അതിൻ്റെ ഗുണങ്ങളും ദോഷങ്ങളും, മൈഗ്രേഷൻ പ്രക്രിയയുടെ വിശദമായ ഘട്ടങ്ങളും ഈ ഗൈഡ് വിശദീകരിക്കുന്നു, ഇത് നിങ്ങളുടെ എക്സ്റ്റൻഷൻ്റെ സുഗമമായ മാറ്റം ഉറപ്പാക്കും.

എന്തുകൊണ്ട് സർവീസ് വർക്കറുകളിലേക്ക് മാറണം?

ഈ മാറ്റത്തിന് പിന്നിലെ പ്രധാന പ്രേരണ ബ്രൗസറിൻ്റെ പ്രകടനവും സുരക്ഷയും മെച്ചപ്പെടുത്തുക എന്നതാണ്. മാനിഫെസ്റ്റ് V2 (MV2)-ൽ സാധാരണമായിരുന്ന പെർസിസ്റ്റൻ്റ് ബാക്ക്ഗ്രൗണ്ട് പേജുകൾ, നിഷ്‌ക്രിയമായിരിക്കുമ്പോൾ പോലും കാര്യമായ സിസ്റ്റം റിസോഴ്സുകൾ ഉപയോഗിക്കുകയും, ബാറ്ററി ലൈഫിനെയും ബ്രൗസറിൻ്റെ മൊത്തത്തിലുള്ള വേഗതയെയും ബാധിക്കുകയും ചെയ്യും. എന്നാൽ സർവീസ് വർക്കറുകൾ ഇവൻ്റ്-ഡ്രിവൺ ആണ്, അതായത് ആവശ്യമുള്ളപ്പോൾ മാത്രം അവ സജീവമാകും.

സർവീസ് വർക്കറുകളുടെ പ്രയോജനങ്ങൾ:

• മെച്ചപ്പെട്ട പ്രകടനം: ഒരു API കോൾ അല്ലെങ്കിൽ എക്സ്റ്റൻഷൻ്റെ മറ്റൊരു ഭാഗത്ത് നിന്നുള്ള സന്ദേശം പോലുള്ള ഒരു ഇവൻ്റ് ഉണ്ടാകുമ്പോൾ മാത്രമേ സർവീസ് വർക്കറുകൾ സജീവമാകൂ. ഈ "ഇവൻ്റ്-ഡ്രിവൺ" സ്വഭാവം റിസോഴ്സ് ഉപയോഗം കുറയ്ക്കുകയും ബ്രൗസറിൻ്റെ പ്രകടനം മെച്ചപ്പെടുത്തുകയും ചെയ്യുന്നു.
• മെച്ചപ്പെട്ട സുരക്ഷ: സർവീസ് വർക്കറുകൾ കൂടുതൽ നിയന്ത്രിതമായ ഒരു പരിതസ്ഥിതിയിലാണ് പ്രവർത്തിക്കുന്നത്, ഇത് സുരക്ഷാ ഭീഷണികൾ കുറയ്ക്കുകയും എക്സ്റ്റൻഷൻ്റെ മൊത്തത്തിലുള്ള സുരക്ഷ വർദ്ധിപ്പിക്കുകയും ചെയ്യുന്നു.
• ഭാവിയിലേക്കുള്ള തയ്യാറെടുപ്പ്: മിക്ക പ്രധാന ബ്രൗസറുകളും എക്സ്റ്റൻഷനുകളിലെ ബാക്ക്ഗ്രൗണ്ട് പ്രോസസ്സിംഗിനുള്ള സ്റ്റാൻഡേർഡായി സർവീസ് വർക്കറുകളിലേക്ക് മാറുകയാണ്. ഇപ്പോൾ മൈഗ്രേറ്റ് ചെയ്യുന്നത് നിങ്ങളുടെ എക്സ്റ്റൻഷൻ പുതിയ പതിപ്പുകളുമായി പൊരുത്തപ്പെടുന്നുവെന്നും ഭാവിയിലെ ഡെപ്രിസിയേഷൻ പ്രശ്നങ്ങൾ ഒഴിവാക്കുമെന്നും ഉറപ്പാക്കുന്നു.
• നോൺ-ബ്ലോക്കിംഗ് പ്രവർത്തനങ്ങൾ: മെയിൻ ത്രെഡിനെ തടസ്സപ്പെടുത്താതെ പശ്ചാത്തലത്തിൽ ജോലികൾ ചെയ്യാൻ സർവീസ് വർക്കറുകൾ രൂപകൽപ്പന ചെയ്തിട്ടുള്ളതിനാൽ സുഗമമായ ഉപയോക്തൃ അനുഭവം ഉറപ്പാക്കുന്നു.

പോരായ്മകളും വെല്ലുവിളികളും:

• പഠന പ്രക്രിയ: പെർസിസ്റ്റൻ്റ് ബാക്ക്ഗ്രൗണ്ട് പേജുകൾ ഉപയോഗിച്ച് പരിചയമുള്ള ഡെവലപ്പർമാർക്ക് സർവീസ് വർക്കറുകളുടെ പുതിയ പ്രോഗ്രാമിംഗ് മോഡൽ ഒരു വെല്ലുവിളിയായേക്കാം. ഇവൻ്റ്-ഡ്രിവൺ സ്വഭാവത്തിന് സ്റ്റേറ്റ് മാനേജ്‌മെൻ്റിനും ആശയവിനിമയത്തിനും ഒരു പുതിയ സമീപനം ആവശ്യമാണ്.
• പെർസിസ്റ്റൻ്റ് സ്റ്റേറ്റ് മാനേജ്മെൻ്റ്: സർവീസ് വർക്കർ വീണ്ടും സജീവമാകുമ്പോഴും ഡാറ്റ (സ്റ്റേറ്റ്) നിലനിർത്തുന്നതിന് ശ്രദ്ധാപൂർവ്വമായ പരിഗണന ആവശ്യമാണ്. ഇതിനായി സ്റ്റോറേജ് API അല്ലെങ്കിൽ IndexedDB പോലുള്ള സാങ്കേതിക വിദ്യകൾ നിർണായകമാകും.
• ഡീബഗ്ഗിംഗിലെ സങ്കീർണ്ണത: സർവീസ് വർക്കറുകൾ ഇടയ്ക്കിടെ മാത്രം പ്രവർത്തിക്കുന്നതിനാൽ അവയെ ഡീബഗ് ചെയ്യുന്നത് പരമ്പരാഗത ബാക്ക്ഗ്രൗണ്ട് പേജുകളേക്കാൾ സങ്കീർണ്ണമാണ്.
• DOM-ലേക്കുള്ള പരിമിതമായ ആക്സസ്: സർവീസ് വർക്കറുകൾക്ക് DOM-ലേക്ക് നേരിട്ട് ആക്സസ് ഇല്ല. വെബ് പേജുകളുമായി സംവദിക്കാൻ അവയ്ക്ക് കണ്ടൻ്റ് സ്ക്രിപ്റ്റുകളുമായി ആശയവിനിമയം നടത്തേണ്ടിവരും.

അടിസ്ഥാന ആശയങ്ങൾ മനസ്സിലാക്കാം

മൈഗ്രേഷൻ പ്രക്രിയയിലേക്ക് കടക്കുന്നതിന് മുമ്പ്, സർവീസ് വർക്കറുകൾക്ക് പിന്നിലെ അടിസ്ഥാന ആശയങ്ങൾ മനസ്സിലാക്കേണ്ടത് അത്യാവശ്യമാണ്:

ലൈഫ് സൈക്കിൾ മാനേജ്മെൻ്റ്

സർവീസ് വർക്കറുകൾക്ക് താഴെ പറയുന്ന ഘട്ടങ്ങൾ അടങ്ങുന്ന ഒരു പ്രത്യേക ലൈഫ് സൈക്കിൾ ഉണ്ട്:

• ഇൻസ്റ്റാളേഷൻ: എക്സ്റ്റൻഷൻ ആദ്യമായി ലോഡ് ചെയ്യുമ്പോഴോ അപ്ഡേറ്റ് ചെയ്യുമ്പോഴോ സർവീസ് വർക്കർ ഇൻസ്റ്റാൾ ചെയ്യപ്പെടുന്നു. സ്റ്റാറ്റിക് അസറ്റുകൾ കാഷെ ചെയ്യാനും പ്രാരംഭ സെറ്റപ്പ് ജോലികൾ ചെയ്യാനും ഇത് ഏറ്റവും അനുയോജ്യമായ സമയമാണ്.
• ആക്ടിവേഷൻ: ഇൻസ്റ്റാളേഷന് ശേഷം, സർവീസ് വർക്കർ സജീവമാകും. ഈ ഘട്ടത്തിലാണ് അതിന് ഇവൻ്റുകൾ കൈകാര്യം ചെയ്യാൻ തുടങ്ങാൻ കഴിയുന്നത്.
• നിഷ്‌ക്രിയം (Idle): സർവീസ് വർക്കർ നിഷ്‌ക്രിയമായി തുടരുന്നു, ഇവൻ്റുകൾക്കായി കാത്തിരിക്കുന്നു.
• ടെർമിനേഷൻ: ആവശ്യമില്ലാത്തപ്പോൾ സർവീസ് വർക്കർ പ്രവർത്തനം അവസാനിപ്പിക്കുന്നു.

ഇവൻ്റ്-ഡ്രിവൺ ആർക്കിടെക്ചർ

സർവീസ് വർക്കറുകൾ ഇവൻ്റ്-ഡ്രിവൺ ആണ്, അതായത് നിർദ്ദിഷ്ട ഇവൻ്റുകളോട് പ്രതികരിച്ചുകൊണ്ട് മാത്രമേ അവ കോഡ് എക്സിക്യൂട്ട് ചെയ്യുകയുള്ളൂ. സാധാരണ ഇവൻ്റുകളിൽ ഇവ ഉൾപ്പെടുന്നു:

• install: സർവീസ് വർക്കർ ഇൻസ്റ്റാൾ ചെയ്യുമ്പോൾ ട്രിഗർ ചെയ്യപ്പെടുന്നു.
• activate: സർവീസ് വർക്കർ സജീവമാകുമ്പോൾ ട്രിഗർ ചെയ്യപ്പെടുന്നു.
• fetch: ബ്രൗസർ ഒരു നെറ്റ്‌വർക്ക് അഭ്യർത്ഥന നടത്തുമ്പോൾ ട്രിഗർ ചെയ്യപ്പെടുന്നു.
• message: എക്സ്റ്റൻഷൻ്റെ മറ്റൊരു ഭാഗത്ത് നിന്ന് സർവീസ് വർക്കറിന് ഒരു സന്ദേശം ലഭിക്കുമ്പോൾ ട്രിഗർ ചെയ്യപ്പെടുന്നു.

ഇൻ്റർ-പ്രോസസ്സ് കമ്മ്യൂണിക്കേഷൻ

സർവീസ് വർക്കറുകൾക്ക് എക്സ്റ്റൻഷൻ്റെ മറ്റ് ഭാഗങ്ങളായ കണ്ടൻ്റ് സ്ക്രിപ്റ്റുകൾ, പോപ്പ്അപ്പ് സ്ക്രിപ്റ്റുകൾ എന്നിവയുമായി ആശയവിനിമയം നടത്താൻ ഒരു മാർഗ്ഗം ആവശ്യമാണ്. ഇത് സാധാരണയായി chrome.runtime.sendMessage, chrome.runtime.onMessage API-കൾ ഉപയോഗിച്ചാണ് ചെയ്യുന്നത്.

ഘട്ടം ഘട്ടമായുള്ള മൈഗ്രേഷൻ ഗൈഡ്

ഒരു സാധാരണ ബ്രൗസർ എക്സ്റ്റൻഷനെ പെർസിസ്റ്റൻ്റ് ബാക്ക്ഗ്രൗണ്ട് പേജിൽ നിന്ന് സർവീസ് വർക്കറിലേക്ക് മൈഗ്രേറ്റ് ചെയ്യുന്ന പ്രക്രിയയിലൂടെ നമുക്ക് കടന്നുപോകാം.

ഘട്ടം 1: നിങ്ങളുടെ മാനിഫെസ്റ്റ് ഫയൽ (manifest.json) അപ്ഡേറ്റ് ചെയ്യുക

സർവീസ് വർക്കറിലേക്കുള്ള മാറ്റം പ്രതിഫലിപ്പിക്കുന്നതിനായി നിങ്ങളുടെ manifest.json ഫയൽ അപ്ഡേറ്റ് ചെയ്യുക എന്നതാണ് ആദ്യപടി. "background" ഫീൽഡ് നീക്കം ചെയ്ത് പകരം "service_worker" പ്രോപ്പർട്ടി അടങ്ങുന്ന "background" ഫീൽഡ് ചേർക്കുക.

ഉദാഹരണം മാനിഫെസ്റ്റ് V2 (പെർസിസ്റ്റൻ്റ് ബാക്ക്ഗ്രൗണ്ട് പേജ്):

{
  "manifest_version": 2,
  "name": "My Extension",
  "version": "1.0",
  "background": {
    "scripts": ["background.js"],
    "persistent": true
  },
  "permissions": [
    "storage",
    "activeTab"
  ]
}

ഉദാഹരണം മാനിഫെസ്റ്റ് V3 (സർവീസ് വർക്കർ):

{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0",
  "background": {
    "service_worker": "background.js"
  },
  "permissions": [
    "storage",
    "activeTab"
  ]
}

പ്രധാന പരിഗണനകൾ:

• നിങ്ങളുടെ manifest_version 3 ആയി സജ്ജീകരിച്ചിട്ടുണ്ടെന്ന് ഉറപ്പാക്കുക.
• "service_worker" പ്രോപ്പർട്ടി നിങ്ങളുടെ സർവീസ് വർക്കർ സ്ക്രിപ്റ്റിൻ്റെ പാത്ത് വ്യക്തമാക്കുന്നു.

ഘട്ടം 2: നിങ്ങളുടെ ബാക്ക്ഗ്രൗണ്ട് സ്ക്രിപ്റ്റ് (background.js) റീഫാക്ടർ ചെയ്യുക

മൈഗ്രേഷൻ പ്രക്രിയയിലെ ഏറ്റവും നിർണായകമായ ഘട്ടമാണിത്. സർവീസ് വർക്കറുകളുടെ ഇവൻ്റ്-ഡ്രിവൺ സ്വഭാവവുമായി പൊരുത്തപ്പെടുന്നതിന് നിങ്ങളുടെ ബാക്ക്ഗ്രൗണ്ട് സ്ക്രിപ്റ്റ് റീഫാക്ടർ ചെയ്യേണ്ടതുണ്ട്.

1. പെർസിസ്റ്റൻ്റ് സ്റ്റേറ്റ് വേരിയബിളുകൾ നീക്കം ചെയ്യുക

MV2 ബാക്ക്ഗ്രൗണ്ട് പേജുകളിൽ, വിവിധ ഇവൻ്റുകളിലുടനീളം സ്റ്റേറ്റ് നിലനിർത്താൻ നിങ്ങൾക്ക് ഗ്ലോബൽ വേരിയബിളുകളെ ആശ്രയിക്കാമായിരുന്നു. എന്നാൽ, സർവീസ് വർക്കറുകൾ നിഷ്‌ക്രിയമാകുമ്പോൾ പ്രവർത്തനം അവസാനിപ്പിക്കുന്നതിനാൽ, പെർസിസ്റ്റൻ്റ് സ്റ്റേറ്റിനായി ഗ്ലോബൽ വേരിയബിളുകൾ വിശ്വസനീയമല്ല.

ഉദാഹരണം (MV2):

var counter = 0;

chrome.browserAction.onClicked.addListener(function(tab) {
  counter++;
  console.log("Counter: " + counter);
});

പരിഹാരം: സ്റ്റോറേജ് API അല്ലെങ്കിൽ IndexedDB ഉപയോഗിക്കുക

സ്റ്റോറേജ് API (chrome.storage.local അല്ലെങ്കിൽ chrome.storage.sync) ഡാറ്റ സ്ഥിരമായി സംഭരിക്കാനും വീണ്ടെടുക്കാനും നിങ്ങളെ അനുവദിക്കുന്നു. കൂടുതൽ സങ്കീർണ്ണമായ ഡാറ്റാ ഘടനകൾക്കായി IndexedDB മറ്റൊരു ഓപ്ഷനാണ്.

ഉദാഹരണം (MV3 സ്റ്റോറേജ് API ഉപയോഗിച്ച്):

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.storage.local.get(['counter'], function(result) {
    var counter = result.counter || 0;
    counter++;
    chrome.storage.local.set({counter: counter}, function() {
      console.log("Counter: " + counter);
    });
  });
});

ഉദാഹരണം (MV3 IndexedDB ഉപയോഗിച്ച്):

// Function to open the IndexedDB database
function openDatabase() {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open('myDatabase', 1);

    request.onerror = (event) => {
      reject('Error opening database');
    };

    request.onsuccess = (event) => {
      resolve(event.target.result);
    };

    request.onupgradeneeded = (event) => {
      const db = event.target.result;
      db.createObjectStore('myObjectStore', { keyPath: 'id' });
    };
  });
}

// Function to get data from IndexedDB
function getData(db, id) {
  return new Promise((resolve, reject) => {
    const transaction = db.transaction(['myObjectStore'], 'readonly');
    const objectStore = transaction.objectStore('myObjectStore');
    const request = objectStore.get(id);

    request.onerror = (event) => {
      reject('Error getting data');
    };

    request.onsuccess = (event) => {
      resolve(request.result);
    };
  });
}

// Function to put data into IndexedDB
function putData(db, data) {
  return new Promise((resolve, reject) => {
    const transaction = db.transaction(['myObjectStore'], 'readwrite');
    const objectStore = transaction.objectStore('myObjectStore');
    const request = objectStore.put(data);

    request.onerror = (event) => {
      reject('Error putting data');
    };

    request.onsuccess = (event) => {
      resolve();
    };
  });
}

chrome.browserAction.onClicked.addListener(async (tab) => {
  try {
    const db = await openDatabase();
    let counterData = await getData(db, 'counter');
    let counter = counterData ? counterData.value : 0;

    counter++;

    await putData(db, { id: 'counter', value: counter });
    db.close();
    console.log("Counter: " + counter);

  } catch (error) {
    console.error("IndexedDB Error: ", error);
  }
});

2. ഇവൻ്റ് ലിസണറുകൾക്ക് പകരം മെസ്സേജ് പാസ്സിംഗ് ഉപയോഗിക്കുക

നിങ്ങളുടെ ബാക്ക്ഗ്രൗണ്ട് സ്ക്രിപ്റ്റ് കണ്ടൻ്റ് സ്ക്രിപ്റ്റുകളുമായോ എക്സ്റ്റൻഷൻ്റെ മറ്റ് ഭാഗങ്ങളുമായോ ആശയവിനിമയം നടത്തുന്നുണ്ടെങ്കിൽ, നിങ്ങൾ മെസ്സേജ് പാസ്സിംഗ് ഉപയോഗിക്കേണ്ടിവരും.

ഉദാഹരണം (ബാക്ക്ഗ്രൗണ്ട് സ്ക്രിപ്റ്റിൽ നിന്ന് കണ്ടൻ്റ് സ്ക്രിപ്റ്റിലേക്ക് ഒരു സന്ദേശം അയയ്ക്കുന്നു):

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (request.message === "get_data") {
      // Do something to retrieve data
      let data = "Example Data";
      sendResponse({data: data});
    }
  }
);

ഉദാഹരണം (കണ്ടൻ്റ് സ്ക്രിപ്റ്റിൽ നിന്ന് ബാക്ക്ഗ്രൗണ്ട് സ്ക്രിപ്റ്റിലേക്ക് ഒരു സന്ദേശം അയയ്ക്കുന്നു):

chrome.runtime.sendMessage({message: "get_data"}, function(response) {
  console.log("Received data: " + response.data);
});

3. `install` ഇവൻ്റിൽ ഇനീഷ്യലൈസേഷൻ ടാസ്ക്കുകൾ കൈകാര്യം ചെയ്യുക

സർവീസ് വർക്കർ ആദ്യമായി ഇൻസ്റ്റാൾ ചെയ്യുമ്പോഴോ അപ്ഡേറ്റ് ചെയ്യുമ്പോഴോ install ഇവൻ്റ് ട്രിഗർ ചെയ്യപ്പെടുന്നു. ഡാറ്റാബേസുകൾ ഉണ്ടാക്കുകയോ സ്റ്റാറ്റിക് അസറ്റുകൾ കാഷെ ചെയ്യുകയോ പോലുള്ള ഇനീഷ്യലൈസേഷൻ ജോലികൾ ചെയ്യാൻ ഇത് ഏറ്റവും അനുയോജ്യമായ സ്ഥലമാണ്.

ഉദാഹരണം:

chrome.runtime.onInstalled.addListener(function() {
  console.log("Service Worker installed.");
  // Perform initialization tasks here
  chrome.storage.local.set({initialized: true});
});

4. ഓഫ്സ്ക്രീൻ ഡോക്യുമെൻ്റുകൾ പരിഗണിക്കുക

മാനിഫെസ്റ്റ് V3, ഓഡിയോ പ്ലേബാക്ക് അല്ലെങ്കിൽ ക്ലിപ്പ്ബോർഡ് ഇൻ്ററാക്ഷൻ പോലുള്ള, മുമ്പ് ബാക്ക്ഗ്രൗണ്ട് പേജുകളിൽ DOM ആക്സസ് ആവശ്യമായിരുന്ന ജോലികൾ കൈകാര്യം ചെയ്യാൻ ഓഫ്‌സ്‌ക്രീൻ ഡോക്യുമെൻ്റുകൾ അവതരിപ്പിച്ചു. ഈ ഡോക്യുമെൻ്റുകൾ ഒരു പ്രത്യേക കോൺടെക്സ്റ്റിൽ പ്രവർത്തിക്കുന്നു, എന്നാൽ സർവീസ് വർക്കറിന് വേണ്ടി DOM-മായി സംവദിക്കാൻ കഴിയും.

നിങ്ങളുടെ എക്സ്റ്റൻഷന് DOM-ൽ ധാരാളം മാറ്റങ്ങൾ വരുത്തേണ്ടതുണ്ടെങ്കിൽ അല്ലെങ്കിൽ മെസ്സേജ് പാസ്സിംഗും കണ്ടൻ്റ് സ്ക്രിപ്റ്റുകളും ഉപയോഗിച്ച് എളുപ്പത്തിൽ നേടാനാകാത്ത ജോലികൾ ചെയ്യണമെങ്കിൽ, ഓഫ്‌സ്‌ക്രീൻ ഡോക്യുമെൻ്റുകൾ ശരിയായ പരിഹാരമായേക്കാം.

ഉദാഹരണം (ഒരു ഓഫ്സ്ക്രീൻ ഡോക്യുമെൻ്റ് ഉണ്ടാക്കുന്നു):

// In your background script:
async function createOffscreen() {
  if (await chrome.offscreen.hasDocument({
    reasons: [chrome.offscreen.Reason.WORKER],
    justification: 'reason for needing the document'
  })) {
    return;
  }
  await chrome.offscreen.createDocument({
    url: 'offscreen.html',
    reasons: [chrome.offscreen.Reason.WORKER],
    justification: 'reason for needing the document'
  });
}

chrome.runtime.onStartup.addListener(createOffscreen);
chrome.runtime.onInstalled.addListener(createOffscreen);

ഉദാഹരണം (offscreen.html):

<!DOCTYPE html>
<html>
<head>
  <title>Offscreen Document</title>
</head>
<body>
  <script src="offscreen.js"></script>
</body>
</html>

ഉദാഹരണം (offscreen.js, ഇത് ഓഫ്സ്ക്രീൻ ഡോക്യുമെൻ്റിൽ പ്രവർത്തിക്കുന്നു):

// Listen for messages from the service worker
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === 'doSomething') {
    // Do something with the DOM here
    document.body.textContent = 'Action performed!';
    sendResponse({ result: 'success' });
  }
});

ഘട്ടം 3: നിങ്ങളുടെ എക്സ്റ്റൻഷൻ സമഗ്രമായി ടെസ്റ്റ് ചെയ്യുക

നിങ്ങളുടെ ബാക്ക്ഗ്രൗണ്ട് സ്ക്രിപ്റ്റ് റീഫാക്ടർ ചെയ്ത ശേഷം, പുതിയ സർവീസ് വർക്കർ പരിതസ്ഥിതിയിൽ അത് ശരിയായി പ്രവർത്തിക്കുന്നുവെന്ന് ഉറപ്പാക്കാൻ നിങ്ങളുടെ എക്സ്റ്റൻഷൻ സമഗ്രമായി ടെസ്റ്റ് ചെയ്യേണ്ടത് അത്യാവശ്യമാണ്. താഴെ പറയുന്ന കാര്യങ്ങളിൽ കൂടുതൽ ശ്രദ്ധിക്കുക:

• സ്റ്റേറ്റ് മാനേജ്മെൻ്റ്: നിങ്ങളുടെ പെർസിസ്റ്റൻ്റ് സ്റ്റേറ്റ് സ്റ്റോറേജ് API അല്ലെങ്കിൽ IndexedDB ഉപയോഗിച്ച് ശരിയായി സംഭരിക്കുകയും വീണ്ടെടുക്കുകയും ചെയ്യുന്നുണ്ടോ എന്ന് പരിശോധിക്കുക.
• മെസ്സേജ് പാസ്സിംഗ്: ബാക്ക്ഗ്രൗണ്ട് സ്ക്രിപ്റ്റ്, കണ്ടൻ്റ് സ്ക്രിപ്റ്റുകൾ, പോപ്പ്അപ്പ് സ്ക്രിപ്റ്റുകൾ എന്നിവയ്ക്കിടയിൽ സന്ദേശങ്ങൾ ശരിയായി അയയ്ക്കുകയും സ്വീകരിക്കുകയും ചെയ്യുന്നുണ്ടെന്ന് ഉറപ്പാക്കുക.
• ഇവൻ്റ് ഹാൻഡ്‌ലിംഗ്: എല്ലാ ഇവൻ്റ് ലിസണറുകളും പ്രതീക്ഷിച്ചപോലെ ട്രിഗർ ചെയ്യപ്പെടുന്നുണ്ടോ എന്ന് ടെസ്റ്റ് ചെയ്യുക.
• പ്രകടനം: നിങ്ങളുടെ എക്സ്റ്റൻഷൻ അമിതമായ റിസോഴ്സുകൾ ഉപയോഗിക്കുന്നില്ലെന്ന് ഉറപ്പാക്കാൻ അതിൻ്റെ പ്രകടനം നിരീക്ഷിക്കുക.

ഘട്ടം 4: സർവീസ് വർക്കറുകൾ ഡീബഗ് ചെയ്യൽ

സർവീസ് വർക്കറുകൾ ഇടയ്ക്കിടെ മാത്രം പ്രവർത്തിക്കുന്നതിനാൽ അവയെ ഡീബഗ് ചെയ്യുന്നത് വെല്ലുവിളി നിറഞ്ഞതാണ്. നിങ്ങളുടെ സർവീസ് വർക്കർ ഡീബഗ് ചെയ്യാൻ സഹായിക്കുന്ന ചില ടിപ്പുകൾ ഇതാ:

• ക്രോം ഡെവലപ്പർ ടൂൾസ്: സർവീസ് വർക്കർ പരിശോധിക്കാനും കൺസോൾ ലോഗുകൾ കാണാനും ബ്രേക്ക്‌പോയിൻ്റുകൾ സജ്ജീകരിക്കാനും ക്രോം ഡെവലപ്പർ ടൂൾസ് ഉപയോഗിക്കുക. "Application" ടാബിന് കീഴിൽ നിങ്ങൾക്ക് സർവീസ് വർക്കർ കണ്ടെത്താം.
• പെർസിസ്റ്റൻ്റ് കൺസോൾ ലോഗുകൾ: നിങ്ങളുടെ സർവീസ് വർക്കറിൻ്റെ എക്സിക്യൂഷൻ ഫ്ലോ ട്രാക്ക് ചെയ്യുന്നതിന് console.log സ്റ്റേറ്റ്‌മെൻ്റുകൾ ധാരാളമായി ഉപയോഗിക്കുക.
• ബ്രേക്ക്‌പോയിൻ്റുകൾ: എക്സിക്യൂഷൻ താൽക്കാലികമായി നിർത്തി വേരിയബിളുകൾ പരിശോധിക്കുന്നതിന് നിങ്ങളുടെ സർവീസ് വർക്കർ കോഡിൽ ബ്രേക്ക്‌പോയിൻ്റുകൾ സജ്ജമാക്കുക.
• സർവീസ് വർക്കർ ഇൻസ്പെക്ടർ: സർവീസ് വർക്കറിൻ്റെ സ്റ്റാറ്റസ്, ഇവൻ്റുകൾ, നെറ്റ്‌വർക്ക് അഭ്യർത്ഥനകൾ എന്നിവ കാണുന്നതിന് ക്രോം ഡെവലപ്പർ ടൂൾസിലെ സർവീസ് വർക്കർ ഇൻസ്പെക്ടർ ഉപയോഗിക്കുക.

സർവീസ് വർക്കർ മൈഗ്രേഷനുള്ള മികച്ച രീതികൾ

നിങ്ങളുടെ ബ്രൗസർ എക്സ്റ്റൻഷൻ സർവീസ് വർക്കറുകളിലേക്ക് മൈഗ്രേറ്റ് ചെയ്യുമ്പോൾ പിന്തുടരേണ്ട ചില മികച്ച രീതികൾ ഇതാ:

• നേരത്തെ തുടങ്ങുക: സർവീസ് വർക്കറുകളിലേക്ക് മൈഗ്രേറ്റ് ചെയ്യാൻ അവസാന നിമിഷം വരെ കാത്തിരിക്കരുത്. നിങ്ങളുടെ കോഡ് റീഫാക്ടർ ചെയ്യാനും എക്സ്റ്റൻഷൻ ടെസ്റ്റ് ചെയ്യാനും ആവശ്യമായ സമയം ലഭിക്കുന്നതിന് മൈഗ്രേഷൻ പ്രക്രിയ എത്രയും പെട്ടെന്ന് ആരംഭിക്കുക.
• ജോലി വിഭജിക്കുക: മൈഗ്രേഷൻ പ്രക്രിയയെ ചെറുതും കൈകാര്യം ചെയ്യാവുന്നതുമായ ടാസ്ക്കുകളായി വിഭജിക്കുക. ഇത് പ്രക്രിയയെ എളുപ്പമുള്ളതും ട്രാക്ക് ചെയ്യാൻ സൗകര്യപ്രദവുമാക്കും.
• പതിവായി ടെസ്റ്റ് ചെയ്യുക: പിശകുകൾ നേരത്തെ കണ്ടെത്താൻ മൈഗ്രേഷൻ പ്രക്രിയയിലുടനീളം നിങ്ങളുടെ എക്സ്റ്റൻഷൻ പതിവായി ടെസ്റ്റ് ചെയ്യുക.
• പെർസിസ്റ്റൻ്റ് സ്റ്റേറ്റിനായി സ്റ്റോറേജ് API അല്ലെങ്കിൽ IndexedDB ഉപയോഗിക്കുക: പെർസിസ്റ്റൻ്റ് സ്റ്റേറ്റിനായി ഗ്ലോബൽ വേരിയബിളുകളെ ആശ്രയിക്കരുത്. പകരം സ്റ്റോറേജ് API അല്ലെങ്കിൽ IndexedDB ഉപയോഗിക്കുക.
• ആശയവിനിമയത്തിനായി മെസ്സേജ് പാസ്സിംഗ് ഉപയോഗിക്കുക: ബാക്ക്ഗ്രൗണ്ട് സ്ക്രിപ്റ്റ്, കണ്ടൻ്റ് സ്ക്രിപ്റ്റുകൾ, പോപ്പ്അപ്പ് സ്ക്രിപ്റ്റുകൾ എന്നിവയ്ക്കിടയിൽ ആശയവിനിമയം നടത്താൻ മെസ്സേജ് പാസ്സിംഗ് ഉപയോഗിക്കുക.
• നിങ്ങളുടെ കോഡ് ഒപ്റ്റിമൈസ് ചെയ്യുക: റിസോഴ്സ് ഉപയോഗം കുറയ്ക്കുന്നതിന് പ്രകടനത്തിനായി നിങ്ങളുടെ കോഡ് ഒപ്റ്റിമൈസ് ചെയ്യുക.
• ഓഫ്സ്ക്രീൻ ഡോക്യുമെൻ്റുകൾ പരിഗണിക്കുക: നിങ്ങൾക്ക് DOM-ൽ ധാരാളം മാറ്റങ്ങൾ വരുത്തണമെങ്കിൽ, ഓഫ്‌സ്‌ക്രീൻ ഡോക്യുമെൻ്റുകൾ ഉപയോഗിക്കുന്നത് പരിഗണിക്കുക.

അന്താരാഷ്ട്രവൽക്കരണ പരിഗണനകൾ

ഒരു ആഗോള പ്രേക്ഷകർക്കായി ബ്രൗസർ എക്സ്റ്റൻഷനുകൾ വികസിപ്പിക്കുമ്പോൾ, അന്താരാഷ്ട്രവൽക്കരണവും (i18n) പ്രാദേശികവൽക്കരണവും (l10n) പരിഗണിക്കേണ്ടത് അത്യാവശ്യമാണ്. നിങ്ങളുടെ എക്സ്റ്റൻഷൻ ലോകമെമ്പാടുമുള്ള ഉപയോക്താക്കൾക്ക് ലഭ്യമാക്കുന്നതിനുള്ള ചില നുറുങ്ങുകൾ ഇതാ:

• `_locales` ഫോൾഡർ ഉപയോഗിക്കുക: നിങ്ങളുടെ എക്സ്റ്റൻഷൻ്റെ വിവർത്തനം ചെയ്ത സ്ട്രിംഗുകൾ _locales ഫോൾഡറിൽ സൂക്ഷിക്കുക. ഈ ഫോൾഡറിൽ പിന്തുണയ്ക്കുന്ന ഓരോ ഭാഷയ്ക്കും ഓരോ സബ്ഫോൾഡറുകൾ ഉണ്ടാകും, അതിൽ വിവർത്തനങ്ങൾ അടങ്ങുന്ന ഒരു messages.json ഫയൽ ഉണ്ടാകും.
• `__MSG_messageName__` സിൻ്റാക്സ് ഉപയോഗിക്കുക: നിങ്ങളുടെ കോഡിലും മാനിഫെസ്റ്റ് ഫയലിലും വിവർത്തനം ചെയ്ത സ്ട്രിംഗുകൾ റഫർ ചെയ്യാൻ __MSG_messageName__ സിൻ്റാക്സ് ഉപയോഗിക്കുക.
• വലത്തുനിന്ന് ഇടത്തോട്ടുള്ള (RTL) ഭാഷകളെ പിന്തുണയ്ക്കുക: അറബി, ഹീബ്രു പോലുള്ള RTL ഭാഷകളുമായി നിങ്ങളുടെ എക്സ്റ്റൻഷൻ്റെ ലേഔട്ടും സ്റ്റൈലിംഗും ശരിയായി പൊരുത്തപ്പെടുന്നുണ്ടെന്ന് ഉറപ്പാക്കുക.
• തീയതിയും സമയവും ഫോർമാറ്റിംഗ് പരിഗണിക്കുക: ഓരോ ലൊക്കേലിനും അനുയോജ്യമായ തീയതിയും സമയവും ഫോർമാറ്റിംഗ് ഉപയോഗിക്കുക.
• സാംസ്കാരികമായി പ്രസക്തമായ ഉള്ളടക്കം നൽകുക: നിങ്ങളുടെ എക്സ്റ്റൻഷൻ്റെ ഉള്ളടക്കം വിവിധ പ്രദേശങ്ങളിലെ സംസ്കാരങ്ങൾക്ക് പ്രസക്തമായ രീതിയിൽ ക്രമീകരിക്കുക.

ഉദാഹരണം (_locales/en/messages.json):

{
  "extensionName": {
    "message": "My Extension",
    "description": "The name of the extension"
  },
  "buttonText": {
    "message": "Click Me",
    "description": "The text for the button"
  }
}

ഉദാഹരണം (നിങ്ങളുടെ കോഡിൽ വിവർത്തനം ചെയ്ത സ്ട്രിംഗുകൾ റഫർ ചെയ്യുന്നു):

document.getElementById('myButton').textContent = chrome.i18n.getMessage("buttonText");

ഉപസംഹാരം

നിങ്ങളുടെ ബ്രൗസർ എക്സ്റ്റൻഷൻ്റെ ബാക്ക്ഗ്രൗണ്ട് സ്ക്രിപ്റ്റ് ഒരു ജാവാസ്ക്രിപ്റ്റ് സർവീസ് വർക്കറിലേക്ക് മൈഗ്രേറ്റ് ചെയ്യുന്നത് പ്രകടനം, സുരക്ഷ, എന്നിവ മെച്ചപ്പെടുത്തുന്നതിനും ഭാവിയിലേക്ക് നിങ്ങളുടെ എക്സ്റ്റൻഷൻ സജ്ജമാക്കുന്നതിനുമുള്ള ഒരു സുപ്രധാന ചുവടുവെപ്പാണ്. ഈ മാറ്റം ചില വെല്ലുവിളികൾ ഉയർത്താമെങ്കിലും, അതിൻ്റെ പ്രയോജനങ്ങൾ ആ പ്രയത്നത്തിന് മൂല്യം നൽകുന്നു. ഈ ഗൈഡിൽ പറഞ്ഞിരിക്കുന്ന ഘട്ടങ്ങൾ പാലിക്കുന്നതിലൂടെയും മികച്ച രീതികൾ സ്വീകരിക്കുന്നതിലൂടെയും, നിങ്ങൾക്ക് സുഗമവും വിജയകരവുമായ ഒരു മൈഗ്രേഷൻ ഉറപ്പാക്കാനും ലോകമെമ്പാടുമുള്ള നിങ്ങളുടെ ഉപയോക്താക്കൾക്ക് മികച്ച അനുഭവം നൽകാനും കഴിയും. സർവീസ് വർക്കറുകളുടെ ശക്തി പൂർണ്ണമായി പ്രയോജനപ്പെടുത്തുന്നതിന് സമഗ്രമായി ടെസ്റ്റ് ചെയ്യാനും പുതിയ ഇവൻ്റ്-ഡ്രിവൺ ആർക്കിടെക്ചറുമായി പൊരുത്തപ്പെടാനും ഓർമ്മിക്കുക.

കൂടുതൽ വിവരങ്ങൾക്കായി

• ക്രോം എക്സ്റ്റൻഷൻ മാനിഫെസ്റ്റ് V3 ഡോക്യുമെൻ്റേഷൻ
• മോസില്ല സർവീസ് വർക്കർ API ഡോക്യുമെൻ്റേഷൻ
• സർവീസ് വർക്കർ ഫണ്ടമെൻ്റൽസ്