# ब्राउजर एक्सटेन्सन प्रोजेक्ट भाग २: API कल गर्नुहोस्, लोकल स्टोरेज प्रयोग गर्नुहोस् ## प्रि-लेक्चर क्विज [प्रि-लेक्चर क्विज](https://ff-quizzes.netlify.app/web/quiz/25) ## परिचय तपाईंले सुरु गरेको ब्राउजर एक्सटेन्सन सम्झनुहोस्? अहिले तपाईंले राम्रो देखिने फारम बनाउनु भएको छ, तर यो मुख्य रूपमा स्थिर छ। आज हामी यसलाई वास्तविक डाटासँग जोडेर र यसलाई मेमोरी दिने काम गरेर जीवन्त बनाउनेछौं। अपोलो मिशन कन्ट्रोल कम्प्युटरहरूको बारेमा सोच्नुहोस् - तिनीहरूले स्थिर जानकारी मात्र देखाएनन्। तिनीहरूले लगातार अन्तरिक्ष यानसँग संवाद गरे, टेलिमेट्री डाटासँग अपडेट गरे, र महत्वपूर्ण मिशन प्यारामिटरहरू सम्झिए। आज हामी यस्तै गतिशील व्यवहार निर्माण गर्दैछौं। तपाईंको एक्सटेन्सनले इन्टरनेटमा पुग्नेछ, वास्तविक वातावरणीय डाटा लिनेछ, र अर्को पटकका लागि तपाईंको सेटिङहरू सम्झिनेछ। API एकीकरण जटिल लाग्न सक्छ, तर यो वास्तवमा तपाईंको कोडलाई अन्य सेवाहरूसँग संवाद गर्न सिकाउने कुरा हो। चाहे तपाईं मौसम डाटा, सामाजिक मिडिया फिडहरू, वा कार्बन फुटप्रिन्ट जानकारी जस्तै हामी आज गर्नेछौं, यो सबै डिजिटल कनेक्शन स्थापना गर्ने बारे हो। हामी ब्राउजरहरूले जानकारी कसरी स्थायी बनाउन सक्छन् भन्ने कुरा पनि अन्वेषण गर्नेछौं - जस्तै पुस्तकालयहरूले पुस्तकहरू कहाँ राख्ने भनेर सम्झन कार्ड क्याटलग प्रयोग गरेका थिए। यस पाठको अन्त्यसम्ममा, तपाईंले वास्तविक डाटा ल्याउने, प्रयोगकर्ता प्राथमिकताहरू भण्डारण गर्ने, र सहज अनुभव प्रदान गर्ने ब्राउजर एक्सटेन्सन बनाउनु हुनेछ। सुरु गरौं! ✅ उपयुक्त फाइलहरूमा क्रमांकित खण्डहरू अनुसरण गर्नुहोस् ताकि तपाईंको कोड कहाँ राख्ने थाहा पाउन सक्नुहोस्। ## एक्सटेन्सनमा परिवर्तन गर्नका लागि तत्वहरू सेट गर्नुहोस् तपाईंको जाभास्क्रिप्टले इन्टरफेसलाई परिवर्तन गर्न सक्नु अघि, यसलाई विशिष्ट HTML तत्वहरूको सन्दर्भहरू चाहिन्छ। यसलाई टेलिस्कोपले विशेष ताराहरूमा केन्द्रित हुन आवश्यक छ जस्तै सोच्नुहोस् - ग्यालिलियोले बृहस्पति ग्रहको चन्द्रमाहरू अध्ययन गर्नुअघि, उसले बृहस्पति आफैंलाई पत्ता लगाउन र केन्द्रित गर्नुपर्थ्यो। तपाईंको `index.js` फाइलमा, हामी `const` भेरिएबलहरू सिर्जना गर्नेछौं जसले प्रत्येक महत्वपूर्ण फारम तत्वको सन्दर्भहरू कब्जा गर्छ। यो वैज्ञानिकहरूले आफ्नो उपकरणहरू लेबल गर्ने तरिकासँग मिल्दोजुल्दो छ - प्रत्येक पटक प्रयोगशालामा खोजी गर्नको सट्टा, उनीहरूले सीधा आवश्यक वस्तुहरू पहुँच गर्न सक्छन्। ```javascript // form fields const form = document.querySelector('.form-data'); const region = document.querySelector('.region-name'); const apiKey = document.querySelector('.api-key'); // results const errors = document.querySelector('.errors'); const loading = document.querySelector('.loading'); const results = document.querySelector('.result-container'); const usage = document.querySelector('.carbon-usage'); const fossilfuel = document.querySelector('.fossil-fuel'); const myregion = document.querySelector('.my-region'); const clearBtn = document.querySelector('.clear-btn'); ``` **यस कोडले के गर्छ:** - फारम तत्वहरूलाई `document.querySelector()` प्रयोग गरेर CSS क्लास चयनकर्तासँग **कब्जा गर्छ**। - क्षेत्र नाम र API कुञ्जीका लागि इनपुट फिल्डहरूको सन्दर्भहरू **सिर्जना गर्छ**। - कार्बन प्रयोग डाटाका लागि परिणाम प्रदर्शन तत्वहरूसँग **जोड्दछ**। - लोडिङ संकेतकहरू र त्रुटि सन्देशहरू जस्ता UI तत्वहरूमा पहुँच **सेट अप गर्छ**। - **प्रत्येक तत्व सन्दर्भलाई** `const` भेरिएबलमा भण्डारण गर्छ ताकि तपाईंको कोडमा सजिलै पुन: प्रयोग गर्न सकियोस्। ## इभेन्ट लिसनरहरू थप्नुहोस् अब हामी तपाईंको एक्सटेन्सनलाई प्रयोगकर्ताको क्रियाकलापहरूमा प्रतिक्रिया दिन बनाउनेछौं। इभेन्ट लिसनरहरू तपाईंको कोडले प्रयोगकर्ताको अन्तरक्रियाहरू निगरानी गर्ने तरिका हो। यसलाई प्रारम्भिक टेलिफोन एक्सचेन्जका अपरेटरहरू जस्तै सोच्नुहोस् - उनीहरूले आउने कलहरूको लागि सुने र कसैले जडान गर्न चाहेको बेला सही सर्किटहरू जडान गरे। ```javascript form.addEventListener('submit', (e) => handleSubmit(e)); clearBtn.addEventListener('click', (e) => reset(e)); init(); ``` **यी अवधारणाहरू बुझ्दै:** - फारममा सबमिट लिसनर **जोड्छ**, जसले प्रयोगकर्ताहरूले इन्टर थिच्दा वा सबमिट क्लिक गर्दा ट्रिगर गर्छ। - फारम रिसेट गर्नका लागि क्लियर बटनमा क्लिक लिसनर **जोड्छ**। - थप नियन्त्रणका लागि इभेन्ट वस्तु `(e)` ह्यान्डलर फङ्सनहरूमा **पठाउँछ**। - तपाईंको एक्सटेन्सनको प्रारम्भिक अवस्था सेट अप गर्न `init()` फङ्सनलाई तुरुन्तै **कल गर्छ**। ✅ यहाँ प्रयोग गरिएको छोटो एरो फङ्सन सिन्ट्याक्सलाई नोट गर्नुहोस्। यो आधुनिक जाभास्क्रिप्ट दृष्टिकोण परम्परागत फङ्सन अभिव्यक्तिहरू भन्दा सफा छ, तर दुवै समान रूपमा काम गर्छन्! ## इनिसियलाइजेसन र रिसेट फङ्सनहरू निर्माण गर्नुहोस् अब तपाईंको एक्सटेन्सनको इनिसियलाइजेसन तर्क सिर्जना गरौं। `init()` फङ्सन जहाजको नेभिगेसन प्रणाली जस्तै हो जसले आफ्नो उपकरणहरू जाँच गर्छ - यसले वर्तमान अवस्था निर्धारण गर्छ र इन्टरफेसलाई तदनुसार समायोजन गर्छ। यसले कसैले पहिले तपाईंको एक्सटेन्सन प्रयोग गरेको छ कि छैन जाँच गर्छ र तिनीहरूको अघिल्लो सेटिङहरू लोड गर्छ। `reset()` फङ्सनले प्रयोगकर्ताहरूलाई नयाँ सुरुवात प्रदान गर्छ - जस्तै वैज्ञानिकहरूले आफ्नो उपकरणहरू प्रयोगहरू बीच रिसेट गर्छन् ताकि सफा डाटा सुनिश्चित गर्न सकियोस्। ```javascript function init() { // Check if user has previously saved API credentials const storedApiKey = localStorage.getItem('apiKey'); const storedRegion = localStorage.getItem('regionName'); // Set extension icon to generic green (placeholder for future lesson) // TODO: Implement icon update in next lesson if (storedApiKey === null || storedRegion === null) { // First-time user: show the setup form form.style.display = 'block'; results.style.display = 'none'; loading.style.display = 'none'; clearBtn.style.display = 'none'; errors.textContent = ''; } else { // Returning user: load their saved data automatically displayCarbonUsage(storedApiKey, storedRegion); results.style.display = 'none'; form.style.display = 'none'; clearBtn.style.display = 'block'; } } function reset(e) { e.preventDefault(); // Clear stored region to allow user to choose a new location localStorage.removeItem('regionName'); // Restart the initialization process init(); } ``` **यहाँ के हुन्छ भन्ने कुरा तोड्दै:** - ब्राउजरको लोकल स्टोरेजबाट भण्डारित API कुञ्जी र क्षेत्र पुन: प्राप्त **गर्छ**। - यो पहिलो पटक प्रयोगकर्ता हो (कुनै भण्डारित प्रमाणहरू छैनन्) वा पुन: आउने प्रयोगकर्ता हो भनेर **जाँच गर्छ**। - नयाँ प्रयोगकर्ताहरूका लागि सेटअप फारम **देखाउँछ** र अन्य इन्टरफेस तत्वहरू लुकाउँछ। - पुन: आउने प्रयोगकर्ताहरूका लागि स्वत: भण्डारित डाटा **लोड गर्छ** र रिसेट विकल्प **देखाउँछ**। - उपलब्ध डाटाको आधारमा प्रयोगकर्ता इन्टरफेसको अवस्था **व्यवस्थापन गर्छ**। **लोकल स्टोरेजको बारेमा मुख्य अवधारणाहरू:** - ब्राउजर सत्रहरू बीच डाटा **स्थायी बनाउँछ** (सत्र स्टोरेजको विपरीत)। - `getItem()` र `setItem()` प्रयोग गरेर डाटालाई कुञ्जी-मूल्य जोडीको रूपमा **भण्डारण गर्छ**। - दिइएको कुञ्जीको लागि कुनै डाटा नभएको अवस्थामा `null` **फिर्ता गर्छ**। - प्रयोगकर्ता प्राथमिकताहरू र सेटिङहरू सम्झनको लागि सरल तरिका **प्रदान गर्छ**। > 💡 **ब्राउजर स्टोरेज बुझ्दै**: [LocalStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage) तपाईंको एक्सटेन्सनलाई स्थायी मेमोरी दिने जस्तै हो। प्राचीन अलेक्जेन्ड्रिया पुस्तकालयले स्क्रोलहरू भण्डारण गरेको जस्तै - जानकारी उपलब्ध रहन्थ्यो जब विद्वानहरू छोड्थे र फर्कन्थे। > > **मुख्य विशेषताहरू:** > - ब्राउजर बन्द गरेपछि पनि डाटा **स्थायी रहन्छ**। > - कम्प्युटर पुन: सुरु र ब्राउजर क्र्यासपछि पनि **बाँच्छ**। > - प्रयोगकर्ता प्राथमिकताहरूका लागि पर्याप्त भण्डारण स्थान **प्रदान गर्छ**। > - नेटवर्क ढिलाइ बिना तुरुन्त पहुँच **प्रदान गर्छ**। > **महत्वपूर्ण नोट**: तपाईंको ब्राउजर एक्सटेन्सनको आफ्नै अलग लोकल स्टोरेज छ जुन नियमित वेब पृष्ठहरूबाट अलग छ। यसले सुरक्षा प्रदान गर्छ र अन्य वेबसाइटहरूसँग द्वन्द्व रोक्छ। तपाईं आफ्नो भण्डारित डाटा ब्राउजर डेभलपर टूल्स (F12) खोल्दै, **Application** ट्याबमा नेभिगेट गर्दै, र **Local Storage** सेक्सन विस्तार गरेर हेर्न सक्नुहुन्छ।  > ⚠️ **सुरक्षा विचार**: उत्पादन अनुप्रयोगहरूमा, लोकल स्टोरेजमा API कुञ्जीहरू भण्डारण गर्दा सुरक्षा जोखिमहरू हुन्छन् किनभने जाभास्क्रिप्टले यो डाटामा पहुँच गर्न सक्छ। सिक्ने उद्देश्यका लागि, यो दृष्टिकोण ठीक छ, तर वास्तविक अनुप्रयोगहरूले संवेदनशील प्रमाणहरूको लागि सुरक्षित सर्भर-साइड स्टोरेज प्रयोग गर्नुपर्छ। ## फारम सबमिशन ह्यान्डल गर्नुहोस् अब हामी कसैले तपाईंको फारम सबमिट गर्दा के हुन्छ भन्ने कुरा ह्यान्डल गर्नेछौं। डिफल्ट रूपमा, ब्राउजरहरूले फारम सबमिट गर्दा पृष्ठ पुन: लोड गर्छन्, तर हामी यस व्यवहारलाई रोक्नेछौं ताकि सहज अनुभव सिर्जना गर्न सकियोस्। यो दृष्टिकोण मिशन कन्ट्रोलले अन्तरिक्ष यानसँगको संवाद ह्यान्डल गर्ने तरिकासँग मेल खान्छ - प्रत्येक प्रसारणको लागि सम्पूर्ण प्रणाली रिसेट गर्ने सट्टा, तिनीहरूले नयाँ जानकारी प्रशोधन गर्दा निरन्तर सञ्चालन कायम राख्छन्। फारम सबमिशन इभेन्टलाई कब्जा गर्ने र प्रयोगकर्ताको इनपुट निकाल्ने फङ्सन सिर्जना गर्नुहोस्: ```javascript function handleSubmit(e) { e.preventDefault(); setUpUser(apiKey.value, region.value); } ``` **माथिकोमा, हामीले:** - पृष्ठलाई रिफ्रेस गर्ने डिफल्ट फारम सबमिशन व्यवहारलाई **रोक्छ**। - API कुञ्जी र क्षेत्र फिल्डहरूबाट प्रयोगकर्ता इनपुट मानहरू **निकाल्छ**। - फारम डाटालाई `setUpUser()` फङ्सनमा प्रशोधनका लागि **पठाउँछ**। - पृष्ठ रिफ्रेस नगरी एकल-पृष्ठ अनुप्रयोग व्यवहार **राख्छ**। ✅ तपाईंको HTML फारम फिल्डहरूमा `required` एट्रिब्युट समावेश छ, त्यसैले ब्राउजरले स्वत: मान्य गर्छ कि प्रयोगकर्ताहरूले यो फङ्सन चल्नु अघि API कुञ्जी र क्षेत्र दुवै प्रदान गरेका छन्। ## प्रयोगकर्ता प्राथमिकताहरू सेट गर्नुहोस् `setUpUser` फङ्सन प्रयोगकर्ताको प्रमाणहरू बचत गर्ने र पहिलो API कल सुरु गर्ने जिम्मेवार छ। यसले सेटअपबाट परिणामहरू प्रदर्शन गर्न सहज संक्रमण सिर्जना गर्छ। ```javascript function setUpUser(apiKey, regionName) { // Save user credentials for future sessions localStorage.setItem('apiKey', apiKey); localStorage.setItem('regionName', regionName); // Update UI to show loading state loading.style.display = 'block'; errors.textContent = ''; clearBtn.style.display = 'block'; // Fetch carbon usage data with user's credentials displayCarbonUsage(apiKey, regionName); } ``` **चरणबद्ध रूपमा, यहाँ के हुन्छ:** - भविष्यमा प्रयोगका लागि API कुञ्जी र क्षेत्र नाम लोकल स्टोरेजमा **बचत गर्छ**। - डाटा लिइरहेको जानकारी दिन प्रयोगकर्ताहरूलाई लोडिङ संकेतक **देखाउँछ**। - प्रदर्शनबाट कुनै पनि अघिल्लो त्रुटि सन्देशहरू **मेट्छ**। - प्रयोगकर्ताहरूलाई पछि आफ्नो सेटिङहरू रिसेट गर्न क्लियर बटन **देखाउँछ**। - वास्तविक कार्बन प्रयोग डाटा ल्याउन API कल **सुरु गर्छ**। यस फङ्सनले डाटा स्थायित्व र प्रयोगकर्ता इन्टरफेस अपडेटहरूलाई एक समन्वित कार्यमा व्यवस्थापन गरेर सहज प्रयोगकर्ता अनुभव सिर्जना गर्छ। ## कार्बन प्रयोग डाटा प्रदर्शन गर्नुहोस् अब हामी तपाईंको एक्सटेन्सनलाई API मार्फत बाह्य डाटा स्रोतहरूसँग जडान गर्नेछौं। यसले तपाईंको एक्सटेन्सनलाई एकल उपकरणबाट इन्टरनेटभरि वास्तविक-समय जानकारी पहुँच गर्न सक्ने चीजमा रूपान्तरण गर्छ। **API बुझ्दै** [APIs](https://www.webopedia.com/TERM/A/API.html) विभिन्न अनुप्रयोगहरू एकअर्कासँग संवाद गर्ने तरिका हो। यसलाई १९ औं शताब्दीमा टेलिग्राफ प्रणाली जस्तै सोच्नुहोस् - अपरेटरहरूले टाढाका स्टेशनहरूमा अनुरोध पठाउँथे र अनुरोध गरिएको जानकारीको साथ प्रतिक्रिया प्राप्त गर्थे। तपाईंले सामाजिक मिडिया जाँच गर्दा, भ्वाइस असिस्टेन्टलाई प्रश्न सोध्दा, वा डेलिभरी एप प्रयोग गर्दा, APIहरूले यी डाटा आदानप्रदानहरूलाई सहज बनाइरहेका छन्। **REST APIहरूको मुख्य अवधारणाहरू:** - **REST** को अर्थ 'Representational State Transfer' हो। - डाटासँग अन्तरक्रिया गर्न मानक HTTP विधिहरू (GET, POST, PUT, DELETE) **प्रयोग गर्छ**। - सामान्यतया JSON मा डाटा **फिर्ता गर्छ**। - विभिन्न प्रकारका अनुरोधहरूको लागि URL-आधारित अन्त बिन्दुहरू **प्रदान गर्छ**। ✅ [CO2 Signal API](https://www.co2signal.com/) हामीले प्रयोग गर्नेछौं, विश्वभरि विद्युत ग्रिडहरूबाट वास्तविक-समय कार्बन तीव्रता डाटा प्रदान गर्छ। यसले प्रयोगकर्ताहरूलाई उनीहरूको विद्युत प्रयोगको वातावरणीय प्रभाव बुझ्न मद्दत गर्छ! > 💡 **असिन्क्रोनस जाभास्क्रिप्ट बुझ्दै**: [`async` कीवर्ड](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function) तपाईंको कोडलाई एकै समयमा धेरै अपरेसनहरू ह्यान्डल गर्न सक्षम बनाउँछ। जब तपाईं सर्भरबाट डाटा अनुरोध गर्नुहुन्छ, तपाईं आफ्नो सम्पूर्ण एक्सटेन्सनलाई फ्रिज गर्न चाहनुहुन्न - यो एउटा विमानले प्रतिक्रिया दिन पर्खँदा एयर ट्राफिक कन्ट्रोलले सबै अपरेसनहरू रोक्ने जस्तै हुनेछ। > > **मुख्य फाइदाहरू:** > - डाटा लोड हुँदा एक्सटेन्सनको प्रतिक्रिया क्षमता **राख्छ**। > - नेटवर्क अनुरोधहरूका क्रममा अन्य कोड **सञ्चालन गर्न अनुमति दिन्छ**। > - परम्परागत कलब्याक ढाँचाहरूको तुलनामा कोड पढ्न सजिलो **बनाउँछ**। > - नेटवर्क समस्याहरूको लागि ग्रेसफुल त्रुटि ह्यान्डलिङ **सक्षम बनाउँछ**। `async` को बारेमा छिटो भिडियो यहाँ छ: [](https://youtube.com/watch?v=YwmlRkrxvkk "Async र Await द्वारा प्रबन्धित प्रॉमिसहरू") > 🎥 Async/await को बारेमा भिडियो हेर्न माथिको छवि क्लिक गर्नुहोस्। कार्बन प्रयोग डाटा ल्याउन र प्रदर्शन गर्न फङ्सन सिर्जना गर्नुहोस्: ```javascript // Modern fetch API approach (no external dependencies needed) async function displayCarbonUsage(apiKey, region) { try { // Fetch carbon intensity data from CO2 Signal API const response = await fetch('https://api.co2signal.com/v1/latest', { method: 'GET', headers: { 'auth-token': apiKey, 'Content-Type': 'application/json' }, // Add query parameters for the specific region ...new URLSearchParams({ countryCode: region }) && { url: `https://api.co2signal.com/v1/latest?countryCode=${region}` } }); // Check if the API request was successful if (!response.ok) { throw new Error(`API request failed: ${response.status}`); } const data = await response.json(); const carbonData = data.data; // Calculate rounded carbon intensity value const carbonIntensity = Math.round(carbonData.carbonIntensity); // Update the user interface with fetched data loading.style.display = 'none'; form.style.display = 'none'; myregion.textContent = region.toUpperCase(); usage.textContent = `${carbonIntensity} grams (grams CO₂ emitted per kilowatt hour)`; fossilfuel.textContent = `${carbonData.fossilFuelPercentage.toFixed(2)}% (percentage of fossil fuels used to generate electricity)`; results.style.display = 'block'; // TODO: calculateColor(carbonIntensity) - implement in next lesson } catch (error) { console.error('Error fetching carbon data:', error); // Show user-friendly error message loading.style.display = 'none'; results.style.display = 'none'; errors.textContent = 'Sorry, we couldn\'t fetch data for that region. Please check your API key and region code.'; } } ``` **यहाँ के हुन्छ भन्ने कुरा तोड्दै:** - बाह्य पुस्तकालयहरू जस्तै Axios को सट्टा आधुनिक `fetch()` API **प्रयोग गर्छ** ताकि सफा, निर्भरता-रहित कोड होस्। - `response.ok` को साथ उचित त्रुटि जाँच **लागु गर्छ** ताकि API असफलताहरूलाई प्रारम्भिक रूपमा समात्न सकियोस्। - असिन्क्रोनस अपरेसनहरू `async/await` को साथ **ह्यान्डल गर्छ** ताकि कोड फ्लो पढ्न सजिलो होस्। - CO2 Signal APIसँग `auth-token` हेडर प्रयोग गरेर **प्रमाणिकरण गर्छ**। - JSON प्रतिक्रिया डाटा **पार्स गर्छ** र कार्बन तीव्रता जानकारी निकाल्छ। - धेरै UI तत्वहरूलाई स्वरूपित वातावरणीय डाटासँग **अपडेट गर्छ**। - API कल असफल हुँदा प्रयोगकर्ता-अनुकूल त्रुटि सन्देशहरू **प्रदान गर्छ**। **प्रदर्शन गरिएको आधुनिक जाभास्क्रिप्ट अवधारणाहरू:** - `${}` सिन्ट्याक्सको साथ **टेम्पलेट लिटरलहरू** सफा स्ट्रिङ स्वरूपणका लागि। - **त्रुटि ह्यान्डलिङ** try/catch ब्लकहरूको साथ मजबुत अनुप्रयोगहरूको लागि। - **Async/await** ढाँचा नेटवर्क अनुरोधहरूलाई ग्रेसफुली ह्यान्डल गर्न। - API प्रतिक्रियाबाट विशिष्ट डाटा निकाल्न **अवजेक्ट डेस्ट्रक्चरिङ**। - धेरै DOM परिवर्तनहरूको लागि **म्याथड चेनिङ**। ✅ यो फङ्सनले धेरै महत्त्वपूर्ण वेब विकास अवधारणाहरू प्रदर्शन गर्छ - बाह्य सर्भरहरूसँग संवाद गर्ने, प्रमाणीकरण ह्यान्डल गर्ने, डाटा प्रशोधन गर्ने, इन्टरफेस अपडेट गर्ने, र त्रुटिहरूलाई ग्रेसफुली व्यवस्थापन गर्ने। यी पेशेवर विकासकर्ताहरूले नियमित रूपमा प्रयोग गर्ने आधारभूत सीपहरू हुन्। 🎉 **तपाईंले के हासिल गर्नुभयो:** तपाईंले यस्तो ब्राउजर एक्सटेन्सन सिर्जना गर्नुभयो जसले: - इन्टरनेटसँग **जोड्छ** र वास्तविक वातावरणीय डाटा ल्याउँछ। - प्रयोगकर्ता सेटिङहरू सत्रहरू बीच **स्थायी बनाउँछ**। - त्रुटिहरूलाई ग्रेसफुली ह्यान्डल गर्छ, क्र्यास नगरी। - **सजिलो, व्यावसायिक प्रयोगकर्ता अनुभव प्रदान गर्छ**। `npm run build` चलाएर र ब्राउजरमा तपाईंको एक्सटेन्सन रिफ्रेस गरेर आफ्नो काम परीक्षण गर्नुहोस्। तपाईंले अब एक कार्यात्मक कार्बन फुटप्रिन्ट ट्र्याकर बनाउनु भएको छ। अर्को पाठले एक्सटेन्सन पूरा गर्न गतिशील आइकन कार्यक्षमता थप्नेछ। --- ## GitHub Copilot Agent चुनौती 🚀 Agent मोड प्रयोग गरेर निम्न चुनौती पूरा गर्नुहोस्: **विवरण:** ब्राउजर एक्सटेन्सनलाई त्रुटि ह्यान्डलिङ सुधार र प्रयोगकर्ता अनुभव सुविधाहरू थपेर सुधार गर्नुहोस्। यो चुनौतीले तपाईंलाई API, लोकल स्टोरेज, र आधुनिक जाभास्क्रिप्ट ढाँचाहरू प्रयोग गरेर DOM म्यानिपुलेसनको अभ्यास गर्न मद्दत गर्नेछ। **प्रेरणा:** `displayCarbonUsage` फङ्सनको सुधार गरिएको संस्करण सिर्जना गर्नुहोस् जसमा समावेश छ: १) असफल API कलहरूको लागि एक्सपोनेंश तपाईंले यस पाठमा LocalStorage र APIs को बारेमा सिक्नुभयो, जुन पेशेवर वेब विकासकर्ताका लागि धेरै उपयोगी छन्। के तपाईं यी दुई चीजहरू कसरी सँगै काम गर्छन् भनेर सोच्न सक्नुहुन्छ? सोच्नुहोस् कि तपाईं कसरी एउटा वेबसाइट डिजाइन गर्नुहुन्छ जसले API द्वारा प्रयोग गरिने वस्तुहरू भण्डारण गर्दछ। ## असाइनमेन्ट [एडप्ट एन API](assignment.md) --- **अस्वीकरण**: यो दस्तावेज AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषा मा रहेको मूल दस्तावेजलाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।