서론
저번에 예고한 대로 shortcut 추가 개발 진행
기능 구현
- 영상 배속 기능
- 몇 배속으로 쇼츠를 재생할 지 선택 가능하도록 함
- 영상 넘기기 초 설정
- 현재 앞,뒤로 5초씩 넘기도록 고정된 값을 사용자가 선택하도록 함
기능 정의
👉 사용자가 5초를 입력하면 5초단위로 넘기기 기능이 동작
👉 사용자가 1.25배속을 입력하면 쇼츠가 1.25배속으로 재생
👉 터무니 없는 값(100초, -10배속)을 입력하지 못하도록 select 사용
popup.html
사용자가 직접 값을 선택할 수 있도록 팝업 구성
<html lang="ko-KR">
<head>
<!--한글 깨짐 해결-->
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<section style="width: 250px">
<h2>shortcut</h2>
<fieldset>
<legend>배속</legend>
<select id="speed">
<option value="1">1</option>
<option value="1.25">1.25</option>
<option value="1.5">1.5</option>
<option value="2">2</option>
</select>
</fieldset>
<fieldset>
<legend>넘기기(초)</legend>
<select id="skip">
<option value="5">5</option>
<option value="7">7</option>
<option value="10">10</option>
</select>
</fieldset>
<div role="group">
방향키
<span>◀️</span>
<span>▶️</span>
</div>
</section>
<script type="module" src="popup.js"></script>
</body>
</html>popup에서 설정한 값 가져오기: chrome.runtime.sendMessage
- 사용자는 popup에서 값을 입력하고 그 값을 script.js의 skip에서 사용한다.
- 팝업 스크립트 코드(popup.js)와 쇼츠 페이지에서 동작하는 스크립트 코드(script.js)가 크롬 익스텐션 프로젝트 구조상 분리 되어있음
- 팝업에서 스크립트로 값을 통신하는
chrome.runtime.sendMessage()함수를 사용했다
popup.js: 보내는 쪽
const skipSelect = document.querySelector('#skip');
skipSelect.addEventListener('change',(e)=>{
chrome.runtime.sendMessage({skip:e.target.value})
})script.js: 받는 쪽
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
const skipRate = message.skip;
});생긴 문제: background 사용해야 하나?
- 위의 코드로 아무리 해도 에러가 생겨서 찾아보니...
- 값을 받는 쪽에서 사용하는
chrome.runtime.onMessage.addListener함수는 background에서 항상 동작하는 코드에서만 사용할 수 있음 - script.js는 특정 URL에서만 동작하도록 설정되어있는 contents script이기 때문에 사용할 수 없음
- 그렇다고 쇼츠 화면에서만 동작해야하는 이 코드를 background코드로 작성할 순 없음
chrome.storage 사용
- popup은 html이 따로 있는 다른 페이지라 storage가 따로 존재하기 때문에 storage 공유가 안됨
- chrome.storage를 사용하면 확장 프로그램 storage가 따로 생성되어 공유 가능
- storage를 사용하기 위해서 manifest.json에 코드 추가
{
// manifest.json
...
"permissions": ["storage"],
...
}storage에 값 저장
skipSelect.addEventListener("change", (e) => {
const value = e.target.value;
//skip이라는 key값 사용해서 저장
chrome.storage.local.set({ skip: value.toString() });
});storage에서 값 불러오기
// 저장할 때 key값을 사용
chrome.storage.local.get(["skip"]).then((result) => {
skipRate = +result.skip;
});storage의 값이 변경될 때마다 값 불러오기
chrome.storage.onChanged.addListener((changes, namespace) => {
// 저장할 때 key값을 사용
if (changes.skip) {
skipRate = +changes.skip.newValue;
}
});개발자 도구에서 확인
배속 설정
- video 요소의
playbackRate속성을 이용해 배속 변경 - 사용자가 값을 변경할 때마다 배속 변경하기
function changeSpeed(value) {
video.playbackRate = +value;
}
// 사용자가 값을 변경하면 스토리지에 저장된 값이 변경되며 이벤트 발생
chrome.storage.onChanged.addListener((changes, namespace) => {
if (changes.speed) {
changeSpeed(changes.speed.newValue);
}
});
마무리
크롬 익스텐션 기능의 아주 일부만 사용해서 더 많은 기능을 사용해 보고 싶은 마음이 생겼다ㅎㅎ
프론트엔드 개발 블로그