웹사이트에 맞춤 키보드 단축키 추가

나는 영어를 공부할 때마다 모르는 단어를 찾기 위해 항상 구글 번역 웹사이트를 이용한다.



하지만 문제가 있습니다! 빨간색으로 표시된 두 개의 버튼이 보입니까? 하드코어 VIM 사용자로서 마우스를 터치하여 클릭하는 것을 싫어합니다 😩. 그러나 운 좋게도 알라는 나에게 프로그래밍할 수 있는 능력을 주었습니다.

User JavaScript and CSS이라는 멋진 확장 프로그램이 있어 자체 JavaScript 및 CSS 코드를 모든 웹사이트에 삽입할 수 있습니다.



처음에는 버튼 요소를 선택하여 프로그래밍 방식으로 클릭해야 합니다. 그러나 그들은 모두 임의의 클래스와 ID가 할당되어 있어 선택자로서 신뢰할 수 없습니다. 일부 검색 후 모든 버튼에 aria-label 라는 속성이 있음을 발견했습니다.

두 발음 버튼의 경우 aria-label 값은 "Listen to source text" 이고 지우기 버튼의 값은 "Clear source text" 입니다.

다음 코드 스니펫을 작성하여 이러한 버튼을 선택할 수 있습니다.

const clearBtn = document.querySelector('[aria-label="Clear source text"]');

const firstSpeakBtn = document.querySelectorAll(
  '[aria-label="Listen to source text"]'
)[1];

이제 clearBtn.click() 및 firstSpeakBtn.click() 메서드를 호출하여 각각 입력 텍스트를 지우고 발음할 수 있습니다.

두 번째로 keydown 이벤트에 대한 이벤트 리스너를 설정해야 해당 버튼을 클릭할 때를 알 수 있습니다.

const shortcuts = {};

window.addEventListener("keydown", (e) => {
  // If Control is not pressed or if the Control is pressed alone
  // then return and do nothing.
  if (!e.ctrlKey || e.key === "Control") return;

  const key = e.key;
  if (key in shortcuts) {
    // override browser keyboard shortcuts
    e.preventDefault();
    e.stopPropagation();

    // take some action here
  }
});

Ctrl-p를 발음하고 Ctrl-l을 사용하여 입력 텍스트를 지우고 싶습니다.

업데이트:

각각 위아래로 스크롤하기 위한 Ctrl-k 및 Ctrl-j를 추가했습니다.

전체 코드는 다음과 같습니다.

// Ctrl-l = clear the input in the first box
// Ctrl-p = pronounce the text in the first box
// Ctrl-j = scroll down
// Ctrl-k = scroll up
const shortcuts = Object.freeze({
  p: () => getSpeakButton().click(),
  l: () => getClearButton().click(),
  j: () => scrollBy({ top: 100, left: 0, behavior: "smooth" }),
  k: () => scrollBy({ top: -100, left: 0, behavior: "smooth" }),
});

window.addEventListener("keydown", (e) => {
  // If Control is not pressed or if the Control is pressed alone
  // then return and do nothing.
  if (!e.ctrlKey || e.key === "Control") return;

  const key = e.key;
  if (key in shortcuts) {
    // override browser keyboard shortcuts
    e.preventDefault();
    e.stopPropagation();

    shortcuts[key]();
  }
});

function getClearButton() {
  const clearBtn = document.querySelector('[aria-label="Clear source text"]');
  return makeBtnSafeToClick(clearBtn);
}

function getSpeakButton() {
  const firstSpeakBtn = document.querySelectorAll(
    '[aria-label="Listen to source text"]'
  )[1];
  return makeBtnSafeToClick(firstSpeakBtn);
}

/*
 * If the button is `nullish`, make sure that invoking the `.click()` method
 * doesn't throw an error.
 * */
function makeBtnSafeToClick(btn) {
  return btn ? btn : { click: () => {} };
}

이제 Google 번역 웹사이트로 이동하여 사용자 JavaScript 및 CSS 확장을 클릭하면 다음과 같은 모달이 표시됩니다.



그런 다음 새로 추가 버튼을 클릭하면 다음과 같은 페이지로 이동합니다.



마지막으로 위의 전체 코드 스니펫을 복사하여 JS 탭에 붙여넣고 저장을 클릭한 다음 페이지를 다시 로드합니다.

마침내 우리는 그 못된 쥐를 멀리할 수 있습니다! 인생은 굿 😋.

학점

표지 이미지는 Unsplash에서 가져온 것입니다.