कस्टम स्क्रिप्ट के लिए एक क्रॉस-ब्राउज़र शेल बनाना

नमस्ते प्रिय हरजितेली। Habré पर उपयोगकर्ता स्क्रिप्ट (उपयोगकर्ता स्क्रिप्ट) के बारे में बहुत सारे पोस्ट थे, हालांकि, उन्होंने केवल यह दिखाया कि उनका उपयोग कैसे किया जाए। और उपयोगकर्ता स्क्रिप्ट के काम में बहुत सारे क्रॉस-ब्राउज़र असंगतताएं हैं (साथ ही ब्राउज़र जेएस के किसी भी क्षेत्र में)। स्वाभाविक रूप से, आप विभिन्न ब्राउज़रों के लिए विभिन्न ऐड-ऑन स्थापित कर सकते हैं, हालांकि, अंतिम उपयोगकर्ता के लिए एक स्क्रिप्ट लिखने के मामले में, आपको इसके सामान्य संचालन को सुनिश्चित करने के लिए घटकों को स्थापित करने पर एक बड़ी रीडमी के साथ करना होगा। वह, व्यक्तिगत रूप से, मैं, और आप, मेरा मानना ​​है, यह भी आपको बहुत पसंद नहीं है।

यह लेख तीन ब्राउज़रों पर चर्चा करेगा: मोज़िला फ़ायरफ़ॉक्स (GreaseMonkey स्थापित के साथ), Google क्रोम, ओपेरा। लेख का उद्देश्य एक "प्रीफ़ैब" है, जो उपयोगकर्ता स्क्रिप्ट को सभी सूचीबद्ध ब्राउज़रों में उसी तरह से काम करने की अनुमति देगा। जीएम एपीआई के कार्यान्वयन पर विचार नहीं किया जाएगा। वहाँ पहले से ही उनमें से सैकड़ों हैं। यह माना जाता है कि उपयोगकर्ता स्क्रिप्ट लिखने के लिए पाठक पहले से ही सामान्य नियमों से परिचित है (यदि नहीं, तो मेरा सुझाव है कि आप पहले एक और लेख पढ़ें)।


और सीधे विषय पर। आइए निर्देशों से शुरू करें। कई असंगतताएं हैं: सबसे पहले, केवल ओपेरा में शामिल समर्थन है, और केवल मैच क्रोम में समर्थित है। फ़ायरफ़ॉक्स दोनों का समर्थन करता है। तदनुसार, आपको दोनों निर्देश (अचानक) निर्दिष्ट करने की आवश्यकता है। दूसरी बात, फ़ायरफ़ॉक्स में असुरक्षित का समर्थन करने के लिए, आपको @unwrap निर्देश की आवश्यकता है। मैं यह स्पष्ट नहीं करूंगा कि असुरक्षित उपयोग करने से पहले आपको यह सोचने की ज़रूरत है कि क्या यह वास्तव में आवश्यक है। तो, हमारे वर्कपीस का प्रारंभिक भाग कुछ इस तरह दिखता है:

// ==UserScript== // @name script_name // @author author's name // @version 1.0 // @description example // @unwrap // @run-at document-end // @include http://example.com/* // @match http://example.com/* // ==/UserScript== 

साथ ही, क्रोम में, मैच निर्देश को गिराने की क्षमता है, इसलिए शुरुआत में इस तरह एक पंक्ति को जोड़ना सार्थक है:

 if (location.hostname !== "example.com") return; 

