Just went all around the houses trying to access variables from a script running within a web page. In actual fact it's quite easy. You need two things, a background pages and an options page to administer your options. So the first thing you need to do is make sure you have a reference to background and options in your extention manifest...
...
"background_page": "background.html",
"options_page": "options.html",
...
From within your script you can then access variables using...
chrome.extension.sendRequest({action:"getItem",item:"somekey"}, function(response) {
var myvar = response.value
console.log("somekey:"+myvar);
});Background page should look something like this...
<html>
<head><title>background</title>
<script type="text/javascript">
chrome.extension.onRequest.addListener(
function(request, sender, sendResponse) {
console.log(sender.tab ?
"from a content script:" + sender.tab.url :
"from the extension");
switch(request.action){
case "clear" :
localStorage.clear();
sendResponse({message:"Thanks, localStorage has been cleared"});
break;
case "getItem" :
var value = localStorage.getItem(request.item);
sendResponse({value:value,message:"value returned from background.html"});
break;
case "getItems" :
var value = {};
for (var i=0;i value[request.items[i]] = localStorage.getItem(request.items[i])
}
sendResponse({value:value,message:"value returned from background.html"});
break;
case "setItem" :
localStorage.setItem(request.item,request.value);
sendResponse({message:"Thanks, your update has been saved"});
break;
case "setItems" :
for (name in request.items){
localStorage.setItem(name,request.items[name]);
}
sendResponse({message:"Thanks, your updates have been saved"});
break;
}
});
</script>
</head>
</html>
The above will give you a simple way to store variables.
Your options page needs to use the background.html to save variables to
<html>
<head>
<title>Extention options</title>
<script type="text/javascript">
window.myOptions = {
init:function(){
chrome.extension.sendRequest({action:"getItem",item:"optionOne"}, function(response) {
console.log("!responce.value"+response.value);
document.getElementById("optionOne").checked = (response.value=="off") ? false : true;
});
chrome.extension.sendRequest({action:"getItem",item:"optionTwo"}, function(response) {
console.log("!responce.value"+response.value);
document.getElementById("optionTwo").checked = (response.value=="off") ? false : true;
});
document.getElementById("optionOne").addEventListener("click",function(){
myOptions.change("optionOne");
},false)
document.getElementById("optionTwo").addEventListener("click",function(){
myOptions.change("optionTwo");
},false)
document.getElementById("resetButton").addEventListener("click",function(){
myOptions.reset();
},false)
}
,change:function(key){
var value = document.getElementById(key).checked ? "on" : "off";
chrome.extension.sendRequest({action:"setItem",item:key,value:value}, function(response) {
console.log("!responce.message"+response.message);
var m = (value == "off")? "disabled" : "enabled"
document.getElementById("settings").innerHTML = key + " has been "+ m;
});
}
,reset:function(){
chrome.extension.sendRequest({action:"clear"}, function(response) {
location.reload();
});
}
}
window.addEventListener("load", window.myOptions.init, false)
</script>
</head>
<body>
<form>
<h1>Options</h1>
<p>
Intro text
</p>
<p>
<span class="option">
<input type="checkbox" name="optionOne" id="optionOne" value="on" />
</span>
<label for="optionOne" class="wiki">Enable option one</label>
</p>
<p>
<span class="option">
<input type="checkbox" name="optionTwo" id="optionTwo" value="on" />
</span>
<label for="optionTwo" class="wiki">Enable option two</label>
</p>
<p style="height:1.3em;color:red" class="alert">
<span id="settings"></span>
</p>
<p>
<input type="button" id="resetButton" value="Reset default options"/>
</p>
</form>
</body>
</html>
I finally decided I needed to sort out the font size in safari mobile, after a little tinkering it turns out you can just set the -webkit-text-size-adjust to "none" and that stops the browser from resizing the text.