title: how to get background.js to change based on options.js
body: <p>I am currently making a Google Chrome extension, and in the options I want the user to be able to choose between it being always on or only activating when clicked. To do this, I need an options.js and a background.js file, which I have. However, I am having a lot of trouble getting them to communicate properly. I tried using the chrome.storage api, but it won't do anything.</p>
  
  <p>Here is my code for background.js:</p>
  
  <pre><code>chrome.browserAction.onClicked.addListener(function() {
    // Send a message to the active tab
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {    
        chrome.tabs.sendMessage(tabs[0].id, {"message": tabs[0].url}, function(response));
    });
  });
  
  chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {          
      if (changeInfo.status == 'complete') {   
          chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
              // console.log(tabs.length);
              chrome.tabs.sendMessage(tabs[0].id, {"message": tabs[0].url}, function(response) {});
          });
      }
  });
  </code></pre>
  
  <p>And here is my code for options.js:</p>
  
  <pre><code>// Saves options to chrome.storage
  function save_options() {
    var behavior = document.getElementById('behavior').value;
    chrome.storage.sync.set({
      extensionBehavior: behavior
    }, function() {
      // Update status to let user know options were saved.
      var status = document.getElementById('status');
      status.textContent = 'Options saved!';
      setTimeout(function() {
        status.textContent = '';
      }, 1000);
    });
  }
  
  // Restores select box and checkbox state using the preferences
  // stored in chrome.storage.
  function restore_options() {
    // Use default value color = 'red' and likesColor = true.
    chrome.storage.sync.get({
      extensionBehavior: 'onClick'
    }, function(items) {
      document.getElementById('behavior').value = items.extensionBehavior;
    });
  }
  document.addEventListener('DOMContentLoaded', restore_options);
  document.getElementById('save').addEventListener('click',
      save_options);
  </code></pre>
  
  <p>If the behavior is set to "onClick", I only want the <code>chrome.browserAction.onClicked.addListener</code> portion to be executed. If the behavior is set to 'alwaysOn', then I only want the <code>chrome.tabs.onUpdated.addListener</code> portion to be executed. As far as debugging goes, both of those chunks work the way they're supposed to. I just need to know how to get one or the other to run based on the current options.</p>