Chrome extensions variable access

Question

I'm busy creating a chrome extensions that needs to check a json format list for urls and compare whenever a new tab or adres is visited. When there's a match it needs to do stuff... But right now i'm not able to access variables from inside a function, i thought it was something with global and local variables but i can't figger it out. The variable i can't reach is u = request.dom; When i check it outside the addListener in the console.log i get undefined.

my code:

Background.js (jquery-1.11.3.js, amplify.js loaded):

loadedwebshops = amplify.store('webshops');
(function loadShops() {
    if (typeof loadedwebshops != 'undefined') {
    } else {
        // load from server
        $.ajax({
            url: '../shoplist.json',
            dataType: 'json',
            data: {}
        }).done(function(data, textStatus, jqXHR) {
            // update the cache
            amplify.store('webshops', data, {
                expires: 60000
            });
            loadedwebshops = amplify.store('webshops');
            //populate.Shops(data);
        }).fail(function(jqXHR, exception) {
        }).always(function() {
        });
        // alert("server");
        if (typeof loadedwebshops === 'undefined') {
            location.reload();
        }
    }
    setInterval(loadShops, 60000);
}
)();
chrome.extension.onMessage.addListener(function(request) {
    u = request.dom;
    requestedUrl(u);
});
$(document).ready(function() {
    var webshops = loadedwebshops["webshops"];
    console.log(webshops);
    function requestedUrl(u){
        console.log(u);
    }
});

Main.js:

var d = document.domain;
chrome.extension.sendMessage({
    dom: d
});

Manifest:

{
    "background": {
        "page": "background.html"
    },
    "browser_action": {
        "default_icon": "icons/actions/1.png",
        "default_title": "toolbar"
    },
    "content_scripts": [{
        "all_frames": true,
        "js": ["lib/jquery-1.11.3.js", "lib/amplify.js", "lib/main.js"],
        "matches": ["http://*/*", "https://*/*"]
    }],
    "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
    "description": "extension",
    "icons": {
        "128": "icons/icon128.png",
        "16": "icons/icon16.png",
        "48": "icons/icon48.png"
    },
    "manifest_version": 2,
    "name": "toolbar",
    "version": "1.1",
    "permissions": ["http://*/*", "https://*/*", "tabs", "cookies",
        "notifications", "contextMenus", "webNavigation", "webRequest",
        "webRequestBlocking", "unlimitedStorage", "storage"
    ]
}

Answer 1

Solved it... The problem was it was inside i different scope $(document).ready(function() {});

The new code is:

loadedwebshops = amplify.store('webshops');
(function loadShops() {
    if (typeof loadedwebshops != 'undefined') {
    } else {
        // load from server
        $.ajax({
            url: '../shoplist.json',
            dataType: 'json',
            data: {}
        }).done(function(data, textStatus, jqXHR) {
            // update the cache
            amplify.store('webshops', data, {
                expires: 60000
            });
            loadedwebshops = amplify.store('webshops');
            //populate.Shops(data);
        }).fail(function(jqXHR, exception) {
        }).always(function() {
        });
        // alert("server");
        if (typeof loadedwebshops === 'undefined') {
            location.reload();
        }
    }
    setInterval(loadShops, 60000);
}
)();
chrome.extension.onMessage.addListener(function(request) {
    u = request.dom;
    requestedUrl(u);
});

var webshops = loadedwebshops["webshops"];
console.log(webshops);
function requestedUrl(u){
    console.log(u);
}