Userscripts। हम क्रोम के लिए एक उपयोगकर्ता स्क्रिप्ट पैक करते हैं

शुभ दिन, प्रिय हरजिताली।

आज हम क्रॉस-ब्राउज़र उपयोगकर्ता स्क्रिप्ट लिखने के लिए पहले बताई गई तकनीक के बारे में अधिक विस्तार से बात करेंगे, अर्थात्, Google Chrome के लिए उपयोगकर्ता स्क्रिप्ट को एक साधारण एक्सटेंशन में पैक करना ।

नीचे मैं “क्यों?” और “कैसे?” सवालों के जवाब देने की कोशिश करूँगा।

प्रस्तावना

जैसा कि आपको याद है, Google क्रोम ब्राउज़र मूल रूप से स्क्रिप्ट का समर्थन करता है (बिना थर्ड-पार्टी घटकों को स्थापित करने के लिए )। स्क्रिप्टिंग समर्थन को काफी अच्छे स्तर पर लागू किया गया है, लेकिन एक BUT है : Google Chrome डेवलपर हमारी सुरक्षा की परवाह करते हैं और जो कुछ भी सीमित हो सकता है उसे सीमित करते हैं।

इन प्रतिबंधों को देखते हुए, गैर-तुच्छ लिपियों को विस्तार में लपेटना पड़ता है।

सीमाएं क्या हैं?

सबसे महत्वपूर्ण सीमाएँ:

1. स्क्रिप्ट को क्रॉस-डोमेन अनुरोध करना चाहिए
2. स्क्रिप्ट को window.frames पर एक्सेस की आवश्यकता है [i]
3. स्क्रिप्ट को लोकलस्टोरेज लिमिट्स बढ़ाने की जरूरत है
4. आदि

उपरोक्त तीन प्रतिबंधों का अनुकरण नहीं किया जा सकता है। हमें एक उपयोगकर्ता स्क्रिप्ट को पैक करना होगा।

हम आउटपुट पर क्या प्राप्त करते हैं?

कड़ाई से बोलते हुए, आउटपुट पर हमें एक एक्सटेंशन मिलता है, न कि उपयोगकर्ता स्क्रिप्ट। लेकिन यह देखते हुए कि:

• उपयोगकर्ता स्क्रिप्ट और एक्सटेंशन की स्थापना और प्रबंधन प्रक्रिया समान हैं;
• स्थापना के दौरान उपयोगकर्ता स्क्रिप्ट स्वचालित रूप से एक एक्सटेंशन में बदल जाती है ;
• रैपर एक बार बनाया जाता है, और फिर हम केवल उपयोगकर्ता स्क्रिप्ट ही विकसित करते हैं;

मैं खुद को उपयोगकर्ता स्क्रिप्ट के बारे में बात करने की अनुमति देता हूं।

पैकिंग

एक साधारण एक्सटेंशन में निम्न शामिल हैं:

1. घोषणापत्र। विवरण फ़ाइल
2. बैकग्राउंड पेज background.html
3. उपयोगकर्ता स्क्रिप्ट फ़ाइल

manifest.json

यह फ़ाइल एक्सटेंशन का वर्णन करती है: संसाधन बनाने वाले अधिकार, स्टार्टअप विधि, आदि।
जैसा कि नाम से ही स्पष्ट है, संपूर्ण विन्यास एक जसन ऑब्जेक्ट है।
आप इस फाइल के बारे में अधिक जानकारी आधिकारिक गोदी में पढ़ सकते हैं।

मैं उपयोगकर्ता स्क्रिप्ट को एक्सटेंशन में बदलने के लिए आवश्यक न्यूनतम पर विचार करूंगा:

{ "background_page" : "background.html", "content_scripts" : [ { "js":[ "my.user.js" ], "matches":[ "http://*/*" ], "run_at":"document_end" } ], "description" : "", "name" : "My Userscript", "permissions" : [ "http://*/*", "unlimitedStorage"], "version" : "1.3.0" } 

