👨🏽‍🔧 🕵🏽 📆 मैंने टैब के लिए एक क्रॉस-ब्राउज़र एक्सटेंशन लिखा है, लेकिन आप ऐसा नहीं करते हैं 🖐🏿 ☁️ 😧

मेगालोमैनिया के दावे के साथ एक लंबा, थकाऊ परिचय

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

क्रोम और फ़ायरफ़ॉक्स में एक्सटेंशन इंस्टॉल किया गया है

विचार

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

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

गीतात्मक विषयांतर

वैसे, जब मैं अपना खुद का कुछ लिखता हूं, तो मैं इसे अपने तरीके से भी करता हूं। मैं एक उन्नत नोटबुक में शुद्ध javaScript में लिखता हूं, मैं गितुब का उपयोग नहीं करता हूं, मैं तीसरे पक्ष के पुस्तकालयों का उपयोग नहीं करता हूं, मैं jquery का भी उपयोग नहीं करता हूं। इसलिए, ब्राउज़र एक्सटेंशन को लिखने के तरीके पर कोई ट्यूटोरियल नहीं होगा। मैं तुम्हें यह नहीं सिखाऊंगा। जैसा मैं करता हूं वैसा मत करो। मैं आपको चेतावनी देता हूं - यह एक बुरा उदाहरण है। मैं सभी संभावित आलोचकों को भी बताना चाहता हूं, उनकी प्रतिक्रिया का अनुमान लगाता हूं - हां, मैं आपके सभी धर्मी गुस्से से पूरी तरह सहमत हूं। हां, आप पूरी स्क्रिप्ट को एक या दो फाइलों में नहीं बदल सकते हैं, लेकिन आपको सलाद की तरह सब कुछ काट देना होगा, कई छोटे टुकड़ों में। हां, आप जावास्क्रिप्ट कोड और HTML कोड को एक फ़ाइल में संयोजित नहीं कर सकते - यह अमूर्त के दूसरे स्तर को पेंच करने से बेहतर है जो उन्हें संयोजित करेगा। हां, आप टेबल लेआउट का उपयोग नहीं कर सकते हैं, लेकिन लानत है, यह लोहे की है! और, इससे भी अधिक - अब वे मुझे जला देंगे - आप इनरएचटीएमएल का उपयोग नहीं कर सकते हैं और एक जटिल HTML संरचना का निर्माण कर सकते हैं, जो कि गिर गया है, लेकिन आपको एक लूप में सभी बच्चों को संलग्न करना और अलग करना होगा और प्रत्येक हैंडलर को सावधानीपूर्वक संलग्न करना होगा और फिर हटाना होगा: हां, मैं सब कुछ गलत कर रहा हूं। पापी, मुझे पश्चाताप है। लेकिन मैं इसे होशपूर्वक करता हूं, क्योंकि यह आसान है। और मुझे मना कौन करेगा? अंत में, यह अवैध नहीं है, है ना? मुझे नहीं पता कि आधुनिक मॉड की आवश्यकता के अनुसार कैसे प्रोग्राम करना है, और मैं कोशिश भी नहीं करना चाहता, क्योंकि मेरा मानना है कि विकास प्रक्रिया का आरेख अनावश्यक रूप से जटिल है। मैं अपने हाथों से कोड लिखने के लिए हूं, और एक पंक्ति में लिखे बिना किसी और के टुकड़ों से इसका निर्माण नहीं कर रहा हूं। हालांकि, मेरा कोड हल्का है, इसे एक विशेष टीम द्वारा इकट्ठा करने की आवश्यकता नहीं है और यह जल्दी से काम करता है। मैं F5 तकनीक का उपयोग करके कोड लिख रहा हूं। यह तब है, जब यह देखने के लिए कि वर्तमान संस्करण विकास प्रक्रिया के किसी भी क्षण कैसे काम करता है, बस F5 ब्राउज़र पर क्लिक करें।

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

टैब संग्रहण

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

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

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

chrome.tabs.onUpdated.addListener( function(tabId, changeInfo) { });

और इस तरह फ़ायरफ़ॉक्स में:

 browser.tabs.onUpdated.addListener( function(tabId, changeInfo, tabInfo) { });

और सभी खुले टैब की सूची प्रदर्शित करने वाले फ़ंक्शन को दोनों ब्राउज़रों के लिए समान रूप से लिखा गया है:

 chrome.tabs.query({},function(data){ });

हाँ, हाँ, फ़ायरफ़ॉक्स में क्रोम भी क्रोम लिखते हैं ... आदि। यह थोड़ा अजीब है, हालांकि, यह तथ्य कि ब्राउज़र अपने एपीआई को मानकीकृत करने की ओर बढ़ रहे हैं, बहुत उत्साहजनक है।

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

