22 KiB

Raw Permalink Blame History

ब्राउझर एक्स्टेंशन प्रोजेक्ट भाग 1: ब्राउझर बद्दल सर्व काही

स्केच नोट Wassim Chegham यांच्याकडून

प्री-लेक्चर क्विझ

परिचय

ब्राउझर एक्स्टेंशन्स ब्राउझरमध्ये अतिरिक्त कार्यक्षमता जोडतात. पण एक तयार करण्यापूर्वी, तुम्हाला थोडं ब्राउझर कसं काम करतं ते शिकायला हवं.

ब्राउझर बद्दल

या मालिकेतील धड्यांमध्ये, तुम्ही Chrome, Firefox आणि Edge ब्राउझरवर काम करणारे ब्राउझर एक्स्टेंशन कसे तयार करायचे ते शिकाल. या भागात, तुम्ही ब्राउझर कसे कार्य करतात हे शोधाल आणि ब्राउझर एक्स्टेंशनचे घटक तयार कराल.

पण ब्राउझर म्हणजे नक्की काय? हे एक सॉफ्टवेअर अनुप्रयोग आहे जे अंतिम वापरकर्त्याला सर्व्हरमधून सामग्रीमध्ये प्रवेश करण्याची आणि ती वेब पृष्ठांवर प्रदर्शित करण्याची परवानगी देते.

✅ थोडा इतिहास: पहिला ब्राउझर 'WorldWideWeb' नावाचा होता आणि तो सर टिमोथी बर्नर्स-ली यांनी 1990 मध्ये तयार केला होता.

काही प्रारंभिक ब्राउझर, Karen McGrane यांच्याकडून

जेव्हा वापरकर्ता URL (Uniform Resource Locator) पत्त्याचा वापर करून इंटरनेटशी कनेक्ट होतो, सहसा Hypertext Transfer Protocol च्या माध्यमातून http किंवा https पत्त्याचा वापर करून, ब्राउझर वेब सर्व्हरशी संवाद साधतो आणि वेब पृष्ठ प्राप्त करतो.

या टप्प्यावर, ब्राउझरचा रेंडरिंग इंजिन ते वापरकर्त्याच्या डिव्हाइसवर प्रदर्शित करतो, जे मोबाइल फोन, डेस्कटॉप किंवा लॅपटॉप असू शकते.

ब्राउझरमध्ये सामग्री कॅश करण्याची क्षमता देखील असते जेणेकरून ती प्रत्येक वेळी सर्व्हरवरून पुनर्प्राप्त करावी लागणार नाही. ते वापरकर्त्याच्या ब्राउझिंग क्रियाकलापांचा इतिहास नोंदवू शकतात, 'कुकीज' साठवू शकतात, जे लहान डेटा बिट्स आहेत ज्यात वापरकर्त्याच्या क्रियाकलाप साठवण्यासाठी वापरलेली माहिती असते, आणि बरेच काही.

ब्राउझरबद्दल लक्षात ठेवण्यासारखी एक महत्त्वाची गोष्ट म्हणजे ते सर्व समान नसतात! प्रत्येक ब्राउझरची स्वतःची ताकद आणि कमकुवतता असते, आणि व्यावसायिक वेब विकसकाला वेब पृष्ठे क्रॉस-ब्राउझर चांगली कार्य करण्यासाठी कशी बनवायची हे समजून घेणे आवश्यक आहे. यामध्ये मोबाइल फोनसारख्या लहान व्ह्यूपोर्ट्स हाताळणे तसेच ऑफलाइन असलेल्या वापरकर्त्याचा समावेश आहे.

एक अतिशय उपयुक्त वेबसाइट जी तुम्ही तुमच्या आवडत्या ब्राउझरमध्ये बुकमार्क करावी ती म्हणजे caniuse.com. वेब पृष्ठे तयार करताना, caniuse च्या समर्थित तंत्रज्ञानाच्या यादीचा वापर करणे खूप उपयुक्त आहे जेणेकरून तुम्ही तुमच्या वापरकर्त्यांना सर्वोत्तम समर्थन देऊ शकता.

✅ तुमच्या वेबसाइटच्या वापरकर्त्यांमध्ये कोणते ब्राउझर सर्वाधिक लोकप्रिय आहेत हे तुम्ही कसे सांगू शकता? तुमचे विश्लेषण तपासा - तुम्ही तुमच्या वेब विकास प्रक्रियेचा भाग म्हणून विविध विश्लेषण पॅकेजेस स्थापित करू शकता आणि ते तुम्हाला विविध लोकप्रिय ब्राउझरद्वारे सर्वाधिक वापरलेले ब्राउझर सांगतील.

