क्रोम एक्सटेंशन के लिए मेनिफेस्ट V3 में ट्रांजिशन कैसे करें

जबकि मैं नियमित क्रोम एक्सटेंशन प्रोग्रामर नहीं हूं, मैंने निश्चित रूप से पर्याप्त एक्सटेंशन कोड किए हैं और कार्य के चारों ओर अपना रास्ता जानने के लिए पर्याप्त वेब विकास पोर्टफोलियो है। हालाँकि, अभी हाल ही में, मेरे एक क्लाइंट ने मेरे एक एक्सटेंशन को अस्वीकार कर दिया था क्योंकि मुझे प्रतिक्रिया मिली थी कि मेरा एक्सटेंशन "पुराना" था।

जैसा कि मैं यह पता लगाने के लिए छटपटा रहा था कि क्या गलत था, मैंने अपनी शर्मिंदगी को कालीन के नीचे झाड़ दिया और तुरंत क्रोम एक्सटेंशन की दुनिया में अपना गहरा गोता लगाना शुरू कर दिया। दुर्भाग्य से, मेनिफेस्ट V3 के बारे में जानकारी दुर्लभ थी और मेरे लिए यह समझना मुश्किल था कि यह परिवर्तन क्या था।

कहने की जरूरत नहीं है, एक लंबित नौकरी के साथ, मुझे अपना रास्ता खोजने के लिए कड़ी मेहनत करनी पड़ी Google का क्रोम डेवलपर दस्तावेज़ीकरण और अपने लिए चीजों का पता लगाएं। जब मुझे काम मिल गया, तो मैं नहीं चाहता था कि इस क्षेत्र में मेरा ज्ञान और शोध बेकार जाए और मैंने अपनी सीखने की यात्रा में जो कुछ भी चाहा, उसे साझा करने का फैसला किया।

मेनिफेस्ट 3 में परिवर्तन क्यों महत्वपूर्ण है

Manifest V3 एक API है जिसका उपयोग Google अपने Chrome ब्राउज़र में करेगा। यह वर्तमान एपीआई, मेनिफेस्ट V2 का उत्तराधिकारी है, और यह नियंत्रित करता है कि क्रोम एक्सटेंशन ब्राउज़र के साथ कैसे इंटरैक्ट करते हैं। मेनिफेस्ट V3 एक्सटेंशन के नियमों में महत्वपूर्ण परिवर्तन प्रस्तुत करता है, जिनमें से कुछ V2 से नए मुख्य आधार होंगे जिनके हम अभ्यस्त थे।

मेनिफेस्ट V3 में संक्रमण इस प्रकार संक्षेप किया जा सकता है:

1. 2018 से बदलाव का सिलसिला जारी है।
2. मेनिफेस्ट V3 आधिकारिक तौर पर जनवरी 2023 में शुरू होगा।
3. जून 2023 तक, मेनिफेस्ट V2 चलाने वाले एक्सटेंशन अब Chrome वेब स्टोर पर उपलब्ध नहीं होंगे।
4. मेनिफेस्ट V3 में पेश किए गए नए नियमों का पालन नहीं करने वाले एक्सटेंशन अंततः Chrome वेब स्टोर से हटा दिए जाएंगे।

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

मेनिफेस्ट V3 में Google के संक्रमण के साथ अप-टू-डेट रहना महत्वपूर्ण है क्योंकि यह एक्सटेंशन के लिए नए नियम पेश करता है जिसका उद्देश्य उपयोगकर्ता सुरक्षा और समग्र ब्राउज़र अनुभव में सुधार करना है, और जो एक्सटेंशन इन नियमों का पालन नहीं करते हैं उन्हें अंततः क्रोम वेब से हटा दिया जाएगा इकट्ठा करना।

संक्षेप में, यदि आप आने वाले महीनों में यह परिवर्तन नहीं करते हैं तो मेनिफेस्ट V2 का उपयोग करने वाले एक्सटेंशन बनाने में आपकी सारी मेहनत व्यर्थ हो सकती है।

