How can I get the previous URL of a tab?

Question

When writing a Chrome extension, given a tab, how can I get the URL of the previously-visited page in that tab? ie the url that will appear in the omnibar after I hit "back"?

Answer 1

Since I could not find any API approach, I just applied vux777's suggestion above : every time a page loads I store a mapping from its id to its URL. Then when I want to find the previous page of a tab, I can search for it there.

So, storage:

chrome.webNavigation.onCommitted.addListener(function (data) {
  if (data.frameId !== 0) {
      // Don't trigger on iframes
      return;
  }

  var tabIdToUrl = {};
  tabIdToUrl[data.tabId.toString()] = data.url;
  chrome.storage.local.set(tabIdToUrl);
});

And retrieval:

chrome.storage.local.get(tabId, function (item) {
  var url = item[tabId];
  ...
});

Answer 2

I am running into the same issue, really wished that chrome api could return both the before and after url at chrome.tabs.onUpdated event.

My solution is similar to @Oak, but instead of using chrome.storage.local I am using Window.sessionStorage due to the following two reasons:

1. chrome.storage.local behaves similarly to Window.localStorage , it persists even when the browser is closed and reopened . If you don't do cleanup yourself, your local storage will grow overtime with a lot of redundant information. With session storage, whenever you closed all of your browser instances (end of persistent background page's lifetime). it will conveniently forget everything :)
2. Window.sessionStorage stores data in strings only , which is good for this use case ( tab.url ), chrome.storage.local is a more powerful tool, you can save some space when you want to store objects.

my test case is something like this:

chrome.tabs.onUpdated.addListener(function(tabId,changeInfo,tab){
    var newUrl = changeInfo.url;
    if(newUrl){
        window.sessionStorage[tabId] = newUrl;
    }
});

Answer 3

Another approach uses the referrer of the page. This requires that:

• there must be some way to retrieve the page referrer, either by loading a content script into the page that communicates the referrer to the extension, or by somehow inspecting the web navigation or request as it is happening in the background script to retrieve the Referer header (notice the typo)
• the page that referred to the current page must have a referrer policy that provides sufficient information

content-script.js

// notify extension that a page has loaded its content script, and send referrer
chrome.runtime.sendMessage({ referrer: document.referrer });

background.js

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  console.log(sender.tab.id);
  console.log(request.referrer);
});

Alternatively, the extension could query a tab to get its referrer. You must ensure the tab is ready (has a loaded content script):

content-script.js

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  sendResponse({ referrer: document.referrer });
});

background.js

function askTabForReferrer(tabId) {
  chrome.tabs.sendMessage(tabId, {}, function(response) {
    console.log(response.referrer);
  });
}

const exisitingTabWithLoadedContentScriptId = 83;
askTabForReferrer(exisitingTabWithLoadedContentScriptId);