सेवा वर्कर की मदद से इवेंट मैनेज करना

एक्सटेंशन सर्विस वर्कर के कॉन्सेप्ट के बारे में जानकारी देने वाला ट्यूटोरियल

खास जानकारी

इस ट्यूटोरियल में, Chrome एक्सटेंशन सर्विस वर्कर के बारे में बताया गया है. इस ट्यूटोरियल के तहत, आपको एक ऐसा एक्सटेंशन बनाना होगा जिससे लोग, ओमनीबॉक्स का इस्तेमाल करके Chrome API के रेफ़रंस पेजों पर तुरंत जा सकें. आपको इन कामों के बारे में जानकारी मिलेगी:

• अपने सर्विस वर्कर को रजिस्टर करना और मॉड्यूल इंपोर्ट करना.
• अपने एक्सटेंशन सर्विस वर्कर को डीबग करना.
• स्टेट मैनेज करना और इवेंट हैंडल करना.
• समय-समय पर होने वाले इवेंट ट्रिगर करना.
• कॉन्टेंट स्क्रिप्ट के साथ कम्यूनिकेट करना.

शुरू करने से पहले

इस गाइड में यह मान लिया गया है कि आपको वेब डेवलपमेंट का बुनियादी अनुभव है. हमारा सुझाव है कि एक्सटेंशन डेवलपमेंट के बारे में जानने के लिए, Extensions 101 और Hello World लेख पढ़ें.

एक्सटेंशन बनाना

एक्सटेंशन की फ़ाइलें सेव करने के लिए, quick-api-reference नाम की नई डायरेक्ट्री बनाएं. इसके अलावा, हमारे GitHub के सैंपल रिपॉज़िटरी से सोर्स कोड डाउनलोड करें.

पहला चरण: सर्विस वर्कर को रजिस्टर करना

प्रोजेक्ट की रूट डायरेक्ट्री में मेनिफ़ेस्ट फ़ाइल बनाएं और उसमें यह कोड जोड़ें:

manifest.json:

{
  "manifest_version": 3,
  "name": "Open extension API reference",
  "version": "1.0.0",
  "icons": {
    "16": "images/icon-16.png",
    "128": "images/icon-128.png"
  },
  "background": {
    "service_worker": "service-worker.js"
  }
}

एक्सटेंशन, अपने सर्विस वर्कर को मेनिफ़ेस्ट में रजिस्टर करते हैं. इसमें सिर्फ़ एक JavaScript फ़ाइल होती है. navigator.serviceWorker.register() को कॉल करने की ज़रूरत नहीं होती. जैसे, वेब पेज में होती है.

`images` फ़ोल्डर बनाएं. इसके बाद, उसमें आइकॉन डाउनलोड करें.

मेनिफ़ेस्ट में एक्सटेंशन के मेटाडेटा और आइकॉन के बारे में ज़्यादा जानने के लिए, 'रेंडर होने में लगने वाला समय' ट्यूटोरियल का पहला चरण देखें.

दूसरा चरण: एक से ज़्यादा सर्विस वर्कर मॉड्यूल इंपोर्ट करना

हमारा सर्विस वर्कर, दो सुविधाएं लागू करता है. बेहतर रखरखाव के लिए, हम हर सुविधा को अलग मॉड्यूल में लागू करेंगे. सबसे पहले, हमें अपने मेनिफ़ेस्ट में सर्विस वर्कर को ES मॉड्यूल के तौर पर एलान करना होगा. इससे हम अपने सर्विस वर्कर में मॉड्यूल इंपोर्ट कर पाएंगे:

manifest.json:

{
 "background": {
    "service_worker": "service-worker.js",
    "type": "module"
  },
}

service-worker.js फ़ाइल बनाएं और दो मॉड्यूल इंपोर्ट करें:

import './sw-omnibox.js';
import './sw-tips.js';

ये फ़ाइलें बनाएं और हर फ़ाइल में कंसोल लॉग जोड़ें.

console.log("sw-omnibox.js");

console.log("sw-tips.js");

किसी सर्विस वर्कर में एक से ज़्यादा फ़ाइलें इंपोर्ट करने के अन्य तरीकों के बारे में जानने के लिए, स्क्रिप्ट इंपोर्ट करना लेख पढ़ें.

ज़रूरी नहीं: सर्विस वर्कर को डीबग करना

मैं आपको सर्विस वर्कर के लॉग ढूंढने और यह जानने का तरीका बताऊंगी कि वह कब बंद हुआ. सबसे पहले, अनपैक्ड एक्सटेंशन लोड करने के लिए, दिए गए निर्देशों का पालन करें.

