Browser Extensions Development (Chrome & Edge) · レッスン

Commands APIによるキーボードショートカット

commands APIで定義したグローバルキーボードショートカットを通じて、パワーユーザーが拡張機能にすばやくアクセスできるようにします。

「Commands APIによるキーボードショートカット」はCoddyKit上の無料Browser Extensions Development (Chrome & Edge)レッスンです。これはレッスン4/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応の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.

よくある質問

「Commands APIによるキーボードショートカット」レッスンは無料ですか？

はい。「Commands APIによるキーボードショートカット」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Browser Extensions Development (Chrome & Edge)コースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Browser Extensions Development (Chrome & Edge)コースには全4レッスンが含まれています。

「Commands APIによるキーボードショートカット」で何を学びますか？

commands APIで定義したグローバルキーボードショートカットを通じて、パワーユーザーが拡張機能にすばやくアクセスできるようにします。ブラウザで直接実行するハンズオンコードでBrowser Extensions Development (Chrome & Edge)を演習し、24時間対応の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フィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Browser Extensions Development (Chrome & Edge)に戻る