Beneath the fold: Chrome extension, accessing extension variables from scripts

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>

Beneath the fold

Friday, 27 August 2010

Chrome extension, accessing extension variables from scripts

No comments:

Post a Comment

What's Marcus talking about?

Blog Archive

Contributors