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

웹 브라우저에서 보고 있는 페이지의 제목과 주소를 "복사"하여
옵시디언 같은 마크다운을 사용하는 곳에서 "붙여넣기" 하는 일이 많습니다.

다음은 이 글의 제목과 주소로 링크를 만들어 옵시디언에 "붙여넣기"한 모습입니다.

옵시디언 reading view와 editing view에서 링크 모습

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

 

옵시디언 source mode에서 링크 모습

[ChatGPT로 만든 Bookmarklet - "[T](U)" (마크다운 형식, [페이지 제목](페이지 주소))으로 클립보드에 넣기](https://eoureo.tistory.com/entry/ChatGPT%EB%A1%9C-%EB%A7%8C%EB%93%A0-Bookmarklet-TU-%EB%A7%88%ED%81%AC%EB%8B%A4%EC%9A%B4-%ED%98%95%EC%8B%9D%EC%9C%BC%EB%A1%9C-%ED%81%B4%EB%A6%BD%EB%B3%B4%EB%93%9C%EC%97%90-%EB%84%A3%EA%B8%B0)

위와 같이 제목과 주소를 한꺼번에 클립보드에  "복사하기"를 간단히 하기 위해 예전에 ChatGPT를 이용하여 Bookmarklet을 만들어 보았습니다.

이전 글:
ChatGPT로 만든 Bookmarklet - "[T](U)" (마크다운 형식, [페이지 제목](페이지 주소))으로 클립보드에 넣기
https://eoureo.tistory.com/entry/ChatGPT로-만든-Bookmarklet-TU-마크다운-형식으로-클립보드에-넣기

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

 

그런데 그 코드가 HTTP 프로토콜을 쓰는 웹 페이지에서는 실행이 되지 않았습니다.
그래서 다시 ChatGPT를 써서 HTTP 프로토콜을 쓰는 웹 페이지에서도 되도록 고쳐 봤습니다.
고치는 과정은 이 글 맨 아래 ChatGPT와 대화에서 볼 수 있습니다.

Bookmarklet 만들기

• 방법 1: 아래 "[T](U)" 링크를 마우스로 끌어서 웹 브라우저의 "북마크 바"에 넣어 준다.
  
  
  
• 방법 2: 아래 소스 코드만 선택한 다음 "복사하기"하여 웹 브라우저의 "북마크 바"에 "붙여넣기" 한다.
  그것의 이름을 바꾸어 준다.( 저는 [T](U) 로 바꾸어 씁니다.)
  
  

사용 방법

1. "북마크 바"에서 위에서 만든 Bookmarklet을 "클릭" 한다.
   (그러면 [페이지 제목](페이지 주소)와 같은 마크다운 형식으로 된 글을 클립보드에 넣게 됩니다.)
2. 이제 클립보드에 넣어진 것을 "붙여넣기"만 하면 된다.

 

 

ChatGPT와 대화

👨

navigator.clipboard.writeText 를 쓰도록 한 이전 bookmarklet은 프로토콜이 https에서는 되는데 http에서는 안된다.

네, 맞습니다. navigator.clipboard API는 HTTPS 환경에서만 동작하며, HTTP 환경에서는 보안상의 이유로 사용이 금지되어 있습니다. 이 문제를 해결하기 위해서는 다른 방법을 사용해야 합니다.

 

대안으로는, execCommand() 메소드를 사용하는 방법이 있습니다. 이 메소드는 HTTPS 및 HTTP 환경 모두에서 작동합니다. 아래와 같이 수정하시면 됩니다:

 

javascript:(function() {
  var markdown = "[" + document.title + "](" + window.location.href + ")";
  var fakeElem = document.createElement('textarea');
  fakeElem.value = markdown;
  fakeElem.setAttribute('readonly', '');
  fakeElem.style.position = 'absolute';
  fakeElem.style.left = '-9999px';
  document.body.appendChild(fakeElem);
  fakeElem.select();
  document.execCommand('copy');
  document.body.removeChild(fakeElem);
})();

 

이 코드는 클립보드에 텍스트를 복사할 때 사용하는 흔한 트릭 중 하나입니다. 일시적으로 <textarea> 엘리먼트를 생성하고, 거기에 클립보드에 저장하고자 하는 내용을 할당한 후, 해당 <textarea> 엘리먼트를 선택하고 execCommand('copy') 메소드를 호출합니다.

 

이 방법은 클립보드에 내용을 저장하기 위해 별도의 권한이 필요하지 않으며, 모든 브라우저에서 작동합니다.