मेनिफेस्ट V2 और V3 के बीच मुख्य अंतर

दोनों के बीच कई अंतर हैं, और जबकि मैं अत्यधिक अनुशंसा करता हूं कि आप इसे पढ़ें Chrome की "मेनिफेस्ट V3 में माइग्रेट करना" मार्गदर्शिका, यहां मुख्य बिंदुओं का संक्षिप्त और प्यारा सारांश दिया गया है:

1. सेवा कार्यकर्ता मेनिफेस्ट V3 में पृष्ठभूमि पृष्ठ बदलें।
2. नेटवर्क अनुरोध संशोधन को नए के साथ नियंत्रित किया जाता है declarativeNetRequest मेनिफेस्ट V3 में एपीआई।
3. मेनिफेस्ट V3 में, एक्सटेंशन केवल उनके पैकेज में शामिल जावास्क्रिप्ट को निष्पादित कर सकते हैं और दूरस्थ रूप से होस्ट किए गए कोड का उपयोग नहीं कर सकते हैं।
4. मेनिफेस्ट V3 पेश करता है promise कई तरीकों के लिए समर्थन, हालांकि कॉलबैक अभी भी एक विकल्प के रूप में समर्थित हैं।
5. मेनिफेस्ट V3 में होस्ट अनुमतियाँ एक अलग तत्व हैं और इन्हें निर्दिष्ट किया जाना चाहिए "host_permissions" खेत।
6. मेनिफेस्ट V3 में सामग्री सुरक्षा नीति एक ऑब्जेक्ट है जिसमें सदस्य वैकल्पिक सामग्री सुरक्षा नीति (CSP) संदर्भों का प्रतिनिधित्व करते हैं, न कि एक स्ट्रिंग के रूप में जैसा कि मैनिफेस्ट V2 में था।

एक साधारण क्रोम एक्सटेंशन के मेनिफेस्ट में जो वेबपेज की पृष्ठभूमि को बदल देता है, वह ऐसा दिखाई दे सकता है:

// Manifest V2
{ "manifest_version": 2, "name": "Shane's Extension", "version": "1.0", "description": "A simple extension that changes the background of a webpage to Shane's face.", "background": { "scripts": ["background.js"], "persistent": true }, "browser_action": { "default_popup": "popup.html" }, "permissions": [ "activeTab", ], "optional_permissions": ["<all_urls>"]
}

// Manifest V3
{ "manifest_version": 3, "name": "Shane's Extension", "version": "1.0", "description": "A simple extension that changes the background of a webpage to Shane's face.", "background": { "service_worker": "background.js" }, "action": { "default_popup": "popup.html" }, "permissions": [ "activeTab", ], "host_permissions": [ "<all_urls>" ]
}

यदि आपको लगता है कि ऊपर दिए गए कुछ टैग आपके लिए विदेशी लगते हैं, तो यह जानने के लिए पढ़ना जारी रखें कि आपको वास्तव में क्या जानने की आवश्यकता है।

मैनिफेस्ट V3 में सुचारू रूप से संक्रमण कैसे करें

मैंने चार प्रमुख क्षेत्रों में मेनिफेस्ट V3 में संक्रमण को संक्षेप में प्रस्तुत किया है। बेशक, जबकि नए मेनिफेस्ट V3 में कई घंटियाँ और सीटी हैं जिन्हें पुराने मेनिफेस्ट V2 से लागू करने की आवश्यकता है, इन चार क्षेत्रों में परिवर्तनों को लागू करने से आपका क्रोम एक्सटेंशन अंतिम संक्रमण के लिए सही रास्ते पर आ जाएगा।

चार प्रमुख क्षेत्र हैं:

