38

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.

mythofechelon
  • 3,392
  • 9
  • 34
  • 41

1 Answers1

89

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);
fny
  • 24,563
  • 12
  • 85
  • 110
  • 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. – denikov Jun 15 '15 at 11:27
  • 2
    If you want to use the currentTab.url property then you must include the url permission in manifest.json i.e. `"permissions": ["tabs", ...]` – Martin Capodici Mar 01 '16 at 19:18
  • What's there is demo code that returns the current tab! – fny Jun 28 '17 at 19:18
  • 1
    @fny 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 – kano Sep 04 '19 at 12:27
  • Disregard; this answer explains it nicely: https://stackoverflow.com/a/17076501/2803743 - So I guess `lastFocusedWindow: true` is actually the more accurate query parameter to use here? – kano Sep 04 '19 at 12:34
  • @fny 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. – Lucio Paiva Mar 01 '20 at 13:15