உலாவி நீட்டிப்பு பின்னணி ஸ்கிரிப்டுகள்: ஜாவாஸ்கிரிப்ட் சர்வீஸ் வொர்க்கர் மாற்றத்தை ஏற்றுக்கொள்வது

உலாவி நீட்டிப்பு மேம்பாட்டின் தளம் தொடர்ந்து மாறிக்கொண்டே இருக்கிறது. சமீபத்திய மிக முக்கியமான மாற்றங்களில் ஒன்று, பாரம்பரிய நிலையான பின்னணிப் பக்கங்களிலிருந்து ஜாவாஸ்கிரிப்ட் சர்வீஸ் வொர்க்கர்களுக்கு பின்னணி ஸ்கிரிப்டுகளுக்காக மாறுவதாகும். இந்த மாற்றம், முக்கியமாக குரோமியம் அடிப்படையிலான உலாவிகளில் மேனிஃபெஸ்ட் V3 (MV3) மூலம் இயக்கப்படுகிறது, இது பல நன்மைகளைத் தருகிறது, ஆனால் டெவலப்பர்களுக்கு தனித்துவமான சவால்களையும் அளிக்கிறது. இந்த விரிவான வழிகாட்டி இந்த மாற்றத்தின் பின்னணியில் உள்ள காரணங்கள், நன்மைகள் மற்றும் தீமைகள் மற்றும் இடம்பெயர்வு செயல்முறையின் விரிவான வழிகாட்டுதலை ஆராய்ந்து, உங்கள் நீட்டிப்புக்கு ஒரு சுமூகமான மாற்றத்தை உறுதி செய்யும்.

சர்வீஸ் வொர்க்கர்களுக்கு ஏன் மாற வேண்டும்?

இந்த மாற்றத்தின் முதன்மை நோக்கம் உலாவி செயல்திறன் மற்றும் பாதுகாப்பை மேம்படுத்துவதாகும். மேனிஃபெஸ்ட் V2 (MV2) இல் பொதுவானதாக இருந்த நிலையான பின்னணிப் பக்கங்கள், செயலற்ற நிலையில் இருக்கும்போதும் கணிசமான வளங்களை உட்கொள்ளக்கூடும், இது பேட்டரி ஆயுள் மற்றும் ஒட்டுமொத்த உலாவி பதிலளிப்புத் திறனைப் பாதிக்கிறது. மறுபுறம், சர்வீஸ் வொர்க்கர்கள் நிகழ்வு-இயக்கப்படுபவை மற்றும் தேவைப்படும்போது மட்டுமே செயலில் இருக்கும்.

சர்வீஸ் வொர்க்கர்களின் நன்மைகள்:

• மேம்பட்ட செயல்திறன்: ஒரு API அழைப்பு அல்லது நீட்டிப்பின் மற்றொரு பகுதியிலிருந்து ஒரு செய்தி போன்ற ஒரு நிகழ்வு அவற்றைத் தூண்டும்போது மட்டுமே சர்வீஸ் வொர்க்கர்கள் செயலில் இருக்கும். இந்த "நிகழ்வு-இயக்கப்படும்" தன்மை வள நுகர்வைக் குறைத்து உலாவி செயல்திறனை மேம்படுத்துகிறது.
• மேம்படுத்தப்பட்ட பாதுகாப்பு: சர்வீஸ் வொர்க்கர்கள் மிகவும் கட்டுப்படுத்தப்பட்ட சூழலில் செயல்படுகின்றன, இது தாக்குதல் பரப்பைக் குறைத்து நீட்டிப்பின் ஒட்டுமொத்த பாதுகாப்பை மேம்படுத்துகிறது.
• எதிர்காலத்திற்கு உகந்தது: பெரும்பாலான முக்கிய உலாவிகள் நீட்டிப்புகளில் பின்னணி செயலாக்கத்திற்கான தரநிலையாக சர்வீஸ் வொர்க்கர்களை நோக்கி நகர்கின்றன. இப்போது இடம்பெயர்வது உங்கள் நீட்டிப்பு இணக்கமாக இருப்பதை உறுதிசெய்கிறது மற்றும் எதிர்கால பயன்பாட்டிலிருந்து நீக்கப்படுவதைத் தவிர்க்கிறது.
• தடுக்காத செயல்பாடுகள்: சர்வீஸ் வொர்க்கர்கள் முக்கிய இழையைத் தடுக்காமல் பின்னணியில் பணிகளைச் செய்ய வடிவமைக்கப்பட்டுள்ளன, இது ஒரு மென்மையான பயனர் அனுபவத்தை உறுதி செய்கிறது.

