Problem getting active tab in extension in web panel

syrahkat

I have a simple chrome extension with 2 main functions:

It shows a list of all open tabs in a popup window. Clicking on a listed tab activates the tab in the browser window.
When a certain tab is activated the tab list automatically scrolls to the name of the activated tab in the list.
This is done by a javascript function that compares the id of the active tab with the that of all tabs in the list.

When I use this extension as a web panel, the first part works fine, but the second part does not. I suspect this is because the panel itself is a window.

I know that in the chrome.tabs.query you can use the parameters "lastFocusedWindow: true" or "currentWindow: true" to specify a window. However, I don't want the active tab from the last focused or current window, because these are both the panel window itself. What I want is to "run" the extension in the panel window, and from there be able to get the current tab from the main window.

TLDR: How do I get the (id of) the active tab in an extension in a web panel?

nomadic

@syrahkat Do you have some example code or better yet a link to something like GitHub with the full extension?

I threw a quick query for all active tabs with a console.log on the options page of one of my projects, added the options page as a web panel, and only got the current active tab, no web panels:

syrahkat

Thanks for your reply.

The problem is it is not actually a full extension. I created it myself by copying and pasting parts of code from tutorials and Stack Overflow. I can really code and I just know a tiny bit of javascript. I was actually surprised it finally worked in Chrome, even in the Side Bar there.

Now that I know in principle it should be possible, I can keep trying to get it working.

nomadic

@syrahkat If you have any other questions, feel free to ask me. I have written about a dozen small extensions by now, so I have a general idea of what goes into making them. Some of them can be found here if you want some reference (know a lot of extensions' code can be fairly difficult to decipher, so having some simple ones to look at might help): https://github.com/ortiza5?tab=repositories

In case you want something that gives the id of the current active tab directly, then this should do it (assuming you are using manifest V3 where promises work):

let activeTabId = (await chrome.tabs.query({ active: true, currentWindow: true }))[0].id;

But it is probably safer to use the callback function of the chrome.tabs.query instead because the above code assumes that a valid result is returned, but if for some reason it isn't ,then the [0].id at the end will cause an error.

@syrahkat said in Problem getting active tab in extension in web panel:

I can really code and I just know a tiny bit of javascript. I was actually surprised it finally worked in Chrome, even in the Side Bar there.

Now that I know in principle it should be possible, I can keep trying to get it working.

My javascript also isn't the best, but doing little projects is great to help improve. Promises, like what was used in the code above, still cause me some confusion, and I even took a Parallel Computing course in college, so I should know all that asynchronous stuff already