अब बात करते हैं स्कोप की। Google Chrome में, उपयोगकर्ता स्क्रिप्ट को हमेशा एक अलग दायरे में निष्पादित किया जाता है - जबकि ओपेरा में, इसके विपरीत, उन्हें पृष्ठ के मध्य में सही तरीके से निष्पादित किया जाता है, सभी वैश्विक चर को नष्ट करने की धमकी दी जाती है। इसलिए, सुरक्षा के लिए, अतिरिक्त क्लोजर जोड़ना अच्छा होगा:

 // ==UserScript== // @name script_name // @author author's name // @version 1.0 // @description example // @unwrap // @run-at document-end // @include http://example.com/* // @match http://example.com/* // ==/UserScript== (function(){ if (location.hostname !== "example.com") return; })(); 

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

 //   unsafeWindow    -   ,    , //      window var unsafeWindow= this.unsafeWindow; //  ,    unsafeWindow,     , //    (function(){ // ..,   ,      , //  unsafeWindow  chrome,   , ,   . var test_scr= document.createElement("script"); //       var tid= ("t" + Math.random() + +(new Date())).replace(/\./g, ""); //       . test_scr.text= "window."+tid+"=true"; document.querySelector("body").appendChild(test_scr); //      unsafeWindow, //         if (typeof(unsafeWindow) == "undefined" || !unsafeWindow[tid]) { if (window[tid]) { // ..   window -    window, //    unsafeWindow= window; } else { //   -    var scr= document.createElement("script"); scr.text= "(" + (function() { var el= document.createElement('unsafeWindow'); el.style.display= 'none'; el.onclick=function(){return window}; document.body.appendChild(el); }).toString() + ")()"; //   -   script      document.querySelector("body").appendChild(scr); this.unsafeWindow= document.querySelector("unsafeWindow").onclick(); //   ,     // onclick  unsafeWindow ,      unsafeWindow= this.unsafeWindow; }; } })(); //  

तो, अंत में, हमारा ब्लैंक ऐसा दिखेगा:

 // ==UserScript== // @name script_name // @author author's name // @version 1.0 // @description example // @unwrap // @run-at document-end // @include http://example.com/* // @match http://example.com/* // ==/UserScript== (function(){ if (location.hostname !== "example.com") return; var unsafeWindow= this.unsafeWindow; (function(){ var test_scr= document.createElement("script"); var tid= ("t" + Math.random() + +(new Date())).replace(/\./g, ""); test_scr.text= "window."+tid+"=true"; document.querySelector("body").appendChild(test_scr); if (typeof(unsafeWindow) == "undefined" || !unsafeWindow[tid]) { if (window[tid]) { unsafeWindow= window; } else { var scr= document.createElement("script"); scr.text= "(" + (function() { var el= document.createElement('unsafeWindow'); el.style.display= 'none'; el.onclick=function(){return window}; document.body.appendChild(el); }).toString() + ")()"; document.querySelector("body").appendChild(scr); this.unsafeWindow= document.querySelector("unsafeWindow").onclick(); unsafeWindow= window.unsafeWindow; }; } })(); //  ,    })(); 

बस इतना ही। आशा है कि यह लेख किसी की मदद करता है।

पीएस ओह हां। फ़ायरफ़ॉक्स में उपयोगकर्ता स्क्रिप्ट को डीबग करने के लिए, आप अपने स्क्रिप्ट कोड को एक कोशिश में लपेट सकते हैं ... इस प्रकार का निर्माण करें:
कोशिश करो {
// स्क्रिप्ट कोड
} पकड़ (ई) {कंसोल.रोर (ई)}
जीवन को बहुत सुगम बनाता है।

UPD: लेख के इतने अच्छे जोड़ के लिए बहुत बहुत धन्यवाद। बल्कि, उन्होंने जो लिखा उसके अलावा लेख भी ...

UPD2: इसमें शामिल निर्देश स्क्रिप्ट को अनावश्यक साइटों पर क्रोम में काम नहीं करने देगा, हालांकि, स्क्रिप्ट को स्थापित करते समय, यदि आप मैच निर्देश को निर्दिष्ट नहीं करते हैं, तो यह कहा जाएगा कि स्क्रिप्ट सभी पृष्ठों पर काम करती है। इसलिए, मैच निर्देश को निर्दिष्ट करना बेहतर है।