웹 페이지에서 키보드 단축키를 설정할 수 있습니까?

시스템 또는 응용 프로그램 바로 가기가 아니라 특정 웹 페이지에서 특별히 사용되는 키보드 바로 가기입니다.

예를 들어 Gmail 단축키입니다.

예:

Facebook에서 Alt+ f를 누르면 피드가 'Top Stories'에서 'Most Recent'으로 변경되며 그 반대도 마찬가지입니다.

그리고 사용자가이 단축키를 스스로 설정할 수있게 하시겠습니까? 아마도 크롬 확장 프로그램입니까?

확장 바로 가기 관리자를 사용하면 사용자 정의 키보드 바로 가기를 만들 수 있지만 내부 페이지 작업을 수행하려면 JavaScript 또는 jQuery 선택기 에 대해 약간의 지식이 필요합니다 .

공식 설명

바로 가기 키를 사용자 정의하십시오. 키 입력에 Javascript 코드 또는 브라우저 조치를 지정하십시오.

브라우저 기본 바로 가기 키를 변경하고 북마크 나 자바 스크립트 작업을 핫키에 할당 할 수 있습니다. Firefox에서 Keyconfig로 작동합니다.

동작 예 :

• 탭 : "왼쪽 탭", "상위 디렉토리", "오른쪽 탭 닫기", "즐겨 찾기 페이지 열기", ...
• 페이지 : "스크롤 업 / 다운", "서명 삽입", ...
• 특별 : "스크린 캡처"
• 맞춤 : 북마크 나 자바 스크립트 코드를 실행하십시오!

설정을 가져 오거나 내 보내서 다른 사람과 공유 할 수도 있습니다.

설치

1. 바로 가기 관리자를 방문하십시오 .
2. Chrome에 추가를 클릭 하십시오 .
3. 추가를 클릭 하십시오 .

예

Facebook 계정이 없으므로 바로 가기 키를 사용하여 슈퍼 유저받은 편지함을 열어 보겠습니다.

1. 검색 주소창 오른쪽의 바로 가기 관리자 아이콘을 클릭합니다 .

2. 모든 설정보기 / 새 단축키 추가를 클릭 하십시오 .

3. 입력 필드 바로 가기 키를 클릭 하고 원하는 키 조합을 누르십시오.

   이는 단일 멀티 단축키 (예를 들어,이 될 수 있습니다 Ctrl+ Shift+ I또는 Alt+ I) 또는 키의 순서를 (예를 들어, I, N, B, O, X).

4. 적절한 URL 패턴을 선택하십시오 .

   도메인 superuser.com및 해당 하위 도메인의 모든 페이지를 일치 시키려면 다음을 사용하십시오.

   *://superuser.com/*
   *://*.superuser.com/*
   

5. 에서 작업 을 선택 자바 스크립트를 실행 하고 입력

   http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
   

   의 (1) .

6. 입력 열기받은 편지함 에 설명 .

7. JavaScript의 .click()방법을 사용하여 웹 페이지의 모든 항목에서 마우스 클릭을 시뮬레이션 할 수 있습니다 . 까다로운 부분은 해당 항목에 액세스하는 것입니다. 여기서 jQuery 선택기가 유용합니다.

   일반적으로받은 편지함에 액세스하려면 StackExchange 드롭 다운을 클릭 한 다음 받은 편지함을 클릭 합니다 . 두 가지 모두에 적합한 선택기가 필요합니다.

   • StackExchange 드롭 다운을 마우스 오른쪽 단추로 클릭하고 요소 검사를 클릭하십시오 .

     개발자 도구에 다음이 표시됩니다.

     <div id="header">
         <div id="portalLink">
             <a class="genu" onclick="StackExchange.ready(function(){genuwine.click();});return false;">Stack Exchange</a>
             </div>
             ...
     </div>
     

     <a>태그가 강조 표시됩니다; 클릭을 시뮬레이트하려는 요소입니다.

     요소의 클래스는 genu 입니다. selector .genu만 사용할 수는 있지만 같은 클래스의 여러 요소가 있으면 제대로 작동하지 않습니다. 보다 안정적인 접근 방법은 selector를 사용하여 <div>ID portalLink (ID는 고유함)가 있는 하위 노드로 액세스하는 것 #portalLink a.genu입니다. 그런 다음이 .click()방법 을 사용합니다 .

     (2) 에 다음 줄 중 하나를 입력 하면 작업이 수행됩니다.

     // click first <a> element with class `genu'
     // inside the element with ID `portalLink'
     $('#portalLink a.genu')[0].click();
     
     // click first <a> element with class `genu'
     // inside the element with ID `header'
     $('#header a.genu')[0].click();
     
     // click first element with class `genu' of the entire page
     $('.genu')[0].click();
     
     // click first <a> element of the entire page (unreliable)
     $('a')[0].click();
     
     // directly perform the onclick event (easy, but not always available)
     StackExchange.ready(function(){genuwine.click();});
     

   • 에서 StackExchange의 드롭 다운 마우스 오른쪽 단추로 클릭 한 받은 편지함 을 클릭 요소를 검사합니다 .

     개발자 도구에 다음이 표시됩니다.

     <a id="seTabInbox" class="seCurrent">Inbox</a>
     

     이 요소는 고유 한 ID : seTabInbox를 갖습니다 .

     (2) 에 다음 줄 중 하나를 입력 하면 작업이 수행됩니다.

     // click first (only) element with ID `seTabInbox'
     $('#seTabInbox')[0].click();
     
     // click sixth <a> element of the entire page (unreliable)
     $('a')[5].click();
     

8. 저장을 클릭 하고 열려있는 모든 수퍼 유저 페이지를 다시로드 하십시오 . 바로 가기를 사용할 준비가되었습니다.

이것을 읽게하십시오 ( Link ), 브라우저를 열어야하지만 그렇게 어렵지 않습니다.