Simplest Way to get the current Tab Id?

Question

I dont really unterstand how the Chrome Extension API works. It was a rough to understand how the background.js and the content.js works, but my current Problem is, that the function insertCSS(); seems to need the tabId, even if the official documentation says that its optional.

So, none of the Answers on this plattform could help me, because I dont even understand the Concept of the whole API.

So can anybody explain me, why something like this is not possible?

var tabInfo = chrome.tabs.getCurrentTab();

var id = tabInfo.tabId;

Answer 1

There are several questions to be answered here.

Literal question

So can anybody explain me, why something like this is not possible?

var tabInfo = chrome.tabs.getCurrentTab();

Short answer: because most of the Chrome API does not return a value; it is asynchronous, meaning that some other component of Chrome will work on getting the answer while JS execution resumes.

A comprehensive overview of JS asynchronicity can be read at this canonical question.

There are two ways to deal with it:

• Use callbacks, and be aware that the actual callback execution happens after the rest of the calling code.
• Use async/await and/or Promises. The WebExtension polyfill can help with that, but it's outside the scope of the question.

Question in title

Simplest Way to get the current Tab Id?

or "why chrome.tabs.getCurrentTab won't help you".

chrome.tabs.getCurrentTab() returns the tab ID of the calling page. See the docs.

This is of limited utility: only extension pages (and not content scripts) can call this API.

Extension pages are:

• background (no tab ID),
• popup (no tab ID),
• options page (it's complicated as it's embedded in a Chrome page),
• "other" extension pages opened in a visible tab (here, it works as expected).

It's not your use case, as established in the comments.

The actual way to get the current active tab is chrome.tabs.query() with the query {active: true, currentWindow: true}, but keep on reading.

Actual question you're having

As reconstructed from the comments, here's the actual scenario you're having:

I have an event in a content script. I need to call the tabs.insertCSS API, so I'm messaging the background page to do it for me. How do I get the tabId for this call?

Well, the key here is to take a closer look at the runtime.onMessage event listener signature:

The callback parameter should be a function that looks like this:

function(any message, MessageSender sender, function sendResponse) {...};

What's a MessageSender?

An object containing information about the script context that sent a message or request.

tabs.Tab (optional) tab
The tabs.Tab which opened the connection, if any. This property will only be present when the connection was opened from a tab (including content scripts), and only if the receiver is an extension, not an app.

[...]

Jackpot. We're sending the message from a content script, and the listener is handed the sender.tab information "for free". We just need a quick detour into tabs API docs to see what a Tab contains, and we have it:

chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
  chrome.tabs.insertCSS(sender.tab.id, {/*...*/});
});

Misconception

my current Problem is, that the function insertCSS() seems to need the tabId, even if the official documentation says that its optional

It doesn't. If you call it omitting the tabId, which makes the details object the first argument, then Chrome will assume you want the "the active tab of the current window".

It may seem that this doesn't work if you're trying to execute it in the Dev Tools window for the background page. That's because in this instance there's no such tab. The current window is the one you're putting the console command in. So what the call does without the tabId is very sensitive to what actually is the current window.

It may also be the case that you don't have the permissions to inject in the current active tab, that would also fail.

Generally, it pays to be specific with the tab ID, it removes uncertainty about the logic of the extension.