ट्यूटोरियल: मेनिफ़ेस्ट V2 पर माइग्रेट करना

Chrome 18 में मेनिफ़ेस्ट वर्शन 1 के इस्तेमाल पर रोक लगा दी गई थी. साथ ही, मेनिफ़ेस्ट वर्शन 1 के सहायता शेड्यूल के मुताबिक, इसके साथ काम करना बंद कर दिया जाएगा. वर्शन 1 से वर्शन 2 में किए गए बदलावों को दो बड़े पैमाने पर लागू किया जाता है: एपीआई में किए गए बदलाव और सुरक्षा से जुड़े बदलाव.

यह दस्तावेज़ आपके Chrome एक्सटेंशन को मेनिफ़ेस्ट वर्शन 1 से वर्शन 2 में माइग्रेट करने की चेकलिस्ट उपलब्ध कराता है. साथ ही, इस बारे में ज़्यादा जानकारी दी गई है कि इन बदलावों का क्या मतलब है और ये क्यों किए गए हैं.

एपीआई में हुए बदलावों की चेकलिस्ट

  • क्या आपने browser_actions प्रॉपर्टी या chrome.browserActions एपीआई का इस्तेमाल किया है?

  • browser_actions को एकवचन browser_action प्रॉपर्टी से बदलें.

  • chrome.browserActions को chrome.browserAction से बदलें.

  • icons प्रॉपर्टी को default_icon से बदलें.

  • name प्रॉपर्टी को default_title से बदलें.

  • popup प्रॉपर्टी को default_popup से बदलें (और अब यह एक स्ट्रिंग होनी चाहिए).

  • क्या आपने page_actions प्रॉपर्टी या chrome.pageActions एपीआई का इस्तेमाल किया है?

  • page_actions को page_action से बदलें.

  • chrome.pageActions को chrome.pageAction से बदलें.

  • icons प्रॉपर्टी को default_icon से बदलें.

  • name प्रॉपर्टी को default_title से बदलें.

  • popup प्रॉपर्टी को default_popup से बदलें (और अब यह एक स्ट्रिंग होनी चाहिए).

  • क्या chrome.self प्रॉपर्टी का इस्तेमाल किया जा रहा है?

  • chrome.extension से बदलें.

  • क्या Port.tab प्रॉपर्टी का इस्तेमाल किया जा रहा है?

  • Port.sender से बदलें.

  • क्या chrome.extension.getTabContentses() या chrome.extension.getExtensionTabs() एपीआई का इस्तेमाल किया जा रहा है?

  • chrome.extension.getViews( { "type" : "tab" } ) से बदलें.

  • क्या आपका एक्सटेंशन किसी बैकग्राउंड पेज का इस्तेमाल करता है?

  • background_page प्रॉपर्टी को background प्रॉपर्टी से बदलें.

  • कोई scripts या page प्रॉपर्टी जोड़ें, जिसमें पेज का कोड शामिल हो.

  • अपने बैकग्राउंड पेज को इवेंट पेज में बदलने के लिए, persistent प्रॉपर्टी जोड़ें और उसे false पर सेट करें