1. अपने मैनिफेस्ट की मूल संरचना को अपडेट करना।
2. अपनी होस्ट अनुमतियों को संशोधित करें।
3. सामग्री सुरक्षा नीति को अपडेट करें।
4. अपने नेटवर्क अनुरोध प्रबंधन को संशोधित करें।

इन चार क्षेत्रों के साथ, आपके मेनिफेस्ट के मूल तत्व मेनिफेस्ट V3 में संक्रमण के लिए तैयार होंगे। आइए इन प्रमुख पहलुओं में से प्रत्येक को विस्तार से देखें और देखें कि हम इस संक्रमण से आपके क्रोम एक्सटेंशन को भविष्य में सुरक्षित करने की दिशा में कैसे काम कर सकते हैं।

अपने मैनिफेस्ट की मूल संरचना को अपडेट करना

अपने मेनिफेस्ट की मूल संरचना को अपडेट करना मेनिफेस्ट V3 में संक्रमण का पहला चरण है। आपको जो सबसे महत्वपूर्ण बदलाव करने की आवश्यकता होगी, वह है के मूल्य को बदलना "manifest_version" करने के लिए तत्व 3, जो निर्धारित करता है कि आप मेनिफेस्ट V3 फीचर सेट का उपयोग कर रहे हैं।

मेनिफेस्ट V2 और V3 के बीच प्रमुख अंतरों में से एक मेनिफेस्ट V3 में पृष्ठभूमि पृष्ठों को एकल एक्सटेंशन सर्विस वर्कर के साथ बदलना है। आपको सेवा कार्यकर्ता को इसके तहत पंजीकृत करने की आवश्यकता होगी "background" क्षेत्र, का उपयोग कर "service_worker" कुंजी और एक जावास्क्रिप्ट फ़ाइल निर्दिष्ट करें। भले ही मेनिफेस्ट V3 कई पृष्ठभूमि स्क्रिप्ट का समर्थन नहीं करता है, आप वैकल्पिक रूप से निर्दिष्ट करके सेवा कार्यकर्ता को ES मॉड्यूल के रूप में घोषित कर सकते हैं "type": "module", जो आपको और कोड आयात करने की अनुमति देता है।

मेनिफेस्ट V3 में, "browser_action" और "page_action" गुण एक में एकीकृत होते हैं "action" संपत्ति। आपको इन गुणों को इसके साथ बदलने की आवश्यकता होगी "action" आपके मेनिफेस्ट में। इसी प्रकार, द "chrome.browserAction" और "chrome.pageAction" मैनिफेस्ट V3 में एपीआई को एक "एक्शन" एपीआई में एकीकृत किया गया है, और आपको इस एपीआई में माइग्रेट करने की आवश्यकता होगी।

// Manifest V2 "background": { "scripts": ["background.js"], "persistent": false
}, "browser_action": { "default_popup": "popup.html"
},

// Manifest V3 "background": { "service_worker": "background.js"
}, "action": { "default_popup": "popup.html"
}

कुल मिलाकर, आपके मेनिफेस्ट की मूल संरचना को अपडेट करना मेनिफेस्ट V3 में संक्रमण की प्रक्रिया में एक महत्वपूर्ण कदम है, क्योंकि यह आपको एपीआई के इस संस्करण में पेश की गई नई सुविधाओं और परिवर्तनों का लाभ उठाने की अनुमति देता है।

अपनी होस्ट अनुमतियों को संशोधित करें

मेनिफेस्ट V3 में संक्रमण का दूसरा चरण आपकी होस्ट अनुमतियों को संशोधित कर रहा है। मेनिफेस्ट V2 में, आप इसमें होस्ट अनुमतियाँ निर्दिष्ट करते हैं "permissions" मेनिफेस्ट फ़ाइल में फ़ील्ड। मेनिफेस्ट V3 में, होस्ट अनुमतियाँ एक अलग तत्व हैं, और आपको उन्हें इसमें निर्दिष्ट करना चाहिए "host_permissions" मेनिफेस्ट फ़ाइल में फ़ील्ड।

