Chrome App/Extensions에서 특수 키 입력 및 키보드 단축키 수신

글쎄, 유행의 Google Play Music, 이것의 Chrome 앱에는 미디어 키 ( 도) 어디에 있어도 재생을 컨트롤 할 수있는 신 기능이 탑재되어있다.
덧붙여서 이 키는 통상의 keydown의 이벤트 청취자에서는 주울 수 없는 것 같다.

구현 방법이라든지 몰랐기 때문에 예제 앱의 manifest.json를 들여다 보면 대답은 순식간에 나왔다.

commands로 구현

결코 최근에 할 수 있었던 것이 아니라, 옛날부터(Chrome 25부터) 이용할 수 있는 chrome.commands 를 사용한다.
일본어로 쓰는 기사는 적지 만 사용하는 사람은 괜찮을 것입니다.
chrome-extension - 키 입력만으로 원하는 탭으로 빠르게 전환 할 수있는 Google 크롬 확장 - Qiita

어떻게 사용

manifest.json에 commands 세션 추가

다음은 Google Play 뮤직의 발췌

manifest.json

{
...
   "commands": {
      "next-track": {
         "description": "next track",
         "global": true,
         "suggested_key": {
            "default": "MediaNextTrack"
         }
      },
      "play-pause": {
         "description": "play/pause",
         "global": true,
         "suggested_key": {
            "default": "MediaPlayPause"
         }
      },
      "previous-track": {
         "description": "previous track",
         "global": true,
         "suggested_key": {
            "default": "MediaPrevTrack"
         }
      },
      "stop": {
         "description": "stop playback",
         "global": true,
         "suggested_key": {
            "default": "MediaStop"
         }
      }
   },
...
}

"コマンド名": {
  "description": "コマンドの説明",
  "global": true, // Chromeが非アクティブな時にも拾うか? *** Chrome35+ ***
　　"suggested_key": { // キーパターン
              "default": "Ctrl+Shift+Y",
              "windows": "Ctrl+Shift+Y",
              "mac": "Command+Shift+Y",
              "chromeos": "Ctrl+Shift+U",
              "linux": "Ctrl+Shift+J"
  }
},
...

같은 형식으로 써 둔다.

키 패턴은 일반 키는 상기와 같이, 그 밖에 이하와 같은 특수 키 등.

Comma, Period, Home, End, PageUp, PageDown, Space, Insert, Delete, Arrow keys (Up, Down, Left, Right) and the Media Keys (MediaNextTrack, MediaPlayPause, MediaPrevTrack, MediaStop).

그리고 Mac에서는 Ctrl은 Command로 자동 치환되기 때문에 Ctrl인 채로 하려면 MacCtrl로 해라든가 ChromeOS에서는 Search가 있다든가 있는 것 같기 때문에 자세한 것은 문서 참조.

이제 설정의 확장 기능 > 키보드 단축키에 다음과 같은 느낌에 추가된다.


등록된 커멘드는 앱·확장기능으로부터 chrome.commands 경유로 취득하거나 주울 수 있다.

목록: chrome.commands.getAll

리스너 추가 : chrome.commands.onCommand.addListener
(입력시 콜백에 명령 이름이 반환됩니다)

이제 백그라운드에서 재생 중인 Play Music의 느낌을 구현할 수 없을까?

참고

chrome.commands - Google 크롬