पैरामीटर	नियुक्ति	टिप्पणी
BACKGROUND_PAGE	एक पृष्ठभूमि पृष्ठ फ़ाइल को परिभाषित करता है	नियुक्ति नीचे देखें
content_scripts	सामग्री स्क्रिप्ट कनेक्शन अनुभाग	यह वह जगह है जहाँ सूचना लिखी जाती है हमारे उपयोगकर्ता स्क्रिप्ट के बारे में
js	एक सरणी जिसमें सामग्री स्क्रिप्ट फ़ाइलों का नाम होता है	नाम यहाँ इंगित किया गया है। हमारी एकमात्र लिपि
माचिस	स्क्रिप्ट चलाने के लिए url मास्क युक्त एक सरणी	सरणी के प्रत्येक तत्व से मेल खाती है सामग्री स्क्रिप्ट के सरणी के तत्व को अनुक्रमणिका द्वारा। यह पैरामीटर निर्धारित करता है कि कौन से पृष्ठ हैं इसी स्क्रिप्ट को लॉन्च किया जाएगा। हमारे मामले में, मुखौटा इंगित करता है यह स्क्रिप्ट सभी पृष्ठों पर चलती है, http पर उपलब्ध है।
run_at	सामग्री स्क्रिप्ट लॉन्च करने का क्रम	document_end का मतलब है कि स्क्रिप्ट चलेगी DOM ट्री बनाने के बाद
विवरण	विस्तार विवरण	हमारे उपयोगकर्ता स्क्रिप्ट का वर्णन करने वाला नि: शुल्क पाठ
नाम	एक्सटेंशन नाम	मुफ्त स्क्रिप्ट नाम
अनुमतियाँ	हमारे विस्तार के लिए अनुमतियाँ	आवश्यक सुरक्षा अनुमतियाँ। उदाहरण में पहला पैरामीटर - पत्राचार डोमेन अनुरोधों का मुखौटा http: // * / * । यह पृष्ठभूमि पृष्ठ को किसी भी डोमेन के लिए अनुरोध भेजने की अनुमति देता है। दूसरा पैरामीटर असीमित लोकलस्टोरेज सेट करता है।
संस्करण	एक्सटेंशन संस्करण	Xxxx संस्करण

background.html

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

सिद्धांत के साथ, अभ्यास के साथ बाहर घूमने का समय!
आइए उपयोगकर्ता स्क्रिप्ट से क्रॉस-डोमेन अनुरोधों पर अधिक विस्तार से विचार करें।

कोड background.html:

 <!DOCTYPE html> <html> <head> </head> <body> <script> /** *    . * XMLHttpRequest      CORP (Cross Origin Request Policy), * ..      . *     GET */ function get(url, callback) { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function (data) { if (xhr.readyState == 4) { if (xhr.status == 200) { callback(data.srcElement.responseText); } else { callback(null); } } } // Note that any URL fetched here must be matched by a permission in // the manifest.json file! xhr.open('GET', url, true); xhr.send(); }; /** *   chrome.extension api. *     * @param request Object   api-. * @param sender Object ,    . * @param callback Function ,      api-. * / function onRequest(request, sender, callback) { //       xget. //        RPC-c if (request.action == 'xget') { get(request.url, callback); } }; //   . chrome.extension.onRequest.addListener(onRequest); //        : // chrome.extension.sendRequest({'action' : 'xget', 'url':url}, callback); </scrip> <body></html> 

अंग्रेजी टिप्पणियों के साथ कोड pastebin.com पर उपलब्ध है

उपयोगकर्ता स्क्रिप्ट से कॉल करें:

 /** *      *  : get("http://example.com",alert); */ function get(url, callback) {& chrome.extension.sendRequest({ 'action':'xget', 'url':url}, callback); } 

यह तरीका Google Chrome में काम करता है। अन्य ब्राउज़रों में उपयोगकर्ता स्क्रिप्ट से क्रॉस-डोमेन अनुरोधों की चर्चा निम्नलिखित लेखों में से एक में की जाएगी।

हम इकट्ठा करते हैं, परीक्षण करते हैं

हमारे द्वारा आवश्यक एक्सटेंशन का निर्माण करने के लिए:

1. एक अलग फ़ोल्डर बनाएँ (सुविधा के लिए)
2. इसमें मेनिफ़ेस्ट। Js, background.html और एक यूजर स्क्रिप्ट फ़ाइल डालें
3. Chrome का उपयोग करके एक्सटेंशन पैक करें (सेटिंग्स - एक्सटेंशन - एक्सटेंशन पैक करें। स्क्रीनशॉट देखें)

परीक्षण के लिए, हम अनपैक्ड एक्सटेंशन स्थापित कर सकते हैं (टिप के लिए theOnlyBoy के लिए धन्यवाद)। पैकिंग (3 बिंदु) के बजाय, "अनपैक्ड एक्सटेंशन इंस्टॉल करें" पर क्लिक करें।
नतीजतन, हमारा एक्सटेंशन सामान्य पैक किए गए की तरह स्थापित किया जाएगा (प्लस में पुनः लोड करने के लिए एक अच्छा और सुविधाजनक रीलोड लिंक होगा, स्क्रीनशॉट देखें)।

निष्कर्ष

आज के लिए बस इतना ही, हमारे साथ रहो!
प्रश्नों की प्रतीक्षा, टिप्पणियों में आलोचना और चर्चा।

---

लेखों की सूची:

1. उपयोगकर्ताओं को लिखना सीखना
2. Userscripts। गहरा जाओ
3. »उपयोगकर्ता । हम क्रोम के लिए एक उपयोगकर्ता स्क्रिप्ट पैक करते हैं
4. Usersctripts। क्रॉस डोमेन अनुरोध