सुरक्षा से जुड़े बदलावों की चेकलिस्ट

  • क्या एचटीएमएल पेजों में इनलाइन स्क्रिप्ट ब्लॉक का इस्तेमाल किया जा रहा है?

  • <script> टैग में मौजूद JS कोड हटाएं और उसे किसी बाहरी JS फ़ाइल में रखें.

  • क्या आप इनलाइन इवेंट हैंडलर (जैसे, onclick, वगैरह) का इस्तेमाल कर रहे हैं?

  • इन्हें एचटीएमएल कोड से हटाएं और बाहरी JS फ़ाइल में ले जाएं और addEventListener() का इस्तेमाल करें.

  • क्या आपका एक्सटेंशन, कॉन्टेंट स्क्रिप्ट को उन वेब पेजों में इंजेक्ट करता है जिन्हें एक्सटेंशन के पैकेज में मौजूद रिसॉर्स (जैसे इमेज और स्क्रिप्ट) को ऐक्सेस करने की ज़रूरत होती है?

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

  • क्या आपका एक्सटेंशन बाहरी वेब पेजों को एम्बेड करता है?

  • sandbox प्रॉपर्टी तय करें.

  • क्या आपका कोड या लाइब्रेरी eval(), नए Function(), innerHTML, setTimeout() या जेएस कोड की पास करने वाली स्ट्रिंग का इस्तेमाल कर रही है जिनका डाइनैमिक तौर पर आकलन किया जाता है?

  • अगर किसी ऑब्जेक्ट में JSON कोड पार्स किया जा रहा है, तो JSON.parse() का इस्तेमाल करें.

  • सीएसपी के हिसाब से बनाई गई लाइब्रेरी का इस्तेमाल करें, उदाहरण के लिए, AngularJS.

  • अपने मेनिफ़ेस्ट में सैंडबॉक्स एंट्री बनाएं और सैंडबॉक्स में उस कोड को चलाएं जिस पर असर पड़ा हो. इसके लिए, postMessage() का इस्तेमाल करके सैंडबॉक्स किए गए पेज से संपर्क करें.

  • क्या बाहरी कोड लोड हो रहा है, जैसे कि jQuery या Google Analytics का?

  • लाइब्रेरी डाउनलोड करें और इसे अपने एक्सटेंशन में पैकेजिंग करें. इसके बाद, इसे लोकल पैकेज से लोड करें.

  • अनुमति वाली उस एचटीटीपीएस डोमेन को सूची में शामिल करें जो आपके मेनिफ़ेस्ट के "content_security_policy" हिस्से में संसाधन उपलब्ध कराता है.

एपीआई में हुए बदलावों की खास जानकारी

मेनिफ़ेस्ट वर्शन 2, ब्राउज़र ऐक्शन और पेज ऐक्शन एपीआई में कुछ बदलाव करता है. साथ ही, कुछ पुराने एपीआई को नए एपीआई से बदल देता है.

ब्राउज़र की कार्रवाइयों में बदलाव

ब्राउज़र ऐक्शन एपीआई, नाम में कुछ बदलाव करता है:

  • browser_actions और chrome.browserActions प्रॉपर्टी को उनके एकवचन browser_action और chrome.browserAction से बदल दिया गया है.

  • पुरानी browser_actions प्रॉपर्टी में, icons, name, और popup प्रॉपर्टी थीं. इन्हें इससे बदल दिया गया है:

  • ब्राउज़र ऐक्शन बैज आइकॉन के लिए default_icon

  • बैज पर कर्सर घुमाने पर, टूलटिप में टेक्स्ट के लिए default_name

  • default_popup एचटीएमएल पेज के लिए, जो ब्राउज़र ऐक्शन का यूज़र इंटरफ़ेस (यूआई) दिखाता है (और यह अब एक स्ट्रिंग होनी चाहिए, यह कोई ऑब्जेक्ट नहीं हो सकता)

पेज की कार्रवाइयों में बदलाव

ब्राउज़र ऐक्शन में किए गए बदलावों की तरह, पेज ऐक्शन एपीआई में भी बदलाव हुआ है:

  • page_actions और chrome.pageActions प्रॉपर्टी को page_action और chrome.pageAction से बदल दिया गया है.

  • पुरानी page_actions प्रॉपर्टी में, icons, name, और popup प्रॉपर्टी थीं. इन्हें इनसे बदल दिया गया है:

  • पेज कार्रवाई बैज आइकॉन के लिए default_icon

  • बैज पर कर्सर घुमाने पर, टूलटिप में टेक्स्ट के लिए default_name

  • default_popup का इस्तेमाल करें, जो पेज ऐक्शन का यूज़र इंटरफ़ेस (यूआई) दिखाता है. यह अब एक स्ट्रिंग होनी चाहिए. यह कोई ऑब्जेक्ट नहीं हो सकता

