👨🏻‍🌾 ☯️ 🍛 आप इसे नहीं ले सकते हैं और पृष्ठभूमि पृष्ठ पर जा सकते हैं 🧙🏾 💩 👩‍❤️‍👨

यह सभी क्रॉस-डोमेन सुरक्षा नीति के बारे में है। अन्य टैब के पृष्ठों तक या एक्सटेंशन के बैकग्राउंड पेज पर पहुंच जानबूझकर सीमित है, क्योंकि उन्हें अन्य डोमेन के पेज माना जाता है, अन्य लोगों की खिड़कियों और फ्रेम के समान स्क्रिप्टिंग वातावरण तक सीधे पहुंच पर प्रतिबंध है। संदेश तंत्र फ्रेम के बीच क्रॉस-डोमेन एक्सेस के साथ-साथ एक्सटेंशन पेज (पृष्ठभूमि, सेटिंग्स, पॉपअप, ...) तक पहुंच के साथ "बचाता है"।

ब्राउज़र एक्सटेंशन में, Google Chrome (और क्रोमियम) फ़ंक्शन - पृष्ठभूमि पृष्ठ पर सबसे महत्वपूर्ण है। इसमें प्रपत्र क्रोम-एक्सटेंशन का एक विशेष URL है: // ciegcibjokpkcklhgbpnmnikpkmkhbjk /, जहां लॉन्ग डोमेन नाम ब्राउज़र के आंत्र में बनाया गया एक यादृच्छिक नाम है, जो ओएस सेवा फ़ोल्डर में कहीं न कहीं विस्तार निर्देशिका को भी संदर्भित करता है। सामग्री स्क्रिप्ट (ब्राउज़र पृष्ठ पर निष्पादित उपयोगकर्ता स्क्रिप्ट के समान) से, आप फ़ाइलों और एक्सटेंशन छवियों तक पहुंच सकते हैं। लेकिन कई कार्यों को निष्पादित करना असंभव है, जो पथ पृष्ठभूमि पृष्ठ के माध्यम से है: वास्तविक डोमेन नामों के समूह से संबंधित भंडारण की व्यवस्था करना; पूरे एक्सटेंशन में स्टोर की गई एक्सटेंशन सेटिंग सामान्य है। आपको बस बैकग्राउंड पेज ~~पर Mordor~~ जाना होगा। हालाँकि, आप इसे केवल URL से नहीं कर सकते।

यह विवरण क्रोम के लिए प्रलेखन के पन्नों पर नहीं है। बल्कि, यह मौजूद है, लेकिन "कुछ अन्य" विधियों और वस्तुओं के लिए, जिसका वास्तव में कोई मतलब नहीं है, जब तक कि इसे ठीक नहीं किया गया है। StackOverflow की प्रतिक्रियाओं में कई संदेश द्वारा वर्णित संदेश वस्तुओं के व्यवहार की पुष्टि की जाती है। प्रत्येक बार असमान उदाहरणों के साथ उत्तरों की खोज करना थका देने वाला होता है, इसलिए इस झंझट को समाप्त करने के लिए, उन्हें यहां एक जगह इकट्ठा किया जाए। प्रत्यक्ष और कॉलबैक के सभी 4 संयोजनों की गणना की गई है, ताकि उनकी आंखों के सामने हमेशा उनके काम करने वाले टेम्पलेट हों।

