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 es 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

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

chromemands.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 unpleted in this fashion.

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 es 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

    "mands": {
    "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.mands.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 unpleted in this fashion.

• javascript
• google-chrome
• google-chrome-extension

Share Improve this question Follow edited May 14, 2014 at 14:44 Xan 77.7k1818 gold badges197197 silver badges217217 bronze badges asked May 14, 2014 at 14:34 user3637006user3637006 2111 silver badge33 bronze badges 6

• Wele 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 Commented May 14, 2014 at 14:45
• 1. You only need one listener for onMessage ... it can handle all ining messages 2. The onCommand listener callback doesn't have a tab as a parameter but rather the mand (like toggle-feature in your case) – devnull69 Commented May 14, 2014 at 14:51
• @devnull69 Avoid answering questions in ments. – Xan Commented May 14, 2014 at 15:04
• 1 I answer if I have a response that covers all of the issue(s) and gives a plete (and in a perfect world, a tested) solution. I think I should use ments for suggestions that (even untested) will lead to less issues ... – devnull69 Commented May 14, 2014 at 15:11
• roger, tone down back story in the future, thank you Xan – user3637006 Commented May 14, 2014 at 16:31

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 3

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

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

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