Skip to content Skip to sidebar Skip to footer
Home / Firefox Addon Webextensions / Javascript

How To Get OpenerTabId In Firefox WebExtensions?

Post a Comment
I've developed a Chrome extension, and trying to port it to Firefox using Firefox WebExtensions. Here is the problem I'm facing. In my extension, I need to use chrome.tabs.Tab.open

Solution 1:

Supported in Desktop Firefox as of Firefox 57

As of Firefox 57, the desktop version of Firefox supports tabs.Tab.openerTabId.

Not supported in Firefox for Android

Firefox for Android does not support tabs.Tab.openerTabId

If you want your extension to be compatible with Firefox for Android, you will have to track this information yourself. You can track the opener tab ID for tabs that are opened by the user through clicking a link. When a new tab is created by JavaScript, you can guess that it was done by JavaScript in the active tab, but you can't know. You can do this through a combination of tracking the currently active tab, listening for new tabs to be created, and listening to see that the reason the new tab was created was because the user clicked a link. This can be done by listening to:

  • tabs.onActivated to track the currently active tab
    This is fired prior to tabs.onCreated, so you will need to keep a record of the prior active tab. This will be needed for cases where the newly opened tab is immediately activated. Obviously, you also need to account for cases where the new tab is not immediately activated.
  • tabs.onCreated to determine when a new tab is created.
  • webNavigation.onCommitted to look at the transitionType to see that the new tab was actually created from a link, as opposed to just happening to be the active tab when the user opened a new tab from a bookmark, etc.

For reference, these are the events which fire when the user clicks on a link (<a href="http://www.example.com" target="_blank">):

Content event: mousedown  on: <a href="http://www.example.com" target="_blank">  contentMessageUI.js:16:9
Content event: mouseup    on: <a href="http://www.example.com" target="_blank">  contentMessageUI.js:16:9
Content event: click      on: <a href="http://www.example.com" target="_blank">  contentMessageUI.js:16:9
tabs.onActivated                  ->  arg[0]= Object { tabId: 8, windowId: 0 }
tabs.onHighlighted                ->  arg[0]= Object { tabIds: Array[1], windowId: 0 }
tabs.onUpdated                    ->  arg[0]= 8 :: arg[1]= Object { status: "complete" } :: arg[2]= Object { id: 8, index: 2, windowId: 0, selected: true, highlighted: true, active: true, pinned: false, status: "complete", incognito: false, width: 1100, 5 more… }
tabs.onUpdated                    ->  arg[0]= 8 :: arg[1]= Object { status: undefined } :: arg[2]= Object { id: 8, index: 2, windowId: 0, selected: true, highlighted: true, active: true, pinned: false, status: "complete", incognito: false, width: 1100, 5 more… }
tabs.onZoomChange                 ->  arg[0]= Object { tabId: 8, oldZoomFactor: undefined, newZoomFactor: 1, zoomSettings: Object }
tabs.onUpdated                    ->  arg[0]= 8 :: arg[1]= Object { status: "complete", url: "about:blank" } :: arg[2]= Object { id: 8, index: 2, windowId: 0, selected: true, highlighted: true, active: true, pinned: false, status: "complete", incognito: false, width: 1100, 5 more… }
tabs.onUpdated                    ->  arg[0]= 8 :: arg[1]= Object { status: undefined } :: arg[2]= Object { id: 8, index: 2, windowId: 0, selected: true, highlighted: true, active: true, pinned: false, status: "complete", incognito: false, width: 1100, 5 more… }
tabs.onUpdated                    ->  arg[0]= 8 :: arg[1]= Object { status: "loading" } :: arg[2]= Object { id: 8, index: 2, windowId: 0, selected: true, highlighted: true, active: true, pinned: false, status: "loading", incognito: false, width: 1100, 5 more… }
tabs.onCreated                    ->  arg[0]= Object { id: 8, index: 2, windowId: 0, selected: true, highlighted: true, active: true, pinned: false, status: "loading", incognito: false, width: 1100, 5 more… }
webNavigation.onBeforeNavigate    ->  arg[0]= Object { url: "about:blank", timeStamp: 1487869034364, frameId: 0, parentFrameId: -1, tabId: 8 }
webNavigation.onErrorOccurred     ->  arg[0]= Object { url: "about:blank", timeStamp: 1487869034368, frameId: 0, parentFrameId: -1, error: "Error code 2152398850", tabId: 8 }
webNavigation.onCommitted         ->  arg[0]= Object { url: "about:blank", timeStamp: 1487869034377, frameId: 0, parentFrameId: -1, tabId: 8, transitionType: "link", transitionQualifiers: Array[0] }
webNavigation.onBeforeNavigate    ->  arg[0]= Object { url: "http://www.example.com/", timeStamp: 1487869034380, frameId: 0, parentFrameId: -1, tabId: 8 }
webRequest.onBeforeRequest        ->  arg[0]= Object { requestId: "150", url: "http://www.example.com/", originUrl: "http://www.example.com/", method: "GET", type: "main_frame", timeStamp: 1487869034382, frameId: 0, parentFrameId: -1, tabId: 8 }
webRequest.onBeforeSendHeaders    ->  arg[0]= Object { requestId: "150", url: "http://www.example.com/", originUrl: "http://www.example.com/", method: "GET", type: "main_frame", timeStamp: 1487869034384, frameId: 0, parentFrameId: -1, tabId: 8, requestHeaders: Array[6] }
webRequest.onSendHeaders          ->  arg[0]= Object { requestId: "150", url: "http://www.example.com/", originUrl: "http://www.example.com/", method: "GET", type: "main_frame", timeStamp: 1487869034387, frameId: 0, parentFrameId: -1, tabId: 8, requestHeaders: Array[6] }
webRequest.onHeadersReceived      ->  arg[0]= Object { requestId: "150", url: "http://www.example.com/", originUrl: "http://www.example.com/", method: "GET", type: "main_frame", timeStamp: 1487869034416, frameId: 0, parentFrameId: -1, tabId: 8, responseHeaders: Array[11], 2 more… }
webRequest.onResponseStarted      ->  arg[0]= Object { requestId: "150", url: "http://www.example.com/", originUrl: "http://www.example.com/", method: "GET", type: "main_frame", timeStamp: 1487869034420, frameId: 0, parentFrameId: -1, tabId: 8, responseHeaders: Array[11], 2 more… }
webRequest.onCompleted            ->  arg[0]= Object { requestId: "150", url: "http://www.example.com/", originUrl: "http://www.example.com/", method: "GET", type: "main_frame", timeStamp: 1487869034429, frameId: 0, parentFrameId: -1, tabId: 8, responseHeaders: Array[11], 2 more… }
tabs.onUpdated                    ->  arg[0]= 8 :: arg[1]= Object { status: "loading", url: "http://www.example.com/" } :: arg[2]= Object { id: 8, index: 2, windowId: 0, selected: true, highlighted: true, active: true, pinned: false, status: "loading", incognito: false, width: 1100, 5 more… }
webNavigation.onCommitted         ->  arg[0]= Object { url: "http://www.example.com/", timeStamp: 1487869034538, frameId: 0, parentFrameId: -1, tabId: 8, transitionType: "link", transitionQualifiers: Array[0] }
tabs.onUpdated                    ->  arg[0]= 8 :: arg[1]= Object { status: "complete" } :: arg[2]= Object { id: 8, index: 2, windowId: 0, selected: true, highlighted: true, active: true, pinned: false, status: "complete", incognito: false, width: 1100, 5 more… }
webNavigation.onDOMContentLoaded  ->  arg[0]= Object { url: "http://www.example.com/", timeStamp: 1487869034710, frameId: 0, parentFrameId: -1, tabId: 8 }
webNavigation.onCompleted         ->  arg[0]= Object { url: "http://www.example.com/", timeStamp: 1487869034715, frameId: 0, parentFrameId: -1, tabId: 8 }

