Chrome Extension: Background.js "Uncaught TypeError" when trying to get tab url

Question

I'm getting following warning/error from my extension when opening debugging tool (all the following code works perfect, but it is throwing this error):

Uncaught TypeError: Cannot read property 'onUpdated' of undefined

In my code below I'm trying to get the current tab url for the browser. (This is a background.js script)

chrome.tabs.onUpdated.addListener(function(tabId,changeInfo,tab) {
    chrome.tabs.getSelected(null,function(tab) {
        var tablink = tab.url;
        console.log("Website: " + tablink);
    });
});

This script above is my background script, called from manifest.

"background": {
    "scripts": ["background.js"]
},

My question is now, why does it throw an error when the code works? Error is displayed in the chrome "debugging / inspect-element". How can I remove this so called "error" from the debugging?

EDIT After using a "whoami" call from content script to background script i get following error on background script.

providing tab information background.js:3 Error in event handler for runtime.onMessage: Cannot read property 'url' of undefined Stack trace: TypeError: Cannot read property 'url' of undefined at chrome-extension://hejlnkjmnpomhknnbfjdfnablcmkloid/background.js:4:41 at Function.target.(anonymous function) (extensions::SafeBuiltins:19:14) at EventImpl.dispatchToListener (extensions::event_bindings:397:22) at Function.target.(anonymous function) (extensions::SafeBuiltins:19:14) at Event.publicClass.(anonymous function) [as dispatchToListener] (extensions::utils:89:26) at EventImpl.dispatch_ (extensions::event_bindings:379:35) at EventImpl.dispatch (extensions::event_bindings:403:17) at Function.target.(anonymous function) (extensions::SafeBuiltins:19:14) at Event.publicClass.(anonymous function) [as dispatch] (extensions::utils:89:26) at messageListener (extensions::messaging:190:29) extensions::uncaught_exception_handler:9

Solution 1

I don't directly know why your code doesn't work, but :

First, getSelected is now deprecated, please refer to the doc https://developer.chrome.com/extensions/tabs#method-getSelected and use tabs.query {active: true} ;)

Second, here there's a kind of "ambiguity" on which "tab" variable is used when you write "tab.url" is it the one from getSelected, or from Updated event ? (if it's the last, getSelected is useless)

Solution 2

There's some minor defects in your manifest file. The script files you use in your popup or options page should not be declared as content scripts. Including them into their respective html files is enough (which you are already doing), considering you're not planning to inject them into other external web pages.

Popup and option pages are not content scripts. They are privileged to use the Chrome APIs just as background scripts are.

Content scripts are injected into other web sites. If you are really meaning to do that, you should most likely also include the "run_at" property. Then again, it depends on what you want to do with it.

"content_scripts": [{
        "matches": ["http://*/*","https://*/*"],
        "js": ["jquery.js","chat.js","options.js"],
        "run_at": "document_end"
    }]

However, content scripts don't have the privilege to access the tabs API. Using your background scripts simultaneously as content scripts leads to those type errors and might eventually break your extension, yet it still might seem as though your extension is working - in the scope of the background scripts (popup, options), at least.

Strictly separate background and content scripts. If you don't need to inject code into other web sites, I'd suggest you remove it alongside with the permissions - the permission warning when installing your extension would be unnecessarily demanding if you ask for permission to read and modify user data on all web sites, anyway.