# براؤزر ایکسٹینشن پروجیکٹ حصہ 1: براؤزرز کے بارے میں سب کچھ
> اسکیچ نوٹ از [وسیم شغام](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)
### تعارف
براؤزر ایکسٹینشنز براؤزر میں اضافی فعالیت فراہم کرتی ہیں۔ لیکن ایک بنانے سے پہلے، آپ کو یہ سیکھنا چاہیے کہ براؤزرز اپنا کام کیسے کرتے ہیں۔
### براؤزر کے بارے میں
اس سبق کے سلسلے میں، آپ سیکھیں گے کہ ایک براؤزر ایکسٹینشن کیسے بنائی جائے جو کروم، فائر فاکس اور ایج براؤزرز پر کام کرے۔ اس حصے میں، آپ دریافت کریں گے کہ براؤزرز کیسے کام کرتے ہیں اور براؤزر ایکسٹینشن کے عناصر کو ترتیب دیں گے۔
لیکن براؤزر اصل میں ہے کیا؟ یہ ایک سافٹ ویئر ایپلیکیشن ہے جو صارف کو سرور سے مواد تک رسائی فراہم کرتی ہے اور اسے ویب صفحات پر دکھاتی ہے۔
✅ تھوڑی سی تاریخ: پہلا براؤزر 'ورلڈ وائیڈ ویب' کہلاتا تھا اور اسے سر ٹموتھی برنرز لی نے 1990 میں بنایا تھا۔
> کچھ ابتدائی براؤزرز، بشکریہ [کارن میکگرین](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
جب کوئی صارف انٹرنیٹ سے URL (یونیفارم ریسورس لوکیٹر) ایڈریس کے ذریعے جڑتا ہے، عام طور پر `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) جو [الیکٹریسٹی میپ](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، نوڈ پیکج مینیجر، کو آپ کی ایکسٹینشن کے بلڈ پروسیس کے لیے ویب پیک انسٹال کرنے کے لیے استعمال کرے گی۔ آپ اس عمل کے آؤٹ پٹ کو `/dist/main.js` میں دیکھ سکتے ہیں - آپ دیکھیں گے کہ کوڈ بنڈل ہو چکا ہے۔
فی الحال، ایکسٹینشن کو بلڈ کرنا چاہیے اور، اگر آپ اسے ایج میں ایکسٹینشن کے طور پر ڈپلائے کریں، تو آپ کو ایک فارم صاف طور پر دکھائی دے گا۔
مبارک ہو، آپ نے براؤزر ایکسٹینشن بنانے کے پہلے اقدامات کر لیے ہیں۔ اگلے اسباق میں، آپ اسے مزید فعال اور مفید بنائیں گے۔
---
## 🚀 چیلنج
براؤزر ایکسٹینشن اسٹور پر ایک نظر ڈالیں اور اپنے براؤزر میں ایک انسٹال کریں۔ آپ اس کی فائلوں کو دلچسپ طریقوں سے جانچ سکتے ہیں۔ آپ کیا دریافت کرتے ہیں؟
## لیکچر کے بعد کا کوئز
[لیکچر کے بعد کا کوئز](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) کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کے لیے کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ ہم اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے ذمہ دار نہیں ہیں۔