chrome 扩展命令（热键）

Question

我正在尝试编写一个可以弹出和弹出侧栏类型视图的扩展程序，以便快速管理我们的人力资源帮助中心。

无论如何，我已经采用了一些现有的东西并对其进行了修改以做我想做的事。我计划对它进行比我目前拥有的更多的修改，但是，我想在我去找老板说“看！看！

我已经有了在 Chrome 中使用浏览器操作图标的基本想法。那里没有问题。当我尝试启用一个也将打开扩展程序的热键时，主要问题就出现了。这根本行不通，我的头撞在桌子上太多次了，我需要一些外部帮助。

这里是我处理热键的清单部分。

清单

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

如您所见，我非常绝望，并为网络上的每个系统添加了热键，并在所有系统上都进行了尝试。

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

第二行可能完全不正确，我已经多次尝试将信息传递给扩展程序。第一行正确处理了扩展的工作部分。

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

**这是我遇到麻烦的地方** 我在下面复制并粘贴了上面的代码，并从 background.js 屏幕添加了标识符。我留下了其余的，因为它应该只使用当前值来决定是关闭它还是打开它。

---

/* 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();
    }
});

**热键监听器** 再一次，这部分可能是错误的，但我已经把它搞砸了，试图让它发挥作用，我怀疑它的任何部分是正确的。

---

/* 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();
    }
});

说实话，我完全被困住了，我想你们中的许多人都在想，“把这个想法照原样交给老板！” “你的老板不会知道的！”但我想要一个额外的酷因素，即不必寻找按钮并轻松访问帮助中心门户中的 HR 内容。一旦我获得了“嘿看！！”的基本功能然后我会扩展，也许添加一个面板而不是弹出窗口（如 google keep 或 hangouts），谁知道呢，但我首先需要一个概念证明，我讨厌以这种方式留下未完成的事情。

Answer 1

正如docs on chrome.command 解释的那样，onMessage 侦听器的回调将命令作为参数，而不是 Tab 对象。

因此，在回调中，您需要确定哪个选项卡处于活动状态：

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