Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Dec 2012
    Location
    le palais du nord
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Using tabs.query method from extension popup in Chrome

    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.
    Code:
    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.
    Code:
    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?

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    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
    Code:
    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;
    });

  • Users who have thanked devnull69 for this post:

    T6J2E5 (01-26-2013)

  • #3
    New to the CF scene
    Join Date
    Dec 2012
    Location
    le palais du nord
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.
    Code:
    document.getElementById("test1").innerHTML=chrome.windows.WINDOW_ID_CURRENT;
    This code outputs "Oops!1" in line 1 and "Oops!2" in line 2.
    Code:
    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.

  • #4
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    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"
    Code:
    chrome.tabs.query({
    	active: true,
    	windowId: chrome.windows.WINDOW_ID_CURRENT
       },
       function(array_of_Tabs) {
    	document.getElementById("test2").innerHTML=array_of_Tabs[0].url;
       }
    );

  • #5
    New to the CF scene
    Join Date
    Dec 2012
    Location
    le palais du nord
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by devnull69 View Post
    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?


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •