IT일반
Bookmarklet을 만드는 방법: 간단한 웹 페이지 검색 업그레이드
요긴소프트
2024. 11. 21. 08:13
728x90
반응형
1. Bookmarklet이란?
- 정의: Bookmarklet은 JavaScript 코드를 포함한 URL이며, 사용자가 브라우저 북마크에 저장하여 쉽게 실행할 수 있는 작은 애플리케이션입니다.
- 사용 장점:
- 웹 페이지 기능을 확장하거나 자주 수행하는 작업을 단순화합니다.
- 인터넷 연결 없이도 브라우저에서 즉시 사용 가능합니다.
2. 간단한 Bookmarklet 예제 만들기: Google 검색 업그레이드
- 목표: 현재 웹 페이지의 제목을 Google에 자동으로 검색하는 Bookmarklet을 만들어보겠습니다.
2.1 HTML 구조 준비
먼저, 테스트할 간단한 HTML 파일을 준비합니다:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Bookmarklet 예제</title>
</head>
<body>
<h1>이 페이지의 제목을 검색하세요!</h1>
</body>
</html>2.2 Bookmarklet 코드 작성
Google 검색에 현재 페이지의 제목을 자동으로 입력하는 JavaScript 코드를 작성합니다:
javascript:(function(){
var title = document.title;
window.open('https://www.google.com/search?q=' + encodeURIComponent(title), '_blank');
})();- 코드 설명:
javascript:: 북마크에 저장할 URL의 프로토콜을 나타냅니다.(function(){ ... })();: 즉시 실행 함수 표현식 (IIFE)으로 코드를 감싸줍니다. 이는 변수 충돌 방지 및 모듈화를 위해 유용합니다.var title = document.title;: 현재 웹 페이지의 제목을 가져옵니다.window.open(..., '_blank');: 새 탭에서 Google 검색 페이지를 열고, URL에title값을 인코딩하여 포함시킵니다.
2.3 Bookmarklet 생성
- 위의 JavaScript 코드를 복사합니다.
- 브라우저의 북마크 툴바에 새 북마크를 만듭니다 (예: Chrome에서 오른쪽 클릭 > '북마크 추가').
- 북마크 이름을 원하는대로 지정하고, URL 필드에 위에서 복사한 JavaScript 코드를 붙여넣습니다.
- 저장합니다.
3. Bookmarklet 테스트
- 생성한 북마크를 브라우저 북마크 바에 추가합니다.
- 앞서 준비한 HTML 파일을 열거나, 다른 웹 페이지로 이동합니다.
- 북마크를 클릭하면 새 탭에서 현재 페이지의 제목으로 Google 검색이 자동으로 실행됩니다.
4. Bookmarklet 활용 가능한 시나리오들
- 웹 데이터 추출: 특정 요소의 텍스트를 복사하거나, URL을 변환하여 다른 사이트로 전달.
- 개발 도구: 콘솔 명령어 실행, 디버깅 정보 출력 등.
- 시간 절약: 반복적인 작업을 자동화하여 생산성을 높입니다.
5. 주의사항
- 보안 고려: 북마크let은 브라우저에서 직접 실행되므로 신뢰할 수 없는 소스로부터 다운로드하지 마세요.
- 호환성: 모든 브라우저와 웹 페이지에 대해 호환성을 확인하세요. 특히, 사용하는 특정 JavaScript 메서드나 API가 지원되지 않을 경우 문제가 발생할 수 있습니다.
6. 결론
Bookmarklet은 간단하지만 강력한 도구로, 웹 브라우징 경험을 개선하고 생산성을 향상시키는데 큰 도움이 될 수 있습니다. 자신만의 Bookmarklet을 만들어보거나, 인터넷에서 제공되는 다양한 북마크let을 활용하여 효율적인 작업 환경을 구축해 보세요.
참고 자료:
728x90
반응형