[chrome plugin] 단축키로 크롬 플러그인 연동 (suggested_key)

아래 문서를 참고해서 키보드 입력 시 크롬 플러그인이 실행되는 방법을 설명한다. 

https://developer.chrome.com/docs/extensions/reference/commands/

chrome.commands - Chrome for Developers

 

 

1. manifest.json에 추가

  "background": {
    "service_worker": "service-worker.js"
  },
  "permissions": ["activeTab", "scripting"],
  "commands": {
    "action1": {
      "suggested_key": {
        "default": "Ctrl+U",
        "mac": "Command+Shift+0"
      },
      "description": "activate chrome plugin"
    }
  }

- service_worker :  웹 애플리케이션에서 백그라운드 작업을 수행

https://developer.chrome.com/docs/extensions/mv3/service_workers/

- permissions : 권한 관련 작업 

> activeTab : 사용자의 브라우저에서 현재 활성화된 탭과 제한적으로 상호 작용하기 위해 사용 

https://developer.chrome.com/docs/extensions/mv3/manifest/activeTab/

> scripting : scripting 사용하기 위해 필요한 권한 

https://developer.chrome.com/docs/extensions/reference/scripting/

- commands 

> action1 : 사용자가 지정할 수 있는 action명 

> suggested_key : 연동할 수 있는 키보드 키  

 

 

2. service_worker.js 에 아래 코드 추가 

// This callback WILL NOT be called for "_execute_action"
chrome.commands.onCommand.addListener((command) => {
  console.log(`Command "${command}" called`);
});

 

3. 동작 확인 

세부정보를 누른다

뷰 검사 하단의 서비스 워커를 누르면 창이 뜬다

단축키 누르고나서, 콘솔창에 실행되는 결과를 확인한다.

 

 

전체 소스코드는 여기서 참고하면 된다. 

https://github.com/soo-toance/2023-chrome-plugin/commit/1c40a8dcc0731fe738ef3c3abb6bf7a4cc33c94f

chrome plugin - keyboard 연동 추가 · soo-toance/2023-chrome-plugin@1c40a8d

 

참고 >> debug 창 설정 

https://stackoverflow.com/questions/10257301/accessing-console-and-devtools-of-extensions-background-js