Browser Extensions Development (Chrome & Edge) · 课时

使用 Commands API 设置键盘快捷键

通过使用 Commands API 定义全局键盘快捷键,让高级用户能够快速访问您的扩展。

第 4 / 4 课13 个步骤

使用 Commands API 设置键盘快捷键 是 CoddyKit 上的免费 Browser Extensions Development (Chrome & Edge) 课时。 这是第 4 节课,共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Browser Extensions Development (Chrome & Edge) 学习路径的一部分,你的进度在网页和 CoddyKit 应用中同步。 Browser Extensions Development (Chrome & Edge) 课程共包含 4 节课。

本课时的部分内容尚未翻译,以英文显示。

Why Keyboard Shortcuts

Beyond context menus and the omnibox, the commands API lets users trigger actions with a keystroke. Shortcuts make your extension feel fast and professional to power users.

Declaring Commands

Define each command in the manifest under commands, with a suggested key combination per platform.

{
  "commands": {
    "toggle-feature": {
      "suggested_key": { "default": "Ctrl+Shift+Y" },
      "description": "Toggle the feature"
    }
  }
}

Cross-Platform Keys

macOS uses Command instead of Ctrl. Provide platform-specific suggestions so the default keys feel native everywhere.

"suggested_key": {
  "default": "Ctrl+Shift+Y",
  "mac": "Command+Shift+Y"
}

Listening for Commands

In your service worker, handle the onCommand event. The command name you declared is passed to the listener.

chrome.commands.onCommand.addListener((command) => {
  if (command === 'toggle-feature') {
    console.log('Shortcut fired')
  }
})

The Special _execute_action Command

A reserved command named _execute_action opens your popup or fires the action click. You do not handle it in code; the browser does.

{
  "commands": {
    "_execute_action": {
      "suggested_key": { "default": "Ctrl+Shift+E" }
    }
  }
}

Acting on the Current Tab

Most shortcuts operate on the active tab. Query it inside the handler, then send a message or inject a script.

chrome.commands.onCommand.addListener(async (command) => {
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true })
  chrome.tabs.sendMessage(tab.id, { command })
})

Users Can Rebind Keys

Your suggested keys are only suggestions. Users can change them on the browser's extension shortcuts page, and conflicts are resolved there.

// chrome://extensions/shortcuts lets users rebind

Limited Number of Suggestions

Browsers limit how many commands can have a suggested key (commonly four). Extra commands still work but start unbound until the user assigns a key.

Reading Registered Commands

Use commands.getAll to inspect what keys are currently bound, useful for showing a help screen in your options page.

const cmds = await chrome.commands.getAll()
cmds.forEach(c => console.log(c.name + ': ' + c.shortcut))

Avoiding Conflicts

Pick uncommon combinations to reduce clashes with the browser and other extensions. Combos with Shift plus a letter are usually safe.

Documenting Shortcuts

List your shortcuts in the options page or onboarding so users discover them. A hidden shortcut helps no one.

Quick Check

Test your commands API knowledge.

Recap

You added keyboard shortcuts:

  • Declare them under commands with per-platform keys
  • Handle onCommand in the service worker
  • Use _execute_action for the popup
  • Respect the suggested-key limit and user rebinds
  • Document shortcuts for discoverability

Shortcuts make your extension feel fast and power-user friendly.

免费开始

用 AI 导师学习 JavaScript — 免费

在浏览器中编写并运行真实代码,获得全天候 AI 导师的即时帮助,并在网页或应用中继续学习。

课程
12
课程
48

常见问题解答

「使用 Commands API 设置键盘快捷键」课时是免费的吗?

是的 — 「使用 Commands API 设置键盘快捷键」的完整文本可在网页上免费阅读。要进行交互式练习(内置代码编辑器和全天候 AI 导师)并解锁 Browser Extensions Development (Chrome & Edge) 课程的其余内容,请升级到 CoddyKit PRO。 Browser Extensions Development (Chrome & Edge) 课程共包含 4 节课。

「使用 Commands API 设置键盘快捷键」这节课中我会学到什么?

通过使用 Commands API 定义全局键盘快捷键,让高级用户能够快速访问您的扩展。 你通过在浏览器中直接运行的动手代码来练习 Browser Extensions Development (Chrome & Edge),全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Browser Extensions Development (Chrome & Edge) 需要有经验吗?

无需任何先前经验。CoddyKit 上的 Browser Extensions Development (Chrome & Edge) 课程适合初学者到高级学习者,你可以从这里开始或从头开始,按照自己的节奏学习。 这是第 4 节课,共 4 节。

「使用 Commands API 设置键盘快捷键」课时需要多长时间?

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动,所以你能稳步进步,并在网页和应用中从离开的地方继续。

我能在这节 Browser Extensions Development (Chrome & Edge) 课中编写并运行代码吗?

能。每节 Browser Extensions Development (Chrome & Edge) 课都包含内置代码编辑器,你可以在浏览器中直接编写并运行真实代码,并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 添加上下文菜单项
  2. 全能框关键字集成
  3. 响应全能框输入
  4. 使用 Commands API 设置键盘快捷键
← 返回 Browser Extensions Development (Chrome & Edge)