30 सेकंड बाद, आपको "service worker (inactive)" दिखेगा. इसका मतलब है कि सर्विस वर्कर बंद हो गया है. उसकी जांच करने के लिए, "service worker (inactive)" लिंक पर क्लिक करें. नीचे दिया गया ऐनिमेशन, यह दिखाता है.

क्या आपने ध्यान दिया कि सर्विस वर्कर की जांच करने से वह चालू हो गया? devtools में सर्विस वर्कर को खोलने पर, वह चालू रहेगा. यह पक्का करने के लिए कि आपका एक्सटेंशन, सर्विस वर्कर के बंद होने पर सही तरीके से काम करे, DevTools को बंद करना न भूलें.

अब, एक्सटेंशन को ब्रेक करें, ताकि आपको पता चल सके कि गड़बड़ियां कहां दिखती हैं. इसके लिए, './sw-omnibox.js' इंपोर्ट से ".js" मिटाएं जो service-worker.js फ़ाइल में है. Chrome, सर्विस वर्कर को रजिस्टर नहीं कर पाएगा.

chrome://extensions पर वापस जाएं और एक्सटेंशन को रीफ़्रेश करें. आपको दो गड़बड़ियां दिखेंगी:

Service worker registration failed. Status code: 3.

An unknown error occurred when fetching the script.

एक्सटेंशन सर्विस वर्कर को डीबग करने के अन्य तरीकों के बारे में जानने के लिए, एक्सटेंशन डीबग करना लेख पढ़ें.

चौथा चरण: स्टेट को शुरू करना

Chrome, सर्विस वर्कर को बंद कर देगा, अगर उनकी ज़रूरत नहीं है. हम chrome.storage API का इस्तेमाल करके, सर्विस वर्कर के सेशन में स्टेट को बनाए रखते हैं. स्टोरेज ऐक्सेस करने के लिए, हमें मेनिफ़ेस्ट में अनुमति का अनुरोध करना होगा:

manifest.json:

{
  ...
  "permissions": ["storage"],
}

सबसे पहले, डिफ़ॉल्ट सुझावों को स्टोरेज में सेव करें. runtime.onInstalled() इवेंट को सुनकर, एक्सटेंशन के पहली बार इंस्टॉल होने पर, हम स्टेट को शुरू कर सकते हैं:

sw-omnibox.js:

...
// Save default API suggestions
chrome.runtime.onInstalled.addListener(({ reason }) => {
  if (reason === 'install') {
    chrome.storage.local.set({
      apiSuggestions: ['tabs', 'storage', 'scripting']
    });
  }
});

सर्विस वर्कर के पास विंडो ऑब्जेक्ट का डायरेक्ट ऐक्सेस नहीं होता. इसलिए, वे वैल्यू सेव करने के लिए window.localStorage का इस्तेमाल नहीं कर सकते. इसके अलावा, सर्विस वर्कर कम समय के लिए चलने वाले एनवायरमेंट होते हैं. वे उपयोगकर्ता के ब्राउज़र सेशन के दौरान बार-बार बंद होते हैं. इसलिए, वे ग्लोबल वैरिएबल के साथ काम नहीं करते. इसके बजाय, chrome.storage.local का इस्तेमाल करें. यह लोकल मशीन पर डेटा सेव करता है.

एक्सटेंशन सर्विस वर्कर के लिए स्टोरेज के अन्य विकल्पों के बारे में जानने के लिए, ग्लोबल वैरिएबल का इस्तेमाल करने के बजाय डेटा बनाए रखना लेख पढ़ें.

पांचवा चरण: अपने इवेंट रजिस्टर करना

सभी इवेंट लिसनर को सर्विस वर्कर के ग्लोबल स्कोप में स्टैटिक तौर पर रजिस्टर करना ज़रूरी है. दूसरे शब्दों में, इवेंट लिसनर को एसिंक्रोनस फ़ंक्शन में नेस्ट नहीं किया जाना चाहिए. इससे Chrome यह पक्का कर सकता है कि सर्विस वर्कर के रीबूट होने पर, सभी इवेंट हैंडलर रीस्टोर हो जाएं.

इस उदाहरण में, हम chrome.omnibox API का इस्तेमाल करने वाले हैं. हालांकि, इससे पहले हमें मेनिफ़ेस्ट में ओमनीबॉक्स कीवर्ड ट्रिगर का एलान करना होगा:

manifest.json:

{
  ...
  "minimum_chrome_version": "102",
  "omnibox": {
    "keyword": "api"
  },
}

अब, स्क्रिप्ट के टॉप लेवल पर ओमनीबॉक्स इवेंट लिसनर रजिस्टर करें. जब उपयोगकर्ता, पता बार में ओमनीबॉक्स कीवर्ड (api) डालकर टैब या स्पेस दबाएगा, तो Chrome, स्टोरेज में मौजूद कीवर्ड के आधार पर सुझावों की सूची दिखाएगा. onInputChanged() इवेंट, इन सुझावों को पॉप्युलेट करने के लिए ज़िम्मेदार होता है. यह मौजूदा उपयोगकर्ता के इनपुट और suggestResult ऑब्जेक्ट को लेता है.

