북마클릿 만들기: 자바스크립트를 북마클릿으로

북마클릿 만들기 사용 방법

1. 북마크 이름을 정하고 코드 입력창에 자바스크립트를 붙여넣으세요. 완성된 예시를 보려면 페이지 제목 예시 불러오기를 누르면 됩니다. 맨 앞의 javascript:는 있어도 없어도 되며, 생성기가 지우고 직접 붙입니다.
2. 북마클릿 만들기를 누르세요. 만들어진 주소가 글자 수와 함께 아래에 나타납니다.
3. 어두운 색 버튼을 북마크바로 끌어다 놓으세요. 북마크바가 숨겨져 있다면 브라우저의 보기 메뉴나 설정에서 먼저 켜세요.
4. 아무 페이지나 열고 그 북마크를 클릭하세요. 스크립트가 그 페이지에서 한 번 실행됩니다.

이 페이지에서 버튼을 눌러도 아무 일도 일어나지 않는 것은 의도한 동작입니다. 북마클릿은 생성기가 아니라 지금 읽고 있는 페이지에서 실행되도록 만든 것이기 때문입니다.

북마클릿이란 무엇인가

북마클릿은 주소가 https: 대신 javascript:로 시작하는 평범한 브라우저 북마크입니다. 페이지를 연 상태에서 북마크를 클릭하면 브라우저가 다른 곳으로 이동하지 않고 그 페이지에서 스크립트를 실행합니다. 북마클릿은 페이지에 특화된 작업에 쓸모가 있습니다. 서식을 갖춘 인용 복사, 읽기 화면 전환, 선택한 글 추출, 현재 주소를 다른 서비스에서 열기 같은 일입니다. 확장 프로그램을 설치할 필요도, 권한을 요청할 일도 없고, 다른 링크처럼 북마크바에 둘 수 있습니다.

자바스크립트를 북마클릿으로 바꾸는 방법

스크립트를 손으로 바꾸려면 세 단계가 필요하고, 생성기가 각 단계를 대신 처리합니다. 다음은 두 줄짜리 스크립트와 그것이 변환된 북마클릿입니다.

const n = document.links.length;
alert('이 페이지의 링크: ' + n + '개');

javascript:(()%3D%3E%7B%0Aconst%20n%20%3D%20document.links.length%3B%0Aalert('%EC%9D%B4%20%ED%8E%98%EC%9D%B4%EC%A7%80%EC%9D%98%20%EB%A7%81%ED%81%AC%3A%20'%20%2B%20n%20%2B%20'%EA%B0%9C')%3B%0A%7D)()

1. 코드를 함수로 감싸기

이 도구는 코드를 즉시 실행되는 화살표 함수 (() => { … })() 안에 넣습니다. 그러면 변수가 페이지에서 이미 정의한 것과 충돌하지 않고, 두 번째 이유도 있습니다. javascript: 주소의 코드가 문자열 값으로 끝나면 브라우저가 그 문자열을 보여주는 새 문서로 페이지를 바꿔 버립니다. 블록 본문을 가진 함수는 아무것도 반환하지 않으므로 페이지가 그대로 유지됩니다. 손으로 쓴다면 코드를 void로 시작하는 것이 전통적인 대안입니다.

2. 퍼센트 인코딩하기

브라우저는 URL을 쓰기 전에 탭과 줄바꿈 문자를 원래 그대로는 모두 지워 버리므로, 여러 줄짜리 스크립트를 북마크에 그대로 붙여넣으면 한 줄로 합쳐집니다. 그러면 // 주석 하나가 그 뒤의 모든 것을 삼키고, 줄바꿈에 의존하던 문장들이 서로 붙어 버립니다. 인코딩하면 각 줄바꿈이 %0A로 바뀌어 살아남고, 브라우저는 실행 직전에 코드를 다시 디코딩합니다. 인코딩은 공백, 큰따옴표, %, #도 지켜줍니다.

3. javascript: 접두사 붙이기

javascript: 스킴이 브라우저에게 나머지 주소를 스크립트로 실행하라고 알려줍니다. 완성된 문자열을 북마크바로 끌어다 놓거나 북마크에 붙여넣으면 됩니다.

북마클릿 설치 방법

데스크톱

Chrome, Edge, Firefox, Safari 등 데스크톱 브라우저에서 어두운 색 버튼을 북마크바로 끌어다 놓으세요. 드래그가 불편하다면 북마크 주소 복사를 누르고, 새 북마크를 만들어 주소 칸에 붙여넣으면 됩니다.