पढ़ने के बाद, ब्राउज़र में खोले गए टैब को मेरे सर्वर पर भेजा जाता है और वहां एक नियमित SQL डेटाबेस में सहेजा जाता है। सर्वर स्क्रिप्ट PHP में लिखा है। एक उपयोगकर्ता तालिका है जो किसी अन्य तालिका में पंक्तियों को लिंक करती है - डेटा तालिका। यह डेटा पृष्ठों के पते, उनके नाम और उपयोगकर्ता की पाठ टिप्पणियां, एक पाठ प्रकार के क्षेत्र में पाठ तार के प्रारूप में संग्रहीत होता है जो लगभग एक किलोबाइट लंबा होता है। डेटा को अनएन्क्रिप्टेड रूप में संग्रहीत किया जाता है। प्रति मेगाबाइट में लगभग 1,000 टैब को बचाया जा सकता है। प्रत्येक उपयोगकर्ता के लिए अधिकतम 25 ऐसे स्टोरेज ("कंप्यूटर") प्रदान किए जाते हैं।

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

एक और भंडार है - स्थानीय कंप्यूटर। यहां कोई प्रतिबंध नहीं हैं, क्योंकि उपयोगकर्ता के कंप्यूटर पर स्थानीय ब्राउज़र डेटाबेस में टैब डेटा संग्रहीत है। यहां आप अपनी इच्छानुसार कई टैब स्टोर कर सकते हैं, लेकिन हार्ड ड्राइव की अनुमति से अधिक नहीं। इसके अलावा, चूंकि डेटा स्थानीय भंडारण में संग्रहीत नहीं है, लेकिन इंडेक्सडीडीबी में, वहां 5 या कुछ मेगाबाइट की कोई सीमा नहीं है। यह केवल महत्वपूर्ण है कि गलती से इस रिपॉजिटरी को ब्राउज़र इतिहास के साथ साफ न करें। मैं टैक्स्ट फ़ाइल में टैब्स को एक्सपोर्ट और इम्पोर्ट करने की योजना भी बना रहा हूँ।

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

उपयोगकर्ता प्रमाणीकरण

फ़ायरफ़ॉक्स

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

इसे बंद करने के लिए, VKontakte के लिए आपको टैब ईवेंट हैंडलर में पते की उपस्थिति की जांच करने की आवश्यकता है:

 oauth.vk.com/blank.html

और फेसबुक के लिए:

 https://www.facebook.com/connect/blank.html

और बस मामले में:

 facebook.com/connect/login_success.html

इसलिए, सबसे पहले मैंने Google वेब स्टोर पर एक असेंबली असेंबली भेजी, जिसमें क्लाइंट पर संबंधित क्लाइंट जावास्क्रिप्ट एपि सोशल नेटवर्क के प्रारंभिक पुल-अप के साथ प्रदर्शन किया गया था। इसके अलावा, चूंकि एक्सटेंशन उपयोगकर्ता पर इंस्टॉल किया गया है, और मुझे अपने सर्वर पर अधिकृत करने की आवश्यकता है, मैंने अपने सर्वर से html को आई-फ्रेम में एक्सटेंशन स्क्रिप्ट में भी खींच लिया, लेकिन इसमें पहले से ही सामाजिक नेटवर्क एपीआई खींच लिया ...

और सर्वर के साथ डेटा विनिमय योजना इस तरह थी। एक एक्सटेंशन इंडेक्स पेज बैकग्राउंड एक्सटेंशन स्क्रिप्ट के लिए एक कमांड (उदाहरण के लिए जानकारी पर क्लिक करें) भेजता है। PostMessage का उपयोग करने वाली पृष्ठभूमि स्क्रिप्ट डेटा को i-फ्रेम html में भेजती है। I-फ़्रेम सर्वर पर php स्क्रिप्ट के लिए डेटा भेजता है। सर्वर आई-फ्रेम में प्रतिक्रिया करता है, आई-फ्रेम बैकग्राउंड स्क्रिप्ट में प्रतिक्रिया करता है, बैकग्राउंड स्क्रिप्ट इंडेक्स में प्रतिक्रिया करता है, उपयोगकर्ता जवाब देखता है। Phew ... और सबसे महत्वपूर्ण बात - यह सब काम कर गया!

