플레이보드(Playboard) 유튜브 영상순위를 보며 클릭 한 번에 새창 재생되는 크롬 확장을 직접 만들어봐요. Manifest V3, React, 폴리필(polyfill), Manifest 설정부터 설치·테스트까지 따라 하면 됩니다.
오늘은 유튜브 영상 만드는 분들이 관심있어하는 내용인데요. 플레이보드(Playboard)에서 인기 영상 순위를 보며, 썸네일 이미지를 클릭하면 곧바로 새 창으로 재생되게 만드는 크롬 확장 프로그램을 함께 만들어 볼려고 합니다. 플레이보드나 블링에서 유튜브 영상 인기순위를 리스트로 볼 수 있는데 리스트의 영상을 클릭하면 유튜브 영상 재생과 함께 해당 영상에 통계 정보가 나옵니다. 벤치마킹도하고 인기영상도 보고요. 참고로 플레이보드 사이트는 유로 사용해도 좋을 정도로 주제별 카테고리 분류 및 통계에 대해 다양한 정보를 제공합니다.
크롬 확장 프로그램(Chrome Extention Program)이 뭐죠?
구글 크롬 브라우저에 설치하는 작은 앱이에요. 스마트폰에 앱을 깔듯, 크롬 브라우저에 기능을 쏙 추가하는 건데요.
플레이보드( Playboard)는 무료로 사용하는 경우, 클릭 회수 제한이 있어서 영상을 재생할 수 없어요. 그래서 다시 유튜브에서 영상 제목을 검색을 해서 재생했는데요. 이러한 번거로움과 시간을 아끼기 위해 새창에서 영상을 재생하는 크롬 확장 프로그램 기능을 한번 만들어보려고 해요.
구글 확장 앱은 어떤 일에 쓸 수 있나요?
- 할 일 관리, 북마크 정리
- 번역/사전 빠르게 열기
- JSON 보기, 광고 가리기 등 내 입맛대로 맞춤 커스텀
플레이보드 크롬 확장프로그램 구상
먼저 브라우저 동작과정을 살펴볼께요.
우리가 영상 썸네일을 마우스로 클릭하면 웹 브라우저는 클릭을 감지하고 플레이보드 사이트에서 영상을 재생할 수 있는지 없는지 판단을 해서 브라우저에 보여줍니다. 그러면 플레이보드 사이트를 거치지 않고 노출된 URL 주소 이 정보만을 활용해서 새창에서 바로 열면 되지않을 까요? '아이디어'는 있는데 실현, 현실이 되지 못 하면 아이디어로 거치는 거고요.
구체화 하기 위해 먼저 웹페이지 부분을 살펴봅시다.
웹페이지에서 'F12'를 누르면 개발자 모드로 들어갈수 있는데요. 개발자 모드 상단에 'Element' 왼쪽 Inspect 버튼을 누르면 웹페이지의 구성 요소를 확인할 수 있습니다. 썸네일 이미지에 마우스를 갖다되면 색상 실루엣이 표시고 셈네일 구성요소의 프로그램 코드를 확인할 수 있습니다. 이 중에 유튜브 URL 정보를 찾을 수 있습니다.
프로그램 개발 전제
- OS: Windows 11
- 빌드: CRA + react-app-rewired
- UI: React + Tailwind CSS
- 확장: Chrome Extension Manifest V3
- 라이브러리: webextension-polyfill 사용
- 목표 동작
- Playboard 썸네일 클릭 시
- 원래 사이트 동작은 막고 영상 재생 코드를 가로채기(intercept)
- href="/video/XfTzIDVorm0?... 에서 XfTzIDVorm0 URL, ID 추출
- https://www.youtube.com/watch?v=XfTzIDVorm0 새 탭으로 열기
각 단계로 나눠볼께요.
1. 사용자가 쎔네일 이미지 박스를 클릭합니다.
2. 확장(content-script)이 썸네일 클릭을 가로채기( intercept) 함수가 동작해서
원래 동작을 막습니다. (preventDefault)
3. 영상 URL을 추출해서 background에 메시지를 보냅니다.
4. background가 chrome.tabs.create({URL})로 새탭 열기합니다.
그래서 클릭 제한이 있어도 바로 재생!
AI 로 구글 확장프로그램 코드작성 및 파일생성
저도 아무것도 모르고 유튜브만 보고 Chat GPT AI 와 얘기하면서
코드 작성과 확장 관련 파일을 생성했습니다. 엄청 삽질 시행착오를 했지요.^^
Chat GPT 명령 지침
아래 처럼 chat GPT 작업지침으로 해도 되고
GPT 탐색하기 'Chrome Extention Creator'를 찾아서 활용해도 됩니다.
+++++++++++++++++++++++++++++++++++
크롬 확장프로그램을 제작하려고 해.
현재 아래 웹사이트 코드는 클릭시 해당 컴포넌트의 영상이 재생되는데
나는 클릭 동작을 막아서 해당 사이트에서 코드가 동작되지 않도록 하고
코드에서 URL 정보를 추출해서 새창에서 열도록 할거야.
컴포넌트 클릭시 유튜브 ID 정보를 추출하고 새창에서 열도록하기 위해서
.라이브러리는 WebExtention-Polyfill 를 사용할거야
.빌드는 react-app-rewired 사용할거야
.코드는 React JS 와 Tailwind CSS 을 이용할거야
Extention의 Manifest V3 버전을 이용하도록 해
썸네일 이미지에서 나온 코드를 덧붙입니다.
+++++++++++++++++++++++++++++++++++++
확장프로그램 폴더 구조
Vite 형식이나 CRA 형식으로 라이브러리를 만들 수 있습니다.
[ Vite 형식 라이브러리 ]
my-ext/
├─ public/
│ ├─ manifest.json ← MV3 매니페스트 (빌드시 dist로 복사)
│ └─ icons/ ← 확장프로그램 아이콘
│ ├─ icon16.png
│ ├─ icon32.png
│ ├─ icon48.png
│ └─ icon128.png
├─ src/
│ ├─ background.js ← 서비스 워커(폴리필 import, 새탭열기)
│ ├─ content.js ← 콘텐츠 스크립트(클릭 가로채기)
│ └─ popup/
│ ├─ popup.html ← 팝업 HTML(루트 엔트리)
│ └─ main.jsx ← React 진입점
├─ package.json ← 우리 프로젝트의 명함
├─ vite.config.js ← 빌드(요리)의 레시피 조리법
├─ tailwind.config.js ← 색깔과 스타일 디자인 규칙
└─ postcss.config.js ←Tailwind와 CSS 정리 및 다듬어줌
[ CRA 형식 라이브러리 ]
Create React App “React 개발을 쉽게 시작하도록, 복잡한 Webpack/Babel 설정을 자동으로 만들어주는 툴”
playboard-ext/
│
├─ public/ ← 정적 파일들(HTML, 이미지 등)
│ ├─ manifest.json ← Chrome Extension 설정 (MV3)
│ ├─ background.js ← 서비스 워커(새탭 열기)
│ ├─ content.js ← Playboard 썸네일 클릭 가로채기
│ ├─ browser-polyfill.js ← webextension-polyfill 적용
│ ├─ icons/ ← 확장프로그램 아이콘
│ │ ├─ icon16.png
│ │ ├─ icon32.png
│ │ ├─ icon48.png
│ │ └─ icon128.png
│ └─ index.html ← CRA가 사용하는 팝업 HTML, React가 주입되는 HTML
│
├─ src/ ←실제 우리가 코딩하는 React 소스
│ ├─ App.js ← React 팝업 화면 UI, 메인 React 컴포넌트
│ ├─ index.js ← CRA entry React 시작점(루트)
│ └─ index.css ← Tailwind/스타일
│
├─ node_modules/ ← 라이브러리들이 설치되는 폴더
│
├─ config-overrides.js ← react-app-rewired 설정
├─ tailwind.config.js
├─ package.json ← 프로젝트 정보 + 라이브러리 목록
└─ pnpm-lock.yaml
1. 상위 폴더(예: Documents)에서 새 CRA 프로젝트 생성
cd C:\Users\20251112\Documents
pnpm create react-app playboard-ext
2. 생성된 프로젝트 폴더 구조(정상 CRA):
playboard-ext/
public/
src/
package.json ← 이 안에 react-scripts 등 기본 설정 다 들어있음
3. 이 새 프로젝트 안으로
Chat GPT 로 위 모든 것을 코딩해서 각각 메모장에 붙여넣기하고 저장합니다.
그리고 '*.text(확장자)' 명을 '*.json'나 '*.js'로 변경합니다.
만든 manifest.json, background.js, content.js, icons/ 를 public/으로 옮깁니다.
4. 그 다음 이 새 프로젝트에서만:
cd playboard-ext
pnpm add webextension-polyfill
pnpm add -D react-app-rewired customize-cra
이 화면은 pnpm의 보안 기능 때문에 뜨는 건데요. pnpm은 이런 “postinstall scripts”를 승인 없이 실행하지 않도록 막아두는 설정이 있입니다.
C:\Users\20251112\Documents\playboard-ext> pnpm approve-builds
Choose which packages to build
(Press <space> 해당 항목 선택/해제 , <a> 전체 선택 , <i> to 선택 반전 (선택된 건 해제, 해제된 건 선택) )
core-js / core-js-pure 패키지의 빌드 스크립트 실행이 차단됨 허용할지 선택여부를 묻는 거고요.
<a> 로 둘다 선택하고 'Enter' 를 누른다.
5. package.json의 scripts만 react-app-rewired로 바꿔주고:
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
}
6. 그리고 프로젝트 루트(playboard-ext 폴더)에서 아래 순서로 한 번 돌려줍니다.
pnpm install
이게 설치가 끝나면
node_modules 안에
- react
- react-dom
- react-scripts
- webextension-polyfill
- react-app-rewired
등이 전부 들어가 있게 됩니다.
정상적으로 설치되었는지 확인하려면 Powershell에서
cat package.json
실행해서 "scripts" 부분에 진짜로 "build": "react-app-rewired build" 가 있는지
확인할 수 있습니다.
7. 빌드 : pnpm run build
먼저 위 폴더 구조로 폴더를 모두 생성하고요.
다음 Chat GPT 로 위 모든 것을 코딩해서 각각 메모장에 붙여넣기하고 저장합니다.
그리고 '*.text(확장자)' 명을 '*.json'나 '*.js'로 변경합니다.
다음 2편
크롬 확장프로그램으로 유튜브 영상순위 플레이보드 한번에 보기2
크롬 확장프로그램으로 유튜브 영상순위 플레이보드 한번에 보기2
플레이보드(Playboard) 유튜브 영상순위를 보며 클릭 한 번에 새창 재생되는 크롬 확장을 직접 만들어봐요. Manifest V3, React, 폴리필(Polyfill), manifest 설정부터 설치·테스트까지 ! 오늘은 유튜브 영상
bobjyeon.tistory.com
