title: Detect a button click in the browser_action form of a Google Chrome Extension
body: <p>How can something so simple be so impossible?</p>
  
  <p>All I want to do is click the browser_action button of my extension, open a form with a couple of settings, and then click the button on the form to kick off a process.</p>
  
  <p>I cannot for the life of me get the button click in the background form to work.</p>
  
  <p>I have tried to get the example at <a href="http://developer.chrome.com/extensions/contentSecurityPolicy.html#H2-3">http://developer.chrome.com/extensions/contentSecurityPolicy.html#H2-3</a> to work, but it doesn't.  Is there a difference between rules for browser_action and background? Is that why my event listener is not firing?</p>
  
  <p>Can someone provide a working example, please?</p>
  
  <p>manifest.json:</p>
  
  <pre><code>{
      "name": "Convert",
      "version": "0.1",
      "description": "Converts the current page",
      "browser_action": {
          "default_icon": "exticon.png",
          "default_popup": "background.html"
      },
      "content_scripts": [{
          "matches": ["*://*/*"],
          "js": ["contentscript_static.js"]
      }],
      "permissions": [
          "tabs", "http://*/*", "https://*/*"
      ]
  }
  </code></pre>
  
  <p>background.html:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Converter&lt;/title&gt;
          &lt;script src="background.js"/&gt;
          &lt;script&gt;
          // Initialize the localStorage
          if (null == localStorage["htmlImport"])
             localStorage["htmlImport"] = false;
  
          // Called when the user clicks on the browser action icon.
          chrome.browserAction.onClicked.addListener(function(tab) {
              console.log('in listener');
                   // execute the content script
                   chrome.tabs.executeScript(null, 
                      {
                         file: "contentscript.js",
                         allFrames: true   // It doesn't work before 4.0.266.0.
                      });
                });
  
          // Listen to the requests from the content script
          chrome.extension.onRequest.addListener(
                function(request, sender, sendResponse)
                {
                   switch (request.name)
                   {
                      case "getPreferences":
                         sendResponse(
                            {
                               prefIgnoreLinks : localStorage["htmlImport"]
                            });
                         break;
  
                      case "PressShortcut":
                         sendResponse({});  // don't response.
  
                         // execute the content script
                         chrome.tabs.executeScript(null, 
                            {
                               file: "contentscript.js",
                               allFrames: true   // It doesn't work before 4.0.266.0.
                            });
  
                         break;
  
                      default:
                         sendResponse({});  // don't response.
                         break;
                   }
                });
  
  
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body style='min-width:250px;'&gt;
          Link depth: &lt;input type='text' name='depth' value='3'/&gt;&lt;br/&gt;
          &lt;input type='checkbox' name='changedomain'&gt;Include external domains&lt;/input&gt;&lt;br/&gt;
          &lt;button id='beginConvert'&gt;Convert&lt;/button&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>background.js:</p>
  
  <pre><code>function awesome() {
    // Do something awesome!
    console.log('awesome')
  }
  function totallyAwesome() {
    // do something TOTALLY awesome!
    console.log('totallyAwesome')
  }
  
  function awesomeTask() {
    awesome();
    totallyAwesome();
  }
  
  function clickHandler(e) {
    setTimeout(awesomeTask, 1000);
  }
  // Add event listeners once the DOM has fully loaded by listening for the
  // `DOMContentLoaded` event on the document, and adding your listeners to
  // specific elements when it triggers.
  //document.addEventListener('DOMContentLoaded', function () {
  //  document.querySelector('button').addEventListener('click', clickHandler);
  //});
  
  // Add event listeners once the DOM has fully loaded by listening for the
  // DOMContentLoaded event on the document, and adding your listeners to
  // specific elements when it triggers.
  document.addEventListener('DOMContentLoaded', function () {
  //  console.log('event listener for button connected to beginConversion()');
      //document.querySelector('button').addEventListener('click', beginConversion);
      document.getElementById('beginConvert').addEventListener('click', clickHandler);
  });
  </code></pre>