अपना कोड अपडेट करें

ऐसे अपडेट जो अन्य समस्याओं से जुड़े नहीं हैं

यह तीन सेक्शन में से पहला सेक्शन है. इसमें ऐसे कोड में किए जाने वाले बदलावों के बारे में बताया गया है जो एक्सटेंशन के सर्विस वर्कर का हिस्सा नहीं है. इस सेक्शन में, कोड में किए जाने वाले ज़रूरी बदलावों के बारे में बताया गया है. ये बदलाव, अन्य समस्याओं से जुड़े नहीं हैं. अगले दो सेक्शन में, वेब अनुरोधों को ब्लॉक करने की सुविधा को बदलने और सुरक्षा को बेहतर बनाने के बारे में बताया गया है.

tabs.executeScript() को scripting.executeScript() से बदलें

Manifest V3 में, executeScript() को tabs एपीआई से scripting एपीआई में ले जाया जाता है. इसके लिए, कोड में बदलाव करने के साथ-साथ मेनिफ़ेस्ट फ़ाइल में अनुमतियों में भी बदलाव करना ज़रूरी है.

executeScript() तरीके के लिए, आपको इनकी ज़रूरत होगी:

  • "scripting" की अनुमति.
  • होस्ट करने की अनुमतियां या "activeTab" की अनुमति.

scripting.executeScript() तरीका, tabs.executeScript() के साथ काम करने के तरीके जैसा ही है. हालांकि, दोनों में कुछ अंतर हैं.

  • पुराने तरीके में सिर्फ़ एक फ़ाइल का इस्तेमाल किया जा सकता था, जबकि नए तरीके में कई फ़ाइलों का इस्तेमाल किया जा सकता है.
  • इसके अलावा, InjectDetails के बजाय ScriptInjection ऑब्जेक्ट पास किया जाता है. दोनों के बीच कई अंतर हैं. उदाहरण के लिए, tabId को अब मेथड आर्ग्युमेंट के तौर पर पास करने के बजाय, ScriptInjection.target के सदस्य के तौर पर पास किया जाता है.

उदाहरण में, ऐसा करने का तरीका बताया गया है.

Manifest V2
async function getCurrentTab() {/* ... */}
let tab = await getCurrentTab();

browser.tabs.executeScript(
  tab.id,
  {
    file: 'content-script.js'
  }
);

बैकग्राउंड स्क्रिप्ट फ़ाइल में.

Manifest V3
async function getCurrentTab()
let tab = await getCurrentTab();

browser.scripting.executeScript({
  target: {tabId: tab.id},
  files: ['content-script.js']
});

एक्सटेंशन के सर्विस वर्कर में.

tabs.insertCSS() और tabs.removeCSS() को scripting.insertCSS() और scripting.removeCSS() से बदलें

Manifest V3 में, insertCSS() और removeCSS(), tabs API से scripting API पर चले जाते हैं. इसके लिए, कोड में बदलाव करने के साथ-साथ मेनिफ़ेस्ट फ़ाइल में अनुमतियों में भी बदलाव करना ज़रूरी है:

  • "scripting" की अनुमति.
  • होस्ट करने की अनुमतियां या "activeTab" की अनुमति.

scripting API में मौजूद फ़ंक्शन, tabs में मौजूद फ़ंक्शन के जैसे ही होते हैं. हालांकि, दोनों में कुछ अंतर हैं.

  • इन तरीकों को कॉल करते समय, InjectDetails के बजाय CSSInjection ऑब्जेक्ट पास करें.
  • अब tabId को, CSSInjection.target के सदस्य के तौर पर पास किया जाता है. पहले इसे तरीके के तर्क के तौर पर पास किया जाता था.

इस उदाहरण में, insertCSS() के लिए ऐसा करने का तरीका बताया गया है. removeCSS() के लिए भी यही तरीका अपनाया जाता है.

Manifest V2
browser.tabs.insertCSS(tabId, injectDetails, () => {
  // callback code
});

बैकग्राउंड स्क्रिप्ट फ़ाइल में.

Manifest V3
const insertPromise = await browser.scripting.insertCSS({
  files: ["style.css"],
  target: { tabId: tab.id }
});
// Remaining code. 

एक्सटेंशन के सर्विस वर्कर में.

ब्राउज़र ऐक्शन और पेज ऐक्शन को ऐक्शन से बदलना

Manifest V2 में, ब्राउज़र ऐक्शन और पेज ऐक्शन अलग-अलग कॉन्सेप्ट थे. हालांकि, इनकी शुरुआत अलग-अलग भूमिकाओं के साथ हुई थी, लेकिन समय के साथ इनके बीच के अंतर कम हो गए. मेनिफ़ेस्ट V3 में, इन कॉन्सेप्ट को ऐक्शन एपीआई में शामिल किया गया है. इसके लिए, आपको अपने manifest.json और एक्सटेंशन कोड में बदलाव करने होंगे. यह बदलाव, Manifest V2 की बैकग्राउंड स्क्रिप्ट में किए गए बदलावों से अलग होगा.

Manifest V3 में की जाने वाली कार्रवाइयां, ब्राउज़र में की जाने वाली कार्रवाइयों से मिलती-जुलती हैं. हालांकि, action एपीआई, hide() और show() को pageAction के तौर पर उपलब्ध नहीं कराता. अगर आपको अब भी पेज ऐक्शन की ज़रूरत है, तो डिक्लेरेटिव कॉन्टेंट का इस्तेमाल करके उन्हें एम्युलेट किया जा सकता है. इसके अलावा, टैब आईडी के साथ enable() या disable() को कॉल किया जा सकता है.

