# ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਪ੍ਰੋਜੈਕਟ ਭਾਗ 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)
### ਤਾਰਫ਼
ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਵਾਧੂ ਫੰਕਸ਼ਨਲਿਟੀ ਜੋੜਦੇ ਹਨ। ਪਰ ਇੱਕ ਬਣਾਉਣ ਤੋਂ ਪਹਿਲਾਂ, ਤੁਹਾਨੂੰ ਇਹ ਸਿੱਖਣਾ ਚਾਹੀਦਾ ਹੈ ਕਿ ਬ੍ਰਾਊਜ਼ਰ ਆਪਣਾ ਕੰਮ ਕਿਵੇਂ ਕਰਦੇ ਹਨ।
### ਬ੍ਰਾਊਜ਼ਰ ਬਾਰੇ
ਇਸ ਪਾਠਮਾਲਾ ਵਿੱਚ, ਤੁਸੀਂ ਇੱਕ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਬਣਾਉਣ ਦਾ ਤਰੀਕਾ ਸਿੱਖੋਗੇ ਜੋ Chrome, Firefox ਅਤੇ Edge ਬ੍ਰਾਊਜ਼ਰਾਂ 'ਤੇ ਕੰਮ ਕਰੇਗਾ। ਇਸ ਭਾਗ ਵਿੱਚ, ਤੁਸੀਂ ਜਾਣੋਗੇ ਕਿ ਬ੍ਰਾਊਜ਼ਰ ਕਿਵੇਂ ਕੰਮ ਕਰਦੇ ਹਨ ਅਤੇ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਦੇ ਤੱਤਾਂ ਨੂੰ ਬਣਾਉਣ ਦਾ ਤਰੀਕਾ।
ਪਰ ਅਸਲ ਵਿੱਚ ਬ੍ਰਾਊਜ਼ਰ ਕੀ ਹੈ? ਇਹ ਇੱਕ ਸੌਫਟਵੇਅਰ ਐਪਲੀਕੇਸ਼ਨ ਹੈ ਜੋ ਇੱਕ ਯੂਜ਼ਰ ਨੂੰ ਸਰਵਰ ਤੋਂ ਸਮੱਗਰੀ ਤੱਕ ਪਹੁੰਚ ਕਰਨ ਅਤੇ ਇਸਨੂੰ ਵੈੱਬ ਪੇਜਾਂ 'ਤੇ ਦਿਖਾਉਣ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ।
✅ ਥੋੜ੍ਹਾ ਇਤਿਹਾਸ: ਪਹਿਲਾ ਬ੍ਰਾਊਜ਼ਰ 'ਵਰਲਡਵਾਈਡਵੈੱਬ' ਕਿਹਾ ਜਾਂਦਾ ਸੀ ਅਤੇ ਇਹ 1990 ਵਿੱਚ ਸਰ ਟਿਮੋਥੀ ਬਰਨਰਜ਼-ਲੀ ਦੁਆਰਾ ਬਣਾਇਆ ਗਿਆ ਸੀ।
> ਕੁਝ ਪੁਰਾਣੇ ਬ੍ਰਾਊਜ਼ਰ, [ਕੈਰਨ ਮੈਕਗਰੇਨ](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) ਦੁਆਰਾ
ਜਦੋਂ ਇੱਕ ਯੂਜ਼ਰ URL (ਯੂਨੀਫਾਰਮ ਰਿਸੋਰਸ ਲੋਕੇਟਰ) ਪਤੇ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੰਟਰਨੈਟ ਨਾਲ ਜੁੜਦਾ ਹੈ, ਆਮ ਤੌਰ 'ਤੇ Hypertext Transfer Protocol ਰਾਹੀਂ `http` ਜਾਂ `https` ਪਤੇ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ, ਤਾਂ ਬ੍ਰਾਊਜ਼ਰ ਇੱਕ ਵੈੱਬ ਸਰਵਰ ਨਾਲ ਸੰਚਾਰ ਕਰਦਾ ਹੈ ਅਤੇ ਇੱਕ ਵੈੱਬ ਪੇਜ ਲਿਆਉਂਦਾ ਹੈ।
ਇਸ ਸਮੇਂ, ਬ੍ਰਾਊਜ਼ਰ ਦਾ ਰੈਂਡਰਿੰਗ ਇੰਜਨ ਇਸਨੂੰ ਯੂਜ਼ਰ ਦੇ ਡਿਵਾਈਸ 'ਤੇ ਦਿਖਾਉਂਦਾ ਹੈ, ਜੋ ਕਿ ਮੋਬਾਈਲ ਫੋਨ, ਡੈਸਕਟਾਪ ਜਾਂ ਲੈਪਟਾਪ ਹੋ ਸਕਦਾ ਹੈ।
ਬ੍ਰਾਊਜ਼ਰ ਸਮੱਗਰੀ ਨੂੰ ਕੈਸ਼ ਕਰਨ ਦੀ ਸਮਰਥਾ ਵੀ ਰੱਖਦੇ ਹਨ ਤਾਂ ਜੋ ਇਸਨੂੰ ਹਰ ਵਾਰ ਸਰਵਰ ਤੋਂ ਪ੍ਰਾਪਤ ਨਾ ਕਰਨਾ ਪਵੇ। ਇਹ ਯੂਜ਼ਰ ਦੀ ਬ੍ਰਾਊਜ਼ਿੰਗ ਗਤੀਵਿਧੀ ਦਾ ਇਤਿਹਾਸ ਰਿਕਾਰਡ ਕਰ ਸਕਦੇ ਹਨ, 'ਕੁਕੀਜ਼' ਸਟੋਰ ਕਰ ਸਕਦੇ ਹਨ, ਜੋ ਛੋਟੇ ਡਾਟਾ ਟੁਕੜੇ ਹਨ ਜੋ ਯੂਜ਼ਰ ਦੀ ਗਤੀਵਿਧੀ ਨੂੰ ਸਟੋਰ ਕਰਨ ਲਈ ਵਰਤੇ ਜਾਂਦੇ ਹਨ, ਅਤੇ ਹੋਰ ਵੀ।
ਬ੍ਰਾਊਜ਼ਰਾਂ ਬਾਰੇ ਇੱਕ ਬਹੁਤ ਮਹੱਤਵਪੂਰਨ ਗੱਲ ਯਾਦ ਰੱਖਣੀ ਚਾਹੀਦੀ ਹੈ ਕਿ ਇਹ ਸਾਰੇ ਇੱਕੋ ਜਿਹੇ ਨਹੀਂ ਹਨ! ਹਰ ਬ੍ਰਾਊਜ਼ਰ ਦੀਆਂ ਆਪਣੀਆਂ ਖੂਬੀਆਂ ਅਤੇ ਕਮਜ਼ੋਰੀਆਂ ਹੁੰਦੀਆਂ ਹਨ, ਅਤੇ ਇੱਕ ਪੇਸ਼ੇਵਰ ਵੈੱਬ ਡਿਵੈਲਪਰ ਨੂੰ ਇਹ ਸਮਝਣ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ ਕਿ ਵੈੱਬ ਪੇਜਾਂ ਨੂੰ ਕਿਵੇਂ ਕ੍ਰਾਸ-ਬ੍ਰਾਊਜ਼ਰ ਚੰਗਾ ਪ੍ਰਦਰਸ਼ਨ ਕਰਨਾ ਹੈ। ਇਸ ਵਿੱਚ ਛੋਟੇ ਵਿਊਪੋਰਟਸ ਨੂੰ ਸੰਭਾਲਣਾ ਸ਼ਾਮਲ ਹੈ ਜਿਵੇਂ ਕਿ ਮੋਬਾਈਲ ਫੋਨ ਦਾ, ਅਤੇ ਇੱਕ ਯੂਜ਼ਰ ਜੋ ਆਫਲਾਈਨ ਹੈ।
ਇੱਕ ਬਹੁਤ ਹੀ ਲਾਭਦਾਇਕ ਵੈੱਬਸਾਈਟ ਜੋ ਤੁਸੀਂ ਸ਼ਾਇਦ ਆਪਣੇ ਪਸੰਦੀਦਾ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਬੁੱਕਮਾਰਕ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ ਉਹ ਹੈ [caniuse.com](https://www.caniuse.com)। ਜਦੋਂ ਤੁਸੀਂ ਵੈੱਬ ਪੇਜਾਂ ਬਣਾਉਂਦੇ ਹੋ, ਇਹ caniuse ਦੀਆਂ ਸਹਾਇਕ ਤਕਨਾਲੋਜੀਆਂ ਦੀਆਂ ਸੂਚੀਆਂ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਬਹੁਤ ਮਦਦਗਾਰ ਹੁੰਦਾ ਹੈ ਤਾਂ ਜੋ ਤੁਸੀਂ ਆਪਣੇ ਯੂਜ਼ਰਾਂ ਨੂੰ ਵਧੀਆ ਸਹਾਇਤਾ ਦੇ ਸਕੋ।
✅ ਤੁਸੀਂ ਕਿਵੇਂ ਦੱਸ ਸਕਦੇ ਹੋ ਕਿ ਤੁਹਾਡੇ ਵੈੱਬਸਾਈਟ ਦੇ ਯੂਜ਼ਰ ਬੇਸ ਵਿੱਚ ਕਿਹੜੇ ਬ੍ਰਾਊਜ਼ਰ ਸਭ ਤੋਂ ਜ਼ਿਆਦਾ ਪ੍ਰਸਿੱਧ ਹਨ? ਆਪਣੀ ਐਨਾਲਿਟਿਕਸ ਦੀ ਜਾਂਚ ਕਰੋ - ਤੁਸੀਂ ਆਪਣੇ ਵੈੱਬ ਡਿਵੈਲਪਮੈਂਟ ਪ੍ਰਕਿਰਿਆ ਦੇ ਹਿੱਸੇ ਵਜੋਂ ਵੱਖ-ਵੱਖ ਐਨਾਲਿਟਿਕਸ ਪੈਕੇਜਾਂ ਨੂੰ ਇੰਸਟਾਲ ਕਰ ਸਕਦੇ ਹੋ, ਅਤੇ ਇਹ ਤੁਹਾਨੂੰ ਦੱਸਣਗੇ ਕਿ ਵੱਖ-ਵੱਖ ਪ੍ਰਸਿੱਧ ਬ੍ਰਾਊਜ਼ਰਾਂ ਦੁਆਰਾ ਕਿਹੜੇ ਬ੍ਰਾਊਜ਼ਰ ਸਭ ਤੋਂ ਜ਼ਿਆਦਾ ਵਰਤੇ ਜਾਂਦੇ ਹਨ।
## ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ
ਤੁਸੀਂ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਕਿਉਂ ਬਣਾਉਣਾ ਚਾਹੋਗੇ? ਇਹ ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਨਾਲ ਜੁੜਨ ਲਈ ਇੱਕ ਸਹੀ ਚੀਜ਼ ਹੈ ਜਦੋਂ ਤੁਹਾਨੂੰ ਉਹ ਕੰਮ ਕਰਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ ਜੋ ਤੁਸੀਂ ਵਾਰ-ਵਾਰ ਕਰਦੇ ਹੋ। ਉਦਾਹਰਨ ਲਈ, ਜੇ ਤੁਸੀਂ ਆਪਣੇ ਆਪ ਨੂੰ ਵੱਖ-ਵੱਖ ਵੈੱਬ ਪੇਜਾਂ 'ਤੇ ਰੰਗਾਂ ਦੀ ਜਾਂਚ ਕਰਨ ਦੀ ਲੋੜ ਮਹਿਸੂਸ ਕਰਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਇੱਕ ਰੰਗ-ਚੁਣਨ ਵਾਲਾ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਇੰਸਟਾਲ ਕਰ ਸਕਦੇ ਹੋ। ਜੇ ਤੁਹਾਨੂੰ ਪਾਸਵਰਡ ਯਾਦ ਰੱਖਣ ਵਿੱਚ ਮੁਸ਼ਕਲ ਹੁੰਦੀ ਹੈ, ਤਾਂ ਤੁਸੀਂ ਪਾਸਵਰਡ-ਮੈਨੇਜਮੈਂਟ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ।
ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਬਣਾਉਣਾ ਵੀ ਮਜ਼ੇਦਾਰ ਹੁੰਦਾ ਹੈ। ਇਹ ਕੁਝ ਨਿਰਧਾਰਤ ਕੰਮਾਂ ਨੂੰ ਸੰਭਾਲਦੇ ਹਨ ਜੋ ਇਹ ਚੰਗੀ ਤਰ੍ਹਾਂ ਕਰਦੇ ਹਨ।
✅ ਤੁਹਾਡੇ ਮਨਪਸੰਦ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਕਿਹੜੇ ਹਨ? ਇਹ ਕਿਹੜੇ ਕੰਮ ਕਰਦੇ ਹਨ?
### ਐਕਸਟੈਂਸ਼ਨ ਇੰਸਟਾਲ ਕਰਨਾ
ਬਣਾਉਣ ਤੋਂ ਪਹਿਲਾਂ, ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਬਣਾਉਣ ਅਤੇ ਡਿਪਲੌਇ ਕਰਨ ਦੀ ਪ੍ਰਕਿਰਿਆ ਨੂੰ ਦੇਖੋ। ਹਾਲਾਂਕਿ ਹਰ ਬ੍ਰਾਊਜ਼ਰ ਇਸ ਕੰਮ ਨੂੰ ਕਿਵੇਂ ਸੰਭਾਲਦਾ ਹੈ ਇਸ ਵਿੱਚ ਕੁਝ ਅੰਤਰ ਹੁੰਦਾ ਹੈ, Chrome ਅਤੇ Firefox 'ਤੇ ਪ੍ਰਕਿਰਿਆ Edge ਦੇ ਇਸ ਉਦਾਹਰਨ ਨਾਲ ਮਿਲਦੀ ਜੁਲਦੀ ਹੈ:
> ਨੋਟ: ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਡਿਵੈਲਪਰ ਮੋਡ ਨੂੰ ਟੌਗਲ ਕੀਤਾ ਗਿਆ ਹੈ ਅਤੇ ਹੋਰ ਸਟੋਰਾਂ ਤੋਂ ਐਕਸਟੈਂਸ਼ਨ ਦੀ ਆਗਿਆ ਦਿੱਤੀ ਗਈ ਹੈ।
ਅਸਲ ਵਿੱਚ, ਪ੍ਰਕਿਰਿਆ ਇਹ ਹੋਵੇਗੀ:
- `npm run build` ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਆਪਣਾ ਐਕਸਟੈਂਸ਼ਨ ਬਣਾਓ
- ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ "ਸੈਟਿੰਗਸ ਅਤੇ ਹੋਰ" ਬਟਨ (ਉੱਪਰ ਸੱਜੇ ਪਾਸੇ `...` ਆਈਕਨ) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਐਕਸਟੈਂਸ਼ਨ ਪੈਨ 'ਤੇ ਜਾਓ
- ਜੇ ਇਹ ਨਵੀਂ ਇੰਸਟਾਲੇਸ਼ਨ ਹੈ, ਤਾਂ `load unpacked` ਚੁਣੋ ਤਾਂ ਜੋ ਉਸ ਦੇ ਬਿਲਡ ਫੋਲਡਰ (ਸਾਡੇ ਕੇਸ ਵਿੱਚ `/dist`) ਤੋਂ ਇੱਕ ਤਾਜ਼ਾ ਐਕਸਟੈਂਸ਼ਨ ਅੱਪਲੋਡ ਕੀਤਾ ਜਾ ਸਕੇ
- ਜਾਂ, ਜੇ ਤੁਸੀਂ ਪਹਿਲਾਂ ਤੋਂ ਇੰਸਟਾਲ ਕੀਤੇ ਐਕਸਟੈਂਸ਼ਨ ਨੂੰ ਰੀਲੋਡ ਕਰ ਰਹੇ ਹੋ, ਤਾਂ `reload` 'ਤੇ ਕਲਿਕ ਕਰੋ
✅ ਇਹ ਹਦਾਇਤਾਂ ਤੁਹਾਡੇ ਦੁਆਰਾ ਬਣਾਏ ਗਏ ਐਕਸਟੈਂਸ਼ਨ ਲਈ ਹਨ; ਉਹ ਐਕਸਟੈਂਸ਼ਨ ਇੰਸਟਾਲ ਕਰਨ ਲਈ ਜੋ ਹਰ ਬ੍ਰਾਊਜ਼ਰ ਨਾਲ ਸੰਬੰਧਿਤ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਸਟੋਰ ਵਿੱਚ ਰਿਲੀਜ਼ ਕੀਤੇ ਗਏ ਹਨ, ਤੁਹਾਨੂੰ ਉਹਨਾਂ [ਸਟੋਰਾਂ](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home) 'ਤੇ ਜਾ ਕੇ ਆਪਣੀ ਪਸੰਦ ਦਾ ਐਕਸਟੈਂਸ਼ਨ ਇੰਸਟਾਲ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ।
### ਸ਼ੁਰੂ ਕਰੋ
ਤੁਸੀਂ ਇੱਕ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹੋ ਜੋ ਤੁਹਾਡੇ ਖੇਤਰ ਦੇ ਕਾਰਬਨ ਫੁਟਪ੍ਰਿੰਟ ਨੂੰ ਦਿਖਾਏਗਾ, ਤੁਹਾਡੇ ਖੇਤਰ ਦੀ energy ਵਰਤੋਂ ਅਤੇ energy ਦੇ ਸਰੋਤ ਨੂੰ ਦਿਖਾਏਗਾ। ਐਕਸਟੈਂਸ਼ਨ ਵਿੱਚ ਇੱਕ ਫਾਰਮ ਹੋਵੇਗਾ ਜੋ 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` ਫਾਇਲ ਵਿੱਚ ਦਰਜ ਕੀਤੇ ਪੈਕੇਜ ਤੁਹਾਡੇ ਵੈੱਬ ਐਸੈਟ ਦੁਆਰਾ ਵਰਤੋਂ ਲਈ ਇੰਸਟਾਲ ਕੀਤੇ ਜਾਣਗੇ
✅ ਪੈਕੇਜ ਮੈਨੇਜਮੈਂਟ ਬਾਰੇ ਇਸ [ਸ਼ਾਨਦਾਰ Learn module](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-77807-sagibbon) ਵਿੱਚ ਹੋਰ ਜਾਣੋ
ਕੋਡਬੇਸ ਨੂੰ ਦੇਖਣ ਲਈ ਇੱਕ ਮਿੰਟ ਲਓ:
dist
-|manifest.json (defaults ਇੱਥੇ ਸੈਟ ਕੀਤੇ ਗਏ ਹਨ)
-|index.html (ਫਰੰਟ-ਐਂਡ HTML ਮਾਰਕਅੱਪ ਇੱਥੇ)
-|background.js (ਬੈਕਗ੍ਰਾਊਂਡ JS ਇੱਥੇ)
-|main.js (ਬਿਲਟ JS)
src
-|index.js (ਤੁਹਾਡਾ JS ਕੋਡ ਇੱਥੇ ਜਾਂਦਾ ਹੈ)
✅ ਜਦੋਂ ਤੁਹਾਡੇ ਕੋਲ API ਕੁੰਜੀ ਅਤੇ ਖੇਤਰ ਕੋਡ ਤਿਆਰ ਹੋਵੇ, ਤਾਂ ਉਹਨਾਂ ਨੂੰ ਭਵਿੱਖ ਵਿੱਚ ਵਰਤੋਂ ਲਈ ਕਿਸੇ ਨੋਟ ਵਿੱਚ ਸਟੋਰ ਕਰੋ।
### ਐਕਸਟੈਂਸ਼ਨ ਲਈ HTML ਬਣਾਓ
ਇਸ ਐਕਸਟੈਂਸ਼ਨ ਵਿੱਚ ਦੋ ਦ੍ਰਿਸ਼ ਹਨ। ਇੱਕ API ਕੁੰਜੀ ਅਤੇ ਖੇਤਰ ਕੋਡ ਇਕੱਠਾ ਕਰਨ ਲਈ:
ਅਤੇ ਦੂਜਾ ਖੇਤਰ ਦੀ ਕਾਰਬਨ ਵਰਤੋਂ ਦਿਖਾਉਣ ਲਈ:
ਆਓ ਫਾਰਮ ਲਈ HTML ਬਣਾਉਣ ਅਤੇ CSS ਨਾਲ ਇਸਨੂੰ ਸਜਾਉਣ ਤੋਂ ਸ਼ੁਰੂ ਕਰੀਏ।
`/dist` ਫੋਲਡਰ ਵਿੱਚ, ਤੁਸੀਂ ਇੱਕ ਫਾਰਮ ਅਤੇ ਇੱਕ ਨਤੀਜਾ ਖੇਤਰ ਬਣਾਉਗੇ। `index.html` ਫਾਇਲ ਵਿੱਚ, delineated ਫਾਰਮ ਖੇਤਰ ਨੂੰ ਪੂਰਾ ਕਰੋ:
```HTML
```
ਇਹ ਉਹ ਫਾਰਮ ਹੈ ਜਿੱਥੇ ਤੁਹਾਡੀ ਸਟੋਰ ਕੀਤੀ ਜਾਣ ਵਾਲੀ ਜਾਣਕਾਰੀ ਨੂੰ ਇਨਪੁਟ ਕੀਤਾ ਜਾਵੇਗਾ ਅਤੇ ਸਥਾਨਕ ਸਟੋਰੇਜ ਵਿੱਚ ਸਟੋਰ ਕੀਤਾ ਜਾਵੇਗਾ।
ਅਗਲੇ, ਨਤੀਜਾ ਖੇਤਰ ਬਣਾਓ; ਆਖਰੀ ਫਾਰਮ ਟੈਗ ਦੇ ਹੇਠਾਂ ਕੁਝ divs ਸ਼ਾਮਲ ਕਰੋ:
```HTML
loading...
Region:
Carbon Usage:
Fossil Fuel Percentage:
```
ਇਸ ਪੜਾਅ 'ਤੇ, ਤੁਸੀਂ ਇੱਕ ਬਿਲਡ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰ ਸਕਦੇ ਹੋ। ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਇਸ ਐਕਸਟੈਂਸ਼ਨ ਦੇ ਪੈਕੇਜ ਡਿਪੈਂਡੈਂਸੀਜ਼ ਨੂੰ ਇੰਸਟਾਲ ਕੀਤਾ ਗਿਆ ਹੈ:
```
npm install
```
ਇਹ ਕਮਾਂਡ npm, Node Package Manager ਦੀ ਵਰਤੋਂ ਕਰੇਗੀ, ਤਾਂ ਜੋ webpack ਤੁਹਾਡੇ ਐਕਸਟੈਂਸ਼ਨ ਦੇ ਬਿਲਡ ਪ੍ਰਕਿਰਿਆ ਲਈ ਇੰਸਟਾਲ ਕੀਤਾ ਜਾ ਸਕੇ। ਤੁਸੀਂ `/dist/main.js` ਵਿੱਚ ਇਸ ਪ੍ਰਕਿਰਿਆ ਦੇ ਆਉਟਪੁੱਟ ਨੂੰ ਦੇਖ ਸਕਦੇ ਹੋ - ਤੁਸੀਂ ਦੇਖੋਗੇ ਕਿ ਕੋਡ ਬੰਡਲ ਕੀਤਾ ਗਿਆ ਹੈ।
ਫਿਲਹਾਲ, ਐਕਸਟੈਂਸ਼ਨ ਬਣਾਉਣਾ ਚਾਹੀਦਾ ਹੈ ਅਤੇ, ਜੇ ਤੁਸੀਂ ਇਸਨੂੰ Edge ਵਿੱਚ ਇੱਕ ਐਕਸਟੈਂਸ਼ਨ ਵਜੋਂ ਡਿਪਲੌਇ ਕਰਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਇੱਕ ਫਾਰਮ ਸਾਫ਼ ਤੌਰ 'ਤੇ ਦਿਖਾਈ ਦੇਵੇਗਾ।
ਵਧਾਈ ਹੋਵੇ, ਤੁਸੀਂ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਬਣਾਉਣ ਵੱਲ ਪਹਿਲੇ ਕਦਮ ਲਏ ਹਨ। ਅਗਲੇ ਪਾਠਾਂ ਵਿੱਚ, ਤੁਸੀਂ ਇਸਨੂੰ ਹੋਰ ਫੰਕਸ਼ਨਲ ਅਤੇ ਉਪਯੋਗ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹੋ।
## GitHub Copilot Agent ਚੈਲੈਂਜ 🚀
Agent ਮੋਡ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਹੇਠਾਂ ਦਿੱਤੇ ਚੈਲੈਂਜ ਨੂੰ ਪੂਰਾ ਕਰੋ:
**ਵੇਰਵਾ:** ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਨੂੰ ਵਧੀਆ ਬਣਾਉਣ ਲਈ ਫਾਰਮ ਵੈਲੀਡੇਸ਼ਨ ਅਤੇ ਯੂਜ਼ਰ ਫੀਡਬੈਕ ਫੀਚਰ ਸ਼ਾਮਲ ਕਰੋ ਤਾਂ ਜੋ API ਕੁੰਜੀਆਂ ਅਤੇ ਖੇਤਰ ਕੋਡ ਦਰਜ ਕਰਨ ਸਮੇਂ ਯੂਜ਼ਰ ਅਨੁਭਵ ਨੂੰ ਸੁਧਾਰਿਆ ਜਾ ਸਕੇ।
**ਪ੍ਰੋਮਪਟ:** ਜਾਵਾਸਕ੍ਰਿਪਟ ਵੈਲੀਡੇਸ਼ਨ ਫੰਕਸ਼ਨ ਬਣਾਓ ਜੋ ਜਾਂਚ ਕਰਦੇ ਹਨ ਕਿ API ਕੁੰਜੀ ਖੇਤਰ ਵਿੱਚ ਘੱਟੋ-ਘੱਟ 20 ਅੱਖਰ ਹਨ ਅਤੇ ਖੇਤਰ ਕੋਡ ਸਹੀ ਫਾਰਮੈਟ (ਜਿਵੇਂ 'US-NEISO') ਦਾ ਪਾਲਣ ਕਰਦਾ ਹੈ। ਵੈਧ ਇਨਪੁਟ ਲਈ ਇਨਪੁਟ ਬਾਰਡਰ ਰੰਗਾਂ ਨੂੰ ਹਰਾ ਅਤੇ ਅਵੈਧ ਲਈ ਲਾਲ ਵਿੱਚ ਬਦਲ ਕੇ ਵਿਜ਼ੁਅਲ ਫੀਡਬੈਕ ਸ਼ਾਮਲ ਕਰੋ। ਸੁਰੱਖਿਆ ਦੇ ਮੱਦੇਨਜ਼ਰ API ਕੁੰਜੀ ਨੂੰ ਦਿਖਾਉਣ/ਛੁਪਾਉਣ ਲਈ ਇੱਕ ਟੌਗਲ ਫੀਚਰ ਵੀ ਸ਼ਾਮਲ ਕਰੋ।
---
## 🚀 ਚੈਲੈਂਜ
ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਸਟੋਰ ਨੂੰ ਦੇਖੋ ਅਤੇ ਇੱਕ ਨੂੰ ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਇੰਸਟਾਲ ਕਰੋ। ਤੁਸੀਂ ਇਸਦੇ ਫਾਇਲਾਂ ਨੂੰ ਦਿਲਚਸਪ ਤਰੀਕੇ ਨਾਲ ਜਾਂਚ ਸਕਦੇ ਹੋ। ਤੁਹਾਨੂੰ ਕੀ ਪਤਾ ਲੱਗਦਾ ਹੈ?
## ਲੈਕਚਰ ਤੋਂ ਬਾਅਦ ਕਵੀਜ਼
[ਲੈਕਚਰ ਤੋਂ ਬਾਅਦ ਕਵੀਜ਼](https://ff-quizzes.netlify.app/web/quiz/24)
## ਸਮੀਖਿਆ ਅਤੇ ਸਵੈ ਅਧਿਐਨ
ਇਸ ਪਾਠ ਵਿੱਚ ਤੁਸੀਂ ਵੈੱਬ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਇਤਿਹਾਸ ਬਾਰੇ ਕੁਝ ਸਿੱਖਿਆ; ਇਸ ਮੌਕੇ ਨੂੰ ਵਰਤ ਕੇ ਜਾਨੋ ਕਿ ਵਰਲਡ ਵਾਈਡ ਵੈੱਬ ਦੇ ਆਵਿਸ਼ਕਾਰਕ ਇਸਦੇ ਉਪਯੋਗ ਬਾਰੇ ਕੀ
---
**ਅਸਵੀਕਰਤੀ**:
ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁਚੀਤਤਾਵਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਇਸਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਅਸੀਂ ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।