Using tabs.query method from extension popup in Chrome

[T6J2E5]

Hi! First-time poster here.

I'm relatively new to JavaScript coding, and this simple problem is giving me fits. I'm writing an extension for Google Chrome that has a page action. I can get the page action icon to appear and disappear with it's supposed to, no problem. When the page action icon is clicked, a popup should appear showing the URL of the active tab in the current window. Again, the popup appears just like it should, no problem. However, I can't get the URL of the tab to appear. Instead, the popup shows "Oops!" (the bit I put in there to indicate that something went wrong).

I think the problem lies in my chrome.tabs.query method call. As an example, this script will work fine, placing "-2" (the current window ID) in the popup content.

var win = chrome.windows.WINDOW_ID_CURRENT;
document.getElementById("test").innerHTML=win;

This script, however, will not work. The terrible "Oops!" still appears in the popup content.

var add;                                      // initialized here
var win = chrome.windows.WINDOW_ID_CURRENT;   // to be used
var tab;                                      // globally

// get active tab ID from current window
chrome.tabs.query({
	active: true,	// select active tabs
	windowID: win	// in current window
}, function(array_of_Tabs) {
	tab = array_of_Tabs[0];	// array should have only 1 element
});

add = tab.url;	
document.getElementById("test").innerHTML=add;

I've checked with the Google APIs, and I can't figure out the problem with my method call. Is there something in my syntax that I'm missing?

[devnull69]

You need to understand a very basic concept of Javascript. This will help you in many situations so it's really worth the time you spend right now.

Many methods in Javascript libraries (and the Chrome extension environment can be considered an extension library) are executed asynchronously. This means: The regular program flow continues and the method is running "in the background". As soon as the method finished executing, it will call the function provided as the "callback" parameter. And only INSIDE this callback function you will be able to access the result of the method.

In your case the program flow would be like this:
1 - Call to chrome.tabs.query
2 - add = tab.url; document.getElementById("test").innerHTML=add; is executed. BUT: The chrome.tabs.query is still running. So the result of the method (in the variable tab) will still be undefined
3 - chrome.tabs.query finishes, and its callback is called. Now the variable tab will be set. And only HERE you can access it

var add;                                      // initialized here
var win = chrome.windows.WINDOW_ID_CURRENT;   // to be used
var tab;                                      // globally

// get active tab ID from current window
chrome.tabs.query({
	active: true,	// select active tabs
	windowID: win	// in current window
}, function(array_of_Tabs) {
	tab = array_of_Tabs[0];	// array should have only 1 element
        add = tab.url;	
        document.getElementById("test").innerHTML=add;
});

[T6J2E5]

Thanks for the reply, devnull. Understanding asynchronous methods is something that's been plaguing me since I started learning JavaScript.

Maybe I'm just not getting the concept you explained, but this baffles me. This code works, outputting "-2" in line 1 and "Oops!2" in line two, as expected.

document.getElementById("test1").innerHTML=chrome.windows.WINDOW_ID_CURRENT;

This code outputs "Oops!1" in line 1 and "Oops!2" in line 2.

document.getElementById("test1").innerHTML=chrome.windows.WINDOW_ID_CURRENT;

chrome.tabs.query({
	active: true,
	windowID: chrome.windows.WINDOW_ID_CURRENT
} function(array_of_Tabs) {
	document.getElementById("test2").innerHTML=array_of_Tabs[0].url;
});

Why does the call to chrome.tabs.query break the execution code preceding it? The order of execution should be

1. document.getElementById("test1")...
2. chrome.tabs.query(...

... right? It shouldn't matter that the method is asynchronous, since it's the last item to be executed.

Also, I'm still not understanding why the query doesn't work, even when it's completely self-contained.

[devnull69]

There is a syntax error in the .query call. There must be a comma after the first closing } bracket.

And: Javascript is case sensitive, the parameter for the window ID is "windowId" and not "windowID"

chrome.tabs.query({
	active: true,
	windowId: chrome.windows.WINDOW_ID_CURRENT
   },
   function(array_of_Tabs) {
	document.getElementById("test2").innerHTML=array_of_Tabs[0].url;
   }
);

[T6J2E5]

Originally Posted by devnull69

There is a syntax error in the .query call. There must be a comma after the first closing } bracket.

And: Javascript is case sensitive, the parameter for the window ID is "windowId" and not "windowID"

Gah! You're right on both counts. Dumb mistakes on my part, and now it works. That's what I get for trying to figure this out at 1 AM, eh? Thanks for the help.

So I understand this asynchronous thing better (and hopefully reduce the number of questions I may have in the future), I have a few theory questions.

Why would syntax errors within a method break the execution of instructions that come before it? Even if the method in-question is asynchronous, it's still initially executed in the order its called, isn't it? Or do I need to start unlearning some of the programming theory I learned back in the Fortran and BASIC days?

If data gathered by an asynchronous method is available only within the method (like the URL in my code snippet), how can I use this data outside the method? In my case, the data was being stored in an instance variable, not a local variable. How do I know when the data is there and when it's not? I could always check to see if the variable's value is "null," but what if it is? How long does it really take an asynchronous method to do its thing, relative to the execution stream?