JavaScript로 텍스트 검색 북마크릿을 만드는 방법

북마크릿 아르 자바 스크립트 애플리케이션 로 액세스 할 수있는 브라우저 북마크. 사용자가 다른 행동을 취하다. 웹 페이지에서. 예를 들어, FontShop의이 북마크릿은 모든 웹 페이지에서 FontShop 웹 글꼴을 미리보기위한 것입니다..

이 기사에서 우리는 그것이 얼마나 빠르고 쉬운지를 살펴볼 것입니다. 북마크 렛 만들기 그 중 하나를 만들어서 Wikiwand를 수행하다 (더 잘 보이는 위키피디아) 수색 임의의 웹 페이지에서 선택된 텍스트.

북마크릿 작동 방식

북마크릿의 URI ~을 사용하다 자바 스크립트 : 실험 계획안 그게 자바 스크립트 코드로 구성. 북마크릿을 클릭하면 JavaScript 실행 웹 페이지에서 페이지의 모양을 변경하거나, 다른 페이지로 리디렉션하거나, 새 정보를 표시하는 등의 작업을 수행 할 수 있습니다.

북마크는 본질적으로 자바 스크립트 코드 세트, 개인적인 사용이나 WordPress와 같은 사용자에게 제공하기 위해 JavaScript 지식이 거의 없어도 쉽게 만들 수 있습니다.이 북마크릿.

자바 스크립트 코드 시작하기

그만큼 URL 구조 영어 기사에 Wikiwand 사용 https://www.wikiwand.com/en/articleTitle. 우리는 URL을 가진 Wikiwand 페이지로 점프하는 스크립트를 작성해야합니다. 사용자가 방금 선택한 문자열로 끝납니다. - 선택한 텍스트는 ~의 자리에 앉다 articleTitle.

첫째, 우리는 텍스트를 잡아라. 사용자가 페이지에서 다음 코드를 선택했습니다.

 getSelection (). toString () 

우리는 캐스트 반환 된 객체 getSelection () 끈으로 ~을 사용하여 toString () 방법, 그것을 만들기 위해 선택된 텍스트를 출력한다..

다음으로, 우리는 방문을 수행하다 Wikiwand 기사 페이지. 우리는 다음 논리를 사용하여이를 달성 할 것입니다. newURL ~ 될 것이다. Wikiwand 기사 페이지의 URL (끝에 선택한 문자열이 포함됩니다) :

 location.href = newURL 

이 두 개의 코드 스 니펫을 함께 사용하면 다음 스크립트로 끝납니다.

 location.href = 'https://www.wikiwand.com/en/'+getSelection () .toString () 

이제 우리는 자바 스크립트 : 프로토콜을 앞에두고, 우리는 최종 코드 우리는 북마크릿에서 사용할 것입니다 :

 // 줄 바꿈없이 한 줄에 추가 javascript : location.href = 'https://www.wikiwand.com/en/'+ getSelection (). toString (). replace (/ \ n / g, '% 20' ) 

선택 사항 바꾸기 (/ \ n / g, '% 20') 끝에 새 줄 문자를 바꿉니다. (\엔)의 텍스트 하나의 공백 문자로 (% 20).

자바 스크립트 코드가 준비되었습니다. 코드를 배치해야합니다. 줄 바꿈이없는 한 줄에, 나중에 있기 때문에 텍스트 입력 필드에 추가.

북마크 만들기

브라우저의 북마크 창을 열고 새 북마크 추가:

• Firefox : ctrl + shift + B / cmd + shift + B를 누르고 "Bookmarks Toolbar"를 마우스 오른쪽 버튼으로 클릭 한 다음 "New Bookmark"를 선택하십시오..
• 크롬: ctrl + shift + O / cmd + alt + B를 누르고 "북마크 바"를 마우스 오른쪽 버튼으로 클릭 한 다음 "페이지 추가 ..."를 선택하십시오..

URL 필드 자바 스크립트 코드를 복사하여 붙여 넣기하십시오. 전에부터. 북마크가 생성되면 사용할 준비가되었습니다. 어떤 웹 페이지로 이동, 단어를 선택하십시오. Wikiwand에서 검색하고 싶습니다. 북마크를 클릭하십시오. - Wikiwand 기사 페이지가 즉시 열립니다..

빠른 접근

북마크릿이 필요할 때마다 북마크 메뉴에 도달하는 대신 직접 표시 빠른 액세스를 위해 브라우저에서.

• Firefox : 상단 메뉴 표시 줄에서 "보기> 도구 모음"을 클릭하고 "책갈피 도구 모음"을 선택하십시오..
• 크롬: Ctrl + Shift + B / cmd + Shift + B를 누릅니다..

북마크릿 링크 만들기

웹 사이트에 북마크릿을 추가 할 수 있습니다. 하이퍼 링크로 뿐만 아니라, 어떤 방문자 북마크 할 수 있음 북마크 툴바에 링크를 드래그 앤 드롭하거나 링크를 마우스 오른쪽 버튼으로 클릭하고 북마크 옵션을 선택하면됩니다..

북마크를 하이퍼 링크로 바꾸려면 북마크 스크립트가있는 HTML 태그 그것의 가치로서 href 속성:

   Wikiwand 검색 북마크릿  

북마클릿을 별도로 저장하는 방법

당신은 또한 수 별도의 자바 스크립트 파일 사용 간단한 스크립트가있는 경우에는이 튜토리얼에서 방금 본 것처럼 북마크릿 코드를 저장하는 것이 좋지만 JavaScript 코드가 너무 길어서 북마크 바에 붙여 넣기가 너무 어려울 때 유용 할 수 있습니다 브라우저의.

파일 myscript.js 의지 기본 자바 스크립트 코드 저장 북마크 렛에 대해 다음 코드를 추가해야합니다. 북마크 URL로 (브라우저의 북마크 바 또는 href HTML 파일의 속성) :

 // 줄 바꿈없이 한 줄에 추가 javascript : (() => with (document) s = createElement ( 'script'); s.src = 'myscript.js'; head.appendChild (s) ) (); 

위의 코드 스 니펫은 다음과 같습니다. 자기 호출 화살표 함수에 싸여있다., 와 같은 ECMAScript 6의 기능을 사용합니다. 방해 키워드를 사용하여 코드 길이를 줄입니다. 그것은 > 태그를 가리키는 myscript.js ~에 파일 보내기 문서의 섹션 사용자가 북마클릿을 클릭하면 (당신은 절대 경로를 사용해야 할 수도 있습니다. myscript.js 파일).