Tampermonkey로 YouTube 우측에 있는 비슷한 영상 목록 제거
youtube 영상 하나 보고 끝내면 되는데, 우측에 보이는 비슷한 영상 목록에서 재미있어 보이는 걸 새 탭으로 열고 봐서 문제다. youtube에 정보가 많아서 마냥 피할 수는 없다. 내 의지 따위는 믿지 않고 하나만 보고 끝내는 환경을 만들기로 했다. ’눌러라 그러면 열릴 것이다 - 일감 번호 텍스트’ 글에서 써 본 tampermonkey를 사용해서 지우는 작업을 했다. tampermonkey에 대해 간단히 설명하자면 chrome을 비롯한 대부분의 웹브라우저를 지원하는 클라이언트 사이드에서 웹사이트를 조작할 수 있는 확장 프로그램이다.
지우려는 비슷한 영상 목록의 html 요소(element)가 어디에 있는지 chrome 개발자 도구로 찾는다.
마우스 우클릭 > Copy > Copy JS path
document.querySelector("#secondary")
오케이. 이걸로 element를 가져올 수 있다. 이걸 제거하면 된다.
방문하면 한 번에 다 로드되는 게 아니라 비동기로 로드된다. 이럴 땐, 비동기가 귀찮단 말이지. 해당 HTML 요소가 로드될 때까지 기다릴 방법이 필요하다.
waitForKeyElements 라이브러리가 유용하다. 원조라고 볼 수 있는 greasemonkey 라이브러리인데, tampermonkey에서 지원해서 그대로 쓸 수 있다.
// @require https://gist.github.com/raw/2625891/waitForKeyElements.js
스크립트를 로드한다. 외부 소스라서 바로 사용하기는 꺼림칙하다. snippet을 올려놓는 gist라서 불안하다. 다행히 hash 값과 비교할 수 있는 Subresource Integrity 기능을 지원한다.
// @require https://gist.github.com/raw/2625891/waitForKeyElements.js#sha256=fe967293ad8e533dd8ad61e20461c1fe05d369eed31e6d3e73552c2231b528da
이제 좀 안심이 된다.
// ==UserScript==
// @name youtube focus mode
// @namespace http://ohyecloudy.com/
// @version 0.1
// @description Don't waste your time on YouTube.
// @author ohyecloudy@gmail.com
// @match https://www.youtube.com/*
// @require https://code.jquery.com/jquery-2.2.4.min.js#sha256=BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=
// @require https://gist.github.com/raw/2625891/waitForKeyElements.js#sha256=fe967293ad8e533dd8ad61e20461c1fe05d369eed31e6d3e73552c2231b528da
// ==/UserScript==
(function() {
'use strict';
// recommended videos
waitForKeyElements(
"#secondary",
removeElement
);
})();
function removeElement(elem) {
elem.remove();
}
전체 소스 코드다. 무식하게 다 지워버림. 레이아웃이 약간 뒤틀리지만 시청하는데, 문제가 안 된다. 그리고 youtube 시청 환경을 제어하니 비슷한 영상을 보는 일이 없어졌다.
현재 youtube 영상을 보는 방법은 다음과 같다. 특정 채널을 RSS로 구독해서 새로운 영상이 올라오면 본다. 혹은 twitter에서 소개 트윗이 올라오면 본다. youtube에서 추천 알고리즘에 멱살이 잡혀 끌려다니며 넙죽넙죽 받아 보는 경우가 없어졌다. twitter 팔로잉 유저의 큐레이션을 믿는다.
