javascript - chrome 扩展命令(热键)

Question

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

无论如何，我已经采取了一些现有的东西并修改它来实现我想要的。我计划对它进行比我目前拥有的更多的修改，但是，在我去找我的老板说看之前，我想确保该功能已经存在!看到了!

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

无论如何，这里是我处理热键的 list 部分。

list

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

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

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

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

内容.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();
    }
});

说实话，我完全陷入困境，我想你们中的许多人都在想，“把这个想法直接交给老板吧!”和“你的老板不会知道!”但我想要额外的酷元素，即不必寻找按钮并轻松访问帮助中心门户中的人力资源内容。一旦我获得了“嘿看!!”的基本功能然后我会扩展，也许添加一个面板而不是弹出窗口(如 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" });
        });
    }
});