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

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

यह दस्तावेज़ आपके 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 प्रॉपर्टी को तय करें और रिसॉर्स की सूची बनाएं (और वैकल्पिक रूप से उन संसाधनों के लिए कॉन्टेंट की सुरक्षा के बारे में नीति अलग करें).

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

  • सैंडबॉक्स प्रॉपर्टी के बारे में बताएं.

  • क्या आपका कोड या लाइब्रेरी 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. एचटीटीपीएस ऑरिजिन को अनुमति वाली सूची में शामिल करके, सीएसपी को सीमित तौर पर &quot;content_security_policy&quot; मेनिफ़ेस्ट के सेक्शन में बताया जा सकता है. Google Analytics जैसी लाइब्रेरी को शामिल करने के लिए, ऐसे में:

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

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

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

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

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

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

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

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