아이폰, 아이패드, 안드로이드

모바일 브라우저에는 끌어다 놓을 북마크바가 없으므로 편집 방식을 쓰세요.

1. 북마크 주소 복사를 누르세요.
2. 아무 페이지나 북마크하세요. 이 페이지도 괜찮습니다.
3. 북마크 목록을 열어 새 북마크를 편집하고, 주소를 복사한 javascript: 주소로 바꾸세요. 이때 이름도 바꿔 두세요.
4. 실행하려는 페이지로 이동하세요. 아이폰이나 아이패드의 Safari에서는 북마크 목록에서 그 북마크를 열면 됩니다. 안드로이드의 Chrome에서는 주소창에 북마클릿 이름을 입력하고 나타나는 북마크 추천을 누르세요. 북마크 화면에서 열면 페이지를 벗어나 실행할 대상이 없어집니다.

주소창에는 붙여넣지 마세요

지름길처럼 보이지만, Chrome은 주소창에 붙여넣은 글의 맨 앞 javascript:를 일부러 지웁니다. 악성 코드를 붙여넣게 속이는 사기를 막기 위해서입니다. 남은 부분은 검색어로 처리됩니다. 코드를 북마크로 저장하는 것이 확실한 방법입니다.

바로 붙여넣을 수 있는 북마클릿 예시

아래 예시는 모두 표준 브라우저 API만 사용합니다. 하나를 위의 코드 입력창에 붙여넣고 북마클릿 만들기를 누른 뒤 설치하세요.

현재 페이지를 마크다운 링크로 복사

링크가 선택된 입력창이 열리므로 바로 복사하면 됩니다.

prompt('마크다운 링크:', '[' + document.title + '](' + location.href + ')');

선택한 글의 단어 수 세기

먼저 글을 선택한 다음 북마클릿을 클릭하세요.

const words = String(getSelection()).trim().split(/\s+/).filter(Boolean).length;
alert('선택한 단어: ' + words + '개');

페이지를 편집 가능하게 만들기

다시 클릭하면 편집이 꺼집니다. 새로고침하면 원래대로 돌아옵니다.

document.designMode = document.designMode === 'on' ? 'off' : 'on';

웨이백 머신에서 현재 페이지 열기

지금 보고 있는 페이지의 보관본 목록을 보여줍니다.

location.href = 'https://web.archive.org/web/*/' + location.href;

자주 쓰는 북마클릿 활용

북마클릿이 작동하지 않는 이유

사이트의 보안 정책이 막는 경우

북마클릿이 대부분의 사이트에서는 작동하는데 한 사이트에서만 아무 일도 없다면, 그 사이트의 Content-Security-Policy를 확인하세요. CSP 명세는 페이지 정책이 북마클릿을 방해하지 않아야 한다고 하지만,script-src 규칙이 엄격한 페이지에서는 브라우저가 javascript: 주소를 막을 수 있습니다. 다른 도메인의 스크립트를 끼워 넣는 북마클릿은 이중으로 영향을 받습니다. 북마클릿이 실행되더라도 그 외부 스크립트를 불러올 수 있는지는 페이지의 정책이 정하기 때문입니다. 북마클릿 안에서는 이것을 덮어쓸 방법이 없습니다. 그런 사이트에서 스크립트가 필요하다면 브라우저 확장 프로그램이나 유저스크립트가 우회 방법입니다.

페이지가 글자만 있는 빈 페이지로 바뀐 경우

코드가 문자열 값으로 끝나서 브라우저가 그것을 새 페이지로 보여준 것입니다. 텍스트를 돌려주는 return을 지우세요. 북마클릿을 손으로 썼다면 여기서 다시 만들면 함수로 감싸지므로, 끝에 문자열 식이 있어도 더는 페이지를 바꾸지 않습니다.

아무 일도 일어나지 않고 오류도 보이지 않는 경우

브라우저의 개발자 콘솔을 열고 북마클릿을 다시 클릭해 보세요. 문법 오류, 없는 요소, 차단된 스크립트가 거기에 표시됩니다. 직접 만든 북마클릿에서 자주 있는 원인은 // 주석이 나머지 코드와 같은 줄에 남아 있는 것이며, 원래 소스에서 다시 만들면 해결됩니다.

기존 북마클릿 고치는 방법

