Chrome extension errors

Question

So I am getting started with making a chrome extension. But I'm having this problem where the service worker registration fails and it can't read properties of undefined.

I have a manifest.json and a background.js. Here is the background.js

const websites = [
    'desktop.bg/',
    'ozone.bg/product/'
];

chrome.tebs.onUpdated.addListener((tabId, tab) => {
    if (tab.url) {
        for (let i = 0; i < websites.length; i++) {
            if (tab.url.includes(websites[i])) {
                const productId = tab.url.split(websites[i])[1];

                chrome.tabs.sendMessage(tabId, { productId });
            }
        }
    }
})

I cannot understand why I am having these errors. And yes, I have checked other posts about this and tried multiple things.

I have tried to restart Chrome, to add a try and catch, add another js file. Yet it still doesn't work. What I wanted to do, was check if I am in a current site and send the id of the product I'm looking at to content.js

Can someone please explain?

Answer 1

There is a spelling mistake, so that chrome.tebs does not exist. This will throw an error only when you try to reference a child property on the undefined object, such as trying to reference onUpdated.addListener, neither property is defined because parent tebs does not exist.

Wouldn't be the first time I've sat for hours staring at code only to find a blatantly obvious typo when asking a colleague to take a look!

I recommend an IDE that has a spell checker, those annoying underlines on your variable names are SOOOO useful! VSCode has this feature, and since I've used it I've not had any of the above instances of annoying typos! It's clever enough to know about camel case and viewing capitalisation in variable names as separate words which makes it all the more invaluable.