[크롬확장프로그램] 시놀로지 NAS를 이용한 유튜브 다운로드 2/2

경로 : https://chrome.google.com/webstore/detail/synology-download-station/onhbegdkgonhlokobjefolhpoidcnida
현재버전 : 2.2.13

관련 지식
#chrome #extension #webRequest #synology #download-station #youtube #NAS

이전 글에서 만들었던 확장 프로그램에서 추가한 링크에 다운로드 액션을 적용하기 위해 Synology Download Station 확장 프로그램을 수정해 볼 것입니다. 수정한 프로그램을 개인 용도로 사용 외에 불법 배포는 하지 마시기 바랍니다. 또한 잘못 수정하여 오동작이 발생 할 경우 책임지지 않습니다.

소스 준비

‘크롬 확장 프로그램 .crx 다운로드 및 소스 추출’ 게시물을 참고하여 소스를 준비합니다.

위와 같이 파일이 있으면 준비는 된 것입니다.

options.html 수정

옵션 메뉴에 해당하는 파일입니다. 아래처럼 존재하지 않는 ttp:? 와 ttps:? 타입을 추가할 것입니다.

options.html 파일을 열고 약 190번째 줄에 아래의 추가 시작 부터 추가 끝을 추가합니다.

  <div class="checkbox">
    <label><input type="checkbox" name="openProtocols" value="qqdl://" /> QQDL (qqdl://)</label>
  </div>
  <!------------ 추가 시작 -------------->
  <div class="checkbox">
    <label><input type="checkbox" name="openProtocols" value="ttp:?" /> ttp (ttp:?)</label>
  </div>
  <div class="checkbox">
    <label><input type="checkbox" name="openProtocols" value="ttps:?" /> ttps (ttps:?)</label>
  </div>
  <!------------ 추가 끝 -------------->
</div>

background.js 수정

js/background.js 파일을 열고 아래 내용처럼 ttp:?, ttps:?를 추가합니다.. 약 17번째 줄입니다.

//변경전
openProtocols: ["magnet:?", "ed2k://", "thunder://", "flashget://", "qqdl://"],
//변경후
openProtocols: ["magnet:?", "ed2k://", "thunder://", "flashget://", "qqdl://", "ttp:?", "ttps:?"],

downloadstation.js 수정

js/downloadstation.js 파일을 열고 343번째 줄로 이동하여 아래와 같이 추가/수정 합니다.

DownloadStation.prototype.extractURLs = function (text) {
  var patt = new RegExp("(https?|magnet|thunder|flashget|qqdl|s?ftps?|ed2k|ttp|ttps)(://|:?)\\S+", "ig");  //수정
  var urls = new Array();
  do {
    var result = patt.exec(text);
    if (result != null) {
      var url = result[0];
      if (url.charAt(url.length - 1) === ",")
        url = url.substring(0, url.length - 1);
      //------ 추가
      if(url.indexOf("ttp:?") == 0)
        url = 'http://' + url.substring(5);
      if(url.indexOf("ttps:?") == 0)
        url = 'https://' + url.substring(6);
      //------ 추가 끝
      urls.push(url);
    }
  } while (result != null);
  if (urls.length > 0)
    return urls;
  else
    return [text];
};

variables.js 수정

js/variables.js 파일을 열고 15번째 줄로 이동하여 아래와 같이 추가/수정 합니다.
바로 위에서 수정한것과 동일합니다.

String.prototype.extractUrls = function () {
  var text = this;
  var patt = new RegExp("(https?|magnet|thunder|flashget|qqdl|s?ftps?|ed2k|ttp|ttps)(://|:?)\\S+", "ig");  //수정
  var urls = new Array();
  do {
    var result = patt.exec(text);
    if (result != null) {
      var url = result[0];
      if (url.charAt(url.length - 1) == ",")
        url = url.substring(0, url.length - 1);
      //------ 추가
      if(url.indexOf("ttp:?") == 0)
        url = 'http://' + url.substring(5);
      if(url.indexOf("ttps:?") == 0)
        url = 'https://' + url.substring(6);
      //------ 추가 끝
      urls.push(result[0]);
    }
  } while (result != null);
  if (urls.length > 0)
    return urls;
  else
    return [text];
};

확장 프로그램 적용

모두 수정하고 저장했으면 먼저 기존에 설치된 ‘시놀로지 다운로드 스테이션’ 확장 프로그램을 삭제합니다.

그리고 위의 이미지에서 보이는 버튼을 클릭하여 소스가 있는 디렉토리를 선택하면 추가 됩니다. 추가 한 후에도 소스가 있는 디렉토리는 삭제하면 안됩니다.

먼저 시놀로지 DSM 연결 설정을 저장합니다. ‘테스트 접속’ 버튼을 클릭하면 제대로 설정 했는지 확인하실 수 있습니다.

그리고 좌측에서 ‘그외 설정들’ 메뉴를 클릭하여 ttp, ttps 설정을 확인합니다. 체크박스에 체크가 되어있어도 체크를 풀었다가 다시 체크를 하는게 좋습니다.

기능 확인

이제 유튜브에 접속해서 동영상을 하나 재생해 봅니다. 광고중이더라도 상관없습니다. url 이 https://www.youtube.com/watch?v=블라블라 형태로 호출되었고 왼쪽 상단에 ▼▽ 링크가 보인다면 클릭하면 됩니다. 클릭했을때 아래 이미지처럼 메시지가 나타나면 시놀로지로 들어가서 다운로드 상황을 확인해보시면 됩니다.

정리

말은 복잡했지만 상황은 단순합니다. ‘보고 있는 유튜브의 url을 ttp:?, ttps:? 형태로 링크를 추가-> 확장프로그램에서 해당 타입을 인식하도록 수정’ 이 전부 입니다. 하지만 이제 유튜브를 보다가 이거 저장하고 싶은데? 생각이 들었을때 URL을 복사&붙여넣기 할 필요없이 클릭 한번이면 다운로드가 가능하게 되었습니다.

유튜브외의 다른 사이트에서도 다운로드를 연결하고 싶다면 URL 타입만 맞춰주면 됩니다. 즐거운 다운로드 하세요.

이 확장 프로그램은 제가 만든것이 아니므로 전체 소스를 공개하지 않습니다.