Obsidian Web Clipper Bookmarklet to save articles and pages from the web (for Safari, Chrome, Firefox, and mobile browsers) · GitHub
https://gist.github.com/kepano/90c05f162c37cf730abb8ff027987ca3
위 북마크릿 코드는 CORS 보안을 적용한 사이트에서는 외부 모듈을 import할 수 없어 실행 되지 않았습니다.
CORS (Cross-Origin Resource Sharing) / CSP (Content Security Policy) 문제는 보안상의 이유로 웹 브라우저에서 다른 도메인으로부터 리소스를 요청하는 것을 제한하는 정책입니다. 이러한 제한은 모듈 import를 사용하여 외부 스크립트를 가져올 때도 해당됩니다.
해결 방법을 찾다가 무식한 방법이지만 import할 모듈 소스 코드 전체를 북마크릿에 넣어 버렸습니다. 그런데 너무 소스 코드 크기(12만자 이상)가 커져서 북마크릿에 넣을 수 없었습니다. 그래서 코드 크기를 줄이기 위해 Minify JS is JavaScript Minifier online(https://codebeautify.org/minify-js)를 썼습니다. 그래도 4만자가 넘어가지만 북마크릿 바에 넣어집니다.
이제 CORS 보안을 적용한 사이트에도 잘 됩니다.
Chrome과 Firefox에서도 잘 됩니다.
아직은 긴 내용을 클리핑 할 수는 없습니다. URI를 이용하여 옵시디언에 데이터를 전달하기 때문입니다.
그렇지만 Local REST API 라는 옵시디언 플러그인을 쓰도록 하면 해결 됩니다. 다음에 글을 올려 보겠습니다.
이렇게 북마크릿을 쓸 바에야 Extension을 만드는 것이 나을 것 같습니다.
Browser Extensions - Mozilla | MDN
소스 코드를 읽기 쉽게 하고 처음 만들어진 구조의 변경을 최소화 하려고 했습니다. 그래서 함수 속으로 격리 시켰습니다.
Fix Obsidian Web Clipper Bookmarklet - CORS issue in a crazy way. 옵시디언 Web Clipper Bookmarklet 고침 - CORS 문제 해결. 무식한 방법.
https://gist.github.com/eoureo/208bf6f37ff4faa903d01f3605cda59f
