20 KiB
ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਪ੍ਰੋਜੈਕਟ ਭਾਗ 3: ਬੈਕਗ੍ਰਾਊਂਡ ਟਾਸਕ ਅਤੇ ਪ੍ਰਦਰਸ਼ਨ ਬਾਰੇ ਸਿੱਖੋ
ਪੂਰਵ-ਵਿਆਖਿਆ ਪ੍ਰਸ਼ਨੋਤਰੀ
ਪਰਿਚਯ
ਇਸ ਮੋਡਿਊਲ ਦੇ ਪਿਛਲੇ ਦੋ ਪਾਠਾਂ ਵਿੱਚ, ਤੁਸੀਂ ਸਿੱਖਿਆ ਕਿ API ਤੋਂ ਡਾਟਾ ਲੈਣ ਲਈ ਇੱਕ ਫਾਰਮ ਅਤੇ ਡਿਸਪਲੇ ਇਲਾਕਾ ਕਿਵੇਂ ਬਣਾਉਣਾ ਹੈ। ਇਹ ਵੈੱਬ 'ਤੇ ਇੱਕ ਮਿਆਰੀ ਵੈੱਬ ਪ੍ਰਜ਼ੈਂਸ ਬਣਾਉਣ ਦਾ ਇੱਕ ਆਮ ਤਰੀਕਾ ਹੈ। ਤੁਸੀਂ ਡਾਟਾ ਨੂੰ ਅਸਿੰਕ੍ਰੋਨਸ ਤਰੀਕੇ ਨਾਲ ਲੈਣ ਦਾ ਪ੍ਰਬੰਧ ਕਰਨ ਦਾ ਤਰੀਕਾ ਵੀ ਸਿੱਖਿਆ। ਤੁਹਾਡਾ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਲਗਭਗ ਤਿਆਰ ਹੈ।
ਹੁਣ ਕੁਝ ਬੈਕਗ੍ਰਾਊਂਡ ਟਾਸਕਾਂ ਦਾ ਪ੍ਰਬੰਧ ਕਰਨਾ ਬਾਕੀ ਹੈ, ਜਿਸ ਵਿੱਚ ਐਕਸਟੈਂਸ਼ਨ ਦੇ ਆਈਕਨ ਦਾ ਰੰਗ ਰਿਫ੍ਰੈਸ਼ ਕਰਨਾ ਸ਼ਾਮਲ ਹੈ। ਇਸ ਲਈ, ਇਹ ਸਮਾਂ ਬ੍ਰਾਊਜ਼ਰ ਵੱਲੋਂ ਇਸ ਕਿਸਮ ਦੇ ਟਾਸਕਾਂ ਨੂੰ ਕਿਵੇਂ ਸੰਭਾਲਿਆ ਜਾਂਦਾ ਹੈ, ਇਸ ਬਾਰੇ ਗੱਲ ਕਰਨ ਲਈ ਬਹੁਤ ਵਧੀਆ ਹੈ। ਜਦੋਂ ਤੁਸੀਂ ਆਪਣੇ ਵੈੱਬ ਐਸੈਟ ਬਣਾਉਂਦੇ ਹੋ, ਤਾਂ ਆਓ ਇਸਨੂੰ ਪ੍ਰਦਰਸ਼ਨ ਦੇ ਸੰਦਰਭ ਵਿੱਚ ਸੋਚੀਏ।
ਵੈੱਬ ਪ੍ਰਦਰਸ਼ਨ ਬੁਨਿਆਦੀਆਂ
"ਵੈੱਬਸਾਈਟ ਪ੍ਰਦਰਸ਼ਨ ਦੋ ਚੀਜ਼ਾਂ ਬਾਰੇ ਹੈ: ਪੰਨਾ ਕਿੰਨਾ ਤੇਜ਼ੀ ਨਾਲ ਲੋਡ ਹੁੰਦਾ ਹੈ, ਅਤੇ ਇਸ 'ਤੇ ਕੋਡ ਕਿੰਨਾ ਤੇਜ਼ੀ ਨਾਲ ਚਲਦਾ ਹੈ।" -- ਜ਼ੈਕ ਗਰੋਸਬਾਰਟ
ਤੁਹਾਡੀਆਂ ਵੈੱਬਸਾਈਟਾਂ ਨੂੰ ਹਰ ਕਿਸਮ ਦੇ ਜੰਤਰਾਂ, ਹਰ ਕਿਸਮ ਦੇ ਉਪਭੋਗਤਾਵਾਂ, ਅਤੇ ਹਰ ਕਿਸਮ ਦੇ ਹਾਲਾਤਾਂ ਵਿੱਚ ਬਹੁਤ ਤੇਜ਼ ਬਣਾਉਣ ਦੇ ਤਰੀਕੇ ਬਾਰੇ ਵਿਸ਼ਾ ਅਣਗਿਣਤ ਹੈ। ਜਦੋਂ ਤੁਸੀਂ ਇੱਕ ਮਿਆਰੀ ਵੈੱਬ ਪ੍ਰੋਜੈਕਟ ਜਾਂ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਬਣਾਉਂਦੇ ਹੋ, ਤਾਂ ਕੁਝ ਗੱਲਾਂ ਨੂੰ ਯਾਦ ਰੱਖਣਾ ਚਾਹੀਦਾ ਹੈ।
ਸਭ ਤੋਂ ਪਹਿਲਾਂ, ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਕਿ ਤੁਹਾਡੀ ਸਾਈਟ ਕੁਸ਼ਲਤਾਪੂਰਵਕ ਚੱਲ ਰਹੀ ਹੈ, ਤੁਹਾਨੂੰ ਇਸਦੇ ਪ੍ਰਦਰਸ਼ਨ ਬਾਰੇ ਡਾਟਾ ਇਕੱਠਾ ਕਰਨ ਦੀ ਲੋੜ ਹੈ। ਇਸਦਾ ਪਹਿਲਾ ਸਥਾਨ ਤੁਹਾਡੇ ਵੈੱਬ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਡਿਵੈਲਪਰ ਟੂਲਜ਼ ਵਿੱਚ ਹੈ। Edge ਵਿੱਚ, ਤੁਸੀਂ "Settings and more" ਬਟਨ (ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਸਿਖਰ ਦੇ ਸੱਜੇ ਪਾਸੇ ਤਿੰਨ ਬਿੰਦੂਆਂ ਵਾਲਾ ਆਈਕਨ) ਚੁਣ ਸਕਦੇ ਹੋ, ਫਿਰ More Tools > Developer Tools 'ਤੇ ਜਾਓ ਅਤੇ Performance ਟੈਬ ਖੋਲ੍ਹੋ। ਤੁਸੀਂ Windows 'ਤੇ Ctrl + Shift + I ਜਾਂ Mac 'ਤੇ Option + Command + I ਦੀ-ਵਰਤੋਂ ਕਰਕੇ ਡਿਵੈਲਪਰ ਟੂਲਜ਼ ਖੋਲ੍ਹ ਸਕਦੇ ਹੋ।
Performance ਟੈਬ ਵਿੱਚ ਇੱਕ ਪ੍ਰੋਫਾਈਲਿੰਗ ਟੂਲ ਹੁੰਦਾ ਹੈ। ਇੱਕ ਵੈੱਬਸਾਈਟ ਖੋਲ੍ਹੋ (ਉਦਾਹਰਨ ਲਈ, https://www.microsoft.com) ਅਤੇ 'Record' ਬਟਨ 'ਤੇ ਕਲਿਕ ਕਰੋ, ਫਿਰ ਸਾਈਟ ਨੂੰ ਰਿਫ੍ਰੈਸ਼ ਕਰੋ। ਕਿਸੇ ਵੀ ਸਮੇਂ ਰਿਕਾਰਡਿੰਗ ਨੂੰ ਰੋਕੋ, ਅਤੇ ਤੁਸੀਂ ਉਹ ਰੂਟੀਨ ਦੇਖ ਸਕਦੇ ਹੋ ਜੋ ਸਾਈਟ ਨੂੰ 'script', 'render', ਅਤੇ 'paint' ਕਰਨ ਲਈ ਬਣਾਈ ਗਈਆਂ ਹਨ:
✅ Edge ਵਿੱਚ Performance ਪੈਨਲ ਬਾਰੇ Microsoft Documentation ਵੇਖੋ।
ਸੁਝਾਅ: ਆਪਣੀ ਵੈੱਬਸਾਈਟ ਦੇ ਸਟਾਰਟਅਪ ਸਮੇਂ ਦਾ ਸਹੀ ਪੜ੍ਹਨ ਲਈ, ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਦਾ ਕੈਸ਼ ਸਾਫ਼ ਕਰੋ।
ਪ੍ਰੋਫਾਈਲ ਟਾਈਮਲਾਈਨ ਦੇ ਤੱਤਾਂ ਨੂੰ ਚੁਣੋ ਤਾਂ ਜੋ ਉਹ ਘਟਨਾਵਾਂ ਦੇਖ ਸਕੋ ਜੋ ਤੁਹਾਡੀ ਪੰਨੇ ਦੇ ਲੋਡ ਹੋਣ ਦੌਰਾਨ ਹੁੰਦੀਆਂ ਹਨ।
ਪ੍ਰੋਫਾਈਲ ਟਾਈਮਲਾਈਨ ਦੇ ਇੱਕ ਹਿੱਸੇ ਨੂੰ ਚੁਣ ਕੇ ਅਤੇ ਸਾਰਾਂ ਪੈਨ ਦੇਖ ਕੇ ਆਪਣੇ ਪੰਨੇ ਦੇ ਪ੍ਰਦਰਸ਼ਨ ਦਾ ਸਨੈਪਸ਼ਾਟ ਲਵੋ:
Event Log ਪੈਨ ਦੀ ਜਾਂਚ ਕਰੋ ਤਾਂ ਜੋ ਦੇਖ ਸਕੋ ਕਿ ਕੀ ਕੋਈ ਘਟਨਾ 15 ਮਿ.ਸੇ. ਤੋਂ ਵੱਧ ਸਮਾਂ ਲੈਂਦੀ ਹੈ:
✅ ਆਪਣੇ ਪ੍ਰੋਫਾਈਲਰ ਨੂੰ ਜਾਣੋ! ਇਸ ਸਾਈਟ 'ਤੇ ਡਿਵੈਲਪਰ ਟੂਲਜ਼ ਖੋਲ੍ਹੋ ਅਤੇ ਵੇਖੋ ਕਿ ਕੀ ਕੋਈ ਬੋਤਲ-ਨੈਕ ਹੈ। ਸਭ ਤੋਂ ਹੌਲੀ ਲੋਡ ਹੋਣ ਵਾਲਾ ਐਸੈਟ ਕਿਹੜਾ ਹੈ? ਸਭ ਤੋਂ ਤੇਜ਼?
ਪ੍ਰੋਫਾਈਲਿੰਗ ਚੈੱਕ
ਆਮ ਤੌਰ 'ਤੇ, ਕੁਝ "ਸਮੱਸਿਆ ਵਾਲੇ ਖੇਤਰ" ਹੁੰਦੇ ਹਨ ਜਿਨ੍ਹਾਂ ਨੂੰ ਹਰ ਵੈੱਬ ਡਿਵੈਲਪਰ ਨੂੰ ਸਾਈਟ ਬਣਾਉਣ ਦੌਰਾਨ ਦੇਖਣਾ ਚਾਹੀਦਾ ਹੈ ਤਾਂ ਜੋ ਪ੍ਰੋਡਕਸ਼ਨ 'ਤੇ ਡਿਪਲੌਇ ਕਰਨ ਦੇ ਸਮੇਂ ਕੋਈ ਅਣਹੋਣੀ ਤੋਂ ਬਚ ਸਕੇ।
ਐਸੈਟ ਸਾਈਜ਼: ਪਿਛਲੇ ਕੁਝ ਸਾਲਾਂ ਵਿੱਚ ਵੈੱਬ 'ਭਾਰੀ' ਹੋ ਗਿਆ ਹੈ, ਅਤੇ ਇਸ ਲਈ ਹੌਲਾ। ਇਸ ਭਾਰ ਦਾ ਕੁਝ ਹਿੱਸਾ ਚਿੱਤਰਾਂ ਦੀ ਵਰਤੋਂ ਨਾਲ ਸੰਬੰਧਿਤ ਹੈ।
✅ Internet Archive 'ਤੇ ਪੰਨਾ ਭਾਰ ਅਤੇ ਹੋਰ ਬਾਰੇ ਇਤਿਹਾਸਕ ਦ੍ਰਿਸ਼ਟੀ ਦੇਖੋ।
ਇੱਕ ਵਧੀਆ ਅਭਿਆਸ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣਾ ਹੈ ਕਿ ਤੁਹਾਡੇ ਚਿੱਤਰਾਂ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕੀਤਾ ਗਿਆ ਹੈ ਅਤੇ ਤੁਹਾਡੇ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਸਹੀ ਆਕਾਰ ਅਤੇ ਰਿਜ਼ੋਲਿਊਸ਼ਨ 'ਤੇ ਪੇਸ਼ ਕੀਤਾ ਗਿਆ ਹੈ।
DOM Traversals: ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਤੁਹਾਡੇ ਦੁਆਰਾ ਲਿਖੇ ਕੋਡ ਦੇ ਆਧਾਰ 'ਤੇ ਆਪਣਾ Document Object Model ਬਣਾਉਣਾ ਪੈਂਦਾ ਹੈ, ਇਸ ਲਈ ਚੰਗੇ ਪੰਨੇ ਦੇ ਪ੍ਰਦਰਸ਼ਨ ਦੇ ਹਿੱਤ ਵਿੱਚ ਤੁਹਾਡੇ ਟੈਗਾਂ ਨੂੰ ਘੱਟ ਰੱਖਣਾ ਚਾਹੀਦਾ ਹੈ, ਸਿਰਫ ਉਹੀ ਵਰਤਣਾ ਅਤੇ ਸਟਾਈਲ ਕਰਨਾ ਜੋ ਪੰਨੇ ਨੂੰ ਲੋੜ ਹੈ। ਇਸ ਬਿੰਦੂ ਤੱਕ, ਪੰਨੇ ਨਾਲ ਸੰਬੰਧਿਤ ਵਾਧੂ CSS ਨੂੰ ਅਨੁਕੂਲਿਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ; ਉਹ ਸਟਾਈਲ ਜੋ ਸਿਰਫ ਇੱਕ ਪੰਨੇ 'ਤੇ ਵਰਤਣ ਦੀ ਲੋੜ ਹੈ, ਉਹ ਮੁੱਖ ਸਟਾਈਲ ਸ਼ੀਟ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਨ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ, ਉਦਾਹਰਨ ਲਈ।
JavaScript: ਹਰ JavaScript ਡਿਵੈਲਪਰ ਨੂੰ 'render-blocking' ਸਕ੍ਰਿਪਟਾਂ ਲਈ ਦੇਖਣਾ ਚਾਹੀਦਾ ਹੈ ਜੋ DOM ਨੂੰ ਟ੍ਰੈਵਰਸ ਅਤੇ ਬ੍ਰਾਊਜ਼ਰ 'ਤੇ ਪੇਂਟ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਲੋਡ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ। ਆਪਣੇ inline ਸਕ੍ਰਿਪਟਾਂ ਨਾਲ defer ਦੀ ਵਰਤੋਂ ਕਰਨ ਬਾਰੇ ਸੋਚੋ (ਜਿਵੇਂ Terrarium ਮੋਡਿਊਲ ਵਿੱਚ ਕੀਤਾ ਗਿਆ ਹੈ)।
✅ ਸਾਈਟ ਪ੍ਰਦਰਸ਼ਨ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ ਕੀਤੇ ਜਾਣ ਵਾਲੇ ਆਮ ਚੈੱਕਾਂ ਬਾਰੇ ਹੋਰ ਜਾਣਨ ਲਈ ਕੁਝ ਸਾਈਟਾਂ ਨੂੰ Site Speed Test website 'ਤੇ ਅਜ਼ਮਾਓ।
ਹੁਣ ਜਦੋਂ ਤੁਹਾਨੂੰ ਇਹ ਪਤਾ ਹੈ ਕਿ ਬ੍ਰਾਊਜ਼ਰ ਤੁਹਾਡੇ ਦੁਆਰਾ ਭੇਜੇ ਗਏ ਐਸੈਟਾਂ ਨੂੰ ਕਿਵੇਂ ਰੈਂਡਰ ਕਰਦਾ ਹੈ, ਆਓ ਉਹ ਅੰਤਿਮ ਕੁਝ ਚੀਜ਼ਾਂ ਦੇਖੀਏ ਜੋ ਤੁਹਾਨੂੰ ਆਪਣਾ ਐਕਸਟੈਂਸ਼ਨ ਪੂਰਾ ਕਰਨ ਲਈ ਕਰਨ ਦੀ ਲੋੜ ਹੈ:
ਰੰਗ ਦੀ ਗਣਨਾ ਕਰਨ ਲਈ ਫੰਕਸ਼ਨ ਬਣਾਓ
/src/index.js ਵਿੱਚ ਕੰਮ ਕਰਦੇ ਹੋਏ, DOM ਤੱਕ ਪਹੁੰਚ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਸੈਟ ਕੀਤੇ const ਵੈਰੀਏਬਲਾਂ ਦੀ ਲੜੀ ਤੋਂ ਬਾਅਦ calculateColor() ਨਾਮਕ ਇੱਕ ਫੰਕਸ਼ਨ ਸ਼ਾਮਲ ਕਰੋ:
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 ਹੈ ਜੋ ਹਰ ਕਿਸਮ ਦੇ ਬੈਕਗ੍ਰਾਊਂਡ ਟਾਸਕਾਂ ਨੂੰ ਸੰਭਾਲਦਾ ਹੈ, ਅਤੇ ਤੁਹਾਡਾ ਐਕਸਟੈਂਸ਼ਨ ਇਸਨੂੰ ਲੈਵਰੇਜ ਕਰ ਰਿਹਾ ਹੈ:
"chrome.runtime API ਦੀ ਵਰਤੋਂ ਬੈਕਗ੍ਰਾਊਂਡ ਪੰਨਾ ਪ੍ਰਾਪਤ ਕਰਨ, manifest ਦੇ ਵੇਰਵੇ ਵਾਪਸ ਕਰਨ, ਅਤੇ ਐਪ ਜਾਂ ਐਕਸਟੈਂਸ਼ਨ ਲਾਈਫਸਾਈਕਲ ਵਿੱਚ ਘਟਨਾਵਾਂ ਲਈ ਸੁਣਨ ਅਤੇ ਜਵਾਬ ਦੇਣ ਲਈ ਕਰੋ। ਤੁਸੀਂ ਇਸ API ਦੀ ਵਰਤੋਂ URLs ਦੇ ਰਿਸ਼ਤੇਦਾਰ ਪਾਥ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਯੋਗ URLs ਵਿੱਚ ਬਦਲਣ ਲਈ ਵੀ ਕਰ ਸਕਦੇ ਹੋ।"
✅ ਜੇ ਤੁਸੀਂ Edge ਲਈ ਇਹ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਵਿਕਸਿਤ ਕਰ ਰਹੇ ਹੋ, ਤਾਂ ਇਹ ਤੁਹਾਨੂੰ ਹੈਰਾਨ ਕਰ ਸਕਦਾ ਹੈ ਕਿ ਤੁਸੀਂ chrome API ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੇ ਹੋ। Edge ਦੇ ਨਵੇਂ ਬ੍ਰਾਊਜ਼ਰ ਵਰਜਨ Chromium ਬ੍ਰਾਊਜ਼ਰ ਇੰਜਨ 'ਤੇ ਚਲਦੇ ਹਨ, ਇਸ ਲਈ ਤੁਸੀਂ ਇਹ ਟੂਲਜ਼ ਲੈਵਰੇਜ ਕਰ ਸਕਦੇ ਹੋ।
ਨੋਟ, ਜੇ ਤੁਸੀਂ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਨੂੰ ਪ੍ਰੋਫਾਈਲ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਇਸਨੂੰ ਆਪਣੇ ਆਪ ਦੇ ਵੱਖਰੇ ਬ੍ਰਾਊਜ਼ਰ ਇੰਸਟੈਂਸ ਵਜੋਂ ਡਿਵੈਲਪਰ ਟੂਲਜ਼ ਵਿੱਚੋਂ ਲਾਂਚ ਕਰੋ।
ਡਿਫਾਲਟ ਆਈਕਨ ਰੰਗ ਸੈਟ ਕਰੋ
ਹੁਣ, init() ਫੰਕਸ਼ਨ ਵਿੱਚ, chrome ਦੇ updateIcon ਐਕਸ਼ਨ ਨੂੰ ਦੁਬਾਰਾ ਕਾਲ ਕਰਕੇ ਆਈਕਨ ਨੂੰ ਸ਼ੁਰੂ ਵਿੱਚ ਜਨਰਲ ਗ੍ਰੀਨ ਸੈਟ ਕਰੋ:
chrome.runtime.sendMessage({
action: 'updateIcon',
value: {
color: 'green',
},
});
ਫੰਕਸ਼ਨ ਨੂੰ ਕਾਲ ਕਰੋ, ਕਾਲ ਨੂੰ ਐਗਜ਼ਿਕਿਊਟ ਕਰੋ
ਅਗਲੇ, ਤੁਸੀਂ ਪਿਛਲੇ ਪਾਠ ਵਿੱਚ ਕੀਤੇ C02Signal API ਦੁਆਰਾ ਵਾਪਸ ਕੀਤੇ ਪ੍ਰੋਮਿਸ ਵਿੱਚ ਇਸ ਫੰਕਸ਼ਨ ਨੂੰ ਕਾਲ ਕਰੋ:
//let CO2...
calculateColor(CO2);
ਅਤੇ ਅੰਤ ਵਿੱਚ, /dist/background.js ਵਿੱਚ, ਇਹਨਾਂ ਬੈਕਗ੍ਰਾਊਂਡ ਐਕਸ਼ਨ ਕਾਲਾਂ ਲਈ ਸੁਣਨ ਵਾਲਾ ਸ਼ਾਮਲ ਕਰੋ:
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 ਬਾਰੇ ਹੋਰ Space Game ਪਾਠਾਂ ਵਿੱਚ ਸਿੱਖੋਗੇ।
ਹੁਣ, ਆਪਣਾ ਐਕਸਟੈਂਸ਼ਨ ਦੁਬਾਰਾ ਬਣਾਓ (npm run build), ਰਿਫ੍ਰੈਸ਼ ਕਰੋ ਅਤੇ ਆਪਣਾ ਐਕਸਟੈਂਸ਼ਨ ਲਾਂਚ ਕਰੋ, ਅਤੇ ਰੰਗ ਬਦਲਦੇ ਵੇਖੋ। ਕੀ ਇਹ ਕੰਮ ਕਰਨ ਦਾ ਸਮਾਂ ਹੈ ਜਾਂ ਬਰਤਨ ਧੋਣ ਦਾ? ਹੁਣ ਤੁਹਾਨੂੰ ਪਤਾ ਹੈ!
ਵਧਾਈਆਂ, ਤੁਸੀਂ ਇੱਕ ਉਪਯੋਗੀ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਬਣਾਇਆ ਹੈ ਅਤੇ ਬ੍ਰਾਊਜ਼ਰ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ ਅਤੇ ਇਸਦੇ ਪ੍ਰਦਰਸ਼ਨ ਨੂੰ ਕਿਵੇਂ ਪ੍ਰੋਫਾਈਲ ਕਰਨਾ ਹੈ, ਇਸ ਬਾਰੇ ਹੋਰ ਸਿੱਖਿਆ।
🚀 ਚੁਣੌਤੀ
ਕੁਝ ਖੁੱਲ੍ਹੇ ਸਰੋਤ ਵਾਲੀਆਂ ਵੈੱਬਸਾਈਟਾਂ ਦੀ ਜਾਂਚ ਕਰੋ ਜੋ ਬਹੁਤ ਸਮੇਂ ਤੋਂ ਮੌਜੂਦ ਹਨ, ਅਤੇ, ਉਨ੍ਹਾਂ ਦੇ GitHub ਇਤਿਹਾਸ ਦੇ ਆਧਾਰ 'ਤੇ, ਵੇਖੋ ਕਿ ਕੀ ਤੁਸੀਂ ਇਹ ਨਿਰਧਾਰਤ ਕਰ ਸਕਦੇ ਹੋ ਕਿ ਉਹ ਕਿਵੇਂ ਸਾਲਾਂ ਦੌਰਾਨ ਪ੍ਰਦਰਸ਼ਨ ਲਈ ਅਨੁਕੂਲਿਤ ਕੀਤੀਆਂ ਗਈਆਂ, ਜੇਕਰ ਕੀਤੀਆਂ। ਸਭ ਤੋਂ ਆਮ ਪਰੇਸ਼ਾਨੀ ਦਾ ਬਿੰਦੂ ਕੀ ਹੈ?
ਪਾਠ-ਪ੍ਰਸ਼ਨੋਤਰੀ
ਸਮੀਖਿਆ ਅਤੇ ਸਵੈ-ਅਧਿਐਨ
ਇੱਕ ਪ੍ਰਦਰਸ਼ਨ ਨਿਊਜ਼ਲੈਟਰ ਲਈ ਸਾਈਨ ਅਪ ਕਰਨ ਬਾਰੇ ਸੋਚੋ।
ਵੈੱਬ ਟੂਲਜ਼ ਵਿੱਚ ਪ੍ਰਦਰਸ਼ਨ ਟੈਬਾਂ ਦੇਖ ਕੇ ਬ੍ਰਾਊਜ਼ਰ ਵੈੱਬ ਪ੍ਰਦਰਸ਼ਨ ਨੂੰ ਮਾਪਣ ਦੇ ਕੁਝ ਤਰੀਕੇ ਦੀ ਜਾਂਚ ਕਰੋ। ਕੀ ਤੁਹਾਨੂੰ ਕੋਈ ਵੱਡੇ ਅੰਤਰ ਮਿਲਦੇ ਹਨ?
ਅਸਾਈਨਮੈਂਟ
ਸਾਈਟ ਦਾ ਪ੍ਰਦਰਸ਼ਨ ਵਿਸ਼ਲੇਸ਼ਣ ਕਰੋ
ਅਸਵੀਕਰਤੀ:
ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ Co-op Translator ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦਾ ਯਤਨ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁੱਤੀਆਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਇਸ ਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਮੌਜੂਦ ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਪ੍ਰਮਾਣਿਕ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੇ ਪ੍ਰਯੋਗ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।