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.

Answer 1

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.