title: chrome extension commands (hotkeys)
body: <p>I am trying to write an extension that will pop-in and pop-out a side bar type view to allow for quick management of our HR help center.</p>
  
  <p>Anyways, I've taken some existing stuff and modified it to do what I want. I plan to modify it even more than what I currently have, however, I want to make sure the functionality is there before I go to my boss and say LOOK! SEE!</p>
  
  <p>I've gotten the basic idea to work with the browser action icon in Chrome. No issues there. The main issue comes when I try to enable a hotkey that will also open the extension. It just will not work, I've smacked my head against my desk one too many times and I need some outside assistance.</p>
  
  <p>Anyhow here is the manifest section that I have handling the hotkey.</p>
  
  <p>Manifest</p>
  
  <pre><code>    "commands": {
      "toggle-feature": {
          "suggested_key": {
              "default": "Ctrl+Shift+0",
              "mac": "Command+Shift+0"
          },
          "description": "Toggle the helpcenter screen",
          "global": true
      },
      "_execute_browser_action": {
          "suggested_key": {
              "windows": "Ctrl+Shift+9",
              "mac": "Command+Shift+9",
              "chromeos": "Ctrl+Shift+9",
              "linux": "Ctrl+Shift+9"
          }
      }
  </code></pre>
  
  <p>As you can see I got pretty desperate and added hot keys for every system on the network and tried it on them all.</p>
  
  <p>background.js</p>
  
  <pre><code>chrome.browserAction.onClicked.addListener(function(tab) {
      chrome.tabs.sendMessage(tab.id, { action: "toggleSidebar" });
  });
  
  chrome.commands.onCommand.addListener(function(tabh) {
          chrome.tabs.sendMessage(tabh.id, { action: "toggleSidebarhkey" });
  });
  </code></pre>
  
  <p>The second line is probably totally incorrect, I've screwed with it so many times trying to pass the information to the extension. The first line correctly handles the working half of the extension.</p>
  
  <p>content.js</p>
  
  <pre><code>var sidebarURL = "help center server";
  
  var isSidebarOpen = false;
  var sidebar = createSidebar();
  
  /* Create a pop-out */
  function createSidebar() {
      var sb = document.createElement("iframe");
      sb.id = "mySidebar";
      sb.src = sidebarURL;
      sb.style.cssText = ""
          + "border:   3px groove;\n"
          + "width:    50%;\n"
          + "height:   100%;\n"
          + "position: fixed;\n"
          + "top:      0px;\n"
          + "left:     0px;\n"
          + "z-index:  9999;\n"
          + "";
      return sb;
  }
  
  /* Show/Hide the pop-out */
  function toggleSidebar() {
      if (isSidebarOpen) {
          document.body.removeChild(sidebar);
      } else {
          document.body.appendChild(sidebar);
      }
      isSidebarOpen = !isSidebarOpen;
  }
  </code></pre>
  
  <p><strong>**HERE IS WHERE I RUN INTO TROUBLE**</strong>
  I copied and pasted the above code below and added the identifier from the background.js screen. I left the rest, because it should just use the current values to decide if it wants to close it or open it.</p>
  
  <hr>
  
  <pre><code>/* Show / Hide the pop-out via hotkey */
  function toggleSidebarhkey() {
      if (isSidebarOpen) {
          document.body.removeChild(sidebar);
      } else {
          document.body.appendChild(sidebar);
      }
      isSidebarOpen = !isSidebarOpen;
  }
  
  /* Listen for message from the background-page and toggle the SideBar */
      chrome.runtime.onMessage.addListener(function(msg) {
      if (msg.action &amp;&amp; (msg.action == "toggleSidebar")) {
          toggleSidebar();
      }
  });
  </code></pre>
  
  <p><strong>**HOT KEY LISTENER**</strong>
  Once again this part is probably wrong as hell, but I've messed with it so much to try to make it work I doubt any part of it is correct.</p>
  
  <hr>
  
  <pre><code>/* Listen for message from the background-page and toggle the SideBar via hotkey */
  chrome.runtime.onMessage.addListener(function(msg) {
      if (msg.action &amp;&amp; (msg.action == "toggleSidebarhkey")) {
          toggleSidebarhkey();
      }
  });
  </code></pre>
  
  <p>To be honest I'm totally stuck, I suppose that many of you are thinking, "take the idea as it is to the boss!" and "your boss won't know!" but I want the extra cool-factor of not having to hunt down the button and easy access to the HR stuff in the helpcenter portal. Once I get the basic functionality of "hey Look!!" then I will expand, maybe add a panel instead of the pop-out (like google keep or hangouts) who knows, but I need a proof of concept first, and I hate to leave things uncompleted in this fashion.</p>