Obsidian: 나만의 Web Clipper 만들기
이 기사에서는 나만의 Obsidian 웹 클리퍼를 만드는 방법을 공유합니다. 선택한 웹 콘텐츠를 Obsidian 금고로 보낼 수 있습니다. 클리퍼는 일반적이고 모든 페이지에서 작동하거나(예: 선택한 텍스트를 Obsidian으로 보내기) 특수화되어 특정 페이지에서 특정 텍스트를 가져올 수 있습니다(예: IMDb의 배우 이름).
이 글은 누구나 길을 잃지 않고 따라갈 수 있도록 작성되었습니다. 이를 위해 스크린샷과 자세하지만 따르기 쉬운 지침이 있습니다.
이 지식으로 무장하면 인터넷에서 콘텐츠를 캡처하여 원하는 레이아웃으로 볼트로 보낼 수 있습니다!
살짝 엿보기
아래는 기사 후반부에서 만들 내용을 보여주는 GIF입니다.
어떻게 작동합니까?
이 기술은 Obsidian URI 프로토콜 과 UserScripts 의 조합입니다 .
흑요석 URI 프로토콜
Obsidian URI 프로토콜은 웹사이트 주소와 비슷해 보이지만 Obsidian과 함께 작동하도록 브라우저에 지시합니다. 예를 들어 아래 URI는 Obsidian을 엽니다…
obsidian://open
프로토콜은 다음 용도로 사용할 수 있습니다.
- 금고를 열거나
- 볼트 검색을 수행하거나
- 메모에 콘텐츠를 생성, 덮어쓰기 또는 추가합니다.
UserScript를 사용하면 방문하는 페이지를 변경할 수 있습니다. 이러한 변경 사항은 본인에게만 표시됩니다. JavaScript를 추가하여 동작을 변경하거나 CSS를 추가하여 스타일을 변경하거나 HTML을 추가하여 콘텐츠를 변경할 수 있습니다.
대부분의 인기 있는 웹사이트에는 방문자의 경험을 개선하기 위한 사용자 정의 UserScript가 있습니다. 예를 들어 YouTube 광고에서 '건너뛰기'를 즉시 클릭하는 UserScript가 있습니다.
경고 !
UserScript는 사람들이 작성합니다. 어떤 사람들은 사악하고 나쁜 일을 하는 코드를 작성합니다. UserScript를 실행하기 전에 그것이 무엇을 하는지 이해했는지 확인하십시오! 그렇지 않으면 악한 사람이 당신에게 나쁜 짓을 할 수 있습니다.
다음은 UserScript를 찾을 수 있는 몇 가지 웹사이트입니다.
- https://userscripts-mirror.org/
- https://greasyfork.org/
JQuery는 또한 웹 페이지의 구성 요소를 매우 쉽게 식별, 추출 및 수정하기 때문에 활용됩니다. 우리를 도울 JavaScript 라이브러리입니다.
클리퍼 만들기
이제 기본적인 이해를 마쳤으니 시작할 수 있습니다. 우리는…
- UserScript를 관리할 수 있는 확장 프로그램을 설치합니다.
- 간단한 예제를 실행하여 작동하는지 테스트합니다.
- 선택한 텍스트를 Obsidian으로 보내는 일반 클리퍼를 빌드합니다.
- 페이지에서 주요 세부 정보를 추출할 수 있는 사이트별 클리퍼를 만듭니다.
- 클리퍼를 활성화하는 다양한 방법을 살펴보십시오.
- 마지막으로 몇 가지 함정을 극복하는 방법을 탐색합니다.
브라우저에 UserScript 확장 설치
맨 처음 단계는 브라우저에 UserScripts를 관리할 수 있는 확장 프로그램을 설치하는 것입니다. 저는 Tampermonkey로 UserScript를 관리 합니다 . Chrome, Firefox 및 Edge에서 작동하는 무료 확장 프로그램입니다. 이것은 훌륭한 도구이기 때문에 그것을 만든 개발자를 지원하는 것이 좋습니다! (Jan Biniok에게 감사드립니다). 다른 브라우저를 사용하는 경우 이 웹 사이트 에는 사용할 수 있는 다른 확장 프로그램이 나열되어 있습니다.
다음은 Tampermonkey용 Chrome 확장 프로그램에 대한 직접 링크 입니다. 아래 단계는 설치 방법을 보여줍니다.
작동 테스트
Obsidian.md를 방문할 때 실행할 UserScript를 생성하여 TamperMonkey가 작동하는지 테스트해 봅시다. 에 머리https://www.obsidian.mdTampermonkey 대시보드를 엽니다.
다음으로 새 스크립트를 만들고 아래 코드를 붙여넣습니다.
// ==UserScript==
// @name Say Hello when at Obsidian.md
// @namespace http://tampermonkey.net/
// @version 0.1
// @description Test Tampermonkey works
// @author You
// @match https://www.obsidian.md/
// @icon https://www.google.com/s2/favicons?sz=64&domain=obsidian.md
// @grant none
// ==/UserScript==
(function() {
'use strict';
alert("Hello from Tampermonkey!")
})();
사용해 보고 다시 방문https://www.obsidian.md. 팝업이 표시됩니다.
알림이 표시되면 Tampermonkey가 작동 중인 것입니다. 작동하지 않으면 스크립트를 다시 만들어 보십시오. 어딘가에 오타가 있을 수 있습니다.
위 이미지에서 한 가지 주의할 점은 흰색 텍스트가 있는 빨간색 사각형입니다. 이것은 얼마나 많은 스크립트가 실행되었는지를 나타냅니다. 걱정할 것이 없습니다.
일반 클리퍼: 선택한 텍스트를 금고로 보내기
아래의 클리퍼 스크립트는 (거의) 모든 웹사이트에서 선택한 텍스트를 전송하고 저장소에 새 파일로 저장합니다. (반드시 my_vault볼트 이름으로 변경하세요!) 파일이 이미 존재하는 경우 내용이 끝에 추가됩니다.
스크립트는 CMD + IMac, CTRL + ILinux 또는 Windows에서 누를 때 활성화됩니다. 파일 이름은 웹사이트 도메인과 페이지 제목의 조합입니다(예: "medium.com - Digital Felinology: A Beginner's Guide"). 일부 문자는 파일 이름에 포함될 수 없으므로 제거됩니다.
// ==UserScript==
// @name Send selected text to Obsidian
// @match *://*/*
// @author Gareth Stretton
// ==/UserScript==
function shortcutPressed(e) {
let operatingSystem = navigator.userAgent.search("MacOS") !== -1 ? "mac" : "pc"
let activationKey = 'KeyI'
if (operatingSystem === "mac") {
// CMD + KEY
return e.code === activationKey && e.metaKey && !e.altKey && !e.shiftKey && !e.ctrlKey;
} else {
// CTRL + KEY
return e.code === activationKey && e.ctrlKey && !e.altKey && !e.shiftKey && !e.metaKey;
}
}
function createFilename() {
let domainName = location.href.split("://")[1].split("/")[0]
let pageTitle = document.title
let filename = domainName + " - " + pageTitle
let cleanName = filename.replace(/[\(\)\[\]\\/?%*:'|"<>!]/g, '-');
return cleanName
}
document.addEventListener('keydown', e => {
if (shortcutPressed(e)) {
let vault = "my_vault"
let filename = createFilename()
let encodedNewLine = "%0A"
let selectedText = encodedNewLine + document.getSelection().toString()
let uri = `obsidian://new?vault=${vault}&name=${filename}&content=${selectedText}&append=true`
location.href = uri
}
})
다음 섹션에서는 특정 페이지에서 특정 텍스트를 가져와 새 파일에 저장하는 사용자 지정 클리퍼를 만듭니다. 추출할 텍스트를 더 쉽게 찾을 수 있도록 JQuery를 사용합니다. 더 넓은 Obsidian URI 프로토콜로 작업하기 위한 재사용 가능한 코드도 포함할 것입니다.
특정 클리퍼: 특정 사이트에서 주요 정보 캡처
아래 코드는 페이지에 Obsidian 로고를 추가합니다. 이 로고를 클릭하면 제목, 연도, 지침, 기간 및 설명이 저장소의 "동영상" 폴더 아래에 있는 새 메모에 저장됩니다.
// ==UserScript==
// @name Save IMDb to Obsidian
// @match https://www.imdb.com/title/*
// @require http://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.js
// @run-at document-idle
// @author Gareth Stretton
// ==/UserScript==
// --- Re-usable Obsidian Functions - START ---
function visitObsidianURI(action, options) {
let uri = createObsidianURI(action, options)
location.href = uri.toString()
}
function createObsidianURI(action, options) {
let uri = `obsidian://${action}`
let firstProperty = true
for (const property in options) {
if (typeof options[property] === "undefined") {
continue
}
let delimiter = (firstProperty ? "?" : "&")
firstProperty = false
let propertyValue = encodeURIComponent(options[property])
uri += `${delimiter}${property}=${propertyValue}`
}
return uri;
}
let obsidianOpen = (options) => visitObsidianURI("open", options)
let openVault = (vault) => obsidianOpen({vault})
let openFile = (vault, file) => obsidianOpen({vault, file})
let openPath = (path) => obsidianOpen({path})
let obsidianSearch = (options) => visitObsidianURI("search", options)
let search = (vault, query) => obsidianSearch({vault, query})
let obsidianNew = (options) => visitObsidianURI("new", options)
let createNote = (vault, name, content, silent = true) => obsidianNew({vault, name, content, silent: (silent ? silent : undefined)})
let overwriteNote = (vault, name, content, silent = true) => obsidianNew({vault, name, content, overwrite: true, silent: (silent ? silent : undefined)})
let appendNote = (vault, name, content, silent = true, onNewLine = true) => {
content = onNewLine ? "\n" + content : content
obsidianNew({vault, name, content, append: true, silent: (silent ? silent : undefined)})
}
function createFilename() {
let domainName = location.href.split("://")[1].split("/")[0]
let pageTitle = document.title
let filename = domainName + " - " + pageTitle
let cleanName = filename.replace(/[\(\)\[\]\\/?%*:'|"<>!]/g, '-');
return cleanName
}
// --- Re-usable Obsidian Functions - END ---
// --- IMDb Specific Code - Start ---
(function() {
'use strict';
const vault = "my_vault"
const obsidianIcon = "https://www.google.com/s2/favicons?sz=64&domain=obsidian.md"
let heroTitle = '[data-testid="hero-title-block__title"]';
let title = $(heroTitle).text();
let baseSelector = heroTitle + ' + div > ul > li'
let year = $(baseSelector + ' > span:eq(0)').text()
let guidance = $(baseSelector + ' > span:eq(1)').text()
let duration = $(baseSelector + ':eq(2)').text()
let description = $('[data-testid="plot"]').text();
let content = `---
tags: [ "movie" ]
---
# ${title}
Year: ${year}
Guidance: ${guidance}
Duration: ${duration}
${description}
`
let filename = "Movies/" + createFilename()
let obsidianLink = createObsidianURI("new", {vault, file: filename, content})
let newElement = `<a href="${obsidianLink}"><img src="${obsidianIcon}" width="32" height="32"></a>`
$('[data-testid="hero-title-block__title"]').append(newElement)
})();
// --- IMDb Specific Code - END ---
(위 IMDb 페이지는 다음과 같습니다.https://www.imdb.com/title/tt0062622)
JQuery "선택자"
위의 코드에서 '선택기'를 사용하여 페이지의 요소를 식별합니다. 예를 들어 " [data-testid="here-title-block__title]'". 그런 다음 함수를 호출하여 이 요소 내부의 텍스트를 가져올 수 있습니다 .text().
선택기는 웹 페이지의 일부를 설명합니다. JQuery는 설명을 사용하여 해당 요소를 찾으려고 시도합니다. 연속된 3개의 단락과 같은 일련의 요소가 될 수 있습니다. ID가 제목인 단락과 같은 단일 요소를 설명할 수 있습니다.
좋은 예는 JQuery 문서 를 참조하십시오 . 또한 w3school의 JQuery 문서 는 따라하기가 매우 쉽습니다.
일부 웹사이트에서는 원하는 요소를 쉽게 찾아낼 수 있습니다(예: 고유 ID 부여). 다른 사이트에서는 예를 들어 알려진 위치로부터의 상대 경로를 설명해야 할 수 있습니다. JQuery를 마스터하려면 연습이 필요합니다. 무엇이 가능한지 알 수 있도록 설명서를 훑어보는 것이 좋습니다. 귀하에게 효과가 있었던 것에 대해 메모해 두십시오.
선택자를 작성하는 방법
다행스럽게도 선택자를 작성하는 것은 그리 어렵지 않습니다. 실제로 요소를 클릭하여 표시하도록 Chrome에 요청할 수 있습니다. 운이 좋으면 ID가 있습니다. 그리고 당신의 코드는 let title = $(“#title”).text(). 운이 좋지 않다면 작동하는 것을 만들 때까지 몇 가지를 테스트해야 합니다.
선택자를 만드는 프로세스는 다음과 같습니다.
1. Chrome 콘솔을 엽니다. ( Mac에서는 또는 Windows 에서
누르기 )F12CMD + SHIFT + ICTRL + SHIFT + I
2. Chrome에 '요소' 탭에서 관심 있는 요소를 표시하도록 요청합니다. '
상자를 가리키는 마우스 커서' 모양의 아이콘을 클릭한 다음 추출하려는 텍스트를 클릭합니다. HTML 요소는 '요소' 탭에서 강조 표시됩니다.
3. Chrome에 JQuery를 로드하도록 요청
합니다. '콘솔' 탭을 열고 이 코드를 복사하여 붙여넣고 Enter 키를 누릅니다.
var jq = document.createElement('script');
jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);
// ... give time for script to load
jQuery.noConflict();
$('[data-testid="hero-title-block__title"]').text()
UserScript를 활성화하는 다른 방법
바로 가기(예: )를 눌러 스크립트를 활성화하는 방법을 살펴보았습니다 CMD + I. 또한 Obsidian 로고를 추가하고 클릭하여 스크립트를 트리거했습니다. 또 다른 방법은 페이지를 마우스 오른쪽 버튼으로 클릭할 때 나타나는 상황에 맞는 메뉴 항목을 추가하는 것입니다. 이것을 추가하는 방법을 살펴보겠습니다...
새 @구성을 사용하면 상황에 맞는 메뉴를 만들고 상황에 맞는 메뉴가 열릴 때 스크립트를 실행할 수 있습니다.
// ==UserScript==
// @name Obsidian Things
// @grant GM_registerMenuCommand
// @run-at context-menu
// ==/UserScript==
function demoOpenVault() {
location.href = 'obsidian://open'
}
GM_registerMenuCommand("Open Vault", demoOpenVault, "o");
피해야 할 함정
지금까지 많은 내용을 다루었지만 마지막으로 두 가지 팁을 알려 드리고자 합니다…
- 브라우저에서 Obsidian을 열기 전에 확인을 요청할 수 있습니다. 이 확인 확인은 비활성화할 수 있습니다. 단계는 이전 게시물 에 설명되어 있습니다(섹션: 'Chrome에서 Obsidian을 열도록 항상 허용' 참조).
- 일부 웹 페이지는 iframe을 사용합니다. 이렇게 하면 선택한 텍스트를 식별하기가 더 어려워집니다. 다음은 iframe 내에서 선택한 텍스트를 식별하는 데 도움이 되는 몇 가지 코드입니다.
let text = ""
let iframe = document.getElementById("IFRAME_SELECTOR")
let idoc = iframe.contentDocument || iframe.contentWindow.document
if (idoc.getSelection) {
text = idoc.getSelection().toString()
}
return text
워크플로우에서 이것을 어떻게 사용하고 있는지 알고 싶습니다. Obsidian UserScript를 다음에 게시하는 것을 고려할 수 있습니다.https://userscripts-mirror.org/또는https://greasyfork.org/.
내 다른 흑요석 기사 도 확인하십시오.
![연결된 목록이란 무엇입니까? [1 부]](https://post.nghiatu.com/assets/images/m/max/724/1*Xokk6XOjWyIGCBujkJsCzQ.jpeg)
