ट्यूटोरियल: मेनिफ़ेस्ट 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() का इस्तेमाल किया गया है? इसके अलावा, क्या 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'",
  ...
}

डाइनैमिक स्क्रिप्ट का आकलन करना

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

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

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

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

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

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