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.

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);