software

오픈소스 Chrome Extension을 만들어 YouTube Shorts 중독을 끊었습니다 (Manifest V3)

발행: (2025년 12월 18일 오후 09:09 GMT+9)
4 min read
원문: Dev.to

Source: Dev.to

The Problem

저는 컴퓨터 과학을 전공하고 싶은 고등학생입니다. 몇 달 전, 공부 시간을 파괴하는 패턴을 발견했습니다:

  1. 10분짜리 물리학 튜토리얼을 보려고 YouTube를 엽니다.
  2. 홈 화면에 “Shorts” 선반이 보입니다.
  3. 하나를 클릭합니다…
  4. 2시간이 지나도 작업이 전혀 진행되지 않은 채로 깨어납니다.

기존 차단기들은 너무 공격적이어서 (튜토리얼에 필요한 전체 YouTube를 차단) 혹은 유료·폐쇄형(브라우징 데이터를 신뢰할 수 없음)이라 사용할 수 없었습니다. 저는 정밀하게 Shorts 요소만 제거해 주는 차단기가 필요했습니다.

Solution: FocusTube

저는 FocusTube라는 Chrome 확장 프로그램(Manifest V3)을 만들었습니다. 이 확장은 Shorts 선반을 슬롯머신처럼 계속 나타나는 것을 제거하면서 YouTube의 다른 기능은 그대로 유지합니다.

View the source code on GitHub

How It Works

YouTube는 싱글 페이지 애플리케이션(SPA)입니다. 동영상을 클릭하면 페이지가 새로 고침되지 않고 URL만 바뀌며 JavaScript로 콘텐츠가 교체됩니다. 따라서 단순 CSS 규칙만으로는 새로운 요소가 계속 나타나는 문제를 해결할 수 없습니다.

MutationObserver

이 확장은 MutationObserver를 사용해 DOM 변화를 감시합니다. YouTube가 새로운 “Shorts Shelf”나 사이드바 버튼을 삽입하면 스크립트가 이를 감지하고 즉시 숨깁니다.

const observer = new MutationObserver(() => {
    if (isFocusModeOn) manualScan();
});
observer.observe(document.body, { childList: true, subtree: true });

URL이 전체 페이지 리로드 없이 바뀌기 때문에, 확장은 YouTube의 네비게이션 이벤트(yt-navigate-finish)도 청취하여 사용자가 링크를 클릭할 때마다 검사를 다시 실행합니다.

Modes

Strict Mode

직접 /shorts/ 링크를 열면, 확장은 URL 패턴을 감지하고 window.location.replace를 사용해 즉시 홈 페이지로 리다이렉트합니다.

Soft Mode

부드러운 알림이 필요할 때는 확장이 전체 화면 HTML 오버레이를 삽입해 영상을 일시 정지하고 다음과 같은 질문을 표시합니다: “정말 이 영상을 봐야 하나요?”

Privacy First

이 확장은 100 % 클라이언트 측에서 동작합니다. 환경설정(다크 모드, Strict Mode 상태 등)은 chrome.storage.local에 저장되며, 데이터가 브라우저를 떠나는 일은 없습니다.

Release & Installation

  • v1.2가 출시되었으며 Microsoft Edge와 Firefox Add‑ons 스토어에 제출되었습니다(검토 중).
  • 오픈 소스이므로 Chrome, Edge, Brave에서 개발자 모드로 오늘 바로 설치할 수 있습니다.

GitHub Repo (Download here): https://github.com/malekwael229/FocusTube
Issues / Feedback: 버그를 발견하면 언제든지 이슈를 열어 주세요!

Back to Blog

관련 글

더 보기 »