अपनी होस्ट अनुमतियों को संशोधित करने का एक उदाहरण यहां दिया गया है:

// Manifest V2 "permissions": [ "activeTab", "storage", "http://www.css-tricks.com/", ":///*" ]

// Manifest V3 "permissions": [ "activeTab", "scripting", "storage"
], "host_permissions": [ "http://www.css-tricks.com/" ], "optional_host_permissions": [ ":///*" ]

सामग्री सुरक्षा नीति को अपडेट करें

अपने मैनिफ़ेस्ट V2 एक्सटेंशन के CSP को मेनिफेस्ट V3 के अनुरूप बनाने के लिए अपडेट करने के लिए, आपको अपनी मैनिफ़ेस्ट फ़ाइल में कुछ बदलाव करने होंगे। मेनिफेस्ट V2 में, CSP को एक स्ट्रिंग के रूप में निर्दिष्ट किया गया था "content_security_policy" मेनिफेस्ट का क्षेत्र।

मेनिफेस्ट V3 में, CSP अब वैकल्पिक CSP संदर्भों का प्रतिनिधित्व करने वाले विभिन्न सदस्यों के साथ एक वस्तु है। सिंगल के बजाय "content_security_policy" फ़ील्ड, अब आपको इसके लिए अलग फ़ील्ड निर्दिष्ट करना होगा "content_security_policy.extension_pages" और "content_security_policy.sandbox", आपके द्वारा उपयोग किए जा रहे एक्सटेंशन पृष्ठों के प्रकार पर निर्भर करता है।

आपको इसमें बाहरी डोमेन के सभी संदर्भों को भी निकाल देना चाहिए "script-src", "worker-src", "object-src", तथा "style-src" निर्देश यदि वे उपस्थित हों। मेनिफेस्ट V3 में आपके एक्सटेंशन की सुरक्षा और स्थिरता सुनिश्चित करने के लिए अपने CSP में ये अपडेट करना महत्वपूर्ण है।

// Manifest V2 "content_security_policy": "script-src 'self' https://css-tricks.com; object-src 'self'"

// Manfiest V3 "content_security_policy.extension_pages": "script-src 'self' https://example.com; object-src 'self'", "content_security_policy.sandbox": "script-src 'self' https://css-tricks.com; object-src 'self'"

अपने नेटवर्क अनुरोध प्रबंधन को संशोधित करें

मेनिफेस्ट V3 में संक्रमण का अंतिम चरण आपके नेटवर्क अनुरोध प्रबंधन को संशोधित करना है। मेनिफेस्ट V2 में, आपने इसका उपयोग किया होगा chrome.webRequest एपीआई नेटवर्क अनुरोधों को संशोधित करने के लिए। हालाँकि, इस API को मेनिफेस्ट V3 में इसके द्वारा बदल दिया गया है declarativeNetRequest एपीआई।

इस नए एपीआई का उपयोग करने के लिए, आपको निर्दिष्ट करने की आवश्यकता होगी declarativeNetRequest अपने मेनिफ़ेस्ट में अनुमति दें और नए API का उपयोग करने के लिए अपना कोड अपडेट करें। दो एपीआई के बीच एक महत्वपूर्ण अंतर यह है कि declarativeNetRequest एपीआई के लिए आपको HTTP अनुरोधों की पूरी श्रेणियों को ब्लॉक करने में सक्षम होने के बजाय ब्लॉक करने के लिए पूर्व निर्धारित पतों की एक सूची निर्दिष्ट करने की आवश्यकता है, जैसा कि आप कर सकते हैं chrome.webRequest एपीआई।

यह सुनिश्चित करने के लिए अपने कोड में ये बदलाव करना महत्वपूर्ण है कि आपका एक्सटेंशन मेनिफेस्ट V3 के तहत ठीक से काम करता रहे। यहां एक उदाहरण दिया गया है कि आप इसका उपयोग करने के लिए अपने मेनिफेस्ट को कैसे संशोधित करेंगे declarativeNetRequest मैनिफ़ेस्ट V3 में API:

