[JS] Chrome Extension(크롬 확장 프로그램) - 유데미 한글 자막 옵션 유지 기능 추가하기

이전에 기능 추가 게시글을 올릴 때의 유데미 한글 자막의 사용자 수는 243명이었는데 이제는 361명이 되었다!

 

사용자 수가 내 카카오톡 친구 수를 넘겼다....!!!

 

사실 한 동안 리뷰도 없고 잠잠해서 이제는 그냥 쓰는 사람들만 쓰나 보다~ 생각했는데 host permission 수정 요청도 있었고, (나는 기업체에서 사용하는 유데미가 따로 있는지 이 분 덕분에 알 수 있었다.)

또 하나의 리뷰가 달렸는데

 

 

영상을 재생할 때마다 한글 자막 옵션을 선택하는 것이 불편하다는 리뷰가 달렸다.

 

사실  처음 만들 때 선택한 옵션을 유지하는 기능을 만들까 말까 고민을 했었다.

 

분명 사용하다 보면 유용하게 쓰이긴 할텐데...

 

고민을 했음에도 넣지 않았던 이유는

 

누군가 이 확장을 사용해 줄지는 생각도 못했다.

 

나 혼자 사용할 확장으로 생각했었고, 때문에 귀찮은 기능들은 빼버리자!라고 생각을 했던 것 같다.

 

아무튼 이제는 요청이 들어왔으니 기능을 추가해야 했다.

따로 옵션을 유지하게 하려면 확장 앱의 설정 부분을 만들거나, 이전에 선택한 옵션을 유지하도록 하면 되는데 나는 최대한 쉽게 쉽게 하고 싶었으니 이전에 선택한 옵션을 chrome.storage를 이용해서 유지하도록 하기로 했다.

 

우선 가장 먼저

 

 

옵션 메뉴의 li의 인덱스가 0, 1, 2이니 해당 부분을 선택했을 경우 선택한 인덱스를 storage에 저장하도록 하였다.

 

function setStorageData(value) {
  chrome.storage.sync.set({'translate_select_option': value}, () => {});
}

 

이렇게.

storage를 사용하는 방법은 local과 sync가 있는데 sync는 크롬에 사용자 로그인을 해 두었을 경우 해당 값을 공유할 수 있게 해 준다는 것 같다. (대충 공부하며 만들었기 때문에 아무것도 모른다.)

 

오프라인 상태일 경우에는 sync나 local이나 같은 기능을 하고, sync에는 용량 제한이나 시간당 제한이 걸려있다고 한다. 

나는 그냥 index 번호만 저장하면 되기 때문에 그냥 sync로 사용했다. 그리고 뭔가 공유하면 내가 사용하기 편할 것 같았다 :)

 

아무튼 setStorageData를 옵션을 선택할 때마다 호출을 하고 argument로 본인의 index를 넘기도록 하였다.

 

그리고 불러오는 부분은

 

function getStorageData() {
  chrome.storage.sync.get('translate_select_option', (data) => {
    if (!data['translate_select_option']) {
      return;
    } 

    setTimeout(() => {
      document.querySelectorAll('.translate-menu > ul > li')[data['translate_select_option']].click();
    }, 2000);
  });
}

 

이렇게 해놓았다.

 

storage에서 값을 불러와 callback 함수로 해당 옵션을 선택하도록 해놓았다.

setTimeout을 준 이유는 바로 동작하게 해 놓으니 아직 li들이 생성되지 않거나 기타 등등의 문제로 계속해서 에러가 발생하여 2초의 대기 시간을 주었다.

 

 

 

 

이렇게 해서

 

 

선택한 옵션이 다음 영상을 재생할 때도 유지되도록 수정하였다.

 

기능이 추가되면 괜히 기분이 좋다.

 

 

 

 

업데이트도 완료하고 게시까지 완료되었다!

 

 

더 노력해서 이것저것 만드는 개발자가 되면 좋겠다.

 

앞으로 열심히 노력하자!

사실 다짐만 수 년째