सर्विस वर्कर के साथ इवेंट मैनेज करना

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

खास जानकारी

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

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

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

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

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

एक्सटेंशन फ़ाइलों को होल्ड करने के लिए, 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';

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

sw-omnibox.js:

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

sw-tips.js:

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

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

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

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

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

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

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

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

Service worker registration failed. Status code: 3.

An unknown error occurred when fetching the script.

एक्सटेंशन सर्विस वर्कर को डीबग करने के और तरीकों के बारे में जानने के लिए, एक्सटेंशन डीबग करना देखें.

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

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

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 एपीआई का इस्तेमाल करने वाले हैं, लेकिन इससे पहले हमें मेनिफ़ेस्ट में खोज बार (खोज क्वेरी डालने वाला बार) कीवर्ड ट्रिगर करने का एलान करना होगा:

manifest.json:

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

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

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 एपीआई का इस्तेमाल कर सकते हैं.

मेनिफ़ेस्ट में "alarms" अनुमति का अनुरोध करके शुरू करें. इसके अलावा, रिमोट तौर पर होस्ट की गई जगह से एक्सटेंशन के सुझाव फ़ेच करने के लिए, आपको होस्ट की अनुमति का अनुरोध करना होगा:

manifest.json:

{
  ...
  "permissions": ["storage"],
  "permissions": ["storage", "alarms"],
  "host_permissions": ["https://extension-tips.glitch.me/*"],
}

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

sw-tips.js:

// Fetch tip & save in storage
const updateTip = async () => {
  const response = await fetch('https://extension-tips.glitch.me/tips.json');
  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;
  }
});

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

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

एक्सटेंशन फ़ोल्डर का कॉन्टेंट: images फ़ोल्डर, Manifest.json, service-worker.js, sw-omnibox.js, sw-tips.js, और content.js

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

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

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

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

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

रनटाइम एपीआई रेफ़रंस को खोलने के लिए, क्विक एपीआई रेफ़रंस
क्विक एपीआई एक्सटेंशन, रनटाइम एपीआई को खोल रहा है.

दिन का शुरुआती हिस्सा खोलें

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

इसमें रोज़ाना की सलाह खोलें
क्विक एपीआई एक्सटेंशन, जो दिन के शुरुआत में खुला रहता है.

○ पैसे चुकाकर ली जाने वाली सेवाओं को बेहतर बनाया जा सकता है

आज आपको मिली जानकारी के आधार पर, इनमें से कोई भी काम करने की कोशिश करें:

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

कम्यूनिटी को बढ़ाते रहें!

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

Extension आपको क्या सीखने को मिलेगा
पढ़ने में लगने वाला समय पेजों के किसी खास सेट पर अपने-आप एलिमेंट शामिल करने के लिए.
टैब मैनेजर ब्राउज़र टैब को मैनेज करने वाला पॉप-अप बनाने के लिए.
फ़ोकस मोड एक्सटेंशन कार्रवाई पर क्लिक करने के बाद मौजूदा पेज पर कोड चलाने के लिए.

एक्सप्लोर करते रहें

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