"browser_action" और "page_action" को "action" से बदलें

manifest.json में, "browser_action" और "page_action" फ़ील्ड को "action" फ़ील्ड से बदलें. "action" फ़ील्ड के बारे में जानकारी के लिए, रेफ़रंस देखें.

Manifest V2
{
  ...
  "page_action": { ... },
  "browser_action": {
    "default_popup": "popup.html"
   }
  ...
}
Manifest V3
{
  ...
  "action": {
    "default_popup": "popup.html"
  }

  ...
}

browserAction और pageAction एपीआई को action API से बदलें

Manifest V2 में जहां browserAction और pageAction एपीआई का इस्तेमाल किया गया था वहां अब आपको action एपीआई का इस्तेमाल करना चाहिए.

Manifest V2
browser.browserAction.onClicked.addListener(tab => { ... });
browser.pageAction.onClicked.addListener(tab => { ... });
Manifest V3
browser.action.onClicked.addListener(tab => { ... });

कॉलबैक को प्रॉमिस से बदलना

मेनिफ़ेस्ट V3 में, एक्सटेंशन एपीआई के कई तरीके प्रॉमिस दिखाते हैं. प्रॉमिस, एसिंक्रोनस तरीके से मिलने वाली वैल्यू के लिए प्रॉक्सी या प्लेसहोल्डर होता है. अगर आपने कभी Promises का इस्तेमाल नहीं किया है, तो MDN पर इसके बारे में पढ़ें. इस पेज पर, Chrome एक्सटेंशन में इनका इस्तेमाल करने के बारे में बताया गया है.

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

कॉलबैक को प्रॉमिस में बदलने के लिए, कॉलबैक को हटाएं और मिले हुए प्रॉमिस को मैनेज करें. नीचे दिया गया उदाहरण, अनुमति के लिए अनुरोध करने के विकल्प के सैंपल, newtab.js से लिया गया है. कॉलबैक वर्शन में दिखाया गया है कि कॉलबैक के साथ, सैंपल का request() को कॉल कैसा दिखेगा. ध्यान दें कि प्रॉमिस वर्शन को async और await के साथ फिर से लिखा जा सकता है.

कॉलबैक
browser.permissions.request(newPerms, (granted) => {
  if (granted) {
    console.log('granted');
  } else {
    console.log('not granted');
  }
});
Promise
const newPerms = { permissions: ['topSites'] };
browser.permissions.request(newPerms)
.then((granted) => {
  if (granted) {
    console.log('granted');
  } else {
    console.log('not granted');
  }
});

ऐसे फ़ंक्शन बदलें जिनके लिए Manifest V2 का बैकग्राउंड कॉन्टेक्स्ट ज़रूरी है

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

  • browser.runtime.getBackgroundPage()
  • browser.extension.getBackgroundPage()
  • browser.extension.getExtensionTabs()

आपकी एक्सटेंशन स्क्रिप्ट को मैसेज पास करने की सुविधा का इस्तेमाल करना चाहिए, ताकि सर्विस वर्कर और आपके एक्सटेंशन के अन्य हिस्सों के बीच कम्यूनिकेट किया जा सके. फ़िलहाल, ऐसा sendMessage() का इस्तेमाल करके किया जा सकता है. साथ ही, आपको अपने एक्सटेंशन के सर्विस वर्कर में browser.runtime.onMessage को लागू करना होगा. लंबे समय तक, आपको इन कॉल को postMessage() और सर्विस वर्कर के message event handler से बदलने का प्लान बनाना चाहिए.

काम न करने वाले एपीआई बदलना

यहां दी गई प्रॉपर्टी और तरीकों में, Manifest V3 में बदलाव करना ज़रूरी है.

Manifest V2 का तरीका या प्रॉपर्टी इससे बदलें
browser.extension.connect() browser.runtime.connect()
browser.extension.connectNative() browser.runtime.connectNative()
browser.extension.getExtensionTabs() browser.extension.getViews()
browser.extension.getURL() browser.runtime.getURL()
browser.extension.lastError जिन तरीकों से प्रॉमिस मिलते हैं वहां promise.catch() का इस्तेमाल करें
browser.extension.onConnect browser.runtime.onConnect
browser.extension.onConnectExternal browser.runtime.onConnectExternal
browser.extension.onMessage browser.runtime.onMessage
browser.extension.onRequest browser.runtime.onMessage
browser.extension.onRequestExternal browser.runtime.onMessageExternal
browser.extension.sendMessage() browser.runtime.sendMessage()
browser.extension.sendNativeMessage() browser.runtime.sendNativeMessage()
browser.extension.sendRequest() browser.runtime.sendMessage()
browser.runtime.onSuspend (बैकग्राउंड स्क्रिप्ट) एक्सटेंशन सर्विस वर्कर में काम नहीं करता. इसके बजाय, beforeunload दस्तावेज़ इवेंट का इस्तेमाल करें.
browser.tabs.getAllInWindow() browser.tabs.query()
browser.tabs.getSelected() browser.tabs.query()
browser.tabs.onActiveChanged browser.tabs.onActivated
browser.tabs.onHighlightChanged browser.tabs.onHighlighted
browser.tabs.onSelectionChanged browser.tabs.onActivated
browser.tabs.sendRequest() browser.runtime.sendMessage()
browser.tabs.Tab.selected browser.tabs.Tab.highlighted