How to Get Url/Title/Timestamp for browser navigation only with WebExtension API?

Question

I want to get the URL, title for that url and timeStamp for whatever is being navigated by the browser.

Using webNavigation.onCommitted, I can get the URL and timeStamp, but not the title (ie if url was stackoverflow.com, the title is Stackoverflow - Where developers learn, share and build careers).

const checkWebNav = (details) => {
  // Can only see url and timeStamp, no title fields
  console.log(details.url, details.timeStamp);
};

browser.webNavigation.onCommitted.addListener(
  checkWebNav,
  {url: [{schemes: ["http", "https"]}]}
)

However, there is no title property. I know that tabs API can get the title, url and last accessed, but that gets rather messy. Like I get the title, url for each tab onCreated, what if the user uses said tab for navigation, would I need to track whether that tab has changed url to log it?

Can this be done on a web request/navigation level? WebRequests aren't ideal either, since the main_frame filtering doesn't show internal routing changes to the navigation.

This is for Firefox Add-on Android as well, so I cannot just use the History API.

webNavigation doesn't return the title. You can use browser.tabs.get for that. — wOxxOm, Aug 29 '22 at 06:25
Damn, wanted to avoid that, means I'd need to do something like tracking state from webNavigation and tabs or just using pure tabs. — wanna_coder101, Aug 29 '22 at 23:47

score 0 · Answer 1 · answered Aug 29 '22 at 23:51

This sorta works, get all the http/https tabs that're already completed loading. Then can get the url, title and time stamp.

However, it fails for websites like youtube, where the url loads first, then the title loads afterwards. Probs could do smarts to fix that, but there's certainly far more edge cases as well.

// Background.js

console.log('does this load???');

const isValidUrl = (url: string) => {
  // Must return when http, otherwise not sure if valid http and not https, returning wrong result
  if (url.startsWith('http://')) {
    return true;
  }

  // Already know not http, it's either https or not a valid url
  return url.startsWith('https://');
}

const getAndSetNewTabInfo = (tabInfo: browser.tabs.Tab) => {
  if (tabInfo.status !== 'complete' || !isValidUrl(tabInfo.url ?? '') ) return;
  
  // Must be completed loading, that is displays title properly and valid http/https url
  console.log('updated tab');
  console.log(tabInfo)
}

const getAndSetTabInfo = (tabId: number, changeInfo: object, tabInfo: browser.tabs.Tab) => {
  // @ts-ignore Dont wanna make the changeInfo object
  if (tabInfo.status !== 'complete' || changeInfo.status !== 'complete' || !isValidUrl(tabInfo.url ?? '') ) return;
  
  // Must be completed loading, that is displays title properly and valid http/https url
  console.log('updated tab');
  console.log(tabInfo)

  console.log('changed info');
  console.log(changeInfo);
}

browser.tabs.onCreated.addListener(getAndSetNewTabInfo);
browser.tabs.onUpdated.addListener(getAndSetTabInfo);

Maybeeeee I could cross reference the webNavigation API with the tabs URL, hence by combining both I can get the title, url, and timestamp. Not tested though.

How to Get Url/Title/Timestamp for browser navigation only with WebExtension API?

1 Answers1