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

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

इस दस्तावेज़ में, 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() का इस्तेमाल कर रही है या डाइनैमिक तौर पर आकलन की जाने वाली JS कोड की स्ट्रिंग को पास कर रही है?

  • अगर 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 प्रॉपर्टी को background से बदल दिया गया है.
  • 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">

ये मेनिफ़ेस्ट 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 का ऐक्सेस नहीं दिया जाता.* एपीआई. कॉन्टेंट की सुरक्षा से जुड़ी नई नीति के तहत, eval() और इस तरह के अन्य एट्रिब्यूट का इस्तेमाल करने के लिए:

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

ऐसा करने के तरीके के बारे में ज़्यादा जानने के लिए, सैंडबॉक्सिंग की सुविधा का आकलन करने के बारे में दस्तावेज़ देखें.

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

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