Chrome extension: Get current tab from popup

Question

I'm writing a Chrome extension and, in one part of it, I need to get the current tab's title and URL when a button on the popup page is clicked.

I've worked with Chrome's message passing system before and, after much effort, managed to get it to work, on many occasions. However, I've never had to use them with popup pages and, from what I've read, it's much more difficult to do.

The timeline I've managed to figure out so far is this:

1. popup.html / popup.js:    Button is clicked
2. popup.html / popup.js:    Request / message is sent to the content script
3. contentScript.js:           Request / message is received from the popup page
4. contentScript.js:           The title and URL of the current tab are stored in a variable
5. contentScript.js:           The 2 variables are sent as a stringified response
6. popup.html / popup.js:    The 2 variables are parsed from the response

Usually I'd be able to figure this out but, I've read a few things that have thrown a spanner in the works, such as:

• chrome.tabs.getSelected can only be used in a background page / script. Does this mean that content scripts don't need to be used at all?
• Messages cannot be sent directly from the content script to the popup page, they have to go via a background page
• A popup window has to be confirmed as existing before a message can be passed to it (although, I think I know how to do this)

I already found Chrome's message passing system difficult enough but, this has totally confused me. Hence, this post.

Lazarolazaruk

Answer 1

chrome.tabs.getSelected is deprecated. You should use chrome.tabs.query instead.

chrome.tabs.query requires two parameters: a query object and a callback function that takes the array of resulting tabs as a parameter.

You can get the "current tab" by querying for all tabs which are currently active and are in the current window.

var query = { active: true, currentWindow: true };

Since the query will return a Tab array containing the current tab alone, be sure to take the first element in the callback

function callback(tabs) {
  var currentTab = tabs[0]; // there will be only one in this array
  console.log(currentTab); // also has properties like currentTab.id
}

Et voilà:

chrome.tabs.query(query, callback);

Hilar

Thanks for this tip...I was struggling in getting the popup window url. Had to set a timeOut...I find that I'm using timeOuts a lot when pages are loading and I'm looking to get the page info. – Confer

If you want to use the currentTab.url property then you must include the url permission in manifest.json i.e. "permissions": ["tabs", ...] – Endodermis

What's there is demo code that returns the current tab! 😄 – Hilar

@Hilar could you explain the difference between the currentWindow and lastFocusedWindow parameters for the query object? The docs do not clarify it all that well. I'm asking because I'm hoping to avoid a situation where sometimes a DevTools window is considered instead as the active tab and therefore it has no URL – Lewislewisite

Disregard; this answer explains it nicely: https://mcmap.net/q/357256/-chrome-extension-what-is-the-active-tab-in-2-opened-windows - So I guess lastFocusedWindow: true is actually the more accurate query parameter to use here? – Lewislewisite

@Hilar as a matter of fact, there can be multiple tabs returned in the array if the user clicks more than one tab while holding ctrl or cmd. – Spoil

its better to use lastFocusedWindow. Reference: https://mcmap.net/q/111917/-how-to-fetch-url-of-current-tab-in-my-chrome-extension-using-javascript – Flexile

Answer 2

Another way is to send a message from the popup to the content script which then returns the URL window.location.href

Jailbird