간단한 책갈피를 만들었어요.

개시하다

책갈피를 만들면 브라우저 책갈피에서 간단한 JavaScript 코드를 실행할 수 있습니다.
이번에는 다음 Zenn의 기사를 검색할 수 있는 책갈피를 만들어 보자.

책갈피

브라우저의 주소 표시줄에는 일반적으로 URL이 표시됩니다.

JavaScript를 실행할 수 있는 코드javascript:를 주소 표시줄에 입력합니다.
책갈피란 javascript:에서 시작된 코드 자체를 책갈피로 등록하여 코드를 간단하게 집행할 수 있는 것을 말한다.
간단한 예로 브라우저의 주소 표시줄에 다음 내용을 입력하십시오.
※ 주소 표시줄에 복사할 때는 javascript: 부분을 붙이지 않도록 주의하세요.

javascript: alert('hello world');

입력한 후 입력을 누르면 코드를 실행하고 경보에 hello world가 표시됩니다.

마지막으로 입력한 javascript: alert('hello world');를 책갈피에 등록하면 책갈피가 완성됩니다.
여기서부터 책갈피 몇 개를 만들기 시작한다.

절차.

검색 화면의 URL을 보세요

아무 글자나 입력해 봐

window.open

window.prompt

getSelection

책갈피에 추가

완성품 일람

검색어를 입력하고 Zenn으로 검색

선택한 문자열을 Zenn으로 검색

Google 번역으로 선택한 문자열 열기 (일본어 -> 영어)

선택한 문자열을 Google 번역으로 열기 (영어 -> 일본어)

검색 화면의 URL 보기

はじめに에서는 "Zenn 기사를 검색할 수 있는 책갈피"를 만드는 단계를 예로 들 수 있습니다.
먼저 마이그레이션검색 페이지합니다.
URL

https://zenn.dev/search

여기에'fronted'라는 단어로 검색해 보면 주소 표시줄에 다음과 같은 내용이 표시됩니다.
URL

https://zenn.dev/search?q=frontend

입력한 검색어가 조회q={検索ワード}를 통해 URL로 전달되는 것을 알 수 있습니다.https://zenn.dev/search?q={検索ワード}의検索ワード 중 임의의 단어로 전달되면 젠의 글을 검색할 수 있다는 것이다.

임의의 글자를 입력하고 다른 탭에서 열기

window.open

먼저 지정된 URL을 JavaScript로 엽니다.
를 사용하여 URL을 다른 태그에서 엽니다.

javascript: window.open('https://zenn.dev/search?q={検索ワード}');

window.prompt

URL의 {検索ワード} 섹션에 임의의 검색 문자를 전달합니다.
방법은 여러 가지가 있는 것 같은데 이번에 사용window.open.window.prompt(); 이후에는 텍스트 입력 필드가 있는 대화 상자가 표시됩니다.
텍스트 입력 필드에 입력한 값은 그대로 되돌아오기 때문에 window.prompt() 부분을 삽입{検索ワード} 합니다.

javascript: window.open('https://zenn.dev/search?q='+window.prompt());

대화상자가 좀 지루합니다. 디스플레이 텍스트를 추가하겠습니다.

javascript: window.open('https://zenn.dev/search?q='+window.prompt('zennで検索します','検索ワード'));

이렇게 코드 자체가 완성되었다.

getSelection

이외의 말은 문자열을 얻는 방법으로window.prompt가 있다.
Zenn에서 선택한 문자열을 찾을 수 있습니다.

javascript: window.open('https://zenn.dev/search?q='+getSelection().toString());

책갈피에 추가

만든 코드가 주소 표시줄에서 실행되면 책갈피를 등록합니다.
오른쪽 위 모서리에 있는 세 개의 점 리더 중에서 ブックマーク->ブックマーク マネージャ를 선택합니다.

책갈피 관리자의 오른쪽 상단에 있는 세 개의 리더 중에서 선택하십시오 新しいブックマークを追加.

이름에 임의의 이름을 붙이면 URLjavascript:에서 시작하는 코드가 완성된다.

이렇게 하면 책갈피에서 실행할 수 있다.

완성품 일람

검색어를 입력하고 Zenn에서 검색

javascript: window.open('https://zenn.dev/search?q='+window.prompt('zennで検索します','検索ワード'));

Zenn에서 선택한 문자열 찾기

javascript: window.open('https://zenn.dev/search?q='+getSelection().toString());

Google 번역을 통해 선택한 문자열 열기 (일본어 - > 영어)

javascript: window.open('https://translate.google.co.jp/?hl=ja&sl=ja&tl=en&text=' getSelection().toString() '&op=translate');

Google 번역을 통해 선택한 문자열 열기 (영어 - > 일본어)

javascript: window.open('https://translate.google.co.jp/?hl=ja&sl=en&tl=ja&text=' getSelection().toString() '&op=translate');

끝말

책갈피 책갈피는 JavaScript의 코드를 간단하게 실행할 수 있습니다.
책갈피는 책갈피의 장점으로 책갈피를 공유하기만 하면 다른 사람도 같은 코드를 실행할 수 있다.예를 들어 로그인 처리를 하는 책갈피를 만들면 한 번에 로그인을 클릭할 수도 있고 사건 내에서 로그인 처리를 공유할 수도 있다.
윈도 인터페이스의 조합과 인코딩에 따라 더욱 편리한 책갈피를 만들 수 있다.

참고 문장

getSelection