사이트별로 단축키 만들기

간단한 팁입니다.


웹툰을 보다가 이전화/다음화를 좌우 화살표로 옮겨가면서 보고 싶었습니다.

확장 프로그램을 찾아보니 이런게 나왔습니다.


https://chrome.google.com/webstore/detail/shortkeys-custom-keyboard/logpjaacgmcbpdkdchjiaagddngobkck


사용법은 간단합니다.

버튼을 적어주고

설명을 간단히 적고,사이트별로단축키만들기

Run Javascript를 선택해 줍니다. (해당 사이트에서만 작동하게 하는 옵션을 달아주면 더 좋습니다)

화면 캡처 2023-10-31 150429.jpg

개발자 모드에서 다음화/이전화에 해당하는 클래스명을 알아내고 'link_next' 나 'link_preview'이 들어가는곳에 입력해줍니다.


화면 캡처 2023-10-31 151407.jpg

1. 페이지 요소 선택을 클릭해 줍니다(파란색이 활성화)

2. 다음화(혹은 단축키를 눌렀을 때 실행했으면 하는 버튼)를 클릭해 줍니다.

3. 우측에 클래스명이 표시됩니다.

 3-1. 클래스 명이 아니고 id가 있을 경우엔

document.getElementsByClassName('클래스명')[0].click(); // 이게 아니라
document.getElementById('아이디').click(); // 이걸 써주시면 됩니다.


저장하고 웹툰 페이지에 가서 좌우 방향키를 눌러봐서 테스트 해 보세요.


여러가지로 응용하실 수 있을 것 같아 팁게에 작성해 봅니다.


팁은 어렵지만 웹툰에서 이 기능만 써도 되겠다 하시는 분은 위 확장 프로그램을 설치한 뒤에

아래 텍스트를 긁어 import에 넣고 저장해 주세요.


[
  {
    "key": "right",
    "label": "네이버 웹툰",
    "action": "javascript",
    "blacklist": "whitelist",
    "sites": "*comic.naver.com/webtoon*",
    "code": "document.getElementsByClassName('link_next')[0].click();\n",
    "sitesArray": [
      "*comic.naver.com/webtoon*"
    ]
  },
  {
    "action": "javascript",
    "key": "left",
    "label": "네이버 웹툰",
    "blacklist": "whitelist",
    "code": "document.getElementsByClassName('link_preview')[0].click();",
    "sites": "*comic.naver.com/webtoon*",
    "sitesArray": [
      "*comic.naver.com/webtoon*"
    ]
  }
]


자료실