इस लेख में, मैं प्रकाशनों की एक श्रृंखला पूरी कर रहा हूं जिसमें मैं अपने अनुभव को ब्राउज़रों के लिए वेब एक्सटेंशन लिखने के बारे में बात करना चाहता था। मेरे पास पहले से ही एक वेब एक्सटेंशन बनाने का अनुभव था, जो लगभग 100,000 क्रोम उपयोगकर्ताओं द्वारा स्थापित किया गया था, जो स्वायत्तता से काम करता था, लेकिन लेखों की इस श्रृंखला में मैंने सर्वर साइड के साथ इसे कसकर एकीकृत करके वेब एक्सटेंशन के विकास की प्रक्रिया में देरी करने का फैसला किया।

भाग 1 , भाग 2 , भाग 3

अनुसूचित कार्य

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

इस मामले में, दैनिक शेड्यूल मोड में पृष्ठ से डेटा प्राप्त करना अक्सर आवश्यक होता है। उदाहरण के लिए, यदि साइट पर मुद्रा दरें हैं और URL द्वारा प्रत्यक्ष अनुरोध हैश तर्क की रक्षा करता है। ऐसी प्रति के रूप में, आप सेंट्रल बैंक ऑफ यूरोप की वेबसाइट पर विचार कर सकते हैं। इस स्थिति में, मौजूदा विनिमय दरों को प्राप्त करने के लिए, आपको XML प्रारूप में सही डेटा प्राप्त करने के लिए हैशेड URL पता होना चाहिए।

वेब एक्सटेंशन का उपयोग करके, आप विनिमय दरों का अनुरोध करने के लिए स्क्रिप्ट के माध्यम से डेटा प्राप्त करने के लिए आवश्यक आवृत्ति निर्धारित कर सकते हैं। वेब एक्सटेंशन इनपुट के रूप में मुकुट के प्रारूप में एक स्ट्रिंग को स्वीकार करता है, इसलिए, दैनिक मोड में विनिमय दर प्राप्त करने के लिए, आपको * * / 1 * * निर्दिष्ट करना होगा।

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

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

console.log('script is ended');

इस आदेश का उपयोग करते हुए, एक उपयोगकर्ता स्क्रिप्ट प्यूपीटर द्वारा उत्पन्न क्रोमियम सर्वर प्रक्रिया को बंद कर सकती है। यह पुप्पीटर "कंसोल" ईवेंट को ट्रैक करके लागू किया गया है:

 //initialize browser and page page.on('console', async msg => { for (let i = 0; i < msg.args().length; ++i) { if(await msg.args()[i].jsonValue() == 'script is ended') { await browser.close(); } } });

यदि उपयोगकर्ता स्क्रिप्ट में ऐसी कमांड नहीं है, तो कार्य शेड्यूलर मोड में निष्पादन प्रक्रिया को पूरा करने के लिए, आपके पास टाइमर जबरन समाप्त होना चाहिए। इसे सेटटाइमआउट का उपयोग करके सरल तरीके से लागू किया जाता है:

 const timeLimitCron = 30; const timeout = setTimeout(async () => { if(browser) { await browser.close(); } clearTimeout(timeout); }, timeLimitCron * 1000 ); //time limit for cron, then forced closing, default 30 seconds

चूंकि कार्य अनुसूचक सर्वर साइड पर चलता है, और उपयोगकर्ता को अक्सर एक विशिष्ट आईपी पते का उपयोग करने की आवश्यकता होती है, प्रॉक्सी सर्वर का उपयोग करने का विकल्प जोड़ा गया है।

उपयोगकर्ता Puppeteer कंसोल से नवीनतम संदेश लॉग भी डाउनलोड कर सकता है। उदाहरण के लिए, प्रॉक्सी सर्वर के सही संचालन की जांच करना सुविधाजनक है।

कीबोर्ड शॉर्टकट

परीक्षण और क्षेत्र परीक्षण के दौरान, यह पता चला कि कुछ प्रकार की लिपियों के लिए वेब संसाधनों पर उनके निष्पादन के लिए गर्म कुंजी होना उपयोगी है। इस तरह की स्क्रिप्ट का एक उदाहरण Redability.js है। यह स्क्रिप्ट साइट की सामग्री को पढ़ने के लिए एक "स्वच्छ दृश्य" बनाती है। यही है, जेएस पुस्तकालय सामग्री के साथ पृष्ठ की संरचना का विश्लेषण करता है और आपको उच्च संभावना के साथ शीर्षक, लेखक और पृष्ठ की सामग्री प्राप्त करने की अनुमति देता है। उसके बाद, उपयोगकर्ता स्क्रिप्ट वेब संसाधन के HTML को अधिलेखित कर सकती है और उपयोगकर्ता को अनावश्यक मार्कअप, विज्ञापन आदि के बिना "शुद्ध रूप" में पढ़ने की अनुमति दे सकती है।

