24 KiB

Raw 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 मध्ये एक्स्टेंशन म्हणून तैनात केले, तर तुम्हाला एक फॉर्म व्यवस्थित प्रदर्शित होईल.

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

GitHub Copilot Agent Challenge 🚀

Agent मोड वापरून खालील आव्हान पूर्ण करा:

वर्णन: ब्राउझर एक्स्टेंशनमध्ये फॉर्म व्हॅलिडेशन आणि वापरकर्ता अभिप्राय वैशिष्ट्ये जोडून API की आणि Region कोड प्रविष्ट करताना वापरकर्ता अनुभव सुधारित करा.

प्रॉम्प्ट: JavaScript व्हॅलिडेशन फंक्शन्स तयार करा जे तपासतील की API की फील्डमध्ये किमान 20 अक्षरे आहेत आणि Region कोड योग्य स्वरूपाचे आहे (उदाहरणार्थ 'US-NEISO'). वैध इनपुटसाठी इनपुट बॉर्डर रंग हिरवा आणि अवैध इनपुटसाठी लाल रंगात बदलून व्हिज्युअल अभिप्राय जोडा. तसेच सुरक्षा उद्देशाने API की दर्शविण्यासाठी/लपविण्यासाठी टॉगल वैशिष्ट्य जोडा.

🚀 आव्हान

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

व्याख्यानोत्तर प्रश्नमंजुषा

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

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

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

वेबचा इतिहास

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

असाइनमेंट

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

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

24 KiB Raw Blame History