You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
174 lines
20 KiB
174 lines
20 KiB
<!--
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
{
|
|
"original_hash": "f198c6b817b4b2a99749f4662e7cae98",
|
|
"translation_date": "2025-08-25T23:46:49+00:00",
|
|
"source_file": "5-browser-extension/3-background-tasks-and-performance/README.md",
|
|
"language_code": "pa"
|
|
}
|
|
-->
|
|
# ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਪ੍ਰੋਜੈਕਟ ਭਾਗ 3: ਬੈਕਗ੍ਰਾਊਂਡ ਟਾਸਕ ਅਤੇ ਪ੍ਰਦਰਸ਼ਨ ਬਾਰੇ ਸਿੱਖੋ
|
|
|
|
## ਪ੍ਰੀ-ਲੈਕਚਰ ਕਵਿਜ਼
|
|
|
|
[ਪ੍ਰੀ-ਲੈਕਚਰ ਕਵਿਜ਼](https://ff-quizzes.netlify.app/web/quiz/27)
|
|
|
|
### ਪਰਿਚਯ
|
|
|
|
ਇਸ ਮੌਡਿਊਲ ਦੇ ਪਿਛਲੇ ਦੋ ਪਾਠਾਂ ਵਿੱਚ, ਤੁਸੀਂ ਸਿੱਖਿਆ ਕਿ ਕਿਸ ਤਰ੍ਹਾਂ ਇੱਕ ਫਾਰਮ ਅਤੇ ਡਾਟਾ ਵੇਖਾਉਣ ਵਾਲਾ ਖੇਤਰ ਬਣਾਇਆ ਜਾ ਸਕਦਾ ਹੈ ਜੋ API ਤੋਂ ਪ੍ਰਾਪਤ ਕੀਤਾ ਗਿਆ ਹੈ। ਇਹ ਵੈੱਬ 'ਤੇ ਇੱਕ ਮਿਆਰੀ ਤਰੀਕੇ ਨਾਲ ਵੈੱਬ ਉਪਸਥਿਤੀ ਬਣਾਉਣ ਦਾ ਰਸਤਾ ਹੈ। ਤੁਸੀਂ ਇਹ ਵੀ ਸਿੱਖਿਆ ਕਿ ਡਾਟਾ ਨੂੰ ਅਸਿੰਕ੍ਰੋਨਸ ਤਰੀਕੇ ਨਾਲ ਕਿਵੇਂ ਫੈਚ ਕਰਨਾ ਹੈ। ਤੁਹਾਡਾ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਲਗਭਗ ਤਿਆਰ ਹੈ।
|
|
|
|
ਹੁਣ ਬੈਕਗ੍ਰਾਊਂਡ ਟਾਸਕਾਂ ਦਾ ਪ੍ਰਬੰਧ ਕਰਨਾ ਬਾਕੀ ਹੈ, ਜਿਸ ਵਿੱਚ ਐਕਸਟੈਂਸ਼ਨ ਦੇ ਆਈਕਨ ਦਾ ਰੰਗ ਰਿਫ੍ਰੈਸ਼ ਕਰਨਾ ਸ਼ਾਮਲ ਹੈ। ਇਸ ਲਈ, ਇਹ ਸਮਾਂ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਇਸ ਤਰ੍ਹਾਂ ਦੇ ਕੰਮਾਂ ਨੂੰ ਪ੍ਰਬੰਧਿਤ ਕਰਨ ਦੇ ਤਰੀਕੇ ਬਾਰੇ ਗੱਲ ਕਰਨ ਲਈ ਬਹੁਤ ਵਧੀਆ ਹੈ। ਆਓ ਇਸਨੂੰ ਵੈੱਬ ਐਸੈਟਸ ਦੇ ਪ੍ਰਦਰਸ਼ਨ ਦੇ ਸੰਦਰਭ ਵਿੱਚ ਸੋਚੀਏ ਜਦੋਂ ਤੁਸੀਂ ਇਹ ਬਣਾਉਂਦੇ ਹੋ।
|
|
|
|
## ਵੈੱਬ ਪ੍ਰਦਰਸ਼ਨ ਦੇ ਮੁੱਢਲੇ ਸਿਧਾਂਤ
|
|
|
|
> "ਵੈੱਬਸਾਈਟ ਪ੍ਰਦਰਸ਼ਨ ਦੋ ਚੀਜ਼ਾਂ ਬਾਰੇ ਹੈ: ਪੰਨਾ ਕਿੰਨੀ ਤੇਜ਼ੀ ਨਾਲ ਲੋਡ ਹੁੰਦਾ ਹੈ, ਅਤੇ ਇਸ 'ਤੇ ਕੋਡ ਕਿੰਨੀ ਤੇਜ਼ੀ ਨਾਲ ਚਲਦਾ ਹੈ।" -- [ਜ਼ੈਕ ਗਰੋਸਬਾਰਟ](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
|
|
|
|
ਤੁਹਾਡੀਆਂ ਵੈੱਬਸਾਈਟਾਂ ਨੂੰ ਹਰ ਕਿਸਮ ਦੇ ਯੂਜ਼ਰਾਂ ਲਈ, ਹਰ ਕਿਸਮ ਦੇ ਜੰਤਰਾਂ 'ਤੇ, ਹਰ ਕਿਸਮ ਦੀਆਂ ਸਥਿਤੀਆਂ ਵਿੱਚ ਬਹੁਤ ਤੇਜ਼ ਬਣਾਉਣ ਦੇ ਤਰੀਕੇ ਬਾਰੇ ਵਿਸ਼ਾ ਬਹੁਤ ਵੱਡਾ ਹੈ। ਜਦੋਂ ਤੁਸੀਂ ਇੱਕ ਮਿਆਰੀ ਵੈੱਬ ਪ੍ਰੋਜੈਕਟ ਜਾਂ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਬਣਾਉਂਦੇ ਹੋ, ਤਾਂ ਇਹ ਕੁਝ ਗੱਲਾਂ ਯਾਦ ਰੱਖਣ ਵਾਲੀਆਂ ਹਨ।
|
|
|
|
ਸਭ ਤੋਂ ਪਹਿਲਾਂ, ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਕਿ ਤੁਹਾਡੀ ਸਾਈਟ ਕੁਸ਼ਲਤਾਪੂਰਵਕ ਚੱਲ ਰਹੀ ਹੈ, ਤੁਹਾਨੂੰ ਇਸਦੇ ਪ੍ਰਦਰਸ਼ਨ ਬਾਰੇ ਡਾਟਾ ਇਕੱਠਾ ਕਰਨ ਦੀ ਲੋੜ ਹੈ। ਇਸਦਾ ਪਹਿਲਾ ਸਥਾਨ ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਡਿਵੈਲਪਰ ਟੂਲਜ਼ ਵਿੱਚ ਹੈ। Edge ਵਿੱਚ, ਤੁਸੀਂ "ਸੈਟਿੰਗਜ਼ ਅਤੇ ਹੋਰ" ਬਟਨ (ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਸੱਜੇ ਉੱਪਰ ਵਾਲੇ ਕੋਨੇ ਵਿੱਚ ਤਿੰਨ ਬਿੰਦੂਆਂ ਵਾਲਾ ਆਈਕਨ) ਚੁਣ ਸਕਦੇ ਹੋ, ਫਿਰ ਹੋਰ ਟੂਲਜ਼ > ਡਿਵੈਲਪਰ ਟੂਲਜ਼ ਤੇ ਜਾਓ ਅਤੇ ਪ੍ਰਦਰਸ਼ਨ ਟੈਬ ਖੋਲ੍ਹੋ। ਤੁਸੀਂ Windows 'ਤੇ `Ctrl` + `Shift` + `I` ਜਾਂ Mac 'ਤੇ `Option` + `Command` + `I` ਦੀਬੋਟਨ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਵੀ ਡਿਵੈਲਪਰ ਟੂਲਜ਼ ਖੋਲ੍ਹ ਸਕਦੇ ਹੋ।
|
|
|
|
ਪ੍ਰਦਰਸ਼ਨ ਟੈਬ ਵਿੱਚ ਇੱਕ ਪ੍ਰੋਫਾਈਲਿੰਗ ਟੂਲ ਸ਼ਾਮਲ ਹੈ। ਇੱਕ ਵੈੱਬਸਾਈਟ ਖੋਲ੍ਹੋ (ਉਦਾਹਰਨ ਲਈ, [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) ਅਤੇ 'ਰਿਕਾਰਡ' ਬਟਨ 'ਤੇ ਕਲਿਕ ਕਰੋ, ਫਿਰ ਸਾਈਟ ਨੂੰ ਰਿਫ੍ਰੈਸ਼ ਕਰੋ। ਕਿਸੇ ਵੀ ਸਮੇਂ ਰਿਕਾਰਡਿੰਗ ਰੋਕੋ, ਅਤੇ ਤੁਸੀਂ ਉਹ ਰੂਟੀਨ ਵੇਖ ਸਕੋਗੇ ਜੋ ਸਾਈਟ ਨੂੰ 'ਸਕ੍ਰਿਪਟ', 'ਰੈਂਡਰ', ਅਤੇ 'ਪੇਂਟ' ਕਰਨ ਲਈ ਬਣਾਈ ਗਈਆਂ ਹਨ:
|
|
|
|
|
|
|
|
✅ Edge ਵਿੱਚ ਪ੍ਰਦਰਸ਼ਨ ਪੈਨਲ ਬਾਰੇ [Microsoft ਡੌਕਯੂਮੈਂਟੇਸ਼ਨ](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) ਵੇਖੋ।
|
|
|
|
> ਸੁਝਾਅ: ਆਪਣੀ ਵੈੱਬਸਾਈਟ ਦੇ ਸਟਾਰਟਅੱਪ ਸਮੇਂ ਦਾ ਸਹੀ ਪੜ੍ਹਨ ਲਈ, ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਦਾ ਕੈਸ਼ ਸਾਫ਼ ਕਰੋ।
|
|
|
|
ਪ੍ਰੋਫਾਈਲ ਟਾਈਮਲਾਈਨ ਦੇ ਤੱਤਾਂ ਨੂੰ ਚੁਣੋ ਤਾਂ ਜੋ ਉਹ ਘਟਨਾਵਾਂ ਵੇਖ ਸਕੋ ਜੋ ਤੁਹਾਡੀ ਪੰਨੇ ਦੇ ਲੋਡ ਹੋਣ ਦੌਰਾਨ ਹੁੰਦੀਆਂ ਹਨ।
|
|
|
|
ਪ੍ਰੋਫਾਈਲ ਟਾਈਮਲਾਈਨ ਦੇ ਕਿਸੇ ਹਿੱਸੇ ਨੂੰ ਚੁਣ ਕੇ ਅਤੇ ਸਾਰਾਂ ਪੈਨ ਵੇਖ ਕੇ ਆਪਣੇ ਪੰਨੇ ਦੇ ਪ੍ਰਦਰਸ਼ਨ ਦਾ ਸਨੈਪਸ਼ਾਟ ਪ੍ਰਾਪਤ ਕਰੋ:
|
|
|
|
|
|
|
|
ਇਵੈਂਟ ਲੌਗ ਪੈਨ ਦੀ ਜਾਂਚ ਕਰੋ ਤਾਂ ਜੋ ਵੇਖ ਸਕੋ ਕਿ ਕੀ ਕੋਈ ਘਟਨਾ 15 ਮਿ.ਸੇ. ਤੋਂ ਵੱਧ ਸਮਾਂ ਲੈਂਦੀ ਹੈ:
|
|
|
|
|
|
|
|
✅ ਆਪਣੇ ਪ੍ਰੋਫਾਈਲਰ ਨਾਲ ਜਾਣ-ਪਛਾਣ ਕਰੋ! ਇਸ ਸਾਈਟ 'ਤੇ ਡਿਵੈਲਪਰ ਟੂਲਜ਼ ਖੋਲ੍ਹੋ ਅਤੇ ਵੇਖੋ ਕਿ ਕੀ ਕੋਈ ਬੋਤਲਨੈਕ ਹੈ। ਸਭ ਤੋਂ ਹੌਲੀ ਲੋਡ ਹੋਣ ਵਾਲਾ ਐਸੈਟ ਕਿਹੜਾ ਹੈ? ਸਭ ਤੋਂ ਤੇਜ਼?
|
|
|
|
## ਪ੍ਰੋਫਾਈਲਿੰਗ ਚੈੱਕ
|
|
|
|
ਆਮ ਤੌਰ 'ਤੇ, ਕੁਝ "ਸਮੱਸਿਆ ਵਾਲੇ ਖੇਤਰ" ਹੁੰਦੇ ਹਨ ਜਿਨ੍ਹਾਂ ਨੂੰ ਹਰ ਵੈੱਬ ਡਿਵੈਲਪਰ ਨੂੰ ਸਾਈਟ ਬਣਾਉਣ ਦੌਰਾਨ ਦੇਖਣਾ ਚਾਹੀਦਾ ਹੈ ਤਾਂ ਜੋ ਪ੍ਰੋਡਕਸ਼ਨ ਵਿੱਚ ਡਿਪਲੌਇਮੈਂਟ ਦੇ ਸਮੇਂ ਕੋਈ ਅਣਚਾਹੀ ਹੈਰਾਨੀ ਨਾ ਹੋਵੇ।
|
|
|
|
**ਐਸੈਟ ਸਾਈਜ਼**: ਪਿਛਲੇ ਕੁਝ ਸਾਲਾਂ ਵਿੱਚ ਵੈੱਬ 'ਭਾਰੀ' ਹੋ ਗਿਆ ਹੈ, ਅਤੇ ਇਸ ਲਈ ਹੌਲਾ ਵੀ। ਇਸ ਭਾਰ ਦਾ ਕੁਝ ਹਿੱਸਾ ਚਿੱਤਰਾਂ ਦੀ ਵਰਤੋਂ ਨਾਲ ਜੁੜਿਆ ਹੋਇਆ ਹੈ।
|
|
|
|
✅ ਪੰਨੇ ਦੇ ਭਾਰ ਅਤੇ ਹੋਰ ਬਾਰੇ ਇਤਿਹਾਸਕ ਦ੍ਰਿਸ਼ਟੀਕੋਣ ਲਈ [Internet Archive](https://httparchive.org/reports/page-weight) ਵੇਖੋ।
|
|
|
|
ਇੱਕ ਵਧੀਆ ਅਭਿਆਸ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣਾ ਹੈ ਕਿ ਤੁਹਾਡੇ ਚਿੱਤਰ ਅਨੁਕੂਲਿਤ ਹਨ ਅਤੇ ਤੁਹਾਡੇ ਯੂਜ਼ਰਾਂ ਲਈ ਸਹੀ ਆਕਾਰ ਅਤੇ ਰੈਜ਼ੋਲੂਸ਼ਨ 'ਤੇ ਡਿਲਿਵਰ ਕੀਤੇ ਗਏ ਹਨ।
|
|
|
|
**DOM ਟ੍ਰੈਵਰਸਲ**: ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਤੁਹਾਡੇ ਦੁਆਰਾ ਲਿਖੇ ਕੋਡ ਦੇ ਆਧਾਰ 'ਤੇ ਆਪਣਾ ਡੌਕਯੂਮੈਂਟ ਆਬਜੈਕਟ ਮਾਡਲ ਬਣਾਉਣਾ ਪੈਂਦਾ ਹੈ, ਇਸ ਲਈ ਚੰਗੇ ਪੰਨੇ ਦੇ ਪ੍ਰਦਰਸ਼ਨ ਦੇ ਹਿੱਤ ਵਿੱਚ ਤੁਹਾਡੇ ਟੈਗਾਂ ਨੂੰ ਘੱਟ ਰੱਖਣਾ ਮਹੱਤਵਪੂਰਨ ਹੈ। ਉਦਾਹਰਨ ਲਈ, ਉਹ ਸਟਾਈਲ ਜੋ ਸਿਰਫ਼ ਇੱਕ ਪੰਨੇ 'ਤੇ ਵਰਤੀਆਂ ਜਾਣੀਆਂ ਹਨ, ਉਹਨਾਂ ਨੂੰ ਮੁੱਖ ਸਟਾਈਲ ਸ਼ੀਟ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਨ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ।
|
|
|
|
**ਜਾਵਾਸਕ੍ਰਿਪਟ**: ਹਰ ਜਾਵਾਸਕ੍ਰਿਪਟ ਡਿਵੈਲਪਰ ਨੂੰ 'ਰੈਂਡਰ-ਬਲੌਕਿੰਗ' ਸਕ੍ਰਿਪਟਾਂ ਲਈ ਦੇਖਣਾ ਚਾਹੀਦਾ ਹੈ ਜੋ DOM ਨੂੰ ਟ੍ਰੈਵਰਸ ਅਤੇ ਪੇਂਟ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਲੋਡ ਹੋਣੀਆਂ ਚਾਹੀਦੀਆਂ ਹਨ। ਆਪਣੇ ਇਨਲਾਈਨ ਸਕ੍ਰਿਪਟਾਂ ਨਾਲ `defer` ਦੀ ਵਰਤੋਂ ਕਰਨ ਬਾਰੇ ਸੋਚੋ (ਜਿਵੇਂ ਕਿ Terrarium ਮੌਡਿਊਲ ਵਿੱਚ ਕੀਤਾ ਗਿਆ ਹੈ)।
|
|
|
|
✅ ਵੈੱਬਸਾਈਟ ਪ੍ਰਦਰਸ਼ਨ ਦੀ ਜਾਂਚ ਕਰਨ ਲਈ ਕੁਝ ਸਾਈਟਾਂ ਨੂੰ [ਸਾਈਟ ਸਪੀਡ ਟੈਸਟ ਵੈੱਬਸਾਈਟ](https://www.webpagetest.org/) 'ਤੇ ਅਜ਼ਮਾਓ।
|
|
|
|
ਹੁਣ ਜਦੋਂ ਤੁਹਾਨੂੰ ਇਹ ਪਤਾ ਹੈ ਕਿ ਬ੍ਰਾਊਜ਼ਰ ਤੁਹਾਡੇ ਦੁਆਰਾ ਭੇਜੇ ਗਏ ਐਸੈਟਸ ਨੂੰ ਕਿਵੇਂ ਰੈਂਡਰ ਕਰਦਾ ਹੈ, ਆਓ ਉਹ ਆਖਰੀ ਕੁਝ ਚੀਜ਼ਾਂ ਵੇਖੀਏ ਜੋ ਤੁਹਾਡੇ ਐਕਸਟੈਂਸ਼ਨ ਨੂੰ ਪੂਰਾ ਕਰਨ ਲਈ ਲੋੜੀਂਦੀਆਂ ਹਨ:
|
|
|
|
### ਰੰਗ ਦੀ ਗਣਨਾ ਕਰਨ ਲਈ ਫੰਕਸ਼ਨ ਬਣਾਓ
|
|
|
|
`/src/index.js` ਵਿੱਚ ਕੰਮ ਕਰਦੇ ਹੋਏ, DOM ਤੱਕ ਪਹੁੰਚ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਸੈੱਟ ਕੀਤੇ ਗਏ `const` ਵੈਰੀਏਬਲਾਂ ਦੀ ਲੜੀ ਤੋਂ ਬਾਅਦ ਇੱਕ ਫੰਕਸ਼ਨ `calculateColor()` ਸ਼ਾਮਲ ਕਰੋ:
|
|
|
|
```JavaScript
|
|
function calculateColor(value) {
|
|
let co2Scale = [0, 150, 600, 750, 800];
|
|
let colors = ['#2AA364', '#F5EB4D', '#9E4229', '#381D02', '#381D02'];
|
|
|
|
let closestNum = co2Scale.sort((a, b) => {
|
|
return Math.abs(a - value) - Math.abs(b - value);
|
|
})[0];
|
|
console.log(value + ' is closest to ' + closestNum);
|
|
let num = (element) => element > closestNum;
|
|
let scaleIndex = co2Scale.findIndex(num);
|
|
|
|
let closestColor = colors[scaleIndex];
|
|
console.log(scaleIndex, closestColor);
|
|
|
|
chrome.runtime.sendMessage({ action: 'updateIcon', value: { color: closestColor } });
|
|
}
|
|
```
|
|
|
|
ਇੱਥੇ ਕੀ ਹੋ ਰਿਹਾ ਹੈ? ਤੁਸੀਂ API ਕਾਲ ਤੋਂ ਪ੍ਰਾਪਤ ਕਾਰਬਨ ਇੰਟੈਂਸਿਟੀ ਦੀ ਇੱਕ ਵੈਲਯੂ ਪਾਸ ਕਰਦੇ ਹੋ ਜੋ ਤੁਸੀਂ ਪਿਛਲੇ ਪਾਠ ਵਿੱਚ ਪੂਰੀ ਕੀਤੀ ਸੀ, ਅਤੇ ਫਿਰ ਤੁਸੀਂ ਇਸਦੀ ਵੈਲਯੂ ਨੂੰ ਰੰਗਾਂ ਦੀ ਐਰੇ ਵਿੱਚ ਪੇਸ਼ ਕੀਤੇ ਗਏ ਸੂਚਕ ਦੇ ਕਿੰਨੇ ਨੇੜੇ ਹੈ, ਇਹ ਗਣਨਾ ਕਰਦੇ ਹੋ। ਫਿਰ ਤੁਸੀਂ ਉਸ ਸਭ ਤੋਂ ਨੇੜੇ ਰੰਗ ਦੀ ਵੈਲਯੂ chrome.runtime ਨੂੰ ਭੇਜਦੇ ਹੋ।
|
|
|
|
chrome.runtime ਵਿੱਚ [ਇੱਕ API](https://developer.chrome.com/extensions/runtime) ਹੈ ਜੋ ਹਰ ਕਿਸਮ ਦੇ ਬੈਕਗ੍ਰਾਊਂਡ ਟਾਸਕਾਂ ਨੂੰ ਸੰਭਾਲਦਾ ਹੈ, ਅਤੇ ਤੁਹਾਡਾ ਐਕਸਟੈਂਸ਼ਨ ਇਸਦਾ ਲਾਭ ਲੈ ਰਿਹਾ ਹੈ:
|
|
|
|
> "chrome.runtime API ਨੂੰ ਬੈਕਗ੍ਰਾਊਂਡ ਪੰਨੇ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਨ, ਮੈਨਿਫੈਸਟ ਬਾਰੇ ਵੇਰਵੇ ਵਾਪਸ ਕਰਨ, ਅਤੇ ਐਪ ਜਾਂ ਐਕਸਟੈਂਸ਼ਨ ਲਾਈਫਸਾਈਕਲ ਵਿੱਚ ਘਟਨਾਵਾਂ ਲਈ ਸੁਣਨ ਅਤੇ ਜਵਾਬ ਦੇਣ ਲਈ ਵਰਤੋ। ਤੁਸੀਂ ਇਸ API ਦੀ ਵਰਤੋਂ URLs ਦੇ ਰਿਲੇਟਿਵ ਪਾਥ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਯੋਗ URLs ਵਿੱਚ ਬਦਲਣ ਲਈ ਵੀ ਕਰ ਸਕਦੇ ਹੋ।"
|
|
|
|
✅ ਜੇ ਤੁਸੀਂ Edge ਲਈ ਇਹ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਵਿਕਸਿਤ ਕਰ ਰਹੇ ਹੋ, ਤਾਂ ਇਹ ਤੁਹਾਨੂੰ ਹੈਰਾਨ ਕਰ ਸਕਦਾ ਹੈ ਕਿ ਤੁਸੀਂ chrome API ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੇ ਹੋ। Edge ਦੇ ਨਵੇਂ ਬ੍ਰਾਊਜ਼ਰ ਵਰਜਨ Chromium ਬ੍ਰਾਊਜ਼ਰ ਇੰਜਨ 'ਤੇ ਚਲਦੇ ਹਨ, ਇਸ ਲਈ ਤੁਸੀਂ ਇਹ ਟੂਲਜ਼ ਵਰਤ ਸਕਦੇ ਹੋ।
|
|
|
|
> ਨੋਟ, ਜੇ ਤੁਸੀਂ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਦਾ ਪ੍ਰੋਫਾਈਲ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਐਕਸਟੈਂਸ਼ਨ ਦੇ ਅੰਦਰੋਂ ਹੀ ਡਿਵ ਟੂਲਜ਼ ਲਾਂਚ ਕਰੋ, ਕਿਉਂਕਿ ਇਹ ਆਪਣਾ ਵੱਖਰਾ ਬ੍ਰਾਊਜ਼ਰ ਇੰਸਟੈਂਸ ਹੈ।
|
|
|
|
### ਡਿਫੌਲਟ ਆਈਕਨ ਰੰਗ ਸੈੱਟ ਕਰੋ
|
|
|
|
ਹੁਣ, `init()` ਫੰਕਸ਼ਨ ਵਿੱਚ, ਆਈਕਨ ਨੂੰ ਸ਼ੁਰੂ ਵਿੱਚ ਜਨਰਲ ਗ੍ਰੀਨ ਰੱਖਣ ਲਈ chrome ਦੇ `updateIcon` ਐਕਸ਼ਨ ਨੂੰ ਦੁਬਾਰਾ ਕਾਲ ਕਰੋ:
|
|
|
|
```JavaScript
|
|
chrome.runtime.sendMessage({
|
|
action: 'updateIcon',
|
|
value: {
|
|
color: 'green',
|
|
},
|
|
});
|
|
```
|
|
|
|
### ਫੰਕਸ਼ਨ ਨੂੰ ਕਾਲ ਕਰੋ, ਕਾਲ ਨੂੰ ਐਗਜ਼ਿਕਿਊਟ ਕਰੋ
|
|
|
|
ਅਗਲੇ ਕਦਮ ਵਿੱਚ, ਉਸ ਫੰਕਸ਼ਨ ਨੂੰ ਕਾਲ ਕਰੋ ਜੋ ਤੁਸੀਂ ਹੁਣੇ ਬਣਾਇਆ ਸੀ, CO2Signal API ਦੁਆਰਾ ਵਾਪਸ ਕੀਤੇ ਗਏ ਪ੍ਰੋਮਿਸ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਕੇ:
|
|
|
|
```JavaScript
|
|
//let CO2...
|
|
calculateColor(CO2);
|
|
```
|
|
|
|
ਅਤੇ ਆਖਰ ਵਿੱਚ, `/dist/background.js` ਵਿੱਚ, ਬੈਕਗ੍ਰਾਊਂਡ ਐਕਸ਼ਨ ਕਾਲਾਂ ਲਈ ਸੁਣਨ ਵਾਲਾ ਸ਼ਾਮਲ ਕਰੋ:
|
|
|
|
```JavaScript
|
|
chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
|
|
if (msg.action === 'updateIcon') {
|
|
chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) });
|
|
}
|
|
});
|
|
//borrowed from energy lollipop extension, nice feature!
|
|
function drawIcon(value) {
|
|
let canvas = document.createElement('canvas');
|
|
let context = canvas.getContext('2d');
|
|
|
|
context.beginPath();
|
|
context.fillStyle = value.color;
|
|
context.arc(100, 100, 50, 0, 2 * Math.PI);
|
|
context.fill();
|
|
|
|
return context.getImageData(50, 50, 100, 100);
|
|
}
|
|
```
|
|
|
|
ਇਸ ਕੋਡ ਵਿੱਚ, ਤੁਸੀਂ ਬੈਕਐਂਡ ਟਾਸਕ ਮੈਨੇਜਰ ਨੂੰ ਆਉਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਸੁਨੇਹੇ ਲਈ ਸੁਣਨ ਵਾਲਾ ਸ਼ਾਮਲ ਕਰ ਰਹੇ ਹੋ। ਜੇ ਇਸਨੂੰ 'updateIcon' ਕਿਹਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਅਗਲਾ ਕੋਡ ਚਲਦਾ ਹੈ ਜੋ Canvas API ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਸਹੀ ਰੰਗ ਦਾ ਆਈਕਨ ਬਣਾਉਂਦਾ ਹੈ।
|
|
|
|
✅ ਤੁਸੀਂ Canvas API ਬਾਰੇ ਹੋਰ ਜਾਣੋਗੇ [ਸਪੇਸ ਗੇਮ ਪਾਠਾਂ](../../6-space-game/2-drawing-to-canvas/README.md) ਵਿੱਚ।
|
|
|
|
ਹੁਣ, ਆਪਣੇ ਐਕਸਟੈਂਸ਼ਨ ਨੂੰ ਦੁਬਾਰਾ ਬਣਾਓ (`npm run build`), ਰਿਫ੍ਰੈਸ਼ ਕਰੋ ਅਤੇ ਆਪਣਾ ਐਕਸਟੈਂਸ਼ਨ ਲਾਂਚ ਕਰੋ, ਅਤੇ ਰੰਗ ਨੂੰ ਬਦਲਦੇ ਵੇਖੋ। ਕੀ ਇਹ ਕਿਤੇ ਜਾਣ ਜਾਂ ਬਰਤਨ ਧੋਣ ਦਾ ਸਮਾਂ ਹੈ? ਹੁਣ ਤੁਹਾਨੂੰ ਪਤਾ ਹੈ!
|
|
|
|
ਵਧਾਈ ਹੋਵੇ, ਤੁਸੀਂ ਇੱਕ ਲਾਭਦਾਇਕ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਬਣਾਇਆ ਹੈ ਅਤੇ ਇਹ ਵੀ ਸਿੱਖਿਆ ਹੈ ਕਿ ਬ੍ਰਾਊਜ਼ਰ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ ਅਤੇ ਇਸਦੇ ਪ੍ਰਦਰਸ਼ਨ ਨੂੰ ਕਿਵੇਂ ਪ੍ਰੋਫਾਈਲ ਕਰਨਾ ਹੈ।
|
|
|
|
---
|
|
|
|
## 🚀 ਚੁਣੌਤੀ
|
|
|
|
ਕੁਝ ਓਪਨ ਸੋਰਸ ਵੈੱਬਸਾਈਟਾਂ ਦੀ ਜਾਂਚ ਕਰੋ ਜੋ ਕਾਫ਼ੀ ਸਮੇਂ ਤੋਂ ਮੌਜੂਦ ਹਨ, ਅਤੇ, ਉਨ੍ਹਾਂ ਦੇ GitHub ਇਤਿਹਾਸ ਦੇ ਆਧਾਰ 'ਤੇ, ਵੇਖੋ ਕਿ ਕੀ ਉਹਨਾਂ ਨੂੰ ਪ੍ਰਦਰਸ਼ਨ ਲਈ ਸਾਲਾਂ ਦੌਰਾਨ ਅਨੁਕੂਲਿਤ ਕੀਤਾ ਗਿਆ ਸੀ। ਸਭ ਤੋਂ ਆਮ ਸਮੱਸਿਆ ਵਾਲਾ ਬਿੰਦੂ ਕੀ ਹੈ?
|
|
|
|
## ਪੋਸਟ-ਲੈਕਚਰ ਕਵਿਜ਼
|
|
|
|
[ਪੋਸਟ-ਲੈਕਚਰ ਕਵਿਜ਼](https://ff-quizzes.netlify.app/web/quiz/28)
|
|
|
|
## ਸਮੀਖਿਆ ਅਤੇ ਸਵੈ ਅਧਿਐਨ
|
|
|
|
ਇੱਕ [ਪ੍ਰਦਰਸ਼ਨ ਨਿਊਜ਼ਲੈਟਰ](https://perf.email/) ਲਈ ਸਾਈਨ ਅੱਪ ਕਰਨ ਬਾਰੇ ਸੋਚੋ।
|
|
|
|
ਬ੍ਰਾਊਜ਼ਰਾਂ ਵੱਲੋਂ ਵੈੱਬ ਪ੍ਰਦਰਸ਼ਨ ਨੂੰ ਮਾਪਣ ਦੇ ਕੁਝ ਤਰੀਕਿਆਂ ਦੀ ਜਾਂਚ ਕਰੋ, ਉਨ੍ਹਾਂ ਦੇ ਵੈੱਬ ਟੂਲਜ਼ ਵਿੱਚ ਪ੍ਰਦਰਸ਼ਨ ਟੈਬਾਂ ਨੂੰ ਵੇਖ ਕੇ। ਕੀ ਤੁਹਾਨੂੰ ਕੋਈ ਵੱਡੇ ਅੰਤਰ ਮਿਲਦੇ ਹਨ?
|
|
|
|
## ਅਸਾਈਨਮੈਂਟ
|
|
|
|
[ਸਾਈਟ ਦਾ ਪ੍ਰਦਰਸ਼ਨ ਵਿਸ਼ਲੇਸ਼ਣ ਕਰੋ](assignment.md)
|
|
|
|
**ਅਸਵੀਕਾਰਨਾ**:
|
|
ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀਤਾ ਲਈ ਯਤਨਸ਼ੀਲ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁਚੀਤਤਾਵਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਇਸਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ। |