It appears that the transitionType will also be link when the tab is opened through JavaScript (assuming the user has permitted it). The following are the events when a new tab is opened by window.open('http://www.example.com'); (simulated by executing that in the DevTools console for a content page, after permitting popups from that domain):

tabs.onActivated                  ->  arg[0]= Object { tabId: 11, windowId: 0 }
tabs.onHighlighted                ->  arg[0]= Object { tabIds: Array[1], windowId: 0 }
tabs.onUpdated                    ->  arg[0]= 11 :: arg[1]= Object { status: "complete" } :: arg[2]= Object { id: 11, index: 2, windowId: 0, selected: true, highlighted: true, active: true, pinned: false, status: "complete", incognito: false, width: 1100, 5 more… }
tabs.onUpdated                    ->  arg[0]= 11 :: arg[1]= Object { status: undefined } :: arg[2]= Object { id: 11, index: 2, windowId: 0, selected: true, highlighted: true, active: true, pinned: false, status: "complete", incognito: false, width: 1100, 5 more… }
tabs.onZoomChange                 ->  arg[0]= Object { tabId: 11, oldZoomFactor: undefined, newZoomFactor: 1, zoomSettings: Object }
tabs.onUpdated                    ->  arg[0]= 11 :: arg[1]= Object { status: "complete", url: "about:blank" } :: arg[2]= Object { id: 11, index: 2, windowId: 0, selected: true, highlighted: true, active: true, pinned: false, status: "complete", incognito: false, width: 1100, 5 more… }
tabs.onUpdated                    ->  arg[0]= 11 :: arg[1]= Object { status: undefined } :: arg[2]= Object { id: 11, index: 2, windowId: 0, selected: true, highlighted: true, active: true, pinned: false, status: "complete", incognito: false, width: 1100, 5 more… }
tabs.onUpdated                    ->  arg[0]= 11 :: arg[1]= Object { status: "loading" } :: arg[2]= Object { id: 11, index: 2, windowId: 0, selected: true, highlighted: true, active: true, pinned: false, status: "loading", incognito: false, width: 1100, 5 more… }
tabs.onCreated                    ->  arg[0]= Object { id: 11, index: 2, windowId: 0, selected: true, highlighted: true, active: true, pinned: false, status: "loading", incognito: false, width: 1100, 5 more… }
webNavigation.onBeforeNavigate    ->  arg[0]= Object { url: "about:blank", timeStamp: 1487871931270, frameId: 0, parentFrameId: -1, tabId: 11 }
webNavigation.onErrorOccurred     ->  arg[0]= Object { url: "about:blank", timeStamp: 1487871931274, frameId: 0, parentFrameId: -1, error: "Error code 2152398850", tabId: 11 }
webNavigation.onCommitted         ->  arg[0]= Object { url: "about:blank", timeStamp: 1487871931289, frameId: 0, parentFrameId: -1, tabId: 11, transitionType: "link", transitionQualifiers: Array[0] }
webNavigation.onBeforeNavigate    ->  arg[0]= Object { url: "http://www.example.com/", timeStamp: 1487871931292, frameId: 0, parentFrameId: -1, tabId: 11 }
webRequest.onBeforeRequest        ->  arg[0]= Object { requestId: "159", url: "http://www.example.com/", originUrl: "http://www.example.com/", method: "GET", type: "main_frame", timeStamp: 1487871931294, frameId: 0, parentFrameId: -1, tabId: 11 }
webRequest.onBeforeSendHeaders    ->  arg[0]= Object { requestId: "159", url: "http://www.example.com/", originUrl: "http://www.example.com/", method: "GET", type: "main_frame", timeStamp: 1487871931297, frameId: 0, parentFrameId: -1, tabId: 11, requestHeaders: Array[6] }
webRequest.onSendHeaders          ->  arg[0]= Object { requestId: "159", url: "http://www.example.com/", originUrl: "http://www.example.com/", method: "GET", type: "main_frame", timeStamp: 1487871931299, frameId: 0, parentFrameId: -1, tabId: 11, requestHeaders: Array[6] }
webRequest.onHeadersReceived      ->  arg[0]= Object { requestId: "159", url: "http://www.example.com/", originUrl: "http://www.example.com/", method: "GET", type: "main_frame", timeStamp: 1487871931312, frameId: 0, parentFrameId: -1, tabId: 11, responseHeaders: Array[11], 2 more… }
webRequest.onResponseStarted      ->  arg[0]= Object { requestId: "159", url: "http://www.example.com/", originUrl: "http://www.example.com/", method: "GET", type: "main_frame", timeStamp: 1487871931317, frameId: 0, parentFrameId: -1, tabId: 11, responseHeaders: Array[11], 2 more… }
webRequest.onCompleted            ->  arg[0]= Object { requestId: "159", url: "http://www.example.com/", originUrl: "http://www.example.com/", method: "GET", type: "main_frame", timeStamp: 1487871931329, frameId: 0, parentFrameId: -1, tabId: 11, responseHeaders: Array[11], 2 more… }
tabs.onUpdated                    ->  arg[0]= 11 :: arg[1]= Object { status: "loading", url: "http://www.example.com/" } :: arg[2]= Object { id: 11, index: 2, windowId: 0, selected: true, highlighted: true, active: true, pinned: false, status: "loading", incognito: false, width: 1100, 5 more… }
history.onVisited                 ->  arg[0]= Object { id: "fGv8w_MX50EI", url: "http://www.example.com/", title: "", lastVisitTime: 1487871931320, visitCount: 4, typedCount: 1 }
webNavigation.onCommitted         ->  arg[0]= Object { url: "http://www.example.com/", timeStamp: 1487871931480, frameId: 0, parentFrameId: -1, tabId: 11, transitionType: "link", transitionQualifiers: Array[0] }
tabs.onUpdated                    ->  arg[0]= 11 :: arg[1]= Object { status: "complete" } :: arg[2]= Object { id: 11, index: 2, windowId: 0, selected: true, highlighted: true, active: true, pinned: false, status: "complete", incognito: false, width: 1100, 5 more… }
webNavigation.onDOMContentLoaded  ->  arg[0]= Object { url: "http://www.example.com/", timeStamp: 1487871931652, frameId: 0, parentFrameId: -1, tabId: 11 }
webNavigation.onCompleted         ->  arg[0]= Object { url: "http://www.example.com/", timeStamp: 1487871931657, frameId: 0, parentFrameId: -1, tabId: 11 }

Solution 2:

Firefox now supports tabs.Tab.openerTabId (it has been supported since Firefox 57 which was launched November 14, 2017)


You may like these posts

Post a Comment for "How To Get OpenerTabId In Firefox WebExtensions?"