단축키 익스텐션 만들기

크롬 익스텐션에는 다양한 기능이 제공되는데, 그 중 content scripts를 활용하면 간단한 단축키 기능이 있는 익스텐션을 만들 수 있습니다.

폴더 구조

폴더/
├── manifest.json
└── content-script.js

1. manifest.json

{
  "name": "이름",
  "version": "1.0",
  "manifest_version": 3,
  "description": "소개",

  "content_scripts": [
   {
     "matches": ["https://velog.io/"],
     "js": ["content-script.js"]
   }
  ]
}

열린 탭의 url이 matches 안에 있는 값과 매칭되면, 해당 페이지 안에서 js 파일이 동작합니다.

2. content-script.js

document.addEventListener("keydown", (e) => {
  console.log(e.key)
});

content script는 해당 페이지 안에서 동작합니다.

그래서 개발자 도구에서 console.log() 한 걸 확인하는 게 가능하며, 이 파일은 키를 누르면 키 이름을 해당 페이지의 콘솔에 출력할 것입니다.

예제

velog 메인 페이지에서 F2 키를 누르면 새 글 작성 페이지로 이동해주는 확장 프로그램을 만들어보겠습니다.

개발자 도구 콘솔에서 새 글 작성 버튼을 클릭해보고, 그대로 content-script.js에 붙여넣어서 완성하겠습니다.

1. 콘솔에서 버튼 클릭하기

velog.io 페이지로 가서 개발자 도구로 새 글 작성 버튼을 확인해보면 아래와 같이 나옵니다 :

<button class="Header_writeButton__BGlkS ...">
  새 글 작성
</button>

id나 class로 element를 특정해야 하는데, 여기에는 Header_writeButton__BGlkS라는 클래스가 있으니 이걸로 해보겠습니다.

> document.getElementsByClassName("Header_writeButton__BGlkS")
HTMLCollection(2) [button.RoundButton_block__UPARJ…, button.RoundButton_block__UPARJ…]

HTMLCollection 아이템에다가 마우스를 갖다 대거나 클릭해보면서 찾는 element가 맞는지 확인할 수 있습니다.

> document.getElementsByClassName("Header_writeButton__BGlkS")[1].click()

두 번째 값이 새 글 작성 버튼이므로, 콘솔에서 위처럼 click() 메서드를 써주면 새 글 작성 페이지로 이동합니다.

2. content script 작성

content-script.js

document.addEventListener("keydown", (e) => {
  if (e.key === "F2") {
    document.getElementsByClassName("Header_writeButton__BGlkS")[1].click()
  }
})

이처럼 F2 키가 눌러지면 새 글 작성 버튼을 클릭하는 스크립트를 짜줍니다.

이제 모든 작성이 끝났습니다.

3. 테스트하기 (크롬 기준)

테스트하는 방법은 다음과 같습니다 :

1. chrome://extensions 페이지 들어가기
2. 개발자 모드 켜기
3. manifest.json이 포함된 폴더를 리스트에 드롭하거나 직접 폴더 열기

기본적으로 폴더 또는 zip 파일을 드롭해서 적용시킬 수 있습니다.

개발할 때는 폴더로 테스트하고, 스토어에 올릴 땐 zip 파일을 제출하는 식으로 종종 사용합니다.

참고

F2 외에 다양한 키 입력을 받는 방법

keydown, keyup에서 인자로 들어오는 값이 KeyboardEvent라고 합니다.

KeyboardEvent.key를 많이 쓰고, ctrlKey, shiftKey, altKey, metaKey 등등도 있습니다.

예를 들어 Ctrl+Shift+A를 만들려면 아래처럼 작성할 수 있습니다.

document.addEventListener("keydown", (e) => {
  if (e.ctrlKey && e.shiftKey && e.key === "A") {
    console.log("Ctrl+Shift+A!!!")
  }
})

참고 링크

• MDN KeyboardEvent (developer.mozilla.org)

수정 : 2025-01-24