서론
글감을 찾아 헤메다
예전에 만든 크롬 익스텐션 만든거에 대해 써볼까 하고 깃헙 봤는데
프로젝트가 없던 것...
맥북은 그 사이에 여러 번 초기화 시켜 이미 사라진 지 오래ㅋ
남아있는 자료가 없으니 개발하며 쓰는 글
초기 기능 구상
유튜브 쇼츠 컴퓨터로 보다가 방향키로 10초 넘기기랑 배속이 안돼서 너무 불편해서 만들어 보는 확장 프로그램
- 단축키 스킵 기능
- 배속 기능
프로젝트 생성
프로젝트 디렉토리 생성
mkdir shortcut팝업 Html 파일 생성
- popup.html 파일로 생성
<html lang="ko-KR">
<body>
<h1>확장 프로그램 개발하기</h1>
</body>
</html> 팝업 예시
실행 코드 파일 생성
- script.js 파일로 생성
alert('test!');
manifest.json 파일 생성
{
"name": "Shortcut",
"description": "Shortcut for shorts",
"version": "0.0.1",
"manifest_version": 3,
"action": {
"default_popup": "popup.html",
"default_icon": "shortcut.png"
},
"content_scripts": [
{
"js": ["script.js"],
"matches": ["https://www.youtube.com/shorts/*"]
}
]
}- manifest_version 은 숫자로 넣어야 함! (오류 났음ㅋ)
- action에는 팝업 html 파일과 확장 프로그램 아이콘을 넣으면 됨
- 동작시킬 js코드파일과 그 js 실행될 url을 matches에
- 어디서나 작동하게 하려면 * 입력
크롬 익스텐션 실행
-
chrome://extensions/주소로 접속 -
우측 상단 개발자 모드 ON
-
압축해제된 확장 프로그램을 로드합니다버튼을 클릭해 프로젝트 파일 선택
-
파일 수정 시마다 새로고침 버튼으로 동기화 시켜야 반영 됨
테스트 팝업
테스트 코드 실행 화면
기능 구현
비디오 dom 가져오기
- 개발자 도구에서 비디오 요소를 선택해 selector로 가져옴
skip 기능 구현
- video의 currentTime 프로퍼티를 사용해 기능 구현
- 왼쪽 방향키를 누르면 5초 뒤로, 오른쪽 방향키를 누르면 5초 앞으로 이동
- keyDown 이벤트 리스너 사용
console.log("[START]");
const video = document.querySelector("#shorts-player > div.html5-video-container > video");
function skip (code){
if (code === 'ArrowLeft') {
video.currentTime -= 5;
}
if (code === 'ArrowRight') {
video.currentTime += 5;
}
}
window.addEventListener("keydown", (e) => {
skip(e.code)
});
동작 화면
마무리
다음 글도 있습니당
다음 구현 기능
- 배속 설정
- 넘기기 초 단위 설정
프론트엔드 개발 블로그