chrome extension commands (hotkeys)

Question

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.

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!

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.

Anyhow here is the manifest section that I have handling the hotkey.

Manifest

    "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"
        }
    }

As you can see I got pretty desperate and added hot keys for every system on the network and tried it on them all.

background.js

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" });
});

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.

content.js

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;
}

**HERE IS WHERE I RUN INTO TROUBLE** 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.

/* 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 && (msg.action == "toggleSidebar")) {
        toggleSidebar();
    }
});

**HOT KEY LISTENER** 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.

/* Listen for message from the background-page and toggle the SideBar via hotkey */
chrome.runtime.onMessage.addListener(function(msg) {
    if (msg.action && (msg.action == "toggleSidebarhkey")) {
        toggleSidebarhkey();
    }
});

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.

Welcome to SO! I submitted an edit for your post fixing block code formatting (it's not backticks for code blocks but 4 spaces indent). If you could also edit your post to remove / tone down the backstory (it's not very useful), it would be great. — Xan, May 14 '14 at 14:45
1. You only need one listener for onMessage ... it can handle all incoming messages 2. The onCommand listener callback doesn't have a tab as a parameter but rather the command (like `toggle-feature` in your case) — devnull69, May 14 '14 at 14:51
I answer if I have a response that covers all of the issue(s) and gives a complete (and in a perfect world, a tested) solution. I think I should use comments for suggestions that (even untested) will lead to less issues ... — devnull69, May 14 '14 at 15:11
devnull69 I thought as much, but I added the second one in a headbanging episode trying to get it to work. Thank you — user3637006, May 14 '14 at 16:32

score 3 · Answer 1 · answered May 14 '14 at 15:06

3

As the docs on chrome.command explain, the callback for onMessage listener gets the command as the parameter, not the Tab object.

So, inside the callback you need to figure out which tab is active:

chrome.commands.onCommand.addListener( function(command) {
    if(command === "toggle-feature"){
        chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
            chrome.tabs.sendMessage(tabs[0].id, { action: "toggleSidebarhkey" });
        });
    }
});

answered May 14 '14 at 15:06

Xan

74,770
16
179
206

Interesting, I must have missed that section when reading through the documentation. Thank you – user3637006 May 14 '14 at 16:34
well, there are no code errors and everything appears to compile properly and load behind the scenes, except I still cannot get the pop-out to load when I hit hot-key. I'll keep poking it with a stick, I'm certain that you've pointed me in the right direction. I'll report back tomorrow (or earlier) if I figure it out. – user3637006 May 14 '14 at 18:31
As outlined [here](http://stackoverflow.com/questions/18132873/chrome-commands-keyboard-shortcuts-not-working-for-me), try to uninstall/install your extension, and not just reload, to properly register the hotkeys. Also, read carefully about `_execute_browser_action` command. It will open the popup if present, and will not fire `chrome.browserAction.onClicked`. – Xan May 14 '14 at 18:47

chrome extension commands (hotkeys)

1 Answers1