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

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

खास जानकारी

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

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

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

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

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

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

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

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

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)" दिखेगा. इसका मतलब है कि सर्विस वर्कर बंद हो गया है. इसकी जांच करने के लिए, "सर्विस वर्कर (निष्क्रिय)" लिंक पर क्लिक करें. इस ऐनिमेशन में इसे दिखाया गया है.

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

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

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

Service worker registration failed. Status code: 3.

An unknown error occurred when fetching the script.

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

चौथा चरण: स्थिति को शुरू करना

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

manifest.json:

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

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

sw-omnibox.js:

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

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

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

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

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

इस उदाहरण में, हम browser.omnibox एपीआई का इस्तेमाल करने जा रहे हैं. हालांकि, इससे पहले हमें मेनिफ़ेस्ट में, Omnibox कीवर्ड ट्रिगर का एलान करना होगा:

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
browser.omnibox.onInputChanged.addListener(async (input, suggest) => {
  await browser.omnibox.setDefaultSuggestion({
    description: 'Enter a Chrome API or choose from past searches'
  });
  const { apiSuggestions } = await browser.storage.local.get('apiSuggestions');
  const suggestions = apiSuggestions.map((api) => {
    return { content: api, description: `Open browser.${api} API` };
  });
  suggest(suggestions);
});

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

sw-omnibox.js:

...
// Open the reference page of the chosen API
browser.omnibox.onInputEntered.addListener((input) => {
  browser.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 browser.storage.local.get('apiSuggestions');
  apiSuggestions.unshift(input);
  apiSuggestions.splice(NUMBER_OF_PREVIOUS_SEARCHES);
  return browser.storage.local.set({ apiSuggestions });
}

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

setTimeout() या setInterval() तरीकों का इस्तेमाल आम तौर पर, कुछ समय बाद या समय-समय पर होने वाले टास्क को पूरा करने के लिए किया जाता है. हालांकि, ये एपीआई काम नहीं कर सकते, क्योंकि सर्विस वर्कर के बंद होने पर शेड्यूलर, टाइमर रद्द कर देगा. इसके बजाय, एक्सटेंशन browser.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 browser.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 browser.alarms.get(ALARM_NAME);
  if (typeof alarm === 'undefined') {
    browser.alarms.create(ALARM_NAME, {
      delayInMinutes: 1,
      periodInMinutes: 1440
    });
    updateTip();
  }
}

createAlarm();

// Update tip once a day
browser.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 browser.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
browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.greeting === 'tip') {
    browser.storage.local.get('tip').then(sendResponse);
    return true;
  }
});

जांच करें कि यह काम कर रहा है या नहीं

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

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

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

पहचान फ़ाइल का पेज खोलना

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

यह ऐसा दिखना चाहिए:

आज की खास सलाह खोलें

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

🎯 बेहतर बनाने के लिए सुझाव

आज आपने जो कुछ भी सीखा है उसके आधार पर, इनमें से कोई काम पूरा करने की कोशिश करें:

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

बनाते रहें!

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

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

एक्सटेंशन के सर्विस वर्कर के लर्निंग पाथ को जारी रखने के लिए, हमारा सुझाव है कि आप इन लेखों को पढ़ें:

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