북마클릿

페이지의 단어 수를 세는 북마클릿 시연. 표시된 브라우저는 윈도우 10에서 실행되는 모질라 파이어폭스 65.0.2이다.

북마클릿(bookmarklet)은 웹 브라우저에 저장된 북마크로, 브라우저에 새로운 기능을 추가하는 자바스크립트 명령어를 포함한다. 이들은 웹 브라우저의 북마크 URL 또는 웹 페이지의 하이퍼링크로 저장된다. 북마클릿은 일반적으로 사용자가 클릭하면 실행되는 작은 자바스크립트 스니펫이다. 클릭하면 북마클릿은 선택된 텍스트에서 검색 쿼리를 실행하거나 테이블에서 데이터를 추출하는 등 다양한 작업을 수행할 수 있다.

북마클릿의 또 다른 이름은 즐겨찾기(북마크의 동의어)에서 파생된 페이블릿 또는 파블릿이다.

역사

bookmarklets.com의 스티브 캉가스는 넷스케이프의 자바스크립트 가이드의 제안을 바탕으로 짧은 스크립트를 만들기 시작하면서 북마클릿이라는 단어를 만들었다. 그 이전에 탄텍 첼릭은 이 스크립트들을 페이블릿이라고 불렀고 2001년 9월 6일(개인 이메일)에 이 단어를 사용했다. 넷스케이프에서 자바스크립트를 개발한 브렌던 아이크는 북마클릿의 기원에 대해 다음과 같이 설명했다.

이러한 의미에서 이것들은 의도적인 기능이었다. 나는 1995년에 자바스크립트와 함께 javascript: URL을 발명했으며, javascript: URL이 북마크 가능함을 포함하여 다른 종류의 URL처럼 사용될 수 있도록 의도했다. 특히, javascript:'hello, world'와 같이 로드하여 새 문서를 생성할 수 있도록 만들었지만, (북마클릿의 핵심) 현재 문서의 DOM에 대해 임의의 스크립트를 실행할 수 있도록 했다. 예를 들어, javascript:alert(document.links[0].href)와 같이 말이다. 차이점은 후자의 URL 유형이 JS에서 정의되지 않은 유형으로 평가되는 표현식을 사용한다는 것이다. 나는 넷스케이프 2가 출시되기 전에 JS에 void 연산자를 추가하여 javascript: URL에서 정의되지 않은 값 이외의 값을 쉽게 버릴 수 있도록 했다.

— 브렌던 아이크, 사이먼 윌리슨에게 보낸 이메일에서

웹사이트에서 콘텐츠 보안 정책 (CSP)의 구현이 증가하면서 북마클릿 실행 및 사용에 문제가 발생했다(2013–2015). 일부는 이것이 북마클릿의 종말을 예고한다고 주장했다. 윌리엄 도넬리(William Donnelly)는 2015년 초에 그리스몽키 사용자 스크립트 (모질라 파이어폭스 / 페일 문 브라우저 애드온 확장)와 간단한 북마클릿-사용자 스크립트 통신 프로토콜을 사용하여 이 문제(특히 자바스크립트 라이브러리 코드 로드, 참조 및 사용의 특정 경우)에 대한 해결책을 만들었다. 이를 통해 (라이브러리 기반) 북마클릿은 CSP를 사용하고 https:// URI 스키마를 가진 모든 웹사이트에서 실행될 수 있다. 그러나 브라우저가 CSP를 사용하여 인라인 스크립트 실행을 비활성화/허용하지 않는 것을 지원하고, 웹사이트가 해당 기능을 구현하기 시작하면 이 "수정"이 "깨질" 것이다.

개념

웹 브라우저는 <a> 태그의 href 속성과 북마크에 URI를 사용한다. http 또는 ftp와 같은 URI 스키마는 일반적으로 프로토콜을 지정하며, 나머지 문자열의 형식을 결정한다. 브라우저는 또한 파서에게 다른 URI와 동일하게 처리되는 javascript: URI를 구현한다. 브라우저는 지정된 javascript 스키마를 인식하고 나머지 문자열을 자바스크립트 프로그램으로 처리하여 실행한다. 표현식 결과가 있다면, 원래 페이지 대신 표시되는 새 페이지의 HTML 소스 코드로 처리된다.

실행 스크립트는 현재 페이지에 접근하여 검사하고 변경할 수 있다. 스크립트가 정의되지 않은 유형(예를 들어, 문자열이 아닌)을 반환하면 브라우저는 새 페이지를 로드하지 않으며, 그 결과 스크립트는 현재 페이지 내용에 대해 간단히 실행된다. 이를 통해 페이지 다시 로드 없이 글꼴 크기 및 색상 변경과 같은 변경이 가능하다.

값을 반환하지 않는 즉시 실행 함수 또는 void 연산자가 앞에 오는 표현식은 브라우저가 평가 결과를 HTML 마크업 스니펫으로 구문 분석하려고 시도하는 것을 방지한다.

javascript:(function(){
  //Statements returning a non-undefined type, e.g. assignments
})();

사용법

북마클릿은 일반 북마크처럼 저장되고 사용된다. 따라서 브라우저에 기능을 추가하는 간단한 "원클릭" 도구이다. 예를 들어 다음과 같은 작업을 수행할 수 있다.

• 브라우저 내에서 웹 페이지의 모양 변경 (예: 글꼴 크기, 배경색 등 변경)
• 웹 페이지에서 데이터 추출 (예: 하이퍼링크, 영상, 텍스트 등)
• (예: 구글) 검색 결과에서 리다이렉션을 제거하여 실제 대상 URL 표시
• 현재 페이지를 포스터러스와 같은 블로그 서비스, bit.ly와 같은 링크 단축 서비스, 또는 딜리셔스와 같은 북마크 서비스에 제출
• 강조 표시된 텍스트 또는 대화 상자를 통해 검색 엔진 또는 온라인 백과사전에 쿼리
• 현재 페이지를 링크 유효성 검사 서비스 또는 번역 서비스에 제출
• 페이지 자체에서 이 작업을 수행할 방법이 없을 때 일반적으로 선택되는 구성 옵션 설정
• HTML5 오디오 및 비디오 재생 매개변수 제어(예: 속도, 위치, 반복 전환, 재생 컨트롤 표시/숨기기) (이 중 첫 번째는 HTML5 플레이어의 일반적인 범위 설정을 넘어 조정 가능)

북마클릿 설치는 일반 북마크를 추가하는 것과 동일한 과정을 따른다. 유일한 차이점은 URL 대상 필드에 javascript:가 앞에 오는 자바스크립트 코드가 들어간다는 것이다. 일단 생성된 북마클릿은 클릭하여 실행할 수 있다.

외부 링크

• Calishain, Tara (2004년 2월 3일). “Bookmarklets Boost Web Surfing”. PC Magazine. 2007년 8월 31일에 확인함.