I would still consider myself a noob developer I have built some cool applications and built some nice looking websites. There is still so much more I could learn, being a developer of any skill level is always a never-ending learning experience.

Now I can read developer docs and I can understand them but last night (2022-02-03) something just "CLICKED"! I have been building a chrome extension for work. Something I have never even attempted before, I am not the biggest fan of JavaScript but I am coming round to enjoying it more.

Anyways I was trying to figure out how to do something when a user reloads the tab they're currently on. After searching good old Stackoverflow I saw an answer about webNavigation API. So I took a look it looked like I needed something called onCommitted from the API.

Fired when a navigation is committed. The document (and the resources it refers to, such as images and subframes) might still be downloading, but at least part of the document has been received from the server and the browser has decided to switch to the new document.

chrome.webNavigation.onCommitted.addListener(
  callback: function,
  filters?: object,
)

So I pasted the above code block and got to work, what next I was thinking. It takes a callback function ok cool so let us give it a parameter of details looks like details is used a lot through the docs.

chrome.webNavigation.onCommitted.addListener((details) => {
  // ...
})

But what on earth is filters I was thinking to myself, ok I know it's an object but how do I access it? Good Ol' console.log() that's how. After that, the docs made even more sense. Of course filters was an object and now I could see the object filters and what I needed to locate was transistionType

chrome.webNavigation.onCommitted.addListener((details) => {
  console.log(details)
})

// This was returned
{frameId: 311, parentFrameId: 0, processId: 337, tabId: 278, timeStamp: 1643980974806.526, …}
frameId: 311
parentFrameId: 0
processId: 337
tabId: 278
timeStamp: 1643980974806.526
transitionQualifiers: []
transitionType: "auto_subframe"
url: "chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/main.html"
[[Prototype]]: Object 
... }

transistionType was the cause of the navigation. From the docs I could see I needed something called reload this is where the tab has been reloading. Perfect just what I needed. The rest was now pretty simple I just needed to do some conditional logic on transitionType like so.

chrome.webNavigation.onCommitted.addListener((details) => {

	if (details.transitionType === "reload") {
		// Do something ...
	}
});

This is when it all clicked for me, I just needed a call back function that returned an object and within that object was what I needed to complete the task I needed. Thinking back it was all pretty simple, but again everything is more simple when you know it.