प्रारंभ में, उपयोगकर्ता स्क्रिप्ट चलाना केवल "एक्सक्यूट" बटन पर क्लिक करके पॉप-अप वेब एक्सटेंशन से संभव था। इंटरफ़ेस के साथ बातचीत का यह तर्क अक्सर सुरक्षा कारणों से उचित है। लेकिन ऊपर के उदाहरण में, यह आपको वेब संसाधन की सामग्री को आसानी से "शुद्ध रूप" में लाने की अनुमति नहीं देता है।

जैसा कि ऊपर वर्णित है, वेब एक्सटेंशन आपको content.js के माध्यम से DOM के साथ काम करने की अनुमति देता है, लेकिन विंडो ऑब्जेक्ट का उपयोग नहीं किया जा सकता है, उदाहरण के लिए, मापदंडों को स्टोर करने के लिए, क्योंकि यह एक ओपन टैब का विंडो ऑब्जेक्ट नहीं है। यह स्थिति कीस्ट्रोक्स पर नज़र रखने के लिए एक वेब ऑब्जेक्ट के रूप में वेब एक्सटेंशन के संचालन को प्रतिबंधित करती है।

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

सर्वर की ओर से हॉट की की सूची प्राप्त करने के बाद, निम्नलिखित कोड निष्पादित किया जाता है:

 var hotKeysMap = {keys: [], id: []}; for(var i in data.response.data) { hotKeysMap.keys.push(data.response.data[i]['hotkeys']); hotKeysMap.id.push(data.response.data[i]["_id"]); } if(hotKeysMap.keys) { getScript("hotkeys.js", function() { var script = document.createElement("script"); script.setAttribute("class", "gCore-hotKeys"); script.setAttribute("data-endpoint", event.data.endPoint); script.setAttribute("data-token", event.data.token); script.setAttribute("data-userid", event.data.userId); script.innerHTML = "GChotKeys = JSON.parse(\"" + JSON.stringify(hotKeysMap).replace(/"/g, "\\\"") + "\");\n" + "hotkeys(GChotKeys.keys.join(','), function(event, handler) {" + " event.preventDefault();" + " localStorage.setItem('runHotKeysScript', GChotKeys.id[GChotKeys.keys.indexOf(handler.key)]);" + "});"; document.body.appendChild(script); }); }

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

यह पहले से ही ऊपर उल्लेखित था कि वेब संसाधन के खुले पृष्ठ और वेब एक्सटेंशन के कंटेंट एक्सटेंशन एक्सटेंशन। जेएस स्क्रिप्ट के बीच संचार की समस्या है, जिसका उपयोग डोम में हेरफेर करने के लिए किया जाता है। इस मामले में, आप लोकलस्टोरेज में मूल्य की जांच के लिए एक सरल तकनीक का सहारा ले सकते हैं, जो कि ऊपर दिए गए इंटरैक्शन के दो बिंदुओं के लिए एक सामान्य वस्तु है।

Content.js में, आप बस एक बार सेकंड के बाद लोकलस्टोरेज मान की जांच कर सकते हैं और पॉप-अप वेब एक्सटेंशन में "एक्सक्यूट" बटन पर क्लिक करने पर उसी डोम जोड़-तोड़ कर सकते हैं।

 setInterval(function() { if(localStorage.getItem('runHotKeysScript')) { // run user script localStorage.removeItem('runHotKeysScript'); } }, 1000);

इस प्रकार, "हॉट कीज़" तकनीक को लागू किया गया है, जो आपको व्यावहारिक समस्याओं को हल करने के लिए आंतरिक लाइब्रेरी की शक्ति का उपयोग करके उपयोगकर्ता स्क्रिप्ट को जल्दी से लॉन्च करने की अनुमति देता है।

निष्कर्ष

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

मुझे उम्मीद है कि मेरा अनुभव अधिक विशिष्ट क्रॉस-ब्राउज़र वेब एक्सटेंशन लिखना आसान बना देगा।

भविष्य में, यह वेब एक्सटेंशन को स्थानीय बनाने और समुदाय के लिए उपयोगी स्क्रिप्ट लिखने की योजना है। यदि पाठक के पास ऐसी उपयोगकर्ता स्क्रिप्ट लिखने में मदद करने का विचार या इच्छा है, तो कृपया निजी संदेशों में लिखें।

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

अनुसूचित कार्य

कीबोर्ड शॉर्टकट

निष्कर्ष

More articles: