플레이보드(Playboard) 유튜브 영상순위를 보며 클릭 한 번에 새창 재생되는 크롬 확장을 직접 만들어봐요. Manifest V3, React, 폴리필(polyfill), Manifest 설정부터 설치·테스트까지 따라 하면 됩니다.
오늘은 유튜브 영상 만드는 분들이 관심있어하는 내용인데요. 플레이보드(Playboard)에서 인기 영상 순위를 보며, 썸네일 이미지를 클릭하면 곧바로 새 창으로 재생되게 만드는 크롬 확장 프로그램을 함께 만들어 볼려고 합니다. 플레이보드나 블링에서 유튜브 영상 인기순위를 리스트로 볼 수 있는데 리스트의 영상을 클릭하면 유튜브 영상 재생과 함께 해당 영상에 통계 정보가 나옵니다. 벤치마킹도하고 인기영상도 보고요. 참고로 플레이보드 사이트는 유로 사용해도 좋을 정도로 주제별 카테고리 분류 및 통계에 대해 다양한 정보를 제공합니다.
크롬 확장 프로그램(Chrome Extention Program)이 뭐죠?
구글 크롬 브라우저에 설치하는 작은 앱이에요. 스마트폰에 앱을 깔듯, 크롬 브라우저에 기능을 쏙 추가하는 건데요.
플레이보드( Playboard)는 무료로 사용하는 경우, 클릭 회수 제한이 있어서 영상을 재생할 수 없어요. 그래서 다시 유튜브에서 영상 제목을 검색을 해서 재생했는데요. 이러한 번거로움과 시간을 아끼기 위해 새창에서 영상을 재생하는 크롬 확장 프로그램 기능을 한번 만들어보려고 해요.
구글 확장 앱은 어떤 일에 쓸 수 있나요?
- 할 일 관리, 북마크 정리
- 번역/사전 빠르게 열기
- JSON 보기, 광고 가리기 등 내 입맛대로 맞춤 커스텀
플레이보드 크롬 확장프로그램 구상
먼저 브라우저 동작과정을 살펴볼께요.
우리가 영상 썸네일을 마우스로 클릭하면 웹 브라우저는 클릭을 감지하고 플레이보드 사이트에서 영상을 재생할 수 있는지 없는지 판단을 해서 브라우저에 보여줍니다. 그러면 플레이보드 사이트를 거치지 않고 노출된 URL 주소 이 정보만을 활용해서 새창에서 바로 열면 되지않을 까요? '아이디어'는 있는데 실현, 현실이 되지 못 하면 아이디어로 거치는 거고요.
구체화 하기 위해 먼저 웹페이지 부분을 살펴봅시다.
웹페이지에서 'F12'를 누르면 개발자 모드로 들어갈수 있는데요. 개발자 모드 상단에 'Element' 왼쪽 Inspect 버튼을 누르면 웹페이지의 구성 요소를 확인할 수 있습니다. 썸네일 이미지에 마우스를 갖다되면 색상 실루엣이 표시고 셈네일 구성요소의 프로그램 코드를 확인할 수 있습니다. 이 중에 유튜브 URL 정보를 찾을 수 있습니다.
첫 번째 이 URL 정보를 이용하여 새창에서 해당 유튜브를 재생하는 것이고
두 번째 기존에 차단되는 화면으로 넘어가지 않도록 클릭 동작을 막는 것입니다.
다시 말하면 썸네일 이미지를 클릭했을 때 원래 플레이 보드(Playboard)가 실행하는 영상 재생 코드를 가로채서(intercept),
대신 그 영상의 URL을 가져와 새 탭에서 창을 여는 것입니다. 각 단계로 나눠볼께요.
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 정보를 추출해서 새창에서 열도록 할 거야.
코드는 React JS Tailwind CSS WebExtention-Polyfill 을 이용합니다.
Extention의 Manifest V3 버전을 이용하도록 해
썸네일 이미지에서 나온 코드를 덧붙입니다.
+++++++++++++++++++++++++++++++++++++
확장프로그램 폴더 구조
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 정리 및 다듬어줌
먼저 위 폴더 구조로 폴더를 모두 생성하고요.
다음 Chat GPT 로 위 모든 것을 코딩해서 각각 메모장에 붙여넣기하고 저장합니다.
그리고 '*.text(확장자)' 명을 '*.json'로 변경합니다.
다음 2편
크롬 확장프로그램으로 유튜브 영상순위 플레이보드 한번에 보기2
크롬 확장프로그램으로 유튜브 영상순위 플레이보드 한번에 보기2
플레이보드(Playboard) 유튜브 영상순위를 보며 클릭 한 번에 새창 재생되는 크롬 확장을 직접 만들어봐요. Manifest V3, React, 폴리필(Polyfill), manifest 설정부터 설치·테스트까지 ! 오늘은 유튜브 영상
bobjyeon.tistory.com
