Violentmonkey로 웹사이트를 커스텀해보자

TL;DR

웹사이트를 서핑하면서 “이 기능이 있으면 편할텐데” 라고 생각해본 적이 있나요?
Violentmonkey는 이런 고민을 해결해 줄 브라우저 확장 프로그램입니다.
이번 포스트에선 Violentmonkey로 MDN 문서를 영어와 한글간에 변환하는 핫키를 만드는 방법을 소개합니다.

Violentmonkey 설치하기

Violentmonkey는 브라우저 확장 프로그램으로, 사용자가 작성한 JavaScript 코드를 웹페이지에 삽입하여 웹사이트의 동작을 원하는 대로 커스터마이징할 수 있게 해줍니다.

DOM을 직접 조작할 수 있고 원하는 이벤트를 넣을 수도 있고 MutationObserver를 활용한 기능 추가 등등.. 저처럼 개발에 입문한지 얼마 안된 초보 개발자에겐 굉장히 재밌으면서 공부에도 도움되는 프로그램입니다 :D

Violentmonkey는 크롬, 파이어폭스, 엣지 브라우저를 지원하니 각 브라우저의 확장프로그램 스토어에서 다운로드 하실 수 있습니다.

목표: MDN 문서 영,한 변환 핫키 만들기

제가 이 프로그램을 알게되고 가장 먼저 떠오른건 MDN 문서 영,한 변환 핫키를 만드는 것이였습니다.
한글 문서에 부족한 정보나 잘못 번역된 정보가 있을 때 영어문서로 넘어가서 다시 보는 일이 많은데, 문서를 위로 스크롤하고 버튼을 두번 누르는 동작이 꽤나 번거롭게 느껴졌거든요. 이 번거로움을 줄이기 위해 Violentmonkey로 간단한 핫키를 만들어 MDN문서의 영어와 한글 페이지를 손쉽게 전환할 수 있도록 구현해 보겠습니다.

@match 설정

먼저 MDN에 접속하여 아무 문서나 클릭합니다. 그리고 Violentmonkey를 열어 새 스크립트 만들기를 클릭합니다. 그럼 아래와 같은 메타데이터가 보일텐데요.

// ==UserScript==
// @name        New script mozilla.org
// @namespace   Violentmonkey Scripts
// @match       https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/for...in*
// @grant       none
// @version     1.0
// @author      -
// @description 2024. 11. 20. 오전 9:36:51
// ==/UserScript==

MDN의 모든 한글문서에 적용하기 위해 @match를 아래처럼 변경합니다.

// @match       https://developer.mozilla.org/ko/*

이제 MDN의 모든 한글문서에서 유저 스크립트가 실행됩니다.

DOM 요소에 접근하기

”키를 누르면 영문 사이트로 변경된다.”를 구현하려면 어떻게 해야 할까요?
제가 생각한 방법은 영문 사이트로 변경하는 버튼의 <a href>속성에 접근하여 원하는 주소를 가져와 변경시키는 방법이였습니다. 개발자 도구를 열어 English (US) 버튼을 살펴보면, <a data-locale="en-US">에 같은 문서의 영문 사이트 주소가 있는 것을 확인할 수 있습니다.

주소 값을 얻기 위해 querySelector로 DOM 태그에 접근하고, getAttribute로 href 속성 값을 가져옵니다.

const englishLink = document.querySelector(`a[data-locale="en-US"]`)
const englishUrl = englishLink.getAttribute('href')

keydown 이벤트 만들기

원하는 주소값을 얻었으니, 이제 keydown 이벤트만 추가하면 기능이 완성됩니다.
저는 “`” 키를 핫키로 설정했는데, 맥북에서는 같은 위치의 키가 한글 입력 상태일 때 ”₩“로 변하기 때문에 두 키 모두 인식할 수 있도록 처리했습니다.

addEventListener로 keydown 이벤트를 등록하고, window.location.href에 주소값을 할당하여 영어 페이지로 이동하도록 만들었습니다.

// ==UserScript==
// @name        MDN ko to en-US
// @namespace   Violentmonkey Scripts
// @match       https://developer.mozilla.org/ko/*
// @grant       none
// @version     1.0
// @author      yiseong
// @description 2024. 6. 30. 오후 10:20:08
// ==/UserScript==

document.addEventListener('keydown', function (event) {
	if (event.key === '`' || event.key === '₩') {
		const englishLink = document.querySelector('a[data-locale="en-US"]')
		const englishUrl = englishLink.getAttribute('href')
		window.location.href = englishUrl
	}
})

한글 문서에서 영어 문서로 이동하는 기능을 만들었으니, 이제 그 반대로 영어 문서에서 한글 문서로 이동하는 핫키를 만드는 것도 가능합니다.
새 스크립트를 생성하여 이전 스크립트를 복사한 뒤 @match를 en-US로 바꾸고 링크가 담긴 태그를 a[data-locale="ko"]로 변경시키면 완성입니다.

// ==UserScript==
// @name        MDN en-US to kr
// @namespace   Violentmonkey Scripts
// @match       https://developer.mozilla.org/en-US/*
// @grant       none
// @version     1.0
// @author      yiseong
// @description 2024. 6. 30. 오후 10:20:08
// ==/UserScript==

document.addEventListener('keydown', function (event) {
	if (event.key === '`' || event.key === '₩') {
		const koreanLink = document.querySelector('a[data-locale="ko"]')
		const koreanUrl = koreanLink.getAttribute('href')
		window.location.href = koreanUrl
	}
})

구현 완료!

마치며

violentmonkey를 활용해 MDN 문서를 간편하게 영어와 한글 간에 전환할 수 있는 핫키 기능을 만들어보았습니다.

이렇게 간단한 스크립트로 웹사이트의 동작을 개선하고, 자신만의 맞춤형 환경을 만들 수 있다는 점이 매우 흥미로웠는데요. 특히, 배운 내용을 바탕으로 직접 기능을 만들어 볼 수 있다는 점이 개발 초보자인 제게 더욱 매력적으로 다가왔습니다.

이 포스트가 Violentmonkey를 활용한 웹사이트 커스터마이징을 시작하는 데 도움이 되었길 바랍니다.

관련 링크

• violentmonkey