हटाए गए और बदले गए एपीआई

कुछ एक्सटेंशन एपीआई को हटा दिया गया है और उन्हें नए वर्शन से बदल दिया गया है:

  • background_page प्रॉपर्टी को बैकग्राउंड से बदल दिया गया है.
  • chrome.self प्रॉपर्टी हटा दी गई है, chrome.extension का इस्तेमाल करें.
  • Port.tab प्रॉपर्टी को Port.sender से बदल दिया गया है.
  • chrome.extension.getTabContentses() और chrome.extension.getExtensionTabs() एपीआई को chrome.extension.getViews( { "type" : "tab" } ) से बदल दिया गया है.

सुरक्षा से जुड़े बदलावों की खास जानकारी

मेनिफ़ेस्ट वर्शन 1 से वर्शन 2 पर जाने के साथ-साथ सुरक्षा से जुड़े कई बदलाव भी किए गए हैं. इनमें से कई बदलाव Chrome के कॉन्टेंट की सुरक्षा नीति को अपनाने की वजह से आते हैं. इस नीति के असर को समझने के लिए, आपको इसके बारे में ज़्यादा पढ़ना चाहिए.

इनलाइन स्क्रिप्ट और इवेंट हैंडलर की अनुमति नहीं है

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

<html>
<head>
  <script>
    function myFunc() { ... }
  </script>
</head>
</html>

इस कोड से रनटाइम के दौरान गड़बड़ी होगी. इसे ठीक करने के लिए, <script> टैग के कॉन्टेंट को बाहरी फ़ाइलों में ले जाएं और src='path_to_file.js' एट्रिब्यूट की मदद से उसका रेफ़रंस दें.

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

<body onload="initialize()">
<button onclick="handleClick()" id="button1">

ये Manifest V2 एक्सटेंशन में काम नहीं करेंगे. इनलाइन इवेंट हैंडलर हटाएं और उन्हें अपनी बाहरी JS फ़ाइल में रखें. इसके बाद, उनके लिए इवेंट हैंडलर रजिस्टर करने के लिए addEventListener() का इस्तेमाल करें. उदाहरण के लिए, अपने JS कोड में, इनका इस्तेमाल करें:

window.addEventListener("load", initialize);
...
document.getElementById("button1").addEventListener("click",handleClick);

यह आपके एक्सटेंशन के व्यवहार को उसके यूज़र इंटरफ़ेस मार्कअप से अलग करने का ज़्यादा साफ़ तरीका है.

कॉन्टेंट एम्बेड करना

कुछ मामलों में, आपका एक्सटेंशन ऐसे कॉन्टेंट को एम्बेड कर सकता है जिसे बाहरी सोर्स या बाहरी सोर्स से इस्तेमाल किया जा सकता है.

वेब पेजों में एक्सटेंशन का कॉन्टेंट: अगर आपका एक्सटेंशन ऐसे रिसॉर्स (जैसे कि इमेज, स्क्रिप्ट, सीएसएस स्टाइल वगैरह) को एम्बेड करता है जिनका इस्तेमाल वेब पेजों में इंजेक्ट की गई कॉन्टेंट स्क्रिप्ट में किया जाता है, तो आपको इन संसाधनों को अनुमति वाली सूची में शामिल करने के लिए web_accessible_resources प्रॉपर्टी का इस्तेमाल करना होगा, ताकि बाहरी वेब पेज उनका इस्तेमाल कर सकें:

{
...
  "web_accessible_resources": [
    "images/image1.png",
    "script/myscript.js"
  ],
...
}

