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

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

खास जानकारी

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

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

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

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

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

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

क्या आपको पता है कि सर्विस वर्कर की जांच करने से वह जाग गया? 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 API का इस्तेमाल कर सकते हैं.

मेनिफ़ेस्ट में "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;
  }
});

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

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

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

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

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

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

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

आज की खास सलाह खोलना

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

Chat के ज़रिए कमाई करने से जुड़ी बेहतर सुविधाएं

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

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

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

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

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

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

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