Obtaining "this" tab ID from content script in Chrome extension?

Question

From a content script, is it possible to access that tab's id?

I want to send a message to the background page from the content script that tells my extension to "do something with this tab" using the chrome.tabs.* API.

A tabID is needed, and there is no point in doing a bunch of logic in the background page to hunt for a tabID when my content script can simply tell it the tabID in the message contents.

score 122 · Accepted Answer · edited Oct 21 '16 at 16:42

122

Tab id is automatically passed inside MessageSender object:

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    console.log("sent from tab.id=", sender.tab.id);
});

edited Oct 21 '16 at 16:42

chucksmash

5,343
1
31
41

answered Jun 01 '11 at 15:12

serg

106,723
76
306
327

Thanks... I completely overlooked the sender parameter. I thought I had to do this.tabId or something inside of my content script. – void.pointer Jun 01 '11 at 17:16
For posterity: unfortunately the tabIds reported in chrome.WebRequest response details objects are consistently -1 for requests initiated from background pages (as of the time of this comment). – MrChrisRodriguez Jun 30 '14 at 15:25
19

@serg: What if I need tabID outside message response processor? – c00000fd Oct 09 '14 at 04:24
I get following: Uncaught Error: sendRequest and onRequest are obsolete. Please use sendMessage and onMessage instead – Stepan Yakovenko May 19 '16 at 08:48
@c00000fd: See my answer below. – Aidin May 31 '19 at 22:38
Hmm... for me sender is my extension's page, not the activepage – avalanche1 Oct 26 '19 at 16:44

Aidin · Answer 2 · 2021-09-25T18:35:05.820

If you want the tabId of yourself (in my case in Content Script) without requiring "tabs" permission, a workaround is to have Content Script send a dummy message to the background script, then have background script respond with sender.tab.id back to the Content Script!

e.g. in content.js:

chrome.runtime.sendMessage({ text: "what is my tab_id?" }, tabId => {
   console.log('My tabId is', tabId);
});

and in background.js:

chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
    if (msg.text == "what is my tab_id?") {
        sendResponse({tab: sender.tab.id});
     }
});

it's a stupid workaround that worked for me. :)

PS. Oh, if you have tabs permission then you can run this async query very easily:

chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
    var myTabId = tabs[0].id;
    chrome.tabs.sendMessage(myTabId, {text: "hi"}, function(response) {
        alert(response);
    });
});

"sendResponse() will be removed from the W3C spec. The popular webextension-polyfill library has already removed the sendResponse() function", says [MDN](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/onMessage) — Kong Kao, Sep 25 '21 at 09:43
@KongKao I haven't being able to use `sendResponse()` successfully in Firefox, but also can't find that text in your link where it says that `sendResponse()` will be removed — Madacol, Apr 16 '22 at 21:24

score 11 · Answer 3 · answered Dec 06 '16 at 08:38

If you're using Ports for two-way long-lived connections, the second argument in the callback is a Port object, so to access the tab ID is then:

chrome.runtime.onConnect.addListener(port => {
  if (port.name === "foo") {
    port.onMessage.addListener((msg, sendingPort) => {
      console.log("sent from tab.id=", sendingPort.sender.tab.id);
    });
  }
});

score 3 · Answer 4 · answered Apr 20 '20 at 07:18

If a content script is injected programmatically, another approach is to store tabId in a global variable:

const injectTabId = (callback) => chrome.tabs.executeScript(
  tabId,
  {code: `window.tabId = ${tabId}`},
  callback
);

const injectFile = () => chrome.tabs.executeScript(
  tabId,
  {file: 'content.js'}
);

injectTabId(injectFile);

In the content script, access it with window.tabId. The variable won't be exposed to page scripts because of content scripts living in an isolated world.

score 1 · Answer 5 · answered May 07 '19 at 16:25

1

Correction of the selected answer for nowadays:

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    console.log("sent from tab.id=", sender.id);
});

answered May 07 '19 at 16:25

Psartek

409
3
9

Obtaining "this" tab ID from content script in Chrome extension?

5 Answers5

Linked