title: Chrome Extension workaround with popup html
body: <p>My project is a Chrome extension that will do the following.</p>
  
  <ul>
  <li>Push the extension icon.</li>
  <li>Popup will appear (from popup.html)</li>
  <li>5 buttons will be in the popup.</li>
  <li>When you click one of the four buttons, one javascript code will be executed.</li>
  <li>close popup window.</li>
  </ul>
  
  <p>So depending on the answer of this post over here</p>
  
  <p><a href="https://stackoverflow.com/questions/11996053/detect-a-button-click-in-the-browser-action-form-of-a-google-chrome-extension">Detect a button click in the browser_action form of a Google Chrome Extension</a></p>
  
  <p>(big ups to Michael for his enormous help)</p>
  
  <p>This example is only for one button. Created it with only one of my javascript code and works perfect.
  But when it comes to put all of the 5 buttons i 've tried to make this kind of coding but it didnt work at all (im new at javascript code so dont hate)</p>
  
  <p>Here are the codes</p>
  
  <p><strong>MANIFEST.JSON</strong></p>
  
  <pre><code>{
     "background": {
        "scripts": [ "background.js" ]
     },
     "browser_action": {
        "default_icon": "img/icon.png",
        "default_title": "TITLE",
        "default_popup": "popup.html"
     },
     "icons": {
        "128": "img/icon_128.png",
        "19": "img/icon19.png",
        "38": "img/icon38.png",
        "48": "img/icon_48_2.png"
     },
     "manifest_version": 2,
     "name": " NAME",
     "description": " DESCR ",
     "permissions": [ "activeTab" ],
     "version": "2.0"
  }
  </code></pre>
  
  <p><strong>POPUP.HTML</strong></p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;script src="popup.js"&gt;&lt;/script&gt;
          &lt;style type="text/css" media="screen"&gt;
              body { min-width:250px; text-align: center; }
              #click-me-l { font-size: 20px; }
              #click-me-f { font-size: 20px; }
  
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;button id='click-me-l'&gt;Click1&lt;/button&gt;
          &lt;button id='click-me-f'&gt;Click2&lt;/button&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>POPUP.JS</strong></p>
  
  <pre><code>    function clickHandler(e) {
          chrome.extension.sendMessage({directive: "popup-click-l"}, function(response) {
              this.close(); // close the popup when the background finishes processing request
          });
      }
  
  
   document.addEventListener('DOMContentLoaded', function () {
          document.getElementById('click-me-l').addEventListener('click', clickHandler);
  
      })
  
  
       function clickHandler(e) {
          chrome.extension.sendMessage({directive: "popup-click-f"}, function(response) {
              this.close(); // close the popup when the background finishes processing request
          });
      }
  
  
  document.addEventListener('DOMContentLoaded', function () {
          document.getElementById('click-me-f').addEventListener('click', clickHandler);
  
      })
  </code></pre>
  
  <p><strong>BACKGROUND.JS</strong></p>
  
  <pre><code>chrome.extension.onMessage.addListener(
      function(request, sender, sendResponse) {
          switch (request.directive) {
  
               case 1 "popup-click-l":
              // execute the content script
              chrome.tabs.executeScript(null, { // defaults to the current tab
                  file: "script1.js", // script to inject into page and run in sandbox
                  allFrames: true // This injects script into iframes in the page and doesn't work before 4.0.266.0.
              });
  
          case 2 "popup-click-f":
              // execute the content script
              chrome.tabs.executeScript(null, { // defaults to the current tab
                  file: "script2.js", // script to inject into page and run in sandbox
                  allFrames: true // This injects script into iframes in the page and doesn't work before 4.0.266.0.
              });
              sendResponse({}); // sending back empty response to sender
              break;
          default:
              // helps debug when request directive doesn't match
              alert("Unmatched request of '" + request + "' from script to background.js from " + sender);
          }
      }
  );
  </code></pre>
  
  <p>So the codes in the link are working PERFECT for only 1 button.
  in this example i am trying to make it work for 2 buttons but i cant find what im doing wrong. If anyone has any idea i would appreciate it.</p>
  
  <p>Thanks a lot for your time!!!</p>
  
  <p>(UPDATE 2. Updated codes for 2 buttons but not working.)</p>