குறைகள் மற்றும் சவால்கள்:

• கற்றல் வளைவு: சர்வீஸ் வொர்க்கர்கள் ஒரு புதிய நிரலாக்க மாதிரியை அறிமுகப்படுத்துகின்றன, இது நிலையான பின்னணிப் பக்கங்களுக்குப் பழகிய டெவலப்பர்களுக்கு சவாலாக இருக்கலாம். நிகழ்வு-இயக்கப்படும் தன்மைக்கு நிலை மற்றும் தகவல்தொடர்புகளை நிர்வகிக்க ஒரு வித்தியாசமான அணுகுமுறை தேவை.
• நிலையான நிலை மேலாண்மை: சர்வீஸ் வொர்க்கர் செயல்பாடுகளுக்கு இடையில் நிலையான நிலையை பராமரிக்க கவனமான பரிசீலனை தேவை. ஸ்டோரேஜ் API அல்லது IndexedDB போன்ற நுட்பங்கள் முக்கியமானதாகின்றன.
• பிழைத்திருத்தத்தின் சிக்கல்: சர்வீஸ் வொர்க்கர்களை பிழைத்திருத்தம் செய்வது அவற்றின் இடைப்பட்ட தன்மை காரணமாக பாரம்பரிய பின்னணிப் பக்கங்களை பிழைத்திருத்தம் செய்வதை விட சிக்கலானதாக இருக்கும்.
• DOM-க்கான வரையறுக்கப்பட்ட அணுகல்: சர்வீஸ் வொர்க்கர்கள் நேரடியாக DOM-ஐ அணுக முடியாது. வலைப்பக்கங்களுடன் தொடர்பு கொள்ள அவை உள்ளடக்க ஸ்கிரிப்டுகளுடன் தொடர்பு கொள்ள வேண்டும்.

முக்கிய கருத்துக்களைப் புரிந்துகொள்ளுதல்

இடம்பெயர்வு செயல்முறைக்குள் நுழைவதற்கு முன், சர்வீஸ் வொர்க்கர்களின் பின்னணியில் உள்ள அடிப்படைக் கருத்துக்களைப் புரிந்துகொள்வது அவசியம்:

வாழ்க்கை சுழற்சி மேலாண்மை

சர்வீஸ் வொர்க்கர்கள் பின்வரும் நிலைகளைக் கொண்ட ஒரு தனித்துவமான வாழ்க்கைச் சுழற்சியைக் கொண்டுள்ளன:

• நிறுவுதல்: நீட்டிப்பு முதலில் ஏற்றப்படும்போது அல்லது புதுப்பிக்கப்படும்போது சர்வீஸ் வொர்க்கர் நிறுவப்படுகிறது. நிலையான சொத்துக்களை கேச் செய்வதற்கும் ஆரம்ப அமைப்புப் பணிகளைச் செய்வதற்கும் இது சிறந்த நேரம்.
• செயல்படுத்துதல்: நிறுவப்பட்ட பிறகு, சர்வீஸ் வொர்க்கர் செயல்படுத்தப்படுகிறது. இது நிகழ்வுகளைக் கையாளத் தொடங்கும் இடம்.
• செயலற்ற நிலை: சர்வீஸ் வொர்க்கர் செயலற்ற நிலையில் இருந்து, நிகழ்வுகள் தன்னைத் தூண்டுவதற்காகக் காத்திருக்கும்.
• முடிவுக்கு வருதல்: சர்வீஸ் வொர்க்கர் இனி தேவைப்படாதபோது முடிவுக்குக் கொண்டுவரப்படும்.

நிகழ்வு-இயக்கப்படும் கட்டமைப்பு

சர்வீஸ் வொர்க்கர்கள் நிகழ்வு-இயக்கப்படுபவை, அதாவது அவை குறிப்பிட்ட நிகழ்வுகளுக்குப் பதிலளிக்கும் வகையில் மட்டுமே குறியீட்டை இயக்குகின்றன. பொதுவான நிகழ்வுகள் பின்வருமாறு:

• 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 மிகவும் சிக்கலான தரவு கட்டமைப்புகளுக்கு மற்றொரு விருப்பமாகும்.

உதாரணம் (ஸ்டோரேஜ் API உடன் MV3):

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);
    });
  });
});

உதாரணம் (IndexedDB உடன் MV3):

// 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 ஆவணங்கள்
• சர்வீஸ் வொர்க்கர் அடிப்படைகள்