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.
175 lines
20 KiB
175 lines
20 KiB
<!--
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
{
|
|
"original_hash": "b91cbf14240ee59411b96448b994ace1",
|
|
"translation_date": "2025-10-03T12:20:38+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 ਤੋਂ ਡਾਟਾ ਫੈਚ ਕਰਨ ਲਈ ਇੱਕ ਫਾਰਮ ਅਤੇ ਡਿਸਪਲੇ ਇਲਾਕਾ ਕਿਵੇਂ ਬਣਾਇਆ ਜਾਵੇ। ਇਹ ਵੈੱਬ 'ਤੇ ਇੱਕ ਵੈੱਬ ਪ੍ਰਜ਼ੈਂਸ ਬਣਾਉਣ ਦਾ ਬਹੁਤ ਹੀ ਸਧਾਰਨ ਤਰੀਕਾ ਹੈ। ਤੁਸੀਂ ਡਾਟਾ ਨੂੰ ਅਸਿੰਕ੍ਰੋਨਸ ਤਰੀਕੇ ਨਾਲ ਫੈਚ ਕਰਨ ਦਾ ਪ੍ਰਬੰਧ ਕਰਨ ਦਾ ਤਰੀਕਾ ਵੀ ਸਿੱਖਿਆ। ਤੁਹਾਡਾ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਲਗਭਗ ਤਿਆਰ ਹੈ।
|
|
|
|
ਹੁਣ ਕੁਝ ਬੈਕਗ੍ਰਾਊਂਡ ਟਾਸਕਾਂ ਦਾ ਪ੍ਰਬੰਧ ਕਰਨਾ ਬਾਕੀ ਹੈ, ਜਿਸ ਵਿੱਚ ਐਕਸਟੈਂਸ਼ਨ ਦੇ ਆਈਕਨ ਦਾ ਰੰਗ ਤਾਜ਼ਾ ਕਰਨਾ ਸ਼ਾਮਲ ਹੈ। ਇਸ ਲਈ ਇਹ ਬ੍ਰਾਊਜ਼ਰ ਇਸ ਕਿਸਮ ਦੇ ਕੰਮਾਂ ਦਾ ਪ੍ਰਬੰਧਨ ਕਿਵੇਂ ਕਰਦਾ ਹੈ, ਇਸ ਬਾਰੇ ਗੱਲ ਕਰਨ ਦਾ ਬਹੁਤ ਵਧੀਆ ਸਮਾਂ ਹੈ। ਆਓ ਇਸ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਕੰਮਾਂ ਨੂੰ ਤੁਹਾਡੇ ਵੈੱਬ ਐਸੈਟਸ ਦੀ ਪ੍ਰਦਰਸ਼ਨਸ਼ੀਲਤਾ ਦੇ ਸੰਦਰਭ ਵਿੱਚ ਸੋਚੀਏ ਜਦੋਂ ਤੁਸੀਂ ਇਹ ਬਣਾਉਂਦੇ ਹੋ।
|
|
|
|
## ਵੈੱਬ ਪ੍ਰਦਰਸ਼ਨ ਬੁਨਿਆਦੀਆਂ
|
|
|
|
> "ਵੈੱਬਸਾਈਟ ਪ੍ਰਦਰਸ਼ਨ ਦੋ ਚੀਜ਼ਾਂ ਬਾਰੇ ਹੈ: ਪੇਜ ਕਿੰਨੀ ਤੇਜ਼ੀ ਨਾਲ ਲੋਡ ਹੁੰਦੀ ਹੈ, ਅਤੇ ਇਸ 'ਤੇ ਕੋਡ ਕਿੰਨੀ ਤੇਜ਼ੀ ਨਾਲ ਚਲਦਾ ਹੈ।" -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
|
|
|
|
ਤੁਹਾਡੀਆਂ ਵੈੱਬਸਾਈਟਾਂ ਨੂੰ ਹਰ ਕਿਸਮ ਦੇ ਜੰਤਰਾਂ, ਹਰ ਕਿਸਮ ਦੇ ਉਪਭੋਗਤਾਵਾਂ, ਅਤੇ ਹਰ ਕਿਸਮ ਦੇ ਹਾਲਾਤਾਂ ਵਿੱਚ ਬਹੁਤ ਤੇਜ਼ ਬਣਾਉਣ ਦਾ ਵਿਸ਼ਾ, ਅਨੁਮਾਨਿਤ ਤੌਰ 'ਤੇ, ਬਹੁਤ ਵੱਡਾ ਹੈ। ਜਦੋਂ ਤੁਸੀਂ ਇੱਕ ਸਧਾਰਨ ਵੈੱਬ ਪ੍ਰੋਜੈਕਟ ਜਾਂ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਬਣਾਉਂਦੇ ਹੋ, ਤਾਂ ਕੁਝ ਗੱਲਾਂ ਨੂੰ ਯਾਦ ਰੱਖਣਾ ਚੰਗਾ ਹੈ।
|
|
|
|
ਸਭ ਤੋਂ ਪਹਿਲਾਂ, ਤੁਹਾਨੂੰ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਡਾਟਾ ਇਕੱਠਾ ਕਰਨ ਦੀ ਜ਼ਰੂਰਤ ਹੈ ਕਿ ਤੁਹਾਡੀ ਸਾਈਟ ਕੁਸ਼ਲਤਾਪੂਰਵਕ ਚੱਲ ਰਹੀ ਹੈ। ਇਸ ਲਈ ਸਭ ਤੋਂ ਵਧੀਆ ਜਗ੍ਹਾ ਤੁਹਾਡੇ ਵੈੱਬ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਡਿਵੈਲਪਰ ਟੂਲਜ਼ ਵਿੱਚ ਹੈ। Edge ਵਿੱਚ, ਤੁਸੀਂ "Settings and more" ਬਟਨ (ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਸਿਖਰ ਦੇ ਸੱਜੇ ਪਾਸੇ ਤਿੰਨ ਬਿੰਦੂਆਂ ਵਾਲਾ ਆਈਕਨ) ਚੁਣ ਸਕਦੇ ਹੋ, ਫਿਰ More Tools > Developer Tools 'ਤੇ ਜਾ ਸਕਦੇ ਹੋ ਅਤੇ Performance ਟੈਬ ਖੋਲ੍ਹ ਸਕਦੇ ਹੋ। ਤੁਸੀਂ Windows 'ਤੇ `Ctrl` + `Shift` + `I` ਜਾਂ Mac 'ਤੇ `Option` + `Command` + `I` ਦੀਬਾਰਾ ਡਿਵੈਲਪਰ ਟੂਲਜ਼ ਖੋਲ੍ਹ ਸਕਦੇ ਹੋ।
|
|
|
|
Performance ਟੈਬ ਵਿੱਚ ਇੱਕ ਪ੍ਰੋਫਾਈਲਿੰਗ ਟੂਲ ਹੁੰਦਾ ਹੈ। ਇੱਕ ਵੈੱਬਸਾਈਟ ਖੋਲ੍ਹੋ (ਉਦਾਹਰਨ ਲਈ, [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) ਅਤੇ 'Record' ਬਟਨ 'ਤੇ ਕਲਿਕ ਕਰੋ, ਫਿਰ ਸਾਈਟ ਨੂੰ ਰਿਫ੍ਰੈਸ਼ ਕਰੋ। ਰਿਕਾਰਡਿੰਗ ਨੂੰ ਕਿਸੇ ਵੀ ਸਮੇਂ ਰੋਕੋ, ਅਤੇ ਤੁਸੀਂ ਉਹ ਰੂਟੀਨ ਦੇਖ ਸਕੋਗੇ ਜੋ 'script', 'render', ਅਤੇ 'paint' ਸਾਈਟ ਲਈ ਬਣਾਈ ਗਈਆਂ ਹਨ:
|
|
|
|
|
|
|
|
✅ [Microsoft Documentation](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) 'ਤੇ Edge ਵਿੱਚ Performance ਪੈਨਲ ਬਾਰੇ ਜਾਣਕਾਰੀ ਪ੍ਰਾਪਤ ਕਰੋ।
|
|
|
|
> ਸੁਝਾਅ: ਤੁਹਾਡੀ ਵੈੱਬਸਾਈਟ ਦੇ ਸ਼ੁਰੂਆਤੀ ਸਮੇਂ ਦੀ ਸਹੀ ਪੜਤਾਲ ਕਰਨ ਲਈ, ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਦਾ ਕੈਸ਼ ਸਾਫ਼ ਕਰੋ।
|
|
|
|
ਪ੍ਰੋਫਾਈਲ ਟਾਈਮਲਾਈਨ ਦੇ ਤੱਤਾਂ ਨੂੰ ਚੁਣੋ ਤਾਂ ਜੋ ਉਹ ਘਟਨਾਵਾਂ ਜ਼ੂਮ ਕੀਤੀਆਂ ਜਾ ਸਕਣ ਜੋ ਤੁਹਾਡਾ ਪੇਜ ਲੋਡ ਹੋਣ ਦੌਰਾਨ ਹੁੰਦੀਆਂ ਹਨ।
|
|
|
|
ਪ੍ਰੋਫਾਈਲ ਟਾਈਮਲਾਈਨ ਦੇ ਇੱਕ ਹਿੱਸੇ ਨੂੰ ਚੁਣ ਕੇ ਅਤੇ ਸਾਰਾਂ ਪੈਨ ਦੇਖ ਕੇ ਆਪਣੇ ਪੇਜ ਦੀ ਪ੍ਰਦਰਸ਼ਨਸ਼ੀਲਤਾ ਦੀ ਇੱਕ ਝਲਕ ਪ੍ਰਾਪਤ ਕਰੋ:
|
|
|
|
|
|
|
|
Event Log ਪੈਨ ਦੀ ਜਾਂਚ ਕਰੋ ਤਾਂ ਜੋ ਇਹ ਦੇਖਿਆ ਜਾ ਸਕੇ ਕਿ ਕੀ ਕੋਈ ਘਟਨਾ 15 ਮਿ.ਸੇ. ਤੋਂ ਵੱਧ ਸਮਾਂ ਲੈਂਦੀ ਹੈ:
|
|
|
|
|
|
|
|
✅ ਆਪਣੇ ਪ੍ਰੋਫਾਈਲਰ ਨੂੰ ਜਾਣੋ! ਇਸ ਸਾਈਟ 'ਤੇ ਡਿਵੈਲਪਰ ਟੂਲਜ਼ ਖੋਲ੍ਹੋ ਅਤੇ ਦੇਖੋ ਕਿ ਕੀ ਕੋਈ ਬੋਤਲ-ਗਰਦਨ ਹੈ। ਸਭ ਤੋਂ ਹੌਲੀ ਲੋਡ ਹੋਣ ਵਾਲਾ ਐਸੈਟ ਕਿਹੜਾ ਹੈ? ਸਭ ਤੋਂ ਤੇਜ਼?
|
|
|
|
## ਪ੍ਰੋਫਾਈਲਿੰਗ ਚੈੱਕ
|
|
|
|
ਆਮ ਤੌਰ 'ਤੇ, ਕੁਝ "ਸਮੱਸਿਆ ਵਾਲੇ ਖੇਤਰ" ਹਨ ਜਿਨ੍ਹਾਂ ਨੂੰ ਹਰ ਵੈੱਬ ਡਿਵੈਲਪਰ ਨੂੰ ਸਾਈਟ ਬਣਾਉਣ ਦੌਰਾਨ ਦੇਖਣਾ ਚਾਹੀਦਾ ਹੈ ਤਾਂ ਜੋ ਪ੍ਰੋਡਕਸ਼ਨ ਵਿੱਚ ਡਿਪਲੌਇ ਕਰਨ ਦੇ ਸਮੇਂ ਨੁਕਸਾਨਦਾਇਕ ਅਚੰਭੇ ਤੋਂ ਬਚਿਆ ਜਾ ਸਕੇ।
|
|
|
|
**ਐਸੈਟ ਸਾਈਜ਼**: ਪਿਛਲੇ ਕੁਝ ਸਾਲਾਂ ਵਿੱਚ ਵੈੱਬ 'ਭਾਰੀ' ਹੋ ਗਿਆ ਹੈ, ਅਤੇ ਇਸ ਲਈ ਹੌਲਾ। ਇਸ ਭਾਰ ਦਾ ਕੁਝ ਹਿੱਸਾ ਚਿੱਤਰਾਂ ਦੇ ਉਪਯੋਗ ਨਾਲ ਸੰਬੰਧਿਤ ਹੈ।
|
|
|
|
✅ [Internet Archive](https://httparchive.org/reports/page-weight) 'ਤੇ ਪੇਜ ਵਜ਼ਨ ਅਤੇ ਹੋਰ ਬਾਰੇ ਇਤਿਹਾਸਕ ਦ੍ਰਿਸ਼ਟੀ ਲਈ ਦੇਖੋ।
|
|
|
|
ਇੱਕ ਚੰਗੀ ਅਭਿਆਸ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣਾ ਹੈ ਕਿ ਤੁਹਾਡੇ ਚਿੱਤਰਾਂ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕੀਤਾ ਗਿਆ ਹੈ ਅਤੇ ਤੁਹਾਡੇ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਸਹੀ ਆਕਾਰ ਅਤੇ ਰਿਜ਼ੋਲੂਸ਼ਨ 'ਤੇ ਪੇਸ਼ ਕੀਤਾ ਗਿਆ ਹੈ।
|
|
|
|
**DOM Traversals**: ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਤੁਹਾਡੇ ਦੁਆਰਾ ਲਿਖੇ ਕੋਡ ਦੇ ਆਧਾਰ 'ਤੇ ਆਪਣਾ Document Object Model ਬਣਾਉਣਾ ਪੈਂਦਾ ਹੈ, ਇਸ ਲਈ ਚੰਗੀ ਪੇਜ ਪ੍ਰਦਰਸ਼ਨਸ਼ੀਲਤਾ ਦੇ ਹਿੱਤ ਵਿੱਚ ਤੁਹਾਡੇ ਟੈਗਾਂ ਨੂੰ ਘੱਟ ਰੱਖਣਾ ਚੰਗਾ ਹੈ, ਸਿਰਫ਼ ਉਹਨਾਂ ਨੂੰ ਵਰਤਣਾ ਅਤੇ ਸਟਾਈਲ ਕਰਨਾ ਜੋ ਪੇਜ ਨੂੰ ਲੋੜੀਂਦੇ ਹਨ। ਇਸ ਬਿੰਦੂ ਤੱਕ, ਪੇਜ ਨਾਲ ਸੰਬੰਧਿਤ ਵਾਧੂ CSS ਨੂੰ ਅਨੁਕੂਲਿਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ; ਉਹ ਸਟਾਈਲ ਜੋ ਸਿਰਫ਼ ਇੱਕ ਪੇਜ 'ਤੇ ਵਰਤੀਆਂ ਜਾਣੀਆਂ ਹਨ, ਉਹਨਾਂ ਨੂੰ ਮੁੱਖ ਸਟਾਈਲ ਸ਼ੀਟ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਨ ਦੀ ਜ਼ਰੂਰਤ ਨਹੀਂ ਹੈ, ਉਦਾਹਰਨ ਲਈ।
|
|
|
|
**JavaScript**: ਹਰ JavaScript ਡਿਵੈਲਪਰ ਨੂੰ 'render-blocking' ਸਕ੍ਰਿਪਟਾਂ ਲਈ ਦੇਖਣਾ ਚਾਹੀਦਾ ਹੈ ਜੋ DOM ਨੂੰ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਟ੍ਰੈਵਰਸ ਅਤੇ ਪੇਂਟ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਲੋਡ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ। ਆਪਣੇ inline ਸਕ੍ਰਿਪਟਾਂ ਨਾਲ `defer` ਵਰਤਣ ਬਾਰੇ ਸੋਚੋ (ਜਿਵੇਂ Terrarium ਮੌਡਿਊਲ ਵਿੱਚ ਕੀਤਾ ਗਿਆ ਹੈ)।
|
|
|
|
✅ [Site Speed Test website](https://www.webpagetest.org/) 'ਤੇ ਕੁਝ ਸਾਈਟਾਂ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ ਤਾਂ ਜੋ ਇਹ ਸਿੱਖਿਆ ਜਾ ਸਕੇ ਕਿ ਸਾਈਟ ਪ੍ਰਦਰਸ਼ਨ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ ਕੀ ਆਮ ਚੈੱਕ ਕੀਤੇ ਜਾਂਦੇ ਹਨ।
|
|
|
|
ਹੁਣ ਜਦੋਂ ਤੁਹਾਨੂੰ ਇਹ ਪਤਾ ਹੈ ਕਿ ਬ੍ਰਾਊਜ਼ਰ ਉਹ ਐਸੈਟਸ ਕਿਵੇਂ ਰੈਂਡਰ ਕਰਦਾ ਹੈ ਜੋ ਤੁਸੀਂ ਇਸ ਨੂੰ ਭੇਜਦੇ ਹੋ, ਆਓ ਉਹ ਆਖਰੀ ਕੁਝ ਚੀਜ਼ਾਂ ਦੇਖੀਏ ਜੋ ਤੁਹਾਨੂੰ ਆਪਣਾ ਐਕਸਟੈਂਸ਼ਨ ਪੂਰਾ ਕਰਨ ਲਈ ਕਰਨ ਦੀ ਜ਼ਰੂਰਤ ਹੈ:
|
|
|
|
### ਰੰਗ ਦੀ ਗਣਨਾ ਕਰਨ ਲਈ ਇੱਕ ਫੰਕਸ਼ਨ ਬਣਾਓ
|
|
|
|
`/src/index.js` ਵਿੱਚ ਕੰਮ ਕਰਦੇ ਹੋਏ, `calculateColor()` ਨਾਮਕ ਇੱਕ ਫੰਕਸ਼ਨ ਸ਼੍ਰੇਣੀ ਦੇ `const` ਵੈਰੀਏਬਲਾਂ ਦੇ ਬਾਅਦ ਸ਼ਾਮਲ ਕਰੋ ਜੋ DOM ਤੱਕ ਪਹੁੰਚ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਸੈਟ ਕੀਤੇ ਗਏ ਹਨ:
|
|
|
|
```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 ਕਾਲ ਤੋਂ (ਪਿਛਲੇ ਪਾਠ ਵਿੱਚ ਪੂਰਾ ਕੀਤਾ) ਇੱਕ ਮੁੱਲ (ਕਾਰਬਨ ਇੰਟੈਂਸਿਟੀ) ਪਾਸ ਕਰਦੇ ਹੋ, ਅਤੇ ਫਿਰ ਤੁਸੀਂ ਗਣਨਾ ਕਰਦੇ ਹੋ ਕਿ ਇਸ ਦਾ ਮੁੱਲ colors array ਵਿੱਚ ਪੇਸ਼ ਕੀਤੇ ਇੰਡੈਕਸ ਦੇ ਕਿੰਨਾ ਨੇੜੇ ਹੈ। ਫਿਰ ਤੁਸੀਂ 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 ਦੁਆਰਾ ਵਾਪਸ ਕੀਤੇ ਗਏ promise ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਕੇ:
|
|
|
|
```JavaScript
|
|
//let CO2...
|
|
calculateColor(CO2);
|
|
```
|
|
|
|
ਅਤੇ ਆਖਰਕਾਰ, `/dist/background.js` ਵਿੱਚ, ਇਹਨਾਂ ਬੈਕਗ੍ਰਾਊਂਡ ਐਕਸ਼ਨ ਕਾਲਾਂ ਲਈ ਸੁਣਨ ਵਾਲਾ ਸ਼ਾਮਲ ਕਰੋ:
|
|
|
|
```JavaScript
|
|
chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
|
|
if (msg.action === 'updateIcon') {
|
|
chrome.action.setIcon({ imageData: drawIcon(msg.value) });
|
|
}
|
|
});
|
|
//borrowed from energy lollipop extension, nice feature!
|
|
function drawIcon(value) {
|
|
let canvas = new OffscreenCanvas(200, 200);
|
|
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 ਬਾਰੇ ਹੋਰ ਸਿੱਖੋਗੇ [Space Game ਪਾਠਾਂ](../../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) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਹਾਲਾਂਕਿ ਅਸੀਂ ਸਹੀਅਤਾ ਲਈ ਯਤਨਸ਼ੀਲ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁਚੀਤਤਾਵਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਇਸ ਦਸਤਾਵੇਜ਼ ਦੇ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਲਿਖੇ ਗ੍ਰੰਥ ਨੂੰ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਅਸੀਂ ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤ ਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ। |