Coding/Bookmarklet

ChatGPT로 만든 Bookmarklet - "[T](U)" (마크다운 형식, [페이지 제목](페이지 주소))으로 클립보드에 넣기

eoureo 2023. 3. 13. 21:52

알림: 2023. 3. 15. 09:10


이 글에 있는 코드는 HTTP 프로토콜을 쓰는 사이트에서는 안됩니다.
그래서 새로 고쳐 아래 글에 올렸습니다.

 

새로 고친 페이지:
ChatGPT로 만든 Bookmarklet - "[T](U)" (마크다운 형식, [페이지 제목](페이지 주소))으로 클립보드에 넣기 (수정-http사용)

https://eoureo.tistory.com/entry/ChatGPT로-만든-Bookmarklet-TU-마크다운-형식으로-클립보드에-넣기-수정-http사용

 

 

옵시디언 같은 마크다운을 사용하는 곳에서 쓰기 위해 만들었습니다.

 

대화창이 뜨는 코드대화창 없이 클립보드에 바로 저장하는 코드 두 가지를 만들도록 했습니다.

제대로 작동합니다.

 

옵시디언에 붙여넣기한 모습

 

첫번째 코드는 Ctrl + C를 또 입력해야 하는 번거로움이 있습니다.

 

ChatGPT는
제가 오래전 직접 만들어 사용하던 코드보다 훨씬 깔끔하게 만들었군요.

사용 방법

  1. 소스 코드만 웹 브라우저의 북마크 바붙여넣기하여 새 북마크를 만든 다음
    그 이름만 바라는 데로 바꾸어 준다. ( [T](U), 또는 [Title](URL) )
  2. 북마크에서 클릭하여
    지금 페이지에서 [페이지 제목](페이지 주소) 마크다운 형식으로 클립보드에 넣어 준다.
  3. 마크다운 페이지에 붙여넣기하면 된다.

 

ChatGPT와 대화

👨

페이지 제목과 URL을 마크다운 형식으로 클립보드로 저장하는 웹 브라우저에서 쓸 수 있는 Bookmarklet을 만들어줘.

아래의 자바스크립트 코드를 Bookmarklet으로 저장하시면 됩니다.

 

javascript:(function() {
  var title = document.title;
  var url = window.location.href;
  var markdown = `[${title}](${url})`;
  prompt("Copy to clipboard: Ctrl+C, Enter", markdown);
})()

 

웹 브라우저에서 북마크바에 저장한 후, 클릭하시면 페이지의 제목과 URL이 마크다운 형식으로 클립보드에 저장됩니다.

👨

대화창을 띄우지 않고 바로 클립보드로 저장하게 해 줘.

아래의 코드를 Bookmarklet으로 저장하시면 됩니다:

 

javascript:(function() {
  var title = document.title;
  var url = window.location.href;
  var markdown = `[${title}](${url})`;
  navigator.clipboard.writeText(markdown).then(function() {
    console.log("Copied to clipboard: " + markdown);
  }, function(err) {
    console.error("Failed to copy text: ", err);
  });
})()

 

웹 브라우저에서 북마크바에 저장한 후, 클릭하시면 페이지의 제목과 URL이 마크다운 형식으로 클립보드에 저장됩니다.

 

👨

Chrome과 FireFox, Edge, Opera에서도 되나?

위의 코드는 모던 브라우저에서 navigator.clipboard.writeText() API를 지원하는 경우에만 동작합니다. 즉, 크롬, 파이어폭스, 엣지, 오페라 등의 최신 버전에서는 작동할 수 있습니다. 구버전 브라우저에서는 동작하지 않을 수 있으니, 사용하시는 브라우저의 최신 버전을 확인하시고 검증해 보시기 바랍니다.