Need a bit of help with my chrome extension

  • (2 Pages)
  • +
  • 1
  • 2

15 Replies - 1717 Views - Last Post: 26 May 2014 - 04:14 PM

#1 masterori  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 69
  • Joined: 27-January 14

Need a bit of help with my chrome extension

Posted 11 May 2014 - 05:18 PM

I'm working on an assignment involving chrome extensions. I'm having a bit of trouble figuring out why certain values return as undefined..

// global variable declarations
...

...
{
grabURL: function() {
    chrome.tabs.query({active: true, lastFocusedWindow: true}, function(tabArray) {
        var tab = tabArray[0];
        urlPath = tab;
    });
		
    return urlPath;
},

generateURLNum_: function() {
    var length = grabURL().length;
		
    for(var i = 0; i < length; i++) {
        URLNum += path.charCodeAt(i);
    }
		
    return URLNum;
},

generateSomething_: function() {
    num = generateURLNum_();
    var c = new Class();
		
    if(num >= 0 && num < 800) {
        c = new ChildClassA();
        ...
    } else if(num >= 300 && num < 600) {
        c = new ChildClassB();
        ...
    }
}

};


When I debug, the urlPath returns the correct url, but URLNum and num return as undefined (there's no error in the debugger). The overall jest of my code is to grab the url, generate a number and do something with that number

Can someone help point out what I'm doing wrong?

Is This A Good Question/Topic? 0
  • +

Replies To: Need a bit of help with my chrome extension

#2 Blindman67  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 138
  • View blog
  • Posts: 615
  • Joined: 15-March 14

Re: Need a bit of help with my chrome extension

Posted 11 May 2014 - 06:22 PM

Javascript is function scoped. That is when a variable is defined it is only accessible within the function that it is defined in. A variable is defined with the var statement. If you exclude the var statement Javascript creates the variable in the global scope.

Also a variable that is created is set as undefined unless you assign something to it. So when you add something to undefined it remains undefined.

Add at line 17
var URLNum = ""; // create function scope var with empty string


Also just after line 7 you should add.
var urlPath;


Functions inside functions can see the outside functions variables. Its called closure. If you created urlPath inside anon function on line 7 you code would not work.

You have also missed the var keyword on line 26
Was This Post Helpful? 0
  • +
  • -

#3 masterori  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 69
  • Joined: 27-January 14

Re: Need a bit of help with my chrome extension

Posted 11 May 2014 - 09:59 PM

All of the variables that don't have var in front are declared in the global variables comment (lines 1-2). So urlPath, URLNum, and num are all global variables.

I think it might be what you mentioned about undefined variables staying undefined. Is this the same in other languages? I don't think I've encountered this problem in Java, C# or Python (or maybe I have but I've relied on the ide to fix it)
Was This Post Helpful? 0
  • +
  • -

#4 Blindman67  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 138
  • View blog
  • Posts: 615
  • Joined: 15-March 14

Re: Need a bit of help with my chrome extension

Posted 11 May 2014 - 11:02 PM

Undefined variables can be assigned any value at any time. Unlike languages like C/C++ C# Java, Javascript is loosely typed. That means that you do not have to set the variables type and that the variable can change type when ever you want.
var num = 0;             // num is of type Number
console.log(typeof num); // Displays "number"
num += 1;                // number is type "number"
num += "2";              // Adding a string 
                         // changes the type.
console.log(typeof num); // Displays "string"
console.log(num);        // Displays "12"

// a new var unassigned has a type undefined
var num1;          
console.log(typeof num) // displays "undefined"
num1 += "1";          
console.log(typeof num) // displays "string"
console.log(num)        // displays "undefined1"





The problem in the OP's code is that he is trying to add a value to a variable that has the value of undefined. Javascript will first convert the var to a string (this case "undefined") then add. If he was trying to add a number to undefined the result would be NaN (Not a number)
Was This Post Helpful? 0
  • +
  • -

#5 Blindman67  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 138
  • View blog
  • Posts: 615
  • Joined: 15-March 14

Re: Need a bit of help with my chrome extension

Posted 11 May 2014 - 11:13 PM

Sorry OP I did not read you code that well.

You should not assume that the array passed to the callback from chrome.tabs.query has data. You should check that there is an item in array index 0

if(tabArray.length > 0){
    tab = tabArray[0];
}else{
    tab = "Not found";
}


Also I am not 100% sure that the function in the chrome.tabs.query call will close over any variables in grabURL.

My apologies.
Was This Post Helpful? 0
  • +
  • -

#6 masterori  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 69
  • Joined: 27-January 14

Re: Need a bit of help with my chrome extension

Posted 12 May 2014 - 08:00 AM

Actually it's not because of using undefined variables. I did what you suggested by assigning an empty value to those global variables. But when I debugged again, the values for URLNum and num remained as empty

var URLNum = ""; // in the debugger it stayed as ""


Was This Post Helpful? 0
  • +
  • -

#7 Blindman67  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 138
  • View blog
  • Posts: 615
  • Joined: 15-March 14

Re: Need a bit of help with my chrome extension

Posted 12 May 2014 - 08:15 AM

Is there any data in the array you get from chrome.tab.query on line 8 var tab = tabArray[0];

Hang on I just had another look and where did path come from on line 19 path.charCodeAt(i); I can't see where you assign anything to that.
Was This Post Helpful? 0
  • +
  • -

#8 masterori  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 69
  • Joined: 27-January 14

Re: Need a bit of help with my chrome extension

Posted 17 May 2014 - 07:49 PM

path is assigned whatever value was returned in grabTabURL()

var path = grabTabURL() // should go before line 16
var length = path.length;



Yes, I do get data back from the chrome.tab.query. It returns an object with the url, page title, etc

Maybe I should be more clear with what I'm trying to do: Read in a url, and depending on it's ascii value, display an image (in that popup html page)

edit: also what does this part do? (it was in the chrome extension getting started tutorial)

document.addEventListener('DOMContentLoaded', function () {
  kittenGenerator.requestKittens();
});


In the documentation, it says it runs that function as soon as the DOM is ready. I added something similar to call the grabTabURL() function. But in the grabTabURL(), it doesn't call the other functions.
So I tried something like:
var something = this.generateURLNum_(); // in the grabTabURL() and so on
...


But I get an error in the debugger, something like "anonymous function"

This post has been edited by masterori: 17 May 2014 - 07:54 PM

Was This Post Helpful? 0
  • +
  • -

#9 Blindman67  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 138
  • View blog
  • Posts: 615
  • Joined: 15-March 14

Re: Need a bit of help with my chrome extension

Posted 17 May 2014 - 11:19 PM

Sorry but it is very difficult to see what the problem is without the code. Your problem could be anywhere and nobody is able to help if you do not supply the appropriate code listing, that includes all the variables, objects, and functions that are relevant.

I would like to help but just don't have the required information to do so and would just be guessing.
Was This Post Helpful? 0
  • +
  • -

#10 masterori  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 69
  • Joined: 27-January 14

Re: Need a bit of help with my chrome extension

Posted 18 May 2014 - 08:02 PM

I've written down the majority of the code that are needed for the extension to work.. Everything else is html, class hierarchies, etc (I don't think you'd need these)

I'll put everything into one post so it'll be easier...

// global variable declarations
...

...
{
grabURL: function() {
    chrome.tabs.query({active: true, lastFocusedWindow: true}, function(tabArray) {
        var tab = tabArray[0];
        urlPath = tab;
    });
		
    return urlPath;
},

generateURLNum_: function() {
    var path = grabURL();
    //var length = grabURL().length;
		
    for(var i = 0; i < path.length; i++) {
        URLNum += path.charCodeAt(i);
    }
		
    return URLNum;
},

generateSomething_: function() {
    num = generateURLNum_();
    var c = new Class();
		
    if(num >= 0 && num < 800) {
        c = new ChildClassA();
        var img = document.createElement("img");
        img.src = "img/pic.gif";
        document.body.appendChild(img);
    } else if(num >= 300 && num < 600) {
        c = new ChildClassB();
        ...
    }
}

};

document.addEventListener('DOMContentLoaded', function () {
  someFunction.grabURL();
});


Was This Post Helpful? 0
  • +
  • -

#11 Blindman67  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 138
  • View blog
  • Posts: 615
  • Joined: 15-March 14

Re: Need a bit of help with my chrome extension

Posted 19 May 2014 - 01:35 AM

This still does not make sense to me. You create an object literal with { on line 5 that is not assigned to any variable. How do you reference it as you don't show a reference.

When you attempt to call a function "someFunction.grabURL" where does someFunction come from?? how is it created??? what is its scope? Is it bound?

The code above can not run for many reasons. What are Class, ChildClassA, ChildClassB? Are they relevant?

{
grabURL: function() {} ,
...
}


The function assignments to the object attributes are ambiguous and will result in a error when the code is parsed. As is it will never even run.

var foo = { name: function(){} }; // is valid.  referenced
{name:(function(){})};            // is valid.  anonymous
{name: function foo(){}};         // is valid.  named
{name: function(){}};             // is not valid 


To create a object and use it later you have to have a reference to it.


Also you should check if the chrome.tab API is asynchronous. Many chrome. APIs are asynchronous. That means that when you have provided a function call back it will not block code and will run independently of your code at some time in the future.
urlPath = "sad";
chrome.tabs.query ({blah},function(){urlPath = "happy";});
// that function may not have run yet
return urlPath; // urlPath thus remains sad.

Was This Post Helpful? 0
  • +
  • -

#12 masterori  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 69
  • Joined: 27-January 14

Re: Need a bit of help with my chrome extension

Posted 19 May 2014 - 08:43 AM

The class hierarchies are not causing the problem - this I know.

someFunction is the object literal on line 5. I just followed the kitten example in the getting started guide.. It follows what you have here:
var foo = { name: function(){} ... };

Chrome.tabs.query is a asynchronous, but unlike the example you put, it does return the object with the url...

The only problem I'm getting is not getting the correct value for URLNum and num. In their case, it's like your example for urlPath, they remain undefined

As for the function reference (e.g line 16 and 27), from what you said, I should use this instead:
var foo = { name: function(){} };

Was This Post Helpful? 0
  • +
  • -

#13 masterori  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 69
  • Joined: 27-January 14

Re: Need a bit of help with my chrome extension

Posted 24 May 2014 - 09:56 AM

Some help please?
Was This Post Helpful? 0
  • +
  • -

#14 Blindman67  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 138
  • View blog
  • Posts: 615
  • Joined: 15-March 14

Re: Need a bit of help with my chrome extension

Posted 24 May 2014 - 10:24 AM

We can't help if you do not provide the information needed to see what is wrong. What you provide should not work for the reasons given.

grabURL: may return null or what ever you initialized urlPath with.(may means it depends on how quickly chrome.tabs.query calls the function you pass it)

{
grabURL: function() {
    chrome.tabs.query({active: true, lastFocusedWindow: true}, function(tabArray) {
        var tab = tabArray[0];  // This code may run after
        urlPath = tab;          // the function grabURL has exited.
    });
    // This will not work as the function in the call above may not have run yet
    // How do you ensure that urlPath has been assigned from the above call?????
    return urlPath;  // this will be undefined as the code you have given will makes it so.
}


You could also have a closure problem, but it is impossible to know without all the code. Just copy and past ALL the code and then we can find out what is wrong.
Was This Post Helpful? 0
  • +
  • -

#15 masterori  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 69
  • Joined: 27-January 14

Re: Need a bit of help with my chrome extension

Posted 26 May 2014 - 02:53 PM

I appreciate you trying to help, but please read everything in my posts... I have posted up all of the code that relates to the extension. The ChildClassA() etc are all mostly abstract right now so they don't affect anything.

Like I said in the above posts, urlPath does return an object with the url. I've checked in the debugger. The problem I'm having is assigning values to urlNum and num (they're both initially assigned empty values - and stay as such after the code is executed).

generateURLNum_() returns the value for urlNum, which is used in generateSomething_() to assign to num to assign the appropriate image.

This post has been edited by masterori: 26 May 2014 - 02:54 PM

Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2