为 Chrome 扩展程序添加快捷方式

目录

命令 API

让我们开始编码吧。

仓库

这有用吗？💬

上周我写了一篇文章，讲解如何创建一个简单的Chrome扩展程序。今天我们将开发一个新功能：键盘快捷键。

我们将添加两个快捷键：

• Alt + Shift + 1这将打开我们的浏览器操作
• Ctrl/Command + Shift + 2将复制当前标签页

目录

• 目录
• 命令 API
• 让我们开始编码吧。
  • 1. 在 manifest.json 文件中定义命令
  • 2. 添加后台脚本
  • 3. 监听命令事件
  • 完毕！
• 仓库
• 这有用吗？💬

命令 API

要为我们的扩展程序创建键盘快捷键，我们必须使用命令 API。通过此 API，我们可以定义命令并将其绑定到组合键。当用户使用快捷键时，命令将被触发，并执行相应的逻辑。

我们必须在文件中声明命令manifest.json及其建议的键盘快捷键。我们可以在文件中定义多个命令manifest.json。但是，我们的扩展程序只能建议4 个快捷键。用户可以从浏览器将其他命令绑定到键盘快捷键（chrome://extensions/shortcuts）。

可用按键：
任何键盘快捷键都必须使用Ctrl（Command在 Mac 上）或，Alt但不能同时使用两者。我们也可以使用Shift。

其他支持的按键：A-Z，，，，，，，，，，，方向键（，，，）和媒体键（，，，）。0-9​Comma​PeriodHomeEndPageUpPageDownSpaceInsertDeleteUpDownLeftRightMediaNextTrackMediaPlayPauseMediaPrevTrackMediaStop

例如 Ctrl + Shift + L：Alt + Shift + L Command + , Ctrl + Shift + 1

请记住，您不能使用浏览器保留的Ctrl + T命令，例如（在 Chrome 中会打开一个新标签页）。

我们应该在后台脚本中处理用户运行命令后需要执行的逻辑。稍后我会详细解释这一点。

让我们开始编码吧。

1. 在 manifest.json 文件中定义命令

要定义一个命令，我们应该commands在manifest.json文件中使用属性，如下所示：

{
    "manifest_version": 2,
    "name": "Acho, where are we?",
    ...
    "commands": {
        "_execute_browser_action": {
            "suggested_key": {
                "default": "Alt+Shift+1"
            }
        },
        "duplicate-tab": {
            "suggested_key": {
                "default": "Ctrl+Shift+2",
                "mac": "Command+Shift+2"
            },
            "description": "Duplicates the currently active tab because... why not?"
        }
    }
}

在之前的代码中，我们定义了 2 个不同的命令：

• _execute_browser_action这是一个保留命令，将由 Chrome 直接处理。通过在我们的配置文件中定义它manifest.json，我们告诉 Chrome 在用户执行快捷方式时打开我们的浏览器操作。我们无需自行处理此命令的逻辑。
• duplicate-tab这是一个自定义命令，我们的扩展程序必须手动处理。请注意，此命令还包含一个 `<script>` 标签description，而保留命令不需要此标签（Chrome 只会显示无法覆盖的默认描述）。

2. 添加后台脚本

为了处理命令的逻辑duplicate-tab，我们需要一个后台脚本。通过这个脚本，我们将监听该onCommand方法并执行相应的逻辑。

关于后台脚本

后台脚本的用途通常是监听浏览器事件并触发相应的反应。这些脚本会在事件触发后持续运行并执行任务，之后会被卸载。

要包含我们的后台脚本，我们必须修改manifest.json文件并使用background属性对其进行定义，如下所示：

{
    "manifest_version": 2,
    "name": "Acho, where are we?",
    ...
    "background": {
        "scripts": [
            "background.js"
        ],
        "persistent": false
    }
}

最后，让我们background.js在项目根目录中添加一个名为 `.py` 的新文件。

3. 监听命令事件

为了正确处理我们的命令，我们需要在后台脚本中监听该事件，并在调用我们的命令onCommand后执行相应的逻辑。duplicate-tab

因此，我们将监听该事件，并在命令被调用duplicateTab时调用该函数duplicate-tab：

chrome.commands.onCommand.addListener(function (command) {
    switch (command) {
        case 'duplicate-tab':
            duplicateTab();
            break;
        default:
            console.log(`Command ${command} not found`);
    }
});

/**
* Gets the current active tab URL and opens a new tab with the same URL.
*/
function duplicateTab() {
    const query = { active: true, currentWindow: true };
    chrome.tabs.query(query, (tabs) => {
        chrome.tabs.create({ url: tabs[0].url, active: false });
    });
}

请注意，我没有case为该_execute_browser_action命令添加参数，因为正如我们之前所说，该命令由 Chrome 自动处理。

完毕！

现在，当用户执行该操作时Alt + Shift + 1，浏览器操作将会打开；当他们使用快捷键时Ctrl/Command + Shift + 2，当前标签页将会被复制。

仓库

我会持续更新这个仓库，里面包含我所有的 Chrome 扩展程序示例：

这有用吗？💬

请在评论区告诉我你对这篇文章的看法！