※ 공개적으로 게시되었습니다!
https://chrome.google.com/webstore/detail/view-thumbnail/oigidjlokngbamfahkkadombdbpageoc
view thumbnail
Popup youtube thumbnail playing now.
chrome.google.com
만든 동기는 이렇다.
유튜브 보다가 가끔 댓글로 썸네일 관련 이야기가 나온다. 근데 썸네일이 어떤거였는지 얘기할 때가 있는데 기억이 안나서 다시 뒤로가기를 해야하나.. 하는 불편함이 있다.
그래서 공부도 할 겸 누르면 썸네일이 나오는 간단한걸 만들어 보기로 했다.
그러러면 유튜브에서 썸네일이 어떻게 되어있는지 대충 알아야 한다.
https://developers.google.com/youtube/v3/docs/videos/list
Videos: list | YouTube Data API | Google Developers
Videos: list API 요청 매개변수와 일치하는 동영상의 목록을 반환합니다. 지금 사용해 보거나 예를 참조하세요. 요청 HTTP 요청 GET https://www.googleapis.com/youtube/v3/videos 매개변수 아래 표는 이 쿼리가 지
developers.google.com
유튜브용 api로 불러오면 썸네일 주소 구성을 알 수 있다. 지금까지 hqdefault.jpg가 없는 영상은 못 봤고, maxresdefault.jpg는 영상마다 있을수도 있고 없을수도 있다.
그래서 그냥 https://i.ytimg.com/vi/${url_match[1]}/hqdefault.jpg 으로만 출력하게 하면 끝이다.. 하지만 두 사진의 화질차이가 좀 있다.
https://www.youtube.com/watch?v=5LUrDs255Pc
지금은 이미지를 키워서 보여주지만, 이 사진을 줄여서 봐도 화질이 깨진게 좀 보인다.
난 만족못한다. resmaxresult.jpg가 있다면 그대로 보여주고 싶다. 또 resmaxresult.jpg는 용량이 hqdefault.jpg보다 상대적으로 크다보니 버튼을 누르면 묘하게 끊기는 느낌이 든다. 그래서 처음엔 hqdefault.jpg를 띄워서 보여주고, resmaxresult.jpg가 불려지면 그걸 띄워주는 방식으로 하려고 했다. 즉 사용자는 그냥 버튼만 누르면 나오고, 이런 세부내용은 몰라도 된다!!
그래서 없는 영상으로 주소를 보내면 error 같은게 나와서 예외처리를 하고 싶었는데 그게 안되고 에러 이미지를 출력하는 방식으로 된다.
얘를 어떻게 처리해야 하는가.. 는 일단 이미지를 불러오는데 maxresultdefault.jpg의 이미지 크기는 다운받으면 1280*720의 크기가 된다. 그래서 이미지 크기가 1280가 아니면 hqdefault.jpg에서 끝난다. 관련 내용을 밑에 적어둠.
유용한 사이트를 발견했다. 원래 코드 바꿀때마다 새로고침 했었는데 이 사이트로 하니까 html, css, js까지 모두 한번에 변화 관찰 가능.
https://jsbin.com/duyolotisu/1/edit?html,css,js,console,output
JS Bin
Sample of the bin:
jsbin.com
이미지가 없을시 onerror를 사용하는게 제일 많던데 안의 내용을 자바스크립트로 작성해도 아래 문제들 때문에 적용이 안됨.
XMLHttpRequest을 활용한 request점검 -> cors 관련 에러
또 404에러가 뜨긴 하지만 이미지가 있다고 판단해서 에러로 종료되는게 아니라 실패용 이미지를 불러와서 try catch도 안됐다.
request등 다른것들도 관련 에러가 뜨는데 아니 그냥 img.src로 하는건 그냥 되던데 왜 이런 고민을 하지? 하던 도중 내가 고민하는걸 똑같이 치니까 똑같은 고민을 하고 이미지 크기로 해결한게 보였다.
https://stackoverflow.com/questions/23177908/detecting-missing-video-youtube-image
Detecting "Missing Video" Youtube Image
Greetings from a future caveman, I load a lot of youtube thumbnails on my page. They load from thumbnail urls I have in my db. From time to time the video in question is changed or deleted by the
stackoverflow.com
그래서 그대로 적용함.
var thumbnail_box = document.getElementById("thumbnail_box");
chrome.tabs.query({ active:true, currentWindow: true}, tabs => {
var video_url = tabs[0].url;
url_match = video_url.match(/watch\?v=([^&]*)/);
var hq_url = `https://i.ytimg.com/vi/${url_match[1]}/hqdefault.jpg`;
var max_url = `https://i.ytimg.com/vi/${url_match[1]}/maxresdefault.jpg`;
img_tag = document.createElement("img");
img_tag.src = hq_url;
thumbnail_box.appendChild(img_tag);
check = document.createElement("img");
check.src = max_url;
console.log(check.width);
if (check.width != 120){
img_tag.src = max_url;
img_tag.style.top = '0px';
img_tag.width = 480;
img_tag.height = 270;
}
});
지금 내놓고 심사중인데 내가 만든 check.width != 120 예외가 먹힐때가 있고 안먹힐때가 있다. 일단 등록심사 나면 고치고 다시 업데이트하면 어떻게 될지 궁금해서 일부러 안고치는 중.
===== 1차 제출 시도 =====
결과: 실패함
https://developer.chrome.com/docs/webstore/program_policies/#content_policies
여기 부분인것 같다. 제목에 youtube가 직접적으로 들어가고 아이콘에도 유투브 로고가 들어가 있어 마치 유투브에서 직접 만든듯한 행위인것 같다.. 그런 내용인 것 같다. 혹시나해서 아이콘도 직접 그림판같은걸로 그렸는데..
제목 바꾸고, 로고 바꾸고, 썸네일 가끔 못불러오는 버그 고치고 다시 내봐야 겠다.
===== 2차 시도 ======
일단 썸네일 이미지를 바꿨다. 이거때문에 안된다고 했으니까..
코드도 좀 바꿨다. 그냥 popup을 누르면 hqdefault.jpg는 용량이 낮지만 maxresdefault.jpg는 용량이 높아 다 로드하기 전에 정보를 뽑아내서 오류가 있었다. 그래서 settimeout으로 간단하게 테스트 해보고 찾아보니 onload가 있길래 이걸로 진행했다. 일단 hqdefault.jpg를 보여준 다음 만약 영상에 maxresdefault.jpg가 있으면 그걸 보여주는 식으로.
var thumbnail_box = document.getElementById("thumbnail_box");
chrome.tabs.query({ active:true, currentWindow: true }, tabs => {
var video_url = tabs[0].url;
url_match = video_url.match(/watch\?v=([^&]*)/);
var hq_url = `https://i.ytimg.com/vi/${url_match[1]}/hqdefault.jpg`;
hq_tag = document.createElement("img");
hq_tag.src = hq_url;
thumbnail_box.appendChild(hq_tag);
var max_tag = new Image();
max_tag.src = `https://i.ytimg.com/vi/${url_match[1]}/maxresdefault.jpg`;
max_tag.onload = function() {
if (max_tag.width == 1280) {
max_tag.width = 480;
max_tag.height = 270;
max_tag.style.top = '45px';
thumbnail_box.appendChild(max_tag);
}
}
});
결과
문제 없었는지 제대로 출시되었다!
수정할 게 생각나면 수정하자