플레이보드(Playboard) 유튜브 영상순위를 보며 클릭 한 번에 새창 재생되는 크롬 확장을 직접 만들어봐요. Manifest V3, React, 폴리필(Polyfill), manifest 설정부터 설치·테스트까지 !
오늘은 유튜브 영상 만드는 분들이 관심있어하는 내용인데요. 플레이보드(Playboard)에서 인기 영상 순위를 보며, 썸네일 이미지를 클릭하면 곧바로 새 창으로 재생되게 만드는 크롬 확장 프로그램을 함께 만들어 볼려고 합니다. 플레이보드는 사이트는 유로 사용해도 좋을 정도로 주제별 카테고리 분류 및 통계에 대해 다양한 정보를 제공합니다. '크롬 확장프로그램으로 유튜브 영상순위 플레이보드 한번에 보기' 1편에 이어서 진행을 하겠습니다.
1편을 보시고 2편를 보시는것이 이해하는데 도움이 됩니다.
크롬 확장프로그램으로 유튜브 영상순위 플레이보드 한번에 보기1
크롬 확장프로그램으로 유튜브 영상순위 플레이보드 한번에 보기1
플레이보드(Playboard) 유튜브 영상순위를 보며 클릭 한 번에 새창 재생되는 크롬 확장을 직접 만들어봐요. Manifest V3, React, 폴리필(polyfill), Manifest 설정부터 설치·테스트까지 따라 하면 됩니다.오늘
bobjyeon.tistory.com
크롬 확장프로그램 PNPM설치
pnpm 설치·실행은 Windows powershell 관리자 모드에서 실행해요.
개인적으로 pnpm 설치가 되지 않아서 많이 헤맸는데요.
pnpm 을 설치하려면 먼저 Node.js 를 설치해야 하는데요.
pnpm 간접 설치 Corepack 방법
Corepack은 “패키지 매니저 버전 관리자”. 프로젝트/ 머신별 pnpm 버전을 자동 매칭해줘요.
# Node 16.13+ 권장 node -v
1) Corepack 활성화
corepack enable
2) pnpm 원하는 버전 활성화 (latest 예시)
corepack prepare pnpm@latest --activate
저같은 경우는 'Preparing..' 나오고 활성화 실행이 되지 않았어요.
3) 정상 설치된 경우, pnpm 버전이 나옵니다.
pnpm -v
pnpm 직접 설치 (Windows) 방법
직접 설치는 OS 패키지 매니저로 PNPM을 완전히 심는 방식이에요.
관리자 PowerShell을 열고 아래 중 하나만 설치하면 되는데요.
저는 잘 몰라서 1,3 번 두가지 설치진행했습니다.
1. 초코라티Chocolatey ( 쉽고 깔끔)
choco install pnpm -y
위 이미지는 윈도우 파워셀(Poweshell)에 초코라티( Chocolatey )로 pnpm 설치 명령시 실행되는 내용입니다.
최종적으로 pnpm 정상 설치시 버전이 반드시 나와야 합니다. 나오지 않으면 다른 방법으로 설치를 하고요.
2. 스쿠프Scoop
scoop install pnpm
3. 공식 스크립트
iwr https://get.pnpm.io/install.ps1 -useb | iex
= 동일 Invoke-WebRequest https://get.pnpm.io/install.ps1 -UseBasicParsing | Invoke-Expression
(또는 curl) 명령어를 사용해
pnpm 공식 사이트에서 제공하는 설치 스크립트 파일을 다운로드합니다.
https://github.com/pnpm/pnpm/release/download/v10.18.3/pnpm-win-x64.exe
Invoke-Expression: 다운로드한 스크립트의 내용(install.ps1)을 즉시 실행하여 pnpm을 설치합니다.
크롬 확장프로그램 빌드(Build)하기
build(빌드) 라는 단어는 “만들다”라는 뜻 그대로,
개발 중인 원본 코드를 → 실제로 동작 가능한 완성본으로 변환하는 과정을 말합니다.
즉, 우리가 개발 중에 작성한
- React 코드(JSX),
- Tailwind 스타일,
- 여러 개의 JS 파일과 이미지들
이런 것들을 한데 묶어서 브라우저가 빠르게 실행할 수 있도록 최적화된 하나의 완성된 파일 세트(dist 폴더) 로 만드는 거예요.
이제 PNPM이 설치됐다면, Powershell 창에서 프로젝트 폴더(My_Extion)로 이동해요.
cd C:\Users\20250529\Documents\My_Extion
프로젝트 폴더 PNPM Install
'node_modules' 폴더가 생기면 성공!
오류 메세지
“이 시스템에서 스크립트를 실행할 수 없습니다 … UnauthorizedAccess / PSSecurityException”
지금 나온 오류는 PowerShell의 보안정책 때문에 pnpm이 설치되어 있어도 스크립트 실행이 차단된 상태입니다.
해결 방법
사용자 계정 전체에 영구 허용 (자주 쓸 때) Powershell 명령입니다.
Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned
RemoteSigned: 로컬에서 만든 스크립트는 자유롭게 실행
프로젝트 폴더 PNPM Build
pnpm build
정상 빌드 변환된 경우, 'dist' 폴더와 하위폴더에 완성된 파일이 생성됩니다.
(이 폴더를 크롬 확장 프로그램으로 불러오면 바로 동작!)
빌드한 크롬 확장프로그램 테스트하기
크롬 확장프로그램 업로드
1️⃣ 크롬 주소창에 chrome://extensions 입력
2️⃣ 오른쪽 상단 “개발자 모드” 켜기
3️⃣ “압축 해제된 확장 프로그램 로드” 클릭
4️⃣ 'dist' 폴더 선택
참고로 확장프로그램 아이콘은 Chat GPT 등 이용해서 생성하면 되요.
정상적으로 동작이 되지 않으면 '경고' 아이콘이 생깁니다. 그러면 아이콘을 눌러서 에러 내용을 확인하고
'버그 조치 -> 빌드 -> 업로드' 과정을 진행하게 되고요. '경고' 아이콘이 나오지 않아야 합니다.
제일 하단에 '크롬 확장 프로그램 업로드 후 발생 버그 유형 & 해결방법' 을 참고하세요.
확장프로그램 테스트
크롬 브라우저로 플레이보드(Playboard) 사이트로 이동합니다.
'F12' 를 누르고 개발자 모드로 들어가요.
영상 썸네일 이미지를 클릭했을 때 결과적으로 새창으로 열리기만 하면 되는데요.
사이트 콘솔에서 이렇게 나오면 정상입니다.
[content] loaded at https://사이트/채널/영상
[content] intercepted ->
[content] message sent
| 확인 항목 | OK 기준 |
| [content] loaded at https:// | content-script 정상 주입 |
| [content] intercepted -> | content-script 가로채기 정상 동작 |
| [content] message sent [bg] msg ... |
content-script 메시지 송신 background 메시지 수신 정상 |
갈무리- 플레이보드 영상순위 새창보기 확장프로그램 만들기
이번 글에서는 플레이보드(Playboard) 영상순위를 새창으로 바로 재생하는
크롬 확장 프로그램을 처음부터 끝까지 함께 만들어봤습니다.
핵심만 정리하면 아래 다섯 단계예요 👇
1. 아이디어 구상 — 플레이보드 영상 클릭 제한을 해결하고, URL을 바로 새창에서 여는 기능 구현
2. 확장 프로그램 구조 작성 — manifest.json부터 content, background, popup 폴더 구성
3 .PNPM 설치 및 빌드 — 윈도우 '파워셀(Powershell)'로 pnpm 설치 → pnpm install → pnpm build
4. 크롬 업로드 — chrome://extensions → 개발자 모드 → dist 폴더 로드
5. 테스트 및 버그수정 — 콘솔 로그와 서비스 워커(service worker) 점검, 버전·권한·경로 오류 해결
유튜브 영상을 제작하는 분들이라면 이 확장 프로그램이 영상 분석과 레퍼런스 확인에 큰 도움이 될 거예요.
이제 클릭 한 번으로 인기 영상을 새창에서 열어보세요.~
크롬 확장 프로그램 버그 유형 및 해결방법을 덧붙입니다. 참고하세요.
크롬 확장 프로그램 업로드 후 발생 버그 유형 & 해결방법
| 증상 | 주요 원인 | 해결 방법 |
| 경로 오류 | dist 경로 불일치 / 빌드 폴더 구조 문제 |
vite.config.js의 build.outDir = 'dist', public/ 기준으로 파일 경로 맞추기 |
| 전반적 작동 이상 | 빌드/권한/경로 불일치 | dist 내 파일 존재 확인, service worker 콘솔 로그 점검 |
| 클릭 무반응 | manifest.json의 matches 누락 / 이벤트 캡처 미사용 |
matches: ["https://playboard.co/*"] 추가, addEventListener(..., true) 사용 |
| 클릭 무반응 | default_popup이 onClicked 이벤트 차단 |
팝업 제거 또는 팝업 내부 버튼에서 chrome.tabs.create() 실행 |
| 버전 미적용 | 캐시 / 버전 미증가 | manifest.json의 version 값 올리고, 확장 재로드 |
| 이미지 등 자산 소스 접근 불가 |
web_accessible_ resources 누락 |
"resources":["assets/*","icons/*"], "matches":["https://playboard.co/*"] 추가 |
| 서비스 워커 Service Worker 작동 안함 |
background 설정 오류 / 리스너 최상단 아님 |
"background": {"service_worker": "background.js"} 지정, chrome.runtime.onMessage를 최상단에 위치 |
| API 호출 실패 / CSP 경고 |
콘텐츠 스크립트에서 네트워크 요청 |
ackground로 요청 위임 후 sendMessage로 결과 반환 |
| 새 탭이 안 열림 | permissions 또는 host_permissions 누락 |
"permissions":["tabs"], "host_permissions":["https://playboard.co/*"] 추가 |
| 메시지 응답이 없음 | sendResponse 비동기 처리 시 return true 누락 |
chrome.runtime.onMessage 콜백에서 return true 추가 |
| 카드 클릭 안 됨 | Playboard 사이트 구조 변경 (DOM class 변경) |
a[href*="/video/"] 기반 선택자 사용, 실패 시 경고 로그 출력 |
| SPA(단일 페이지) 전환 후 작동안함 | DOM이 새로 그려져 이벤트 소멸 |
MutationObserver로 DOM 변경 감시 후 재바인딩 |