ब्राउझर एक्स्टेंशन्स

तुम्हाला ब्राउझर एक्स्टेंशन का तयार करायचे आहे? जेव्हा तुम्हाला वारंवार कराव्या लागणाऱ्या कार्यांमध्ये जलद प्रवेशाची आवश्यकता असते तेव्हा ते तुमच्या ब्राउझरला जोडण्यासाठी एक उपयुक्त गोष्ट आहे. उदाहरणार्थ, जर तुम्हाला तुमच्या संवाद साधलेल्या विविध वेब पृष्ठांवरील रंग तपासण्याची आवश्यकता असेल, तर तुम्ही रंग-पिकर ब्राउझर एक्स्टेंशन स्थापित करू शकता. जर तुम्हाला पासवर्ड लक्षात ठेवण्यात अडचण येत असेल, तर तुम्ही पासवर्ड-व्यवस्थापन ब्राउझर एक्स्टेंशन वापरू शकता.

ब्राउझर एक्स्टेंशन्स तयार करणे मजेदार असते. ते मर्यादित कार्ये व्यवस्थापित करतात जी ते चांगल्या प्रकारे पार पाडतात.

✅ तुमचे आवडते ब्राउझर एक्स्टेंशन्स कोणते आहेत? ते कोणती कार्ये पार पाडतात?

एक्स्टेंशन्स स्थापित करणे

तुम्ही तयार करण्यास सुरुवात करण्यापूर्वी, ब्राउझर एक्स्टेंशन तयार करण्याची आणि तैनात करण्याची प्रक्रिया पाहा. प्रत्येक ब्राउझर या कार्याचे व्यवस्थापन कसे करतो यामध्ये थोडा फरक असला तरी, Chrome आणि Firefox वर प्रक्रिया Edge मधील या उदाहरणासारखी आहे:

टीप: डेव्हलपर मोड चालू करण्यासाठी आणि इतर स्टोअरमधून एक्स्टेंशनला परवानगी देण्यासाठी खात्री करा.

मुळात, प्रक्रिया अशी असेल:

npm run build वापरून तुमचे एक्स्टेंशन तयार करा
ब्राउझरमध्ये "सेटिंग्ज आणि अधिक" बटण (वरच्या उजव्या बाजूला असलेला ... आयकॉन) वापरून एक्स्टेंशन्स पॅनवर जा
जर ते नवीन स्थापना असेल, तर load unpacked निवडा आणि त्याच्या बिल्ड फोल्डरमधून (आपल्या बाबतीत /dist) ताजे एक्स्टेंशन अपलोड करा
किंवा, आधीच स्थापित केलेले एक्स्टेंशन पुन्हा लोड करत असल्यास reload क्लिक करा

✅ हे निर्देश तुम्ही स्वतः तयार केलेल्या एक्स्टेंशन्ससाठी आहेत; प्रत्येक ब्राउझरशी संबंधित ब्राउझर एक्स्टेंशन स्टोअरमध्ये रिलीज केलेली एक्स्टेंशन्स स्थापित करण्यासाठी, तुम्ही त्या स्टोअर्स वर जाऊन तुमच्या पसंतीचे एक्स्टेंशन स्थापित करावे.

सुरुवात करा

तुम्ही तुमच्या प्रदेशाचा कार्बन फूटप्रिंट प्रदर्शित करणारे ब्राउझर एक्स्टेंशन तयार करणार आहात, ज्यामध्ये तुमच्या प्रदेशाचा ऊर्जा वापर आणि ऊर्जा स्रोत दर्शविला जाईल. एक्स्टेंशनमध्ये API की गोळा करण्यासाठी एक फॉर्म असेल जेणेकरून तुम्ही CO2 Signal च्या API मध्ये प्रवेश करू शकाल.

तुम्हाला आवश्यक आहे:

API की; या पृष्ठावरील बॉक्समध्ये तुमचा ईमेल टाका आणि तुम्हाला एक की पाठवली जाईल
तुमच्या प्रदेशाचा कोड जो Electricity Map शी संबंधित आहे (उदाहरणार्थ, Boston मध्ये, मी 'US-NEISO' वापरतो).
स्टार्टर कोड. start फोल्डर डाउनलोड करा; तुम्ही या फोल्डरमधील कोड पूर्ण करणार आहात.
NPM - NPM हे पॅकेज व्यवस्थापन साधन आहे; ते स्थानिक पातळीवर स्थापित करा आणि तुमच्या package.json फाइलमध्ये सूचीबद्ध पॅकेजेस तुमच्या वेब अॅसेटसाठी स्थापित केली जातील

✅ पॅकेज व्यवस्थापनाबद्दल अधिक जाणून घ्या या उत्कृष्ट Learn module मध्ये

