뭘 하나

스마트 TV 뒤에서 화면 색을 벽으로 쏘아 주는 앰비라이트가 있다. youtube-ambilight 는 그걸 브라우저 안에서 한다. 유튜브 영상이 재생되는 동안 매 프레임의 색을 읽어, 플레이어 뒤와 화면 가장자리로 부드럽게 번지게 한다. 어두운 방에서 영상에 더 몰입하게 하고 눈 피로를 줄이는 효과다.

손잡이도 제품답게 갖췄다. 켜고 끄기, 블러 반경과 퍼짐·밝기, 극장/전체화면 모드, 와이드나 세로 모니터를 위한 검은 띠 제거까지.

어떻게 만들었나 (실측)

핵심은 영상 프레임을 실시간으로 샘플링해 블러해서 뒤에 까는 루프다.

1. youtube.com/* 에 콘텐츠 스크립트를 주입하고, requestVideoFrameCallback 으로 재생 중인 프레임을 받는다. 2. 그 프레임을 작은 캔버스에 그린 뒤, WebGL(projector-webgl.js·canvas-webgl.js)로 크게 확대·블러해 플레이어 뒤에 투사한다. WebGL 이 안 되는 환경은 projector-shadow.js 로 폴백한다. 3. bar-detection.js 가 레터박스/필러박스(검은 띠)를 찾아 잘라 내고, static-image-detection.js 와 Web Worker 로 쓸데없는 갱신과 메인 스레드 부하를 줄인다.

GPU 가속이라 가볍게 돌지만, 1440p 이상 고해상도에서는 무거울 수 있다(그 건의 열린 이슈가 있다).

성격

• 규모: 실제 코드는 JavaScript 17,367줄 + SCSS 3,579줄. 런타임 의존성 0, 빌드 도구만 devDeps 17개. 테스트 0, CI 0.
• 유지: 첫 커밋 2017년, 마지막 코드 커밋 2025-11-21, 최근 90일 0커밋. 코드는 약 10개월 멈췄지만 이슈는 어제도 닫히고 있다. 완성된 제품의 유지·트리아지 모드다.
• 배포: Manifest V3 로 2025-11 영구 전환(크롬 MV2 제거 영향 없음). Chrome·Edge·Firefox·Opera 공식 스토어 운영.

개인정보

확장치고 드물게 깔끔하다. 요청 권한은 storage 하나뿐이고, 분석·추적이 없다. 유일한 네트워크 호출은 선택 해제 가능한 Sentry 크래시 리포트로, 시청 중 URL·영상 ID 와 익명 기술정보가 포함될 수 있으며 30일 후 자동 삭제된다(PRIVACY-POLICY.md).

*이 리포트는 저장소 클론 실측(probe, head 18d1718)과 GitHub·매니페스트·개인정보 정책 대조로 작성했다. 실행 시연은 환경 제약으로 생략했고, 스토어의 사용자 수 같은 외부 표기 수치는 재확인하지 않아 싣지 않았다.*

실측 정보

무엇

유튜브 플레이어 둘레로 앰비언트 라이트를 깔아 주는 브라우저 확장. 재생 중인 영상 프레임을 작은 캔버스에 주기적으로 그린 뒤, 그 사본을 크게 확대·블러해 플레이어 뒤와 화면 가장자리에 투사한다. 켜고 끄기, 블러 반경·퍼짐·밝기 조절, 극장/전체화면 지원, 레터박스(검은 띠) 제거 같은 손잡이가 있다

규모 / 실측

총 27,238 LOC · 104 파일(최대 package-lock.json 5,195줄). 실제 코드는 JavaScript 34 파일 17,367줄 + SCSS 2 파일 3,579줄. 런타임 의존성 0 · devDeps 17(rollup·sass·sentry-cli 등). ⚠️ 테스트 0 · CI 0(.github/workflows 없음)

활발 / 유지

커밋 1,887 · 기여자 5(Wessel Kroos 주도) · 태그 139(과거엔 릴리스가 잦았다). 첫 커밋 2017-11-25 · 마지막 코드 커밋 2025-11-21 · 최근 90일 커밋 0. 코드는 약 10개월 멈췄지만 이슈는 아직 응대·종료 중(열린 26건). 방치가 아니라 완성된 제품의 유지·트리아지 모드다. ⚠️ probe 의 이슈응답 중앙값 9.2시간은 가장 오래된 25건(2017년경) 기준이라 과거값이다

작동 방식

`youtube.com/*` 에 콘텐츠 스크립트를 주입해 `requestVideoFrameCallback` 로 프레임을 받고, WebGL(`projector-webgl.js`·`canvas-webgl.js`, 비 WebGL 폴백 `projector-shadow.js`)로 블러·투사한다. `bar-detection.js`(레터박스/필러박스 크롭)·`static-image-detection.js`·Web Worker 로 부하를 줄인다. GPU 가속이라 1440p 이상 고해상도에서는 무거울 수 있다(열린 이슈 있음)

개인정보 / 권한

요청 권한은 `storage` 하나뿐이다(tabs·광범위 host 권한 없음, 매칭은 유튜브 콘텐츠 스크립트로 한정). 분석·추적 없음. 유일한 네트워크는 선택 해제 가능한 Sentry 크래시 리포트로, 시청 중 URL·영상 ID 와 익명 기술정보가 포함될 수 있고 30일 후 자동 삭제된다(PRIVACY-POLICY.md)

라이선스 / 스토어

MIT(SPDX 확인). Manifest V3(`manifest_version: 3`, service worker, min Chrome 121)로 2025-11 영구 전환해 크롬의 MV2 제거 영향이 없다. Chrome 웹스토어 리스팅(id paponcgjfojgemddooebbgniglhkajkj)이 이 repo 의 공식 배포본이며(README 가 직접 링크), Edge·Firefox·Opera 공식 스토어도 함께 운영한다

적용점

• 이럴 때 유용유튜브를 어두운 방에서 몰입해 보고 싶을 때 바로 설치해 쓰는 완성품이다. 영상 색을 화면 밖으로 흘려 눈 피로를 줄이고 몰입감을 준다. 코드를 읽을 거라면, 영상 프레임을 실시간으로 캔버스에 샘플링해 WebGL 로 블러·투사하는 파이프라인(requestVideoFrameCallback + Web Worker + 셰이더)이 좋은 교본이다.
• 이럴 땐 주의의존으로 끌어다 쓸 라이브러리가 아니라 끝난 확장이다. 코드 커밋이 2025-11 이후 멈췄고 테스트 0·CI 0 이다. GPU 가속이라 고해상도·저사양에서는 무거울 수 있다. 유튜브가 플레이어 DOM 을 바꾸면 깨질 수 있는 콘텐츠 스크립트 방식이라, 장기적으로는 원저자의 유지보수에 의존한다.
• 먼저 볼 것값은 아이디어와 렌더 파이프라인에 있다. 핵심은 재생 중인 영상 프레임을 주기적으로 작은 캔버스에 그린 뒤, 그걸 크게 블러해 뒤에 까는 루프다. 이 루프만 이해하면 유튜브가 아니어도 어떤 비디오나 캔버스에든 앰비언트 효과를 붙일 수 있다. MIT 라 이식도 자유롭다.

원문 README

아래는 WesselKroos/youtube-ambilight 저장소의 README 원문입니다(GitHub 렌더, 수집 시점 기준). 저작권은 원 프로젝트에 있으며 원 저장소의 라이선스를 따릅니다. GitHub에서 보기

README 전문 펼치기

             

Ambient light for YouTube™

Immerse yourself in YouTube videos with ambient light!

Installation

Go to the extensions site of your browser and add the extension:

Minimum requirements

Performance

A video card with a score of at least 1000 points in the PassMark Video Card Benchmark is recommended. Check your video card's score here:

https://www.videocardbenchmark.net/gpu_list.php

With a score lower than 1000 the extension will still work but it is likely that the YouTube video page will be slow and/or stuttering.

To troubleshoot performance problems or maximize the performance you can follow the checks and steps in the Troubleshoot guide

Browser versions

Browser	Version	Reason
Chromium	80	Optional chaining operator (?.)
Firefox	74	Optional chaining operator (?.)

Privacy & Security

Read the privacy policy

Report, request or contribute

Feel free to

• contribute to the project at /youtube-ambilight
• report bugs at /youtube-ambilight/issues
• request a feature at /youtube-ambilight/issues
• or ask a question at /youtube-ambilight/issues

Support me

Development

1. Install Node (LTS)
2. In the terminal/commandline enter npm install.
3. In the terminal/commandline enter npm run build. A /dist folder will be generated which contains all the generated files of the extension.
4. Add the extension to Chrome:
   1. In Chrome go to the url chrome://extensions/.
   2. Turn on the Developer mode toggle.
   3. Click Load unpacked and select the /dist folder.
   4. Ambient light for YouTube™ has been added to the list of extensions.
5. After you've modified a file in the /src folder follow these steps:
   1. In the terminal/commandline enter npm run build
   2. In Chrome go to the url chrome://extensions/ and click the refresh/update button in the card of the extension.

의견

판정에 대한 반론, 도입 경험, 정정 제보를 환영합니다. GitHub 계정으로 참여합니다.