5-browser-extension icon not updating

[officialblooms]

On the last task for the browser extension lesson, background.js has the following code segment: `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);

}`

However when trying to run, the following error message is produced:

Error in event handler: TypeError: Cannot read properties of undefined (reading 'setIcon') at chrome-extension://fkcocajhgcibghcihihlnilegapombkl/background.js:3:24

I've tried debugging this on my own for hours, as well as going online to find answers for this bug. Apparently this code was written for Manifest V2, however the manifest.json supplied to us was written for Manifest V3, which means this code segment, and probably the whole file, is outdated. Please fix this issue to prevent more people from getting stuck on this step in the browser extension lesson.

[bramjot14]

/ Updated for Manifest V3- /

chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) { if (msg.action === 'updateIcon') { chrome.action.setIcon({ imageData: drawIcon(msg.value) }); } });

function drawIcon(value) { let canvas = document.createElement('canvas'); canvas.width = 200; canvas.height = 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(0, 0, 200, 200);

}

/ Updated manifest.json for Manifest V3: Ensure your manifest.json includes the following: /

{ "manifest_version": 3, "name": "Your Extension Name", "version": "1.0", "background": { "service_worker": "background.js" }, "permissions": [ "activeTab" ], "action": { "default_icon": { "16": "icons/icon16.png", "48": "icons/icon48.png", "128": "icons/icon128.png" } }, "icons": { "16": "icons/icon16.png", "48": "icons/icon48.png", "128": "icons/icon128.png" } }

/* Explanation:

1. chrome.action.setIcon: This is the updated method in Manifest V3 to set the action icon.
2. Canvas dimensions: Set canvas dimensions to ensure the drawn image fits properly.
3. Permissions: Ensure you have the required permissions in your manifest.json for the functionality you need.

By making these changes, your code should work with Manifest V3, and the error regarding setIcon should be resolved. */