// Manifest V2 "permissions": [ "webRequest", "webRequestBlocking"
]

// Manifest V3 "permissions": [ "declarativeNetRequest"
]

का उपयोग करने के लिए आपको अपने एक्सटेंशन कोड को भी अपडेट करना होगा declarativeNetRequest इसके बजाय एपीआई chrome.webRequest एपीआई।

अन्य पहलुओं को आपको जांचने की आवश्यकता है

मैंने जो कवर किया है वह सिर्फ हिमशैल का सिरा है। बेशक, अगर मैं सब कुछ कवर करना चाहता हूं, तो मैं यहां कुछ दिनों के लिए रह सकता हूं और Google के क्रोम डेवलपर्स गाइड होने का कोई मतलब नहीं होगा। जबकि मैंने जो कवर किया है, वह आपके क्रोम एक्सटेंशन को इस संक्रमण में बांटने के लिए पर्याप्त रूप से भविष्य-प्रमाणित होगा, यहां कुछ अन्य चीजें हैं जिन्हें आप यह सुनिश्चित करने के लिए देख सकते हैं कि आपके एक्सटेंशन उनके गेम के शीर्ष पर काम कर रहे हैं।

• सेवा कार्यकर्ता निष्पादन संदर्भ में पृष्ठभूमि स्क्रिप्ट माइग्रेट करना: जैसा कि पहले उल्लेख किया गया है, मेनिफेस्ट V3 पृष्ठभूमि पृष्ठों को एक एकल विस्तार सेवा कार्यकर्ता के साथ बदल देता है, इसलिए सेवा कार्यकर्ता निष्पादन संदर्भ के अनुकूल होने के लिए पृष्ठभूमि स्क्रिप्ट को अद्यतन करना आवश्यक हो सकता है।
• एकीकृत करना **chrome.browserAction** और **chrome.pageAction** एपीआई: इन दो समकक्ष एपीआई को मेनिफेस्ट वी3 में एक एपीआई में एकीकृत किया गया है, इसलिए एक्शन एपीआई में माइग्रेट करना आवश्यक हो सकता है।
• माइग्रेट करने वाले फ़ंक्शन जो मेनिफेस्ट V2 पृष्ठभूमि संदर्भ की अपेक्षा करते हैं: मेनिफेस्ट V3 में सेवा कर्मियों को अपनाना, जैसे तरीकों के अनुकूल नहीं है chrome.runtime.getBackgroundPage(), chrome.extension.getBackgroundPage(), chrome.extension.getExtensionTabs(), तथा chrome.extension.getViews(). ऐसे डिज़ाइन में माइग्रेट करना आवश्यक हो सकता है जो अन्य संदर्भों और पृष्ठभूमि सेवा कार्यकर्ता के बीच संदेश भेजता हो।
• पृष्ठभूमि सेवा कार्यकर्ता को सामग्री स्क्रिप्ट में CORS अनुरोधों को स्थानांतरित करना: मेनिफेस्ट V3 का अनुपालन करने के लिए सामग्री स्क्रिप्ट में CORS अनुरोधों को पृष्ठभूमि सेवा कार्यकर्ता को स्थानांतरित करना आवश्यक हो सकता है।
• बाहरी कोड या मनमानी तारों को निष्पादित करने से दूर माइग्रेट करना: मेनिफेस्ट V3 अब बाहरी तर्क के निष्पादन की अनुमति नहीं देता है chrome.scripting.executeScript({code: '...'}), eval(), तथा new Function(). एक्सटेंशन बंडल से संसाधनों को लोड करने और उपयोग करने के लिए सभी बाहरी कोड (जावास्क्रिप्ट, वेबएसेम्बली, सीएसएस) को एक्सटेंशन बंडल, अपडेट स्क्रिप्ट और स्टाइल रेफरेंस में ले जाना आवश्यक हो सकता है chrome.runtime.getURL() रनटाइम पर संसाधन URL बनाने के लिए।
• Tabs API में कुछ स्क्रिप्टिंग और CSS विधियों को अपडेट करना: जैसा कि पहले उल्लेख किया गया है, मेनिफेस्ट V3 में कई तरीके टैब्स एपीआई से स्क्रिप्टिंग एपीआई में जाते हैं। सही मेनिफ़ेस्ट V3 API का उपयोग करने के लिए इन विधियों में किसी भी कॉल को अपडेट करना आवश्यक हो सकता है।