북마크의 주소를 복사해서 맨 앞의 javascript:를 지우고, 나머지를URL 인코더·디코더(영문)로 디코딩하면 읽을 수 있는 코드가 돌아옵니다. 수정한 코드를 이 북마클릿 만들기에 붙여넣고, 예전 북마크의 주소를 새 주소로 바꾸세요. 원본 소스를 텍스트 파일로 보관해 두면 이 과정을 거치지 않아도 됩니다.

보안에 주의하세요

북마클릿은 페이지 자체의 스크립트와 같은 권한으로 실행되므로, 페이지가 노출하는 모든 것을 읽고 바꿀 수 있습니다. 설치하기 전에 코드를 확인하고, 외부 스크립트를 불러오는 코드는 피하세요. 다른 사람이 관리하는 주소는 설치한 뒤에 바뀔 수 있습니다. 출처를 알 수 없는 북마클릿은 민감한 정보가 있는 페이지에서 절대 실행하지 마세요. 웹사이트나 메시지, 영상이 코드를 북마크나 주소창에 붙여넣으라고 요구한다면 사기로 보세요.

북마클릿, 유저스크립트, 확장 프로그램 비교

셋은 비슷해 보이지만 필요한 것이 다릅니다. 북마클릿은 클릭할 때 한 페이지에서 한 번 실행되는 스크립트 하나로, 설치가 필요 없고 북마크와 함께 따라다닙니다. 유저스크립트(유저스크립트 관리자로 관리)는 맞는 사이트에 붙어 방문할 때마다 자동으로 실행될 수 있고, 페이지 사이에 자체 설정을 유지합니다.브라우저 확장 프로그램은 이 둘에 더해 백그라운드 작업, 네트워크 가로채기, 도구 모음 아이콘까지 할 수 있지만, 설치 과정과 브라우저가 미리 보여주는 넓은 권한을 감수해야 합니다. 확장 프로그램은 페이지 보안 정책에서도 다르게 다뤄집니다. CSP 명세는 Chrome이 페이지 정책과 상관없이 확장 프로그램이 주입하는 코드가 작동하도록 노력한다고 밝힙니다. 먼저 북마클릿으로 시작하고, 한계에 부딪힐 때만 바꾸세요.

한계: 북마클릿을 쓰지 말아야 할 때

북마클릿은 클릭할 때, 한 번에 한 페이지에서만 실행됩니다. 방문 사이에 상태를 유지하거나, 백그라운드에서 동작하거나, 모든 페이지를 자동으로 바꾸지는 못합니다. 길이는 거의 문제가 되지 않습니다(Chrome 문서상 URL 최대 길이는 2MB). 하지만 긴 스크립트는 읽을 수 없는 북마크 주소가 되고, 그 크기에서는 유저스크립트 관리자나 확장 프로그램이 관리하기 더 쉽습니다. 북마클릿이 바꾼 내용은 새로고침하면 사라지기도 합니다. 다음에도 남아 있는 하이라이트가 필요하다면웹사이트에서 텍스트를 하이라이트하고 저장하는 방법을 참고하세요. 그리고 하려는 일이 “코드 조각 실행”이 아니라 “클릭 한 번으로 이 페이지 저장”이라면, 코드를 직접 관리하지 않아도 되는 전용 브라우저 확장 프로그램이 더 알맞습니다.

개인정보: 코드가 어디로 가는가

어디로도 가지 않습니다. 이름, 코드 조각, 만들어진 주소는 페이지 밖으로 나가지 않으며, 북마클릿을 만드는 데는 네트워크 요청이 전혀 쓰이지 않습니다. 솔직히 짚어둘 점이 하나 있습니다. 완성된 북마클릿은 일반 북마크로 저장되므로, 기기 사이에 북마크를 동기화한다면 스크립트도 다른 북마크와 함께 이동하고, 동기화된 프로필을 읽을 수 있는 모든 것에서 보입니다.

관련 도구와 가이드

위의 마크다운 링크 북마클릿은 링크 하나씩만 복사합니다. 페이지 전체의 HTML을 마크다운으로 바꾸려면HTML to Markdown 변환기(영문)를 쓰세요. 복사한 링크에 추적 매개변수가 가득하다면 URL 정리기가 지워 줍니다. 스크립트를 쓰지 않고 페이지를 저장하고 활용하려면 Marqly의 웹 하이라이터,크롬 북마크 관리자, 세컨드 브레인활용법을 보시거나, 북마크 정리 가이드를 읽어 보세요.