chrome.webNavigation undefined

Question

I am writing my first Google extension code, and I am getting a weird error I have never seen in my life.

Uncaught TypeError: Cannot read property 'onCompleted' of undefined background.js:4
(anonymous function)

I am decently new to Javascript btw (have extensive knowledge in Java though).

My code looks like this:

chrome.webNavigation.onCompleted.addListener(function(){//error right here
if(hasHostSuffix(document.URL,'mysite.com'))
{
    console.log("Web navigation commited!");
    var links = document.getElementsByName("a");
    for(var i = 0; i < links.length; i++)
    {
        console.log(links[i].getAttribute("href"));
        if(links[i].style.backgroundColor='#272727')
        {
            links[i].className="gone";
        }
    }
}
});

I haven't been able to find any solid information on my I am getting this error.

Any help would be highly appreciated :)

EDIT:

Was brought to my attention that I forgot some vital info xD My manfiest:

{
"manifest_version": 2,
...,
"permissions": [
    "webNavigation"
],
...,
"content_scripts":[
    {
        "matches":["http://www.mysite.com/*"],
        "css":["ur_customstyle.css"],
        "js":["background.js"]
    }
]
}

Answer 1

On top of @rsanchez answer, if you call a chrome.webNavigation in the background script of your extension, but still have this error, you may also need to add the webNavigation permission in your manifest.json.

"permissions": [
    "webNavigation"
  ]

Mozilla documentation | Chrome Documentation

Answer 2

chrome.webNavigation, as most chrome.* APIs, can only be accessed from the background script of an extension, not from content scripts. Although your file is named background.js, your manifest shows that you are using it as a content script.

It is right to use a content script in this case because you need to interact with the DOM. From the fragment of code you posted, it seems that you don't need to use the webNavigation API. You can simply set your content script in your manifest to run_at: document_end, and it will run as soon as the DOM is complete. Check http://developer.chrome.com/extensions/content_scripts.html

Answer 3

you need to make sure in your manifest.json the extension is registered with persistent: false

"background": {
    "scripts": [
        "./scripts/saving/extension/background.js"
    ],
    "persistent": false // <---- HERE!!!!!
}

per what is said in here: https://developer.chrome.com/extensions/background_pages

The only occasion to keep a background script persistently active is if the extension uses chrome.webRequest API to block or modify network requests. The webRequest API is incompatible with non-persistent background pages.

!!! AND ALSO !!!

(if it was persistent: true)

you need to UNLOAD the extension and load it again

UPDATE:

turned out it's all irrelevant

in Chrome 72 what happens is that the extension needs to be always unloaded and loaded back anew

simple refresh/reload throws this problem