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

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

खास जानकारी

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

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

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

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

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

एक्सटेंशन फ़ाइलों को सेव करने के लिए, 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 फ़ोल्डर बनाएं. इसके बाद, उसमें आइकॉन डाउनलोड करें.

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

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

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

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 बंद करना न भूलें.

अब, यह जानने के लिए एक्सटेंशन को ब्रेक करें कि गड़बड़ियां कहां मिलेंगी. ऐसा करने का एक तरीका यह है कि 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 उन्हें बंद कर देगा. हम 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) डालने के बाद, Tab या Space दबाता है, तो 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"],
  "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 का रेफ़रंस पेज खुलेगा.

यह कुछ ऐसा दिखेगा:

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

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

🎯 संभावित सुधार

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

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

वीडियो बनाते रहें!

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

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

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

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