कोडबेस पाहण्यासाठी एक मिनिट घ्या:

✅ एकदा तुमची API की आणि Region कोड तयार झाल्यावर, भविष्यातील वापरासाठी ती कुठेतरी नोटमध्ये साठवा.

एक्स्टेंशनसाठी HTML तयार करा

या एक्स्टेंशनमध्ये दोन दृश्ये आहेत. एक API की आणि Region कोड गोळा करण्यासाठी:

आणि दुसरे Region चा कार्बन वापर प्रदर्शित करण्यासाठी:

चला फॉर्मसाठी HTML तयार करून CSS ने स्टाइलिंग करून सुरुवात करूया.

/dist फोल्डरमध्ये, तुम्ही फॉर्म आणि परिणाम क्षेत्र तयार कराल. index.html फाइलमध्ये, फॉर्म क्षेत्र भरून काढा:

<form class="form-data" autocomplete="on">
	<div>
		<h2>New? Add your Information</h2>
	</div>
	<div>
		<label for="region">Region Name</label>
		<input type="text" id="region" required class="region-name" />
	</div>
	<div>
		<label for="api">Your API Key from tmrow</label>
		<input type="text" id="api" required class="api-key" />
	</div>
	<button class="search-btn">Submit</button>
</form>

हे फॉर्म आहे जिथे तुमची साठवलेली माहिती इनपुट केली जाईल आणि स्थानिक स्टोरेजमध्ये साठवली जाईल.

यानंतर, परिणाम क्षेत्र तयार करा; अंतिम फॉर्म टॅगच्या खाली काही divs जोडा:

<div class="result">
	<div class="loading">loading...</div>
	<div class="errors"></div>
	<div class="data"></div>
	<div class="result-container">
		<p><strong>Region: </strong><span class="my-region"></span></p>
		<p><strong>Carbon Usage: </strong><span class="carbon-usage"></span></p>
		<p><strong>Fossil Fuel Percentage: </strong><span class="fossil-fuel"></span></p>
	</div>
	<button class="clear-btn">Change region</button>
</div>

या टप्प्यावर, तुम्ही बिल्ड करण्याचा प्रयत्न करू शकता. या एक्स्टेंशनच्या पॅकेज डिपेंडन्सी स्थापित करण्याची खात्री करा:

npm install

ही कमांड npm, Node Package Manager वापरेल, तुमच्या एक्स्टेंशनच्या बिल्ड प्रक्रियेसाठी webpack स्थापित करण्यासाठी. तुम्ही या प्रक्रियेचा आउटपुट /dist/main.js मध्ये पाहू शकता - तुम्हाला कोड बंडल केलेला दिसतो.

सध्या, एक्स्टेंशन तयार होईल आणि जर तुम्ही Edge मध्ये एक्स्टेंशन म्हणून तैनात केले, तर तुम्हाला एक फॉर्म व्यवस्थित प्रदर्शित होईल.

अभिनंदन, तुम्ही ब्राउझर एक्स्टेंशन तयार करण्याच्या दिशेने पहिले पाऊल उचलले आहे. पुढील धड्यांमध्ये, तुम्ही ते अधिक कार्यक्षम आणि उपयुक्त बनवाल.

🚀 आव्हान

ब्राउझर एक्स्टेंशन स्टोअरवर एक नजर टाका आणि तुमच्या ब्राउझरमध्ये एक एक्स्टेंशन स्थापित करा. तुम्ही त्याच्या फाइल्स मनोरंजक पद्धतीने तपासू शकता. तुम्हाला काय सापडते?

पोस्ट-लेक्चर क्विझ

पुनरावलोकन आणि स्व-अभ्यास

या धड्यात तुम्ही वेब ब्राउझरच्या इतिहासाबद्दल थोडं शिकलं; वर्ल्ड वाइड वेबच्या शोधकांनी त्याचा उपयोग कसा केला याबद्दल अधिक जाणून घेण्यासाठी ही संधी घ्या. त्याच्या इतिहासाबद्दल वाचण्यासाठी काही उपयुक्त साइट्स:

वेब ब्राउझरचा इतिहास

वेबचा इतिहास

टिम बर्नर्स-ली यांची मुलाखत

असाइनमेंट

तुमचे एक्स्टेंशन पुन्हा स्टाइल करा

अस्वीकरण:
हा दस्तऐवज AI भाषांतर सेवा Co-op Translator वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी कृपया लक्षात ठेवा की स्वयंचलित भाषांतरांमध्ये त्रुटी किंवा अचूकतेचा अभाव असू शकतो. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून निर्माण होणाऱ्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.

22 KiB Raw Permalink Blame History