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

5월에 제작한 '유데미 한글 자막' 크롬 확장 프로그램의 사용자가 243명이 되었고 리뷰도 14개나 달렸다!

 

너무 뿌듯하고 기분이 좋다.

 

첫 리뷰를 받았을 때도 기분이 매우 좋았는데 그 이후에도 리뷰가 하나씩 달릴 때마다 기쁨과 뿌듯함이 날 만족시켜줬다.

 

그러다가 이번에 리뷰가 하나 달렸는데

 

 

만들 때는 한영 자막을 보는 것이 편해 한영 자막만 표시되도록 했었는데 창모드로 보기에 영상이 너무 작아진다는 의견을 달아주셨다.

 

바로 수정해서 업데이트 해야지!

 

라고 다짐을 했지만 너무 오랜만에 보는 코드라서 눈에 들어오지 않았고, 눈에 들어오지 않으니 의욕이 생기지 않았다.

그래도 어찌어찌 어제 완성을 시켜 검토 요청을 하였고 오늘 업데이트가 되었다!

 

 

기존에는 이렇게 못생긴 번역 버튼을 만들어 해당 버튼을 눌렀을 때 한영 자막이 나타나도록 했었다.

저 부분이 너무 신경 쓰여 수정해야지 생각했었는데 이번 기회에 바꿔 주었다.

 

한글자막과 한영 자막을 선택하는 부분을 고민을 많이 했었는데 나는 기존에 버튼 형식을 누르면 다른 자막 버튼이나 설정 버튼과 같이 메뉴창이 뜨는 형식으로 만들기로 하였다.

 

'<div class="translate-menu translate-menu-hidden"><ul>' + 
'<li id="translate-menu-off"><div class="active">사용안함</div></li>' + 
'<li id="translate-menu-ko"><div>한글자막</div></li>' + 
'<li id="translate-menu-koen"><div>한영자막</div></li>' + 
'</ul></div>' +

 

기존에 버튼을 추가하던 부분에 ul, li 태그를 이용하여 메뉴창을 만들어 준다.

그 후 css를 생성해서 대충 기존 메뉴의 스타일을 참고해 스타일을 맞춰준 후

 

  "content_scripts": [
    {
      "matches": [ "https://www.udemy.com/course/*" ],
      "js": [ "js/udemy_korean_translate.js", "js/google_translate.js" ],
      "css": [ "css/udemy_korean_translate.css" ],
      "all_frames": true,
      "run_at": "document_end"
    }
  ],

  "web_accessible_resources": [
    "js/udemy_korean_translate.js", 
    "js/google_translate.js", 
    "css/udemy_korean_translate.css",
    "images/menu_icon.png"
  ]

 

manifest.json의 content_scripts와 web_accessible_resources에 해당 css를 추가해 주면 해당 스타일을 사용할 수 있게 된다.

 

 

그렇게 해서 다음과 같이 꽤나 비슷한 느낌의 메뉴를 만들어 주었다.

 

그다음은 버튼에 기능들을 주었는데 '사용안함' 버튼을 클릭했을 때에는

 

// 사용안함 클릭 시
clearTranslate();

 

기존에 있던 번역을 초기화하는 clearTranslate() 함수를 호출하도록 하였다.

 

한글자막과 한영자막은

 

// 한글자막 클릭 시
subtitleTranslate(false);

// 한영자막 클릭 시
subtitleTranslate(true);

 

기존에 한영 번역을 해주던 subtitleTranslate() 함수에 isKoen 파라미터를 받게 만들어 true, false를 전달하도록 하였다.

그렇게 전달받은 isKoen은

function subtitleTranslate(isKoen) {
	...
    
    if (isKoen) {
      let koreanSubtitle = document.createElement('span');
      koreanSubtitle.className = 'koreanSubtitle';
      koreanSubtitle.style.cssText = 'text-align: center; color: rgb(255, 255, 255);';
      document.querySelector('.video-player--container--YDQRW').insertBefore(koreanSubtitle, document.querySelector('.well--container--2edq4'));
    }
    
    ...
    
    function check() {
    	try {
        	...
            
            if (isKoen) {
              if (document.querySelector('.well--container--2edq4') !== null) {
                document.querySelector('.koreanSubtitle').style.fontSize = document.querySelector('.well--container--2edq4').style.fontSize;
              }
            }
            
            ...
            
            if (isKoen) {
              document.querySelector('.koreanSubtitle').textContent = null;
              subtitleBox.innerHTML = currentText + "<br>" + subtitleBox.innerHTML;
            } else {
              subtitleBox.innerHTML = currentText;
            }
		} catch (e) {
        	...
        }
    }
    
    window.isTranslate = setInterval(check, 200);
}

 

이런 식으로 한글과 영어 자막을 동시에 표시할지 한글 자막만 표시할지 if문을 걸어 수정하였다.

 

 

이제 한글자막 보기와 한영자막 보기를 선택할 수 있게 되었다.

 

 

내가 테스트할 때는 사소한 문제점 말고는 발견되지 않았는데 별 문제가 없이 잘 동작하면 좋겠다.

그리고 그 사소한 문제점들은 내가 할 수 있는 능력 밖이라고 생각하고 수정하지 못할 것 같다...

 

 

 

 

얼른 배우고 능력을 키워서 제대로  된 프로그램을 만들 수 있는 날이 오면 좋겠다.

 

앞으로 더 열심히 노력하자!!!