बाहरी कॉन्टेंट एम्बेड करना: कॉन्टेंट की सुरक्षा नीति में आपके पैकेज से सिर्फ़ लोकल स्क्रिप्ट और ऑब्जेक्ट को लोड करने की अनुमति मिलती है. इससे बाहरी हमलावर आपके एक्सटेंशन में अनजान कोड नहीं दिखा सकते. हालांकि, कुछ समय में ही आपको बाहरी दिखाए गए रिसॉर्स, जैसे कि jQuery या Google Analytics कोड को लोड करना होगा. ऐसा करने के दो तरीके हैं:

  1. अपने डिवाइस से काम की लाइब्रेरी (जैसे jQuery) डाउनलोड करें और उसे अपने एक्सटेंशन के साथ पैकेज करें.

  2. अपने मेनिफ़ेस्ट के "content_security_policy" सेक्शन में एचटीटीपीएस ऑरिजिन को अनुमति देकर, सीएसपी में सीमित तरीके से राहत दी जा सकती है. Google Analytics जैसी लाइब्रेरी को शामिल करने के लिए, आपको यह तरीका अपनाना होगा:

    {
  ...,
  "content_security_policy": "script-src 'self'
  https://ssl.google-analytics.com; object-src 'self'",
  ...
}

डाइनैमिक स्क्रिप्ट जांच का इस्तेमाल करना

नई मेनिफ़ेस्ट v2 स्कीम के एक्सटेंशन में शायद सबसे बड़ा बदलाव यह है कि एक्सटेंशन, अब eval() या नए Function() जैसी डाइनैमिक स्क्रिप्ट स्क्रिप्ट आकलन तकनीक का इस्तेमाल नहीं कर सकते. इसके अलावा, JS कोड की स्ट्रिंग को उन फ़ंक्शन में पास नहीं कर सकते जिनसे setTimeout() जैसे eval() का इस्तेमाल होता है. इसके अलावा, आम तौर पर इस्तेमाल की जाने वाली कुछ JavaScript लाइब्रेरी, जैसे कि Google Maps और टेंप्लेट की कुछ लाइब्रेरी, इनमें से कुछ तकनीकों का इस्तेमाल करती हैं.

Chrome, पेजों को अपने ऑरिजिन से चलाने के लिए सैंडबॉक्स उपलब्ध कराता है. हालांकि, उन पेजों के लिए Chrome को ऐक्सेस नहीं किया जा सकता.* API. कॉन्टेंट की नई सुरक्षा नीति के तहत, eval() और इसी तरह की दूसरी सुविधाओं का इस्तेमाल करने के लिए:

  1. अपनी मेनिफ़ेस्ट फ़ाइल में सैंडबॉक्स एंट्री बनाएं.
  2. सैंडबॉक्स एंट्री में, उन पेजों की सूची बनाएं जिन्हें सैंडबॉक्स में चलाना है.
  3. सैंडबॉक्स किए गए पेज से संपर्क करने के लिए postMessage() से पास होने वाले मैसेज का इस्तेमाल करें.

ऐसा करने के तरीके के बारे में ज़्यादा जानकारी के लिए, Sandboxing Eval का दस्तावेज़ देखें.

इसके बारे में और पढ़ें

मेनिफ़ेस्ट वर्शन 2 में किए गए बदलाव, डेवलपर को ज़्यादा सुरक्षित और अच्छे तरीके से डिज़ाइन किए गए एक्सटेंशन और ऐप्लिकेशन बनाने में मदद करने के लिए डिज़ाइन किए गए हैं. मेनिफ़ेस्ट वर्शन 1 से वर्शन 2 में हुए बदलावों की पूरी सूची देखने के लिए, मेनिफ़ेस्ट फ़ाइल का दस्तावेज़ देखें. असुरक्षित कोड को आइसोलेट करने के लिए सैंडबॉक्सिंग का इस्तेमाल करने के बारे में ज़्यादा जानकारी के लिए, सैंडबॉक्सिंग eval लेख पढ़ें. कॉन्टेंट की सुरक्षा के बारे में ज़्यादा जानने के लिए, हमारे एक्सटेंशन से जुड़े ट्यूटोरियल पर जाएं. साथ ही, HTML5Rocks के बारे में अच्छी जानकारी दी गई है.