सामान्य तौर पर, यह काम नहीं करता था। Google ने मेरे एक्सटेंशन को कई शब्दों के साथ लपेटा, जिसमें कुछ अस्पष्ट था, वे कहते हैं, आपका एक्सटेंशन आपकी सुरक्षा नीति का पालन नहीं करता है। समर्थन के साथ पत्राचार के माध्यम से, मैं बारीकियों को प्राप्त करने में सक्षम था। अर्थात्, उन्हें यह तथ्य पसंद नहीं आया कि एक्सटेंशन html और js को तृतीय-पक्ष सर्वर से खींचता है ... सामान्य तौर पर, मुझे क्लाइंट प्राधिकरण के साथ समाप्त करना होगा और सर्वर पर वापस आना होगा। हां, बैकग्राउंड एक्सटेंशन स्क्रिप्ट से सीधे अपने सर्वर पर http पोस्ट रिक्वेस्ट भेजना, हालांकि, इसकी अनुमति दी गई। अच्छा, ठीक है। यह और भी बेहतर है। यह छोटा हो गया और सामाजिक नेटवर्क से जावास्क्रिप्ट एपीआई को खींचने की आवश्यकता नहीं है - यह उपयोगकर्ता के लिए एक अतिरिक्त प्रतीक्षा समय है।

टैब देखें

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

क्रोम टैब सूची

टाइल्स के लिए रंगों का चयन साइट के डोमेन नाम के आधार पर स्वचालित रूप से किया जाता है। फ़ंक्शन url स्वीकार करता है। डोमेन नाम को वर्णों के लगभग तीन समान समूहों में विभाजित किया जाता है। प्रत्येक समूह के पहले वर्णों को रंग घटकों के मूल्यों में परिवर्तित किया जाता है: R, G, B. यह रूपांतरण निम्नानुसार किया जाता है। इन तीनों वर्णों के कोड को d1 से घटाकर 0 से 25 तक कर दिया जाता है, शेष भाग को 26 से घटाकर। यहां तक कि रूसी वर्णमाला के वर्ण भी इस सीमा तक कम हो जाएंगे। इससे कोई फर्क नहीं पड़ता कि 27 वां अक्षर वहां पहला हो जाता है: हमें वर्णमाला के सभी अक्षरों के रंग के घटकों की आवश्यकता नहीं है, जरूरी है कि उन्हें दोहराया जाए। फिर रेंज d1 (0 ... 25) से प्राप्त तीन नंबर आनुपातिक रूप से रेंज d2 (150 ... 255) तक कम हो जाते हैं। सामान्य तौर पर, ये रेंज फ़ंक्शन की शुरुआत में सेट की जाती हैं और इसे किसी भी अन्य में बदला जा सकता है। मैंने 150 ... 255 लिया ताकि रंग घटक उज्ज्वल हों। यदि आप सेट करते हैं, उदाहरण के लिए, 0 ... 100, तो टाइलें अंधेरे से बाहर हो जाएंगी। इस प्रकार, डोमेन नाम के तीन वर्ण 150 150 ... 255 की सीमा से 3 संख्या में परिवर्तित हो जाते हैं। और फिर, जैसा कि आप शायद अनुमान लगाते हैं, उन्हें टाइल आर, जी और बी के रंग घटकों के रूप में व्याख्या की जाती है। सब कुछ बहुत सरल है।

 getSiteColor=function(url) { var d1=[0,25], d2=[150,255]; var code=0, codep=0, color=0, str='', domen='', ar=[], inc=0; ar=url.split('//'); if (ar.length>1) {str=ar[1];} else {str=ar[0];}; str=str.split('www.').join(''); domen=str.split('/')[0]; str=domen.split('.').join(''); ar=[]; inc=Math.floor(str.length/3); if (str.length % 3 >0) {inc++;}; for (var i=0; i<str.length; i+=inc) { code=str.slice(i, i+1).charCodeAt(0); codep=code % (d1[1]-d1[0]+1); color=Math.round( codep * (d2[1]-d2[0]) / (d1[1]-d1[0]) ) + d2[0]; ar.push(color); }; return {r:ar[0], g:ar[1], b:ar[2], domen:domen}; }

Html दस्तावेज़ संरचना

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

ओपेरा और यैंडेक्स ब्राउज़र

स्थानीयकरण

मुख्य स्क्रीन पर एक ध्वज है, जिस पर क्लिक करके रूसी और अंग्रेजी के बीच इंटरफ़ेस स्विच होता है। यहां पृष्ठ को उसी पते पर पुनर्निर्देशित किया गया है, लेकिन कमांड लाइन पर एक पैरामीटर के साथ। यह पैरामीटर अन्य सभी तत्वों को लोड करने से पहले पढ़ा जाता है। और इसके मूल्य के आधार पर, यह या कि रूसी या अंग्रेजी वाक्यांशों के साथ js- फाइल वाक्यांशों के लिए साहचर्य सरणी में भरी हुई है: lng_en.js, या lng_ru.js। और एप्लिकेशन में ही, इंटरफ़ेस वाक्यांशों को प्रदर्शित करने के लिए, इस साहचर्य सरणी से पाठ स्ट्रिंग के लिंक पहले से ही उपयोग किए जाते हैं। इसके अलावा, पता बार में मान के आधार पर, एक फ़ाइल लोड की जाती है जिसमें ग्राफिकल इंटरफ़ेस के तत्व होते हैं - बटन: बटन_en.png, या बटन_ru.png। मैंने तय किया कि ग्राफिक्स एडिटर में प्रत्येक भाषा में आइकन और शिलालेख के साथ-साथ सही बटन बनाना बेहतर है, एक खाली बटन और ओवरले आइकन बनाने और उस पर शिलालेख बनाने के लिए, खासकर जब उनमें से बहुत सारे नहीं हैं और यह पूरी स्प्राइट सूची केवल 50 वजन की है Kb। मेरी योजना है कि मैं डिजाइन पर काम करना जारी रखूं और सभी बटनों को अलग-अलग बनाऊं।