जांच और प्रदर्शित करने के लिए, आपको क्रोम में डेवलपर मोड में एक परीक्षण एक्सटेंशन बनाने और 3 फ़ाइलों (मैनिफ़ेस्ट.जॉसन, स्क्रिप्ट.जेएस, बैकग्राउंड.जेएस) को बनाने या बनाने की आवश्यकता है, और 2 पृष्ठों से कंसोल में संदेशों को देखें - इसमें स्क्रिप्ट के साथ ब्राउज़र विंडो। js और पृष्ठभूमि (पृष्ठभूमि देखें। Js पृष्ठभूमि कंसोल - लिंक पर क्लिक करके "चेक मोड देखें: _generated_background_page.html" क्रोम में: // एक्सटेंशन /)। यदि कुछ लेख तैयार किए गए हैं, तो यह लेख के कोड के 2 खंडों को पृष्ठों में व्यवस्थित और निष्पादित किए जाने पर तैयार होगा।

Habré पर, इसी तरह की समस्या habrahabr.ru/post/159145 , नवंबर 2012 में लागू उद्देश्यों के लिए हल की गई थी - ज्ञान के समान स्रोत जिन्हें उन्होंने शांति से सुधारा और उपयोग किया। रूसी में इंटरनेट पर, जून 2012 के एक लेख में इसी तरह की समस्या का वर्णन किया गया था। यहां तंत्र का वर्णन है जो इस तरह की समस्याओं को हल करने के लिए उपयोग किया जाता है, इस तथ्य को ध्यान में रखते हुए कि यह Google क्रोम ब्राउज़र की एक्सटेंशन स्क्रिप्ट में किया जाता है।

यदि हम एक ही डोमेन की खिड़कियों और फ़्रेमों में सीधे (जैसे किसी अन्य स्क्रिप्टिंग वातावरण की विंडो में) पृष्ठों तक पहुँच प्राप्त करते हैं, तो पृष्ठभूमि पृष्ठ, साथ ही अन्य टैब और ब्राउज़र पृष्ठ, अन्य डोमेन के पृष्ठों के रूप में कार्य करते हैं। हम उन्हें संदेश भेज सकते हैं, कमजोर रूप से जुड़ी प्रक्रियाओं के पैटर्न को साकार कर सकते हैं, और हम केवल उन पर क्रमांकन में सक्षम वस्तुओं को प्रसारित कर सकते हैं - कोई डोम, वातावरण या अन्य जटिल वस्तुएं नहीं।

पृष्ठभूमि पृष्ठ के लिए प्रयास करने के लिए कुछ है। यह ऐसे कार्य करता है जो किसी स्क्रिप्ट या उपयोगकर्ता स्क्रिप्ट में समझ से बाहर हैं। सभी पृष्ठों के लिए केवल आम स्मृति नहीं है। डेवलपर. chrome.com/extensions/api_index.html पर वर्णित कई इंटरफेस का कार्यान्वयन है, और भविष्य में और अधिक होने की उम्मीद है। मेज़र संदेश इंटरफ़ेस में, कॉलबैक फ़ंक्शंस होते हैं, जो दिए जाने पर, कॉलिंग फ़ंक्शन में, उनके पर्यावरण के पक्ष में निष्पादित होते हैं, लेकिन परिणाम पैरामीटर के साथ दूसरी तरफ से पारित किया जाता है।

यह सब जावास्क्रिप्ट पोस्टमासेज वातावरण का थोड़ा संशोधित इंटरफ़ेस है, जो क्रॉस-डोमेन एक्सेस समस्याओं को हल करने के लिए ब्राउज़रों में बहुत पहले नहीं बनाया गया है। इसका उपयोग आमतौर पर खिड़कियों और फ़्रेमों के बीच लिपियों को संप्रेषित करने के लिए किया जाता है और यदि पृष्ठों के डोमेन अलग-अलग हों तो यह संचार का एकमात्र सुविधाजनक साधन बना हुआ है। पहले, इस समस्या को हल करने के लिए, उपयोग किए गए ऑब्जेक्ट के कीवर्ड के अनुसार, एक "बैसाखी" का उपयोग कोड नाम "window.name" के तहत किया गया था। यह अब काम करता है, लेकिन यह प्रतिस्थापन पोस्टमैसेज पद्धति की तुलना में जटिल और स्पष्ट रूप से धीमा है। याद रखें कि नियमित पोस्टमैसेज तंत्र कैसे काम करता है, क्योंकि यह क्रोम एक्सटेंशन में डेटा विनिमय के तंत्र पर आधारित है।

पोस्टमासेज इंटरफ़ेस (क्रॉस-ब्राउज़र, IE8 +)

संदेश का आरंभ करने वाला पृष्ठ एक कस्टम ईवेंट "संदेश" बनाता है - यह संदेश भेजता है, और यह अपने डोमेन से ऐसा नहीं करता है, लेकिन जिस तक यह पहुंचना चाहता है। (IE8 में एक सीमा है - फ्रेम के केवल मूल विंडो तक पहुंचना)।

otherWindow.postMessage(message, targetOrigin); //message -    __  //targetOrigin -     otherWindow,  " "

यदि डोमेन नाम का अनुमान लगाया जाता है, तो एक संदेश भेजा जाएगा। अन्य विंडो में इसे प्राप्त करने के लिए, कुछ शर्तों को पूरा करना होगा:
1) एक ईवेंट हैंडलर है;
2) हैंडलर संदेश भेजने के लिए "प्रतीक्षा करता है" बिल्कुल डोमेन से भेज रहा है और दूसरे तर्क के माध्यम से इसकी जांच करता है।

 window.addEventListener('message', function(event){ //  if(event.origin !== 'URL_-') // , , 'http://example.org' return; ...// event.data,  message  .postMessage ...// event.source - -  ,  //       }, false);

खिड़की से पृष्ठभूमि पृष्ठ पर एक संदेश भेजना (क्रोम)

एक्सटेंशन में, कॉलबैक और ऑटोमेटिंग डोमेन चेक को जोड़कर पोस्टमेज़ेज फ्रेमवर्क को थोड़ा नया रूप दिया गया है। यदि आप ईंटों से संदेश एकत्र करते हैं तो यह अधिक सुविधाजनक हो गया है। बहुत अंत में, यहां मानक पोस्टमेज़ेज के लिए कोड है, उपलब्ध टूल का उपयोग करके यह दिखाने के लिए कि निम्नलिखित sendMessage या sendRequest में कोई जादू नहीं है - यह सिर्फ एक शेल है। लेकिन पोस्टमासेज को विशेष प्रोटोकॉल "क्रोम-एक्सटेंशन: // *" के साथ एक फ्रेम बनाने के लिए अपर्याप्त विस्तार अधिकारों के कारण पूरा नहीं किया जा सका, जिसके बारे में प्रकट फ़ाइल प्रारूप भी कुछ नहीं जानता है ~~, और मामला नौकरशाही देरी में डूब गया था~~ । यह इस सवाल का जवाब है कि उन्हें अपने विनिमय कार्यों के साथ क्यों आना पड़ा।

उपरोक्त उदाहरणों को क्रोम एक्सटेंशन इंस्टॉलेशन पेज : spmbt.kodingen.com/bgMessageXmp/index.htm से उनके व्यवहार को देखा, परखा और जांचा जा सकता है। यदि एक्सटेंशन स्थापित नहीं है, तो 5 लिंक पर क्लिक करने से एक्सटेंशन की अनुपस्थिति का संकेत मिलता है। स्थापना के बाद (विस्तार में - केवल 3 आवश्यक फाइलें), नीचे दिए गए उदाहरणों पर क्लिक करना शुरू कर देता है।

कैसे स्थापित करें : 1) संग्रह डाउनलोड करें, 2) क्रोम पर अनज़िप (या इसे तुरंत इंस्टॉल करें), 3) क्रोम: // एक्सटेंशन / "डेवलपर मोड" पर जाएं, 4) "अनपैक्ड एक्सटेंशन डाउनलोड करें ..." निष्पादित करें, संग्रह से निर्देशिका का चयन करते हुए, 5) उस पृष्ठ को ताज़ा करें जिसमें से एक्सटेंशन डाउनलोड किया गया था। 5 लिंक उदाहरण चलाने के लिए तैयार हैं। निष्पादन के बाद, यह क्रोम: // एक्सटेंशन / का उपयोग करके स्क्रिप्ट को हटाने के लिए पर्याप्त है। इस नमूना स्क्रिप्ट का उपयोग परीक्षण या लेखन एक्सटेंशन के लिए एक रूपरेखा के रूप में किया जा सकता है। इस लेख के लिए, उन्होंने टेक्स्ट से डिबग स्क्रिप्ट और उनसे टाइपोस को खत्म करने में मदद की।

उदाहरण 1
अगर आपको टैब से बैकग्राउंड पेज पर भेजने की जरूरत है और अंत में, एक सरल संदेश प्रारूप का उपयोग किया जाता है:

  chrome.extension.sendMessage('   ');

एक संदेश पृष्ठभूमि या किसी अन्य पृष्ठ में स्वीकार किया जाता है:

 chrome.extension.onMessage.addListener(function(request){ if(request=='   ') //,        console.log('1. : ', request); });

उदाहरण 2
इस जोड़ी के कार्यों को प्रतिक्रिया के आदान-प्रदान के लिए अनुकूलित किया गया है। स्क्रिप्ट से पैरामीटर जोड़ें:

 chrome.extension.sendMessage(' backMsg', function(backMessage){ console.log('2.    :', backMessage); });

पृष्ठभूमि पृष्ठ से:

 chrome.extension.onMessage.addListener(function(request, sender, f_callback){ if(request==' backMsg'){ //,        console.log('2.   : ', request); f_callback('backMsg'); //  } });

f_callback - स्क्रिप्ट में निष्पादित (पृष्ठभूमि पृष्ठ में नहीं), लेकिन पृष्ठभूमि में निर्दिष्ट पैरामीटर के साथ।
प्रेषक ऑब्जेक्ट का रूप है:

 { active: true highlighted: true id: 34 //id  ()  incognito: false index: 0 pinned: false selected: true status: "complete" title: "HabrAjax by spmbt" //document.title url: "http://spmbt.kodingen.com/habrahabr/habrAjax/index.htm" //location.href windowId: 1 //id   }

इस प्रकार, संदेश भेजने वाले के बारे में उससे कुछ जाना जाता है। अब हम प्रेषक से मूल्यों का उपयोग नहीं करेंगे, लेकिन यह संभव है कि जिस टैब या विंडो से संदेश आया है, उसे ट्रैक करना संभव है, अन्य सामग्री स्क्रिप्ट में परिवर्तन भेजें, यदि वे अन्य टैब में हैं।
(उदाहरण 2 का अंत)

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

एक तर्क को हैश के साथ बदलने की तकनीक के साथ, 3 तर्क सब कुछ के लिए पर्याप्त हैं, और उनमें से प्रत्येक अपनी भूमिका को पूरा करता है। आगे जाकर, उन्हें 1 तर्क से बदला जा सकता है, चाबियाँ {अनुरोध: ..., प्रेषक: ..., कॉलबैक: f () {...}}; तुमने क्यों नहीं किया? जाहिरा तौर पर, उन्होंने माना कि 3 तर्क - यह एक ऐसी सज्जनता की सीमा है, जिसे याद रखने (और आगे की व्याख्या करने के लिए) की पेशकश करने के लिए शर्मनाक नहीं है। इसके अलावा, प्रतीकों को स्व-प्रलेखन पर खर्च किया जाता है। जब तर्क 2-3 होते हैं, तो विकल्प स्थितिगत तर्कों की ओर झुक जाता है।

उदाहरण के लिए, आपको न केवल कमांड का नाम, बल्कि डेटा के साथ एक हैश भी भेजना होगा। हम स्क्रिप्ट से लिखते हैं:

 var data ='From page '; chrome.extension.sendMessage({cmd:'exec1', h:{data1: data, dataX: d+1}, function(backMessage) console.log(backMessage); }});

पृष्ठभूमि पृष्ठ से:

 chrome.extension.onMessage.addListener(function(request, sender, callback){ if(request.cmd =='exec1'){ callback('backMsg'); //  console.log('Tis message in background page printed after' +' receive of data1 = ', request.h.data1, '; URL= ',sender.url); });

सामग्री पृष्ठों से बार-बार कॉल को छोटा करें:

 var inBg = function(cmd, h, f_back){ h.cmd = cmd; chrome.extension.sendMessage(h, f_back); }); ... inBg('exec1', {data1: data, dataX: d+1}, function(){ ... });

( किसी कारण से, तीसरा कॉलबैक प्रदान नहीं किया गया है ... प्रबंधन केवल 2 बार फिर से तैयार किया गया है।)

पृष्ठभूमि पृष्ठ से विंडो पर एक संदेश भेजना (क्रोम)

उदाहरण 3
यदि कोई उलटा कार्य है , तो पृष्ठभूमि पृष्ठ से एक संदेश भेजें, कहें, सक्रिय टैब:
पृष्ठभूमि में हम लिखते हैं:

 chrome.tabs.getSelected(null, function(tab){ //   ,     chrome.tabs.sendRequest(tab.id,{msg:"msg01"}); //   });

सामग्री में:

 chrome.extension.onRequest.addListener(function(req){ //   background console.log('3.   :', req.msg); //   });

क्या यह महत्वपूर्ण है कि पहले मामले में हमने sendMessage-onMessage जोड़ी का उपयोग किया, और दूसरे में - sendRequest-onRequest ? नहीं, कोई भी विधि काम करती है, यदि यह केवल एक जोड़ी से हो।

उदाहरण 4
यदि आपको रिवर्स कॉलबैक के साथ एक संदेश भेजने की आवश्यकता है, तो पृष्ठभूमि में हम लिखते हैं:

 var inBack = function(tabId, cmd, h, f_back){ h.cmd = cmd; chrome.tabs.sendMessage(tabId, h, f_back); }; chrome.tabs.getSelected(null, function(tab){ inBack(tab.id,'exec0', {dat:'h'}, function(backMessage){ console.log('4.    : ', backMessage); }); });

सामग्री पृष्ठ पर:

 chrome.extension.onMessage.addListener(function(request, sender, callback){ if(request.cmd =='exec0'){ // console.log('4.  :', request.dat); callback('12w3'); } });

इसे निष्पादित किया जाता है, जैसा कि आप देख सकते हैं - वह सब कुछ जो प्रलेखन में वर्णित किया गया था, लेकिन थोड़ी भिन्न वस्तु (chrome.runtime) के लिए, developer.chrome.com/extensions/messaging.html पर, और chrome.runtime इस कार्य में काम नहीं करता है - एक विधि नहीं है SendMessage।

मानक डाक प्रसारण पर ट्रांसमिशन (विफल)

नकारात्मक परिणाम के बावजूद, यह स्थानांतरण प्रयास आपको इस बारे में अनुमान लगाएगा कि पोस्टमासेज की उपस्थिति के बावजूद डेवलपर्स को अपने स्वयं के डेटा स्थानांतरण कार्यों से क्यों निपटना पड़ा।

सामग्री स्क्रिप्ट में निष्पादन योग्य कुछ विशेष एक्सटेंशन विधियों में से एक chrome.extension.getURL ('पाथ') है । यह संसाधनों के विस्तार का मार्ग लौटाता है। इसे खोलने से, हमें एक्सटेंशन संसाधन मिलते हैं (लेकिन निर्देशिकाओं के लिए नहीं) - इससे चित्र और ग्रंथ। एक अलग डोमेन यहां एक भूमिका निभाएगा: पृष्ठ स्क्रिप्ट से घिरे ग्रंथों को प्राप्त करने के लिए, आपको क्रॉस-डोमेन अजाक्स करने की आवश्यकता है। या इसे करना आसान है - संदेश तंत्र का उपयोग करके डोमेन दीवार के माध्यम से ग्रंथों को प्राप्त करना।

उदाहरण 5
आइए एक डोमेन के साथ परिभाषित प्रोटोकॉल ("क्रोम-एक्सटेंशन:") का उपयोग करके संदेश को स्थानांतरित करें (कुछ इस तरह "// ciegcibjokpkcklhgbpnmnikpkmkhbjk")।

 var bgUrl = chrome.extension.getURL(''); console.log(bgUrl); //

लेकिन सब कुछ सरल नहीं है। सामग्री स्क्रिप्ट की पृष्ठभूमि पृष्ठ विंडो तक पहुंच नहीं है। विधि है:

 chrome.extension.getBackgroundPage();

लेकिन कोई पहुंच नहीं है:
अनकवर्ड एरर: "getBackgroundPage" का उपयोग केवल एक्सटेंशन प्रक्रियाओं में किया जा सकता है। अधिक विवरण के लिए सामग्री स्क्रिप्ट दस्तावेज़ देखें।
कमांडो हतोत्साहित नहीं है। एक साधारण विनिमय के लिए, आपको एक फ्रेम बनाने की आवश्यकता है। कुछ भी आपको एक फ्रेम बनाने से रोकता है।

 var ifr = document.createElement('iframe'); ifr.id ='ifr1'; ifr.src = bgUrl; document.body.appendChild(ifr);

एक त्रुटि हुई:
क्रोम-एक्सटेंशन का अस्वीकृत भार : // ciegcibjokpkcklhgbpnmnikpkmkhbbk / । एक्सटेंशन के बाहर पृष्ठों द्वारा लोड किए जाने के लिए संसाधन web_accessible_resources मेनिफ़ेस्ट में सूचीबद्ध होने चाहिए।
प्रकट करने के लिए अनुमति जोड़ें (और chrome.extension.sendMessage के साथ यह आवश्यक नहीं था)।
"अनुमतियाँ": ["क्रोम-एक्सटेंशन: // *", ...]
क्रोम पर एक त्रुटि हुई: // एक्सटेंशन /:
एक्सटेंशन स्थापित करते समय, चेतावनी दी गई थी:
अनुमति 'क्रोम-एक्सटेंशन: //' अज्ञात है या URL पैटर्न विकृत है।
यदि पहुंच से वंचित नहीं किया गया था, तो यह निष्पादित करना रहेगा

 ifr.postMessage('Yep', bgUrl.replace(/\/$/,'') );

और पृष्ठभूमि में -

 window.addEventListener('message', function(ev){ console.log('origin: ', ev.origin); },!1);

हम इस के साथ उदाहरण को समाप्त कर सकते हैं - यह दिखाया गया है कि मानक फ़ंक्शन के माध्यम से पहुंच को अन्य कारणों से बंद कर दिया गया था - फ्रेम में पृष्ठभूमि पृष्ठों को देखने की आवश्यकता के कारण, जो, जाहिरा तौर पर, सुरक्षा के लिए अस्वीकार्य था ("मेनिफ़ेस्ट_वर्सन": 2) में। इसलिए, क्रोम एक्सटेंशन में, लेकिन सिंटैक्स ऑप्टिमाइज़ेशन और द्विदिश एक्सचेंज के कारणों के लिए, विशेष मैसेजिंग विधियों का आविष्कार किया गया था।

एक उदाहरण से पता चला कि पृष्ठभूमि पृष्ठ पर संदेश भेजने के लिए कोई विशेष तरकीबें नहीं हैं। लेकिन हमें विशेष अनुमति की आवश्यकता है, जो हमारे पास एक्सटेंशन के लिए नहीं है। Chrome.extension ऑब्जेक्ट के तरीकों का निजी हिस्सा शांति से ऐसा करता है, लेकिन दूसरों को नहीं देता है। (हमें अभी भी sandbox.html के माध्यम से ऐसा करने की कोशिश करने की आवश्यकता है - क्या यह आपको इसमें पृष्ठभूमि पृष्ठ के साथ एक फ्रेम बनाने की अनुमति देगा।)

एक परीक्षण एक्सटेंशन और एक परीक्षण पृष्ठ स्थापित करने के लिए।

आप इसे नहीं ले सकते हैं और पृष्ठभूमि पृष्ठ पर जा सकते हैं

पोस्टमासेज इंटरफ़ेस (क्रॉस-ब्राउज़र, IE8 +)

खिड़की से पृष्ठभूमि पृष्ठ पर एक संदेश भेजना (क्रोम)

पृष्ठभूमि पृष्ठ से विंडो पर एक संदेश भेजना (क्रोम)

मानक डाक प्रसारण पर ट्रांसमिशन (विफल)

More articles: