Chrome extension(callbacks/localstorage)

Question

I want to make a Chrome extension that does this (automatically logs onto a website, probably not the best approach since it was my first time doing JS) and has an option page where the user can set up his info and get it saved (localstorage?) so that the content script can access it as well as the options page.

Here's what I've come to after a whole lot of researching, looking at examples etc.: http://pastebin.com/yTiXp4VY (source code of all files there).

In the end I gave up and just used trial and error so there's tons of errors there. The console is reporting it can't run for security reasons. Please explain me what is wrong with this version. I don't need you to fix my code, I am just learning JS.

Weird... I found [this](http://stackoverflow.com/questions/3937000/chrome-extension-accessing-localstorage-in-content-script) and tried the example he suggested and I'm getting the security message for it... Not sure why it's happening... — Seren, May 21 '12 at 10:30
It would help if you actually quoted the "security message". — Wladimir Palant, May 21 '12 at 10:32
Refused to execute inline event handler because of Content-Security-Policy. — Seren, May 21 '12 at 10:38
See update to my answer. Please always quote the error message if you get one - e.g. in this case it is absolutely unrelated to `localStorage` or communication with the content script. — Wladimir Palant, May 21 '12 at 10:44
I see, thanks! I was just using that as an example was using it, didn't know any other way until now. — Seren, May 21 '12 at 10:51

Wladimir Palant · Accepted Answer · 2012-05-21T10:42:11.450

For most part you code seems to be correct. Only one note: your options page can access localStorage directly, it doesn't need the background page for that. But the main issue seems to be the way your content script is built - it assumes that the user/password data will be available immediately (synchronously). That's not how it works: you are sending a message to the background page, eventually the background page will answer and your callback in the content script will be called. The simplest approach is to delay all actions until that happens and you have the data. And it should be easier to send a single message to the background page that will give you all the data. Something like this:

var userName = null;
var passWord = null;

chrome.extension.sendRequest( { eventName: "getLogin" },
    function(response) {
        userName = response.user;
        passWord = response.pass;

        // Now we can continue doing whatever we are doing
        checkIfAutoUrl();
    }
);

And the message processing in your background page would look like this:

function onRequest(request, sender, sendResponse) {
    if (request.eventName == "getLogin") {
        sendResponse({user: getStorage("user"), pass: getStorage("pass")});
    }
}

Note that the response is an object with two properties user and pass here - this way the content script can immediately continue once it got the response, it has all the necessary data and doesn't need to wait for a second response.

Update: Concerning the error message you get: the Content Security Policy is meant to protect your extension from being exploited by a malicious website. One part of that protection is disallowing inline scripts in HTML - like onload="load_options()". All scripts that will run need to be placed in your JavaScript files. So instead of this onload attribute you can put the following into options.js:

window.addEventListener("load", load_options, false);

See addEventListener documentation on MDN.

Okay, I tried modifying it based on your information, but I ran into problem not related to the messaging but when I try to get the submit button from an elementId it always returns null. [This is the modified code](http://pastebin.com/7vLamhNd), sorry I replied so late, I've been busy the last few days. *NOTE* I tried the same code inside a script in a html and it worked? But that's not what I want... — Seren, May 24 '12 at 10:21
Ah okay, I'll add the event listener to the load function -.- — Seren, May 24 '12 at 10:58
Seems to be working but I screwed up somewhere with checkbox, should be able to fix that on my own, thanks for all the help! — Seren, May 24 '12 at 11:02

Chrome extension(callbacks/localstorage)

1 Answers1