0

I'm new to creating a chrome extension. So far, everything goes good, since it's the same as web development. However, I can't seem to get chrome.storage.local work 100%. As of right now, if I set a key (with its value) and save it in the storage, the extension only saves it if the user keeps the popup open. When the popup is closed and the user opens the extension again, the key is gone.

It's actually the same story when you compare it with cookies and sessions, I want it to function as a cookie (so the data will be saved, even when the browser is closed down), but my result is a session (when the popup is closed, the data is gone).

My manifest file:

{
    "manifest_version": 2,

    "name": "Rooster Extension",
    "version": "0.5.2",
    "version_name": "Open Beta",
    "description": "description placeholder",

    "browser_action": {
        "default_popup": "popup.html",
        "default_title": "Title placeholder"
    },

    "icons": {
        "16": "icon16.png",
        "48": "icon48.png",
        "128": "icon128.png"
    },

    "web_accessible_resources": [
        "fonts/*.*"
    ],

    "content_scripts": [
        {
            "matches": ["http://nowhere/*"],
            "css": ["css/font-awesome.min.css","css/style.css"],
            "js": ["js/jquery.min.js", "js/custom.js"]
        }
    ],

    "permissions": [
        "storage"
    ]
}

Custom.js file (the part where I use chrome's API):

function getClass(){
    chrome.storage.local.get("class", function(data){
        var class = data["class"];
        var class = class.toUpperCase();
    });
}

try{
    getClass();
    if(class== null){
        $("#main-page").hide();
        $("#hello-page").fadeIn();//Redirect user to the welcome page where he/she has to typ in his/her classname
    }
}catch(e) {
    console.log(e);
    $("[id*='-page']").hide();//Redirect user to the selected page
    $("#hello-page").fadeIn();
}

$("#searchclass").click(function(){
        var searchclass= $("#search_input_class").val();
        if(!searchclass|| searchclass=== " " || searchclass.length !== 4){return;}
        searchclass= searchclass.toUpperCase();
        $(".class").text("Search: "+searchclass);

        $("#roosterdata").attr("src", "http://example/rooster/getRooster.php?class="+zoekklas);

        $("#search-page").hide();
        $("#main-page").fadeIn();
    });

I'm thinking the problem is caused by my manifest.json file. I probably didn't do a great job with writing that file, because I even have to keep "matches" in the file, otherwise Chrome gives me an error when updating my extension.

Side note: I'm not a chrome extension developer yet, I just need search on Google if I can pay the 25 dollars (Android developer) and 5 dollars (chrome extension developer) fee with a prepaid credit-card, because I don't have a credit-card.

TripleDeal
  • 726
  • 4
  • 14
  • 1
    chrome.* API methods that may accept a function callback are asynchronous, meaning the retrieved value won't be available in the current context, but only in the callback that is executed afterwards. P.S. this question is asked regularly so you might find similar questions/answers on StackOverflow. – wOxxOm Feb 28 '17 at 18:11
  • Also related/duplicate: [How do I return the response from an asynchronous call?](http://stackoverflow.com/q/14220321) – Makyen Feb 28 '17 at 20:03

0 Answers0