# ब्राउजर एक्सटेन्सन प्रोजेक्ट भाग १: ब्राउजरको बारेमा
> स्केच नोट [वसिम चेघम](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob) द्वारा
## प्रि-लेक्चर क्विज
[प्रि-लेक्चर क्विज](https://ff-quizzes.netlify.app/web/quiz/23)
### परिचय
ब्राउजर एक्सटेन्सनले ब्राउजरमा थप कार्यक्षमता थप्छ। तर एउटा बनाउनु अघि, तपाईंले ब्राउजरले कसरी काम गर्छ भन्ने बारेमा थोरै सिक्नुपर्छ।
### ब्राउजरको बारेमा
यस पाठ श्रृंखलामा, तपाईंले क्रोम, फायरफक्स र एज ब्राउजरमा काम गर्ने ब्राउजर एक्सटेन्सन कसरी बनाउने भन्ने कुरा सिक्नुहुनेछ। यस भागमा, तपाईंले ब्राउजर कसरी काम गर्छ भन्ने कुरा पत्ता लगाउनुहुनेछ र ब्राउजर एक्सटेन्सनका तत्वहरू तयार गर्नुहुनेछ।
तर ब्राउजर वास्तवमा के हो? यो एउटा सफ्टवेयर एप्लिकेसन हो जसले अन्तिम प्रयोगकर्तालाई सर्भरबाट सामग्री पहुँच गर्न र वेब पृष्ठहरूमा प्रदर्शन गर्न अनुमति दिन्छ।
✅ थोरै इतिहास: पहिलो ब्राउजर 'WorldWideWeb' भनिन्थ्यो र यो सर टिमोथी बर्नर्स-लीले १९९० मा बनाएका थिए।
> केही प्रारम्भिक ब्राउजरहरू, [करेन म्याकग्रेन](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) मार्फत
जब प्रयोगकर्ताले URL (Uniform Resource Locator) ठेगाना प्रयोग गरेर इन्टरनेटमा जडान गर्छ, सामान्यतया `http` वा `https` ठेगानाको माध्यमबाट हाइपरटेक्स्ट ट्रान्सफर प्रोटोकल प्रयोग गरेर, ब्राउजरले वेब सर्भरसँग संवाद गर्छ र वेब पृष्ठ ल्याउँछ।
यस बिन्दुमा, ब्राउजरको रेंडरिङ इन्जिनले यसलाई प्रयोगकर्ताको उपकरणमा प्रदर्शन गर्छ, जुन मोबाइल फोन, डेस्कटप वा ल्यापटप हुन सक्छ।
ब्राउजरहरूले सामग्री क्यास गर्ने क्षमता पनि राख्छन् ताकि प्रत्येक पटक सर्भरबाट पुनः प्राप्त गर्न नपरोस्। तिनीहरूले प्रयोगकर्ताको ब्राउजिङ गतिविधिको इतिहास रेकर्ड गर्न सक्छन्, 'कुकीहरू' भण्डारण गर्न सक्छन्, जुन साना डाटा बिटहरू हुन् जसले प्रयोगकर्ताको गतिविधि भण्डारण गर्न प्रयोग गरिन्छ, र थप।
ब्राउजरको बारेमा सम्झन लायक एकदम महत्त्वपूर्ण कुरा भनेको तिनीहरू सबै एउटै प्रकारका हुँदैनन्! प्रत्येक ब्राउजरको आफ्नै बलियो पक्ष र कमजोरीहरू छन्, र एक पेशेवर वेब डेभलपरले वेब पृष्ठहरूलाई क्रस-ब्राउजरमा राम्रो प्रदर्शन गर्न कसरी बनाउने भन्ने कुरा बुझ्न आवश्यक छ। यसमा मोबाइल फोनको जस्तो सानो भ्यूपोर्टहरू ह्यान्डल गर्ने, साथै अफलाइन प्रयोगकर्तालाई सहयोग गर्ने कुरा समावेश छ।
एकदम उपयोगी वेबसाइट जुन तपाईंले आफ्नो मनपर्ने ब्राउजरमा बुकमार्क गर्नुपर्छ भनेको [caniuse.com](https://www.caniuse.com) हो। जब तपाईं वेब पृष्ठहरू बनाउँदै हुनुहुन्छ, caniuse को समर्थित प्रविधिहरूको सूची प्रयोग गर्नु धेरै उपयोगी हुन्छ ताकि तपाईंले आफ्नो प्रयोगकर्ताहरूलाई राम्रोसँग सहयोग गर्न सक्नुहुन्छ।
✅ तपाईंको वेब साइटको प्रयोगकर्ता आधारमा कुन ब्राउजरहरू सबैभन्दा लोकप्रिय छन् भनेर कसरी थाहा पाउन सकिन्छ? तपाईंको एनालिटिक्स जाँच गर्नुहोस् - तपाईं आफ्नो वेब विकास प्रक्रियाको भागको रूपमा विभिन्न एनालिटिक्स प्याकेजहरू स्थापना गर्न सक्नुहुन्छ, र तिनीहरूले तपाईंलाई विभिन्न लोकप्रिय ब्राउजरहरूद्वारा सबैभन्दा धेरै प्रयोग गरिएका ब्राउजरहरू के हुन् भनेर बताउँछन्।
## ब्राउजर एक्सटेन्सनहरू
किन तपाईं ब्राउजर एक्सटेन्सन बनाउने चाहनुहुन्छ? यो ब्राउजरमा जोड्नको लागि एक उपयोगी कुरा हो जब तपाईं बारम्बार दोहोरिने कार्यहरूमा छिटो पहुँच चाहनुहुन्छ। उदाहरणका लागि, यदि तपाईंले आफूले अन्तरक्रिया गर्ने विभिन्न वेब पृष्ठहरूमा रंगहरू जाँच गर्न आवश्यक छ भने, तपाईंले रंग-पिकर ब्राउजर एक्सटेन्सन स्थापना गर्न सक्नुहुन्छ। यदि तपाईंलाई पासवर्ड सम्झन गाह्रो छ भने, तपाईंले पासवर्ड-व्यवस्थापन ब्राउजर एक्सटेन्सन प्रयोग गर्न सक्नुहुन्छ।
ब्राउजर एक्सटेन्सनहरू विकास गर्न रमाइलो हुन्छ। तिनीहरूले सीमित संख्याका कार्यहरू व्यवस्थापन गर्छन् जुन तिनीहरूले राम्रोसँग प्रदर्शन गर्छन्।
✅ तपाईंको मनपर्ने ब्राउजर एक्सटेन्सनहरू के हुन्? तिनीहरूले के कार्यहरू गर्छन्?
### एक्सटेन्सनहरू स्थापना गर्दै
तपाईंले निर्माण सुरु गर्नु अघि, ब्राउजर एक्सटेन्सन निर्माण र तैनातीको प्रक्रियालाई हेर्नुहोस्। प्रत्येक ब्राउजरले यो कार्यलाई कसरी व्यवस्थापन गर्छ भन्ने कुरामा थोरै फरक भए पनि, क्रोम र फायरफक्समा प्रक्रिया एजको यो उदाहरणसँग मिल्दोजुल्दो छ:
> नोट: सुनिश्चित गर्नुहोस् कि डेभलपर मोड अन टगल गरिएको छ र अन्य स्टोरहरूबाट एक्सटेन्सन अनुमति दिइएको छ।
सारमा, प्रक्रिया यस्तो हुनेछ:
- `npm run build` प्रयोग गरेर आफ्नो एक्सटेन्सन निर्माण गर्नुहोस्
- ब्राउजरमा "सेटिङ्स र थप" बटन (माथि दायाँतिरको `...` आइकन) प्रयोग गरेर एक्सटेन्सन प्यानमा नेभिगेट गर्नुहोस्
- यदि यो नयाँ स्थापना हो भने, `load unpacked` चयन गर्नुहोस् र यसको निर्माण फोल्डरबाट (हाम्रो केसमा `/dist`) नयाँ एक्सटेन्सन अपलोड गर्नुहोस्
- वा, यदि पहिले नै स्थापना गरिएको एक्सटेन्सन पुनः लोड गर्दै हुनुहुन्छ भने, `reload` क्लिक गर्नुहोस्
✅ यी निर्देशनहरू तपाईंले आफैंले बनाएको एक्सटेन्सनहरूमा लागू हुन्छन्; ब्राउजर एक्सटेन्सन स्टोरमा जारी गरिएका एक्सटेन्सनहरू स्थापना गर्नको लागि, तपाईंले प्रत्येक ब्राउजरसँग सम्बन्धित [स्टोरहरू](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home) मा नेभिगेट गर्नुपर्छ र आफ्नो रोजाइको एक्सटेन्सन स्थापना गर्नुपर्छ।
### सुरु गर्नुहोस्
तपाईं एउटा ब्राउजर एक्सटेन्सन निर्माण गर्न जाँदै हुनुहुन्छ जसले तपाईंको क्षेत्रको कार्बन फुटप्रिन्ट देखाउँछ, तपाईंको क्षेत्रको ऊर्जा प्रयोग र ऊर्जा स्रोत देखाउँदै। एक्सटेन्सनमा एउटा फारम हुनेछ जसले API कुञ्जी सङ्कलन गर्नेछ ताकि तपाईं CO2 Signal को API पहुँच गर्न सक्नुहुन्छ।
**तपाईंलाई चाहिन्छ:**
- [एक API कुञ्जी](https://www.co2signal.com/); यस पृष्ठमा आफ्नो इमेल प्रविष्ट गर्नुहोस् र तपाईंलाई एक पठाइनेछ
- [तपाईंको क्षेत्रको कोड](http://api.electricitymap.org/v3/zones) जुन [Electricity Map](https://www.electricitymap.org/map) सँग मेल खान्छ (उदाहरणका लागि, बोस्टनमा, म 'US-NEISO' प्रयोग गर्छु।)
- [स्टार्टर कोड](../../../../5-browser-extension/start)। `start` फोल्डर डाउनलोड गर्नुहोस्; तपाईंले यस फोल्डरमा कोड पूरा गर्नु पर्नेछ।
- [NPM](https://www.npmjs.com) - NPM एक प्याकेज व्यवस्थापन उपकरण हो; यसलाई स्थानीय रूपमा स्थापना गर्नुहोस् र तपाईंको `package.json` फाइलमा सूचीबद्ध प्याकेजहरू वेब सम्पत्तिको लागि प्रयोग गर्न स्थापना गरिनेछ।
✅ प्याकेज व्यवस्थापनको बारेमा थप जान्नको लागि यो [उत्कृष्ट लर्न मोड्युल](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-77807-sagibbon) हेर्नुहोस्।
कोडबेस हेर्नका लागि एक मिनेट समय लिनुहोस्:
dist
-|manifest.json (डिफल्ट सेटिङ्स यहाँ)
-|index.html (फ्रन्ट-एन्ड HTML मार्कअप यहाँ)
-|background.js (ब्याकग्राउन्ड JS यहाँ)
-|main.js (बन्डल गरिएको JS)
src
-|index.js (तपाईंको JS कोड यहाँ जान्छ)
✅ एकपटक तपाईंले आफ्नो API कुञ्जी र क्षेत्र कोड तयार पार्नुभयो भने, भविष्यमा प्रयोगको लागि तिनीहरूलाई नोटमा सुरक्षित राख्नुहोस्।
### एक्सटेन्सनको लागि HTML निर्माण गर्नुहोस्
यस एक्सटेन्सनमा दुईवटा दृश्यहरू छन्। एउटा API कुञ्जी र क्षेत्र कोड सङ्कलन गर्न:
र दोस्रो क्षेत्रको कार्बन प्रयोग देखाउन:
आउनुहोस्, फारमको लागि HTML निर्माण गरेर CSS द्वारा स्टाइलिङ सुरु गरौं।
`/dist` फोल्डरमा, तपाईंले फारम र नतिजा क्षेत्र निर्माण गर्नुहुनेछ। `index.html` फाइलमा, निर्दिष्ट गरिएको फारम क्षेत्रलाई भर्नुहोस्:
```HTML
```
यो फारम हो जहाँ तपाईंको सुरक्षित जानकारी स्थानीय स्टोरेजमा इनपुट र सुरक्षित गरिनेछ।
त्यसपछि, नतिजा क्षेत्र निर्माण गर्नुहोस्; अन्तिम फारम ट्यागको तल केही divs थप्नुहोस्:
```HTML
loading...
Region:
Carbon Usage:
Fossil Fuel Percentage:
```
यस बिन्दुमा, तपाईंले निर्माण प्रयास गर्न सक्नुहुन्छ। सुनिश्चित गर्नुहोस् कि यस एक्सटेन्सनको प्याकेज निर्भरता स्थापना गरिएको छ:
```
npm install
```
यो कमाण्डले npm, Node Package Manager प्रयोग गरेर तपाईंको एक्सटेन्सनको निर्माण प्रक्रियाको लागि webpack स्थापना गर्नेछ। तपाईंले यस प्रक्रियाको आउटपुट `/dist/main.js` मा हेर्न सक्नुहुन्छ - तपाईंले देख्नुहुनेछ कि कोड बन्डल गरिएको छ।
हालको लागि, एक्सटेन्सनले निर्माण गर्नुपर्छ र यदि तपाईंले यसलाई एजमा एक्सटेन्सनको रूपमा तैनाती गर्नुभयो भने, तपाईंले एक राम्रोसँग प्रदर्शन गरिएको फारम देख्नुहुनेछ।
बधाई छ, तपाईंले ब्राउजर एक्सटेन्सन निर्माण गर्ने पहिलो कदम चालेको छ। आगामी पाठहरूमा, तपाईं यसलाई अझ कार्यात्मक र उपयोगी बनाउनुहुनेछ।
## GitHub Copilot Agent Challenge 🚀
Agent मोड प्रयोग गरेर निम्न चुनौती पूरा गर्नुहोस्:
**विवरण:** ब्राउजर एक्सटेन्सनलाई सुधार गर्दै फारम मान्यता र प्रयोगकर्ता प्रतिक्रिया सुविधाहरू थप्नुहोस् ताकि API कुञ्जी र क्षेत्र कोड प्रविष्ट गर्दा प्रयोगकर्ता अनुभव सुधार होस्।
**प्रेरणा:** API कुञ्जी क्षेत्रमा कम्तिमा २० अक्षरहरू छन् कि छैनन् र क्षेत्र कोड सही ढाँचामा छ कि छैन (जस्तै 'US-NEISO') जाँच गर्ने JavaScript मान्यता कार्यहरू सिर्जना गर्नुहोस्। मान्य इनपुटहरूको लागि इनपुट सीमा रंगलाई हरियोमा परिवर्तन गरेर र अमान्यहरूको लागि रातोमा परिवर्तन गरेर दृश्य प्रतिक्रिया थप्नुहोस्। साथै सुरक्षा उद्देश्यका लागि API कुञ्जी देखाउने/लुकाउने टगल सुविधा पनि थप्नुहोस्।
---
## 🚀 चुनौती
ब्राउजर एक्सटेन्सन स्टोरलाई हेर्नुहोस् र आफ्नो ब्राउजरमा एउटा स्थापना गर्नुहोस्। तपाईंले यसको फाइलहरू रोचक तरिकामा जाँच गर्न सक्नुहुन्छ। तपाईंले के पत्ता लगाउनुहुन्छ?
## पोस्ट-लेक्चर क्विज
[पोस्ट-लेक्चर क्विज](https://ff-quizzes.netlify.app/web/quiz/24)
## समीक्षा र आत्म अध्ययन
यस पाठमा तपाईंले वेब ब्राउजरको इतिहासको बारेमा थोरै सिक्नुभयो; यस अवसरलाई वेबको इतिहासको बारेमा थप जान्न प्रयोग गर्नुहोस्। वेबको इतिहासको बारेमा पढ्नका लागि केही उपयोगी साइटहरू समावेश छन्:
[वेब ब्राउजरहरूको इतिहास](https://www.mozilla.org/firefox/browsers/browser-history/)
[वेबको इतिहास](https://webfoundation.org/about/vision/history-of-the-web/)
[टिम बर्नर्स-लीसँगको अन्तर्वार्ता](https://www.theguardian.com/technology/2019/mar/12/tim-berners-lee-on-30-years-of-the-web-if-we-dream-a-little-we-can-get-the-web-we-want)
## असाइनमेन्ट
[तपाईंको एक्सटेन्सनलाई पुनः स्टाइल गर्नुहोस्](assignment.md)
---
**अस्वीकरण**:
यो दस्तावेज AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादमा त्रुटि वा अशुद्धता हुन सक्छ। यसको मूल भाषा मा रहेको मूल दस्तावेजलाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।