सामान्य फ़ाइल स्प्राइट के साथ main.png, जिसमें ग्राफिक तत्व होते हैं जो किसी विशिष्ट स्थानीयकरण से बंधे नहीं होते हैं, वैसे भी लोड किए जाते हैं।

वेब संस्करण

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

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

IE 11 में वेब संस्करण

मैंने वास्तव में अब तक अपने विस्तार को बढ़ावा देने पर काम नहीं किया है। उसने सिर्फ सोशल नेटवर्क में समूह बनाए और अपने सभी दोस्तों को वहां आमंत्रित किया। हां, उन्होंने 1,500 रूबल के लिए यैंडेक्स डायरेक्ट में एक विज्ञापन अभियान चलाया। उसने कोई विशेष परिणाम नहीं दिया, लेकिन शायद मैंने घोषणा सही ढंग से नहीं की। या शायद समस्या यह है कि मैंने एक्सटेंशन के होमपेज के अंग्रेजी संस्करण के लिए एक लिंक का संकेत दिया है। और शायद यह होम पेज पर नहीं बल्कि तुरंत एक एक्सटेंशन स्टोर पर एक लिंक देने के लायक था। जैसा कि आप जानते हैं, मैं एक विपणन प्रतिभा नहीं हूँ। सामान्य तौर पर, मैं अन्य मापदंडों के साथ फिर से कोशिश करूंगा। अभियान ने 39 क्लिक दिए। यह कहना मुश्किल है कि क्या मैंने इसके परिणामस्वरूप कुछ नए उपयोगकर्ताओं का अधिग्रहण किया है।

फ़ायरफ़ॉक्स के तहत संस्करण के साथ एक विषमता थी।

17 अक्टूबर के आंकड़े 227 डाउनलोड के रूप में दिखाते हैं। मुझे नहीं पता है कि Yandex.Direct में इस अभियान ने योगदान दिया है या नहीं, लेकिन किसी कारण से, प्रति दिन 1-2 डाउनलोड फिर से किसी कारण से चलते हैं। उसी समय, फ़ायरफ़ॉक्स के विस्तार के लिए दैनिक उपयोगकर्ताओं की अवधारणा है:

227 डाउनलोड क्यों थे, लेकिन केवल 1-2 दैनिक उपयोगकर्ता थे, यह स्पष्ट नहीं है। शायद यह किसी तरह की विफलता थी। सामान्य तौर पर, मुझे अभी तक समझ नहीं आया कि यह क्या था, और ये सभी लोग कहां हैं ...

Chrome वेब स्टोर एक्सटेंशन स्टोर के आंकड़ों ने कुछ अनन्त रूप से गैर-लोडिंग शेड्यूल को प्रसन्न किया - जो मैंने नहीं देखा - और 5-10 अन्य उपयोगकर्ता।

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

परिणाम

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

क्रोम और फ़ायरफ़ॉक्स के संस्करणों को अपने संबंधित आधिकारिक एक्सटेंशन स्टोर में परीक्षण और रखा गया है। इसके अलावा, Google के साथ एक एक्सटेंशन डेवलपर के रूप में पंजीकरण की लागत $ 5 है। मोज़िला यह मुफ़्त में है। एक्सटेंशन का वेब संस्करण सर्वर पर स्थित है। Chrome स्टोर से असेंबली संगत ब्राउज़र में ठीक काम करती है: इसे Yandex Browser और Opera में भी इंस्टॉल किया जा सकता है। मैं और भी उन्नत सुविधाओं के साथ नए संस्करण जारी करने की योजना बना रहा हूं।

सामान्य तौर पर, ब्राउज़र एक्सटेंशन पावर होते हैं। अब मुझे सोफे से उठने की ज़रूरत नहीं है, और टैबलेट को तोड़ने के लिए क्रोध की भी आवश्यकता नहीं है। यह पूरा ज़ेन है। सभी के लिए अच्छा है।

मैंने टैब के लिए एक क्रॉस-ब्राउज़र एक्सटेंशन लिखा है, लेकिन आप ऐसा नहीं करते हैं