और बहुत सारे!

बेझिझक कुछ समय निकालकर सभी बदलावों के बारे में खुद को अपडेट करें। आखिरकार, यह परिवर्तन अवश्यम्भावी है और यदि आप नहीं चाहते कि इस संक्रमण से बचने के कारण आपका मेनिफेस्ट V2 एक्सटेंशन खो जाए, तो अपने आप को आवश्यक ज्ञान से लैस करने में कुछ समय व्यतीत करें।

दूसरी ओर, यदि आप क्रोम एक्सटेंशन प्रोग्रामिंग के लिए नए हैं और आरंभ करना चाहते हैं, तो इसके बारे में जाने का एक शानदार तरीका क्रोम के वेब डेवलपर टूल की दुनिया में गोता लगाना है। मैंने ऐसा एक कोर्स के जरिए किया लिंक्डइन लर्निंग, जिसने मुझे बहुत तेजी से गति प्रदान की। एक बार जब आपके पास वह आधार ज्ञान हो जाए, तो इस लेख पर वापस आएं और जो आप जानते हैं उसका अनुवाद V3 प्रकट करें!

इसलिए, मैं आगे चलकर नए मेनिफेस्ट V3 में सुविधाओं का उपयोग कैसे करूंगा?

ठीक है, मेरे लिए, मेनिफेस्ट V3 में संक्रमण और chrome.webRequest ऐसा लगता है कि एपीआई डेटा-केंद्रित उपयोग के मामलों (जैसे विज्ञापन अवरोधक) से अधिक कार्यात्मक और एप्लिकेशन-आधारित उपयोगों के लिए एक्सटेंशन को स्थानांतरित कर रहा है। मैं हाल ही में एप्लिकेशन डेवलपमेंट से दूर रहा हूं क्योंकि यह काफी हो सकता है गहन संसाधन कभी कभी। हालाँकि, यह पारी हो सकती है जो मुझे वापस लाए!

हाल के दिनों में एआई टूल्स का उदय, कई उपयोग-में-उपयोग एपीआई के साथ, नए और ताजा सास अनुप्रयोगों के टन को जन्म दिया है। व्यक्तिगत रूप से, मुझे लगता है कि यह अधिक एप्लिकेशन-आधारित क्रोम एक्सटेंशन में बदलाव के साथ एक सही समय पर आ रहा है! जबकि कई पुराने एक्सटेंशन इस संक्रमण से मिटा दिए जा सकते हैं, नए सास विचारों के आसपास बनाए गए बहुत से नए उनकी जगह लेने के लिए आएंगे।

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

हालांकि, याद रखें कि प्रत्येक डेवलपर की आवश्यकताएं अलग-अलग होती हैं, इसलिए जानें कि आपको अपने मौजूदा एक्सटेंशन को चालू रखने या अपने नए एक्सटेंशन को चालू रखने के लिए क्या चाहिए!

• एसईओ संचालित सामग्री और पीआर वितरण। आज ही प्रवर्धित हो जाओ।
• प्लेटोब्लॉकचैन। Web3 मेटावर्स इंटेलिजेंस। ज्ञान प्रवर्धित। यहां पहुंचें।
• स्रोत: https://css-tricks.com/how-to-transition-to-manifest-v3-for-chrome-extensions/