Chrome extension - function in javascript not working properly

Question

This is my first question on stackoverflow. I am trying to write code for a chrome extension that helps in shortlisting. The idea is to have a folder named Shortlists in bookmark bar, and a few subfolders by name "www.stackoverflow.com" or "www.amazon.com" or "www.bbcnews.com" etc. When I find something interesting but want to read later, I may click on "shortlist extension icon" in the browser bar, and that will automatically create bookmark (and parent folder if the need be). I have no prior experience in javascript programming. I have written the following code - bck.js, which is invoked by manifest.json

    var foldercheck = false;

chrome.browserAction.onClicked.addListener(function(tab){
    var taburl  = tab.url
    var urlsplit  = taburl.split("://")
    var actual_url 
    if (urlsplit.length == 2) 
    {
        actual_url = urlsplit[1]
    }
    else 
    {
        actual_url = urlsplit[0]
    }
    var website = actual_url.split("/") 
    website = website[0] 
    console.log ('taburl: '+ taburl + ' actual_url: '+ actual_url+' website:  ' + website )
    createShortList(website,taburl)
    });

    function createShortList(website,taburl) {
    console.log(website + '    ' + taburl)
    chrome.bookmarks.getTree(function(bookmarks){
    chrome.bookmarks.search("Shortlists", function(slist){  
        console.log ("slist")
        if (slist[0]){
        console.log ("slistw2")
        chrome.bookmarks.getChildren(slist[0].id,function(slistchildren){
        slistchildren.forEach(function (slistchild){
        if (slistchild.title == website)
        {
            chrome.bookmarks.create({'parentId' : slistchild.id, 'title' : taburl , 'url' : taburl})
            console.log('added in Shortlists1, '+slistchild.id +' ')
            foldercheck = true
        }
        })})}
        if (foldercheck == false)       
        {
            chrome.bookmarks.create({'parentId' : slist[0].id, 'title' :  website}, function(folder) {
                chrome.bookmarks.create({'parentId' : folder.id, 'title' : taburl, 'url' : taburl})
                console.log('added in Shortlists2, '+folder.id +' ')
                foldercheck = true
            })
            foldercheck = true
        }
        })
    })

    if (foldercheck == false) {
    chrome.bookmarks.create({'parentId': "1", 'title': 'Shortlists'}, function(shortlist) {
    chrome.bookmarks.create({'parentId' : shortlist.id, 'title' :  website}, function(folder2)
    {chrome.bookmarks.create({'parentId' : folder2.id, 'title' : taburl, 'url' : taburl});
    console.log('added in Shortlists3, '+folder2.id +' ')
    ;})})
    foldercheck = true  }
    }

With this I am able to create bookmarks, but there are bugs like, the creating multiple shortlists, multiple shortlist folders in bookmark bar or multiple urls in subfolders. I am unable to decode a pattern in the bug. Please help me resolve this. Thanks in advance. Though I dont think there is a problem in manifest.json, here is the file for reference.

{
  "name": "Shortlist",
  "manifest_version" : 2,
  "version" : "1.0",
  "description" : "To ShortList",
  "background" : {"scripts" : ["bck.js"], "persistent" : false},
  "browser_action": {"default_icon" : "icon.png"},
  "permissions": [
          "activeTab", "bookmarks"
        ]
}

Can you add actual examples (test cases) of how it should work, and how it works instead? — Xan, Sep 01 '15 at 06:53
If I have to shortlist say, [link](http://stackoverflow.com/questions/32325103/chrome-extension-function-in-javascript-not-working-properly?noredirect=1#comment52525043_32325103), this will create Shortlists folder in bookmarkbar (if not present), a subfolder "stackoverflow.com" (if not present) and then add the url as a bookmark to the subfolder. But, my extension will add multiple bookmarks in same subfolder or create another(redundant) folder/subfolder and add the bookmark to it. Sometimes it doesn't do anything. I am not sure how to decode the bug pattern — viveksura, Sep 01 '15 at 08:19
use the the debugger to step the code and figure out the bug. — Zig Mandel, Sep 01 '15 at 12:37
You seem to be dangerously manipulating a state variable `foldercheck`, considering: most of your code is async, so it doesn't actually execute top to bottom; and your background page is not persistent, so this state will be lost while idle. — Xan, Sep 01 '15 at 15:55
So I highly suspect this is a case of http://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron — Xan, Sep 01 '15 at 15:57

score 2 · Accepted Answer · answered Sep 02 '15 at 17:08

A couple of pointers before I get started

bck.js is loaded only once for every chrome restart, which means the global variables are declared and initialised only once.
chrome.bookmarks.* is asynchronous. Whatever functions are written outside this api gets executed first , then the chrome apis are executed.

So move the foldercheck global variable into the function. Remove any if conditions outside the apis.

This should work

function createShortList(website,taburl) {
    foldercheck = false;

    chrome.bookmarks.search("Shortlists", function(slist){  

        // Shortlist folder exists
        if (slist[0]){

            // Folder with website name exists
            chrome.bookmarks.getChildren(slist[0].id,function(slistchildren){
                slistchildren.forEach(function (slistchild){
                    if (slistchild.title == website) {
                        chrome.bookmarks.create({'parentId' : slistchild.id, 'title' : taburl , 'url' : taburl})
                        foldercheck = true
                    }
                })
                // Folder with website name doesnt exist
                if (foldercheck == false){

                    chrome.bookmarks.create({'parentId' : slist[0].id, 'title' :  website}, function(folder) {
                        chrome.bookmarks.create({'parentId' : folder.id, 'title' : taburl, 'url' : taburl})
                        foldercheck = true

                    })
                }
            })
        }
        // Shortlist folder does not exist
        else{

            chrome.bookmarks.create({'parentId': "1", 'title': 'Shortlists'}, function(shortlist) {
                chrome.bookmarks.create({'parentId' : shortlist.id, 'title' :  website}, function(folder2){
                    chrome.bookmarks.create({'parentId' : folder2.id, 'title' : taburl, 'url' : taburl})
                })
            })
            foldercheck = true

        }


    })
}

and please indent your code

Chrome extension - function in javascript not working properly

1 Answers1