sw-omnibox.js:

...
const URL_CHROME_EXTENSIONS_DOC =
  'https://developer.chrome.com/docs/extensions/reference/';
const NUMBER_OF_PREVIOUS_SEARCHES = 4;

// Display the suggestions after user starts typing
chrome.omnibox.onInputChanged.addListener(async (input, suggest) => {
  await chrome.omnibox.setDefaultSuggestion({
    description: 'Enter a Chrome API or choose from past searches'
  });
  const { apiSuggestions } = await chrome.storage.local.get('apiSuggestions');
  const suggestions = apiSuggestions.map((api) => {
    return { content: api, description: `Open chrome.${api} API` };
  });
  suggest(suggestions);
});

उपयोगकर्ता के किसी सुझाव को चुनने के बाद, onInputEntered(), Chrome API के रेफ़रंस का पेज खोलेगा.

sw-omnibox.js:

...
// Open the reference page of the chosen API
chrome.omnibox.onInputEntered.addListener((input) => {
  chrome.tabs.create({ url: URL_CHROME_EXTENSIONS_DOC + input });
  // Save the latest keyword
  updateHistory(input);
});

updateHistory() फ़ंक्शन, ओमनीबॉक्स के इनपुट को लेता है और उसे storage.local में सेव करता है. इससे, हाल ही में खोजे गए शब्द को बाद में ओमनीबॉक्स के सुझाव के तौर पर इस्तेमाल किया जा सकता है.

sw-omnibox.js:

...
async function updateHistory(input) {
  const { apiSuggestions } = await chrome.storage.local.get('apiSuggestions');
  apiSuggestions.unshift(input);
  apiSuggestions.splice(NUMBER_OF_PREVIOUS_SEARCHES);
  return chrome.storage.local.set({ apiSuggestions });
}

छठा चरण: बार-बार होने वाला इवेंट सेट अप करना

setTimeout() या setInterval() तरीकों का इस्तेमाल आम तौर पर, देरी से या समय-समय पर होने वाले टास्क करने के लिए किया जाता है. हालांकि, ये एपीआई काम नहीं कर सकते, क्योंकि सर्विस वर्कर के बंद होने पर, शेड्यूलर टाइमर रद्द कर देगा. इसके बजाय, एक्सटेंशन chrome.alarms API का इस्तेमाल कर सकते हैं.

मेनिफ़ेस्ट में "alarms" अनुमति का अनुरोध करके शुरू करें:

manifest.json:

{
  ...
  "permissions": ["storage"],
  "permissions": ["storage", "alarms"],
}

एक्सटेंशन, सभी सलाहें फ़ेच करेगा. इसके बाद, उनमें से कोई एक सलाह रैंडम तरीके से चुनेगा और उसे स्टोरेज में सेव करेगा. हम एक अलार्म बनाएंगे, जो हर दिन एक बार ट्रिगर होगा, ताकि सलाह को अपडेट किया जा सके. Chrome बंद करने पर, अलार्म सेव नहीं होते. इसलिए, हमें यह देखना होगा कि अलार्म मौजूद है या नहीं. अगर अलार्म मौजूद नहीं है, तो उसे बनाना होगा.

sw-tips.js:

// Fetch tip & save in storage
const updateTip = async () => {
  const response = await fetch('https://chrome.dev/f/extension_tips/');
  const tips = await response.json();
  const randomIndex = Math.floor(Math.random() * tips.length);
  return chrome.storage.local.set({ tip: tips[randomIndex] });
};

const ALARM_NAME = 'tip';

// Check if alarm exists to avoid resetting the timer.
// The alarm might be removed when the browser session restarts.
async function createAlarm() {
  const alarm = await chrome.alarms.get(ALARM_NAME);
  if (typeof alarm === 'undefined') {
    chrome.alarms.create(ALARM_NAME, {
      delayInMinutes: 1,
      periodInMinutes: 1440
    });
    updateTip();
  }
}

createAlarm();

// Update tip once a day
chrome.alarms.onAlarm.addListener(updateTip);

सातवां चरण: अन्य कॉन्टेक्स्ट के साथ कम्यूनिकेट करना

एक्सटेंशन, पेज के कॉन्टेंट को पढ़ने और उसमें बदलाव करने के लिए, कॉन्टेंट स्क्रिप्ट का इस्तेमाल करते हैं. जब कोई उपयोगकर्ता, Chrome API के रेफ़रंस का पेज खोलता है, तो एक्सटेंशन की कॉन्टेंट स्क्रिप्ट, पेज को दिन की सलाह से अपडेट करेगी. यह सर्विस वर्कर से दिन की सलाह का अनुरोध करने के लिए, एक मैसेज भेजती है.

सबसे पहले, मेनिफ़ेस्ट में कॉन्टेंट स्क्रिप्ट का एलान करें. इसके बाद, Chrome API के रेफ़रंस के दस्तावेज़ से जुड़ा मैच पैटर्न जोड़ें.

manifest.json:

{
  ...
  "content_scripts": [
    {
      "matches": ["https://developer.chrome.com/docs/extensions/reference/*"],
      "js": ["content.js"]
    }
  ]
}

नई कॉन्टेंट फ़ाइल बनाएं. यहां दिया गया कोड, सर्विस वर्कर को एक मैसेज भेजकर सलाह का अनुरोध करता है. इसके बाद, एक बटन जोड़ता है. इस बटन पर क्लिक करने से, एक पॉप-ओवर खुलेगा, जिसमें एक्सटेंशन की सलाह दिखेगी. यह कोड, नए वेब प्लैटफ़ॉर्म Popover API का इस्तेमाल करता है.

content.js:

(async () => {
  // Sends a message to the service worker and receives a tip in response
  const { tip } = await chrome.runtime.sendMessage({ greeting: 'tip' });

  const nav = document.querySelector('.upper-tabs > nav');
  
  const tipWidget = createDomElement(`
    <button type="button" popovertarget="tip-popover" popovertargetaction="show" style="padding: 0 12px; height: 36px;">
      <span style="display: block; font: var(--devsite-link-font,500 14px/20px var(--devsite-primary-font-family));">Tip</span>
    </button>
  `);

  const popover = createDomElement(
    `<div id='tip-popover' popover style="margin: auto;">${tip}</div>`
  );

  document.body.append(popover);
  nav.append(tipWidget);
})();

function createDomElement(html) {
  const dom = new DOMParser().parseFromString(html, 'text/html');
  return dom.body.firstElementChild;
}

आखिरी चरण में, हमें अपने सर्विस वर्कर में एक मैसेज हैंडलर जोड़ना होगा. यह हैंडलर, कॉन्टेंट स्क्रिप्ट को हर दिन की सलाह के साथ जवाब भेजेगा.

sw-tips.js:

...
// Send tip to content script via messaging
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.greeting === 'tip') {
    chrome.storage.local.get('tip').then(sendResponse);
    return true;
  }
});

यह पक्का करना कि एक्सटेंशन काम करता है

पक्का करें कि आपके प्रोजेक्ट की फ़ाइल स्ट्रक्चर, इस तरह दिखे:

अपने एक्सटेंशन को स्थानीय तौर पर लोड करना

डेवलपर मोड में अनपैक्ड एक्सटेंशन लोड करने के लिए, Hello world में दिया गया तरीका अपनाएं.

रेफ़रंस पेज खोलना

1. ब्राउज़र के पता बार में, "api" कीवर्ड डालें.
2. "टैब" या "स्पेस" दबाएं.
3. एपीआई का पूरा नाम डालें.
   • इसके अलावा, पिछली खोजों की सूची में से कोई विकल्प चुनें
4. Chrome API के रेफ़रंस पेज पर एक नया पेज खुलेगा.

यह इस तरह दिखना चाहिए:

दिन की सलाह खोलना

एक्सटेंशन की सलाह खोलने के लिए, नेविगेशन बार पर मौजूद 'सलाह' बटन पर क्लिक करें.

🎯 बेहतर बनाने के संभावित तरीके

आज आपने जो सीखा है उसके आधार पर, इनमें से कोई भी काम करके देखें:

• ओमनीबॉक्स के सुझावों को लागू करने का कोई दूसरा तरीका देखें.
• एक्सटेंशन की सलाह दिखाने के लिए, अपना कस्टम मॉडल बनाएं.
• MDN के वेब एक्सटेंशन रेफ़रंस API के पेजों के लिए, एक और पेज खोलें.

एक्सटेंशन बनाना जारी रखें!

इस ट्यूटोरियल को पूरा करने के लिए बधाई 🎉. शुरुआती लेवल के अन्य ट्यूटोरियल पूरे करके, अपनी स्किल को बेहतर बनाएं:

एक्सप्लोर करना जारी रखें

एक्सटेंशन सर्विस वर्कर के बारे में ज़्यादा जानने के लिए, हमारा सुझाव है कि आप ये लेख पढ़ें:

• एक्सटेंशन सर्विस वर्कर के बारे में जानकारी.
• एक्सटेंशन सर्विस वर्कर का लाइफ़साइकल.
• सर्विस वर्कर में इवेंट