html css 공부하다가 '아 씨.. 이놈의 관련동영상 안보이게 할 수 없을까? 코멘트 먼저 보고싶은데..' 하다가 나온 결과물이에요..




https://chrome.google.com/webstore/detail/youtube-related-videos-re/pnllijckhhmdphamnkihmigimjegedle



Youtube Related Videos Remover (이름 짓기가 가장 어려웠어요.. 지금도 바꿔야될거같은기분)


말 그대로 유튜브 관련 동영상을 삭제해주는 목적으로 탄생한 확장프로그램인데..


하다보니 재미있어서 이것저것 기능을 더 추가하게 됐어요!



유튜브 쇼케이스에 이미 다 나와있지만 아무튼 기능소개:


1. 유튜브 가로모드 기준 오른쪽, 세로모드 기준 하단의 관련 동영상들(흔히 말하는 알고리즘 뭐시기)을 가려줍니다!

이건 단순히 display를 none으로 바꾸는 아주 단순한 것..


2. 유튜브 Shorts 인터페이스가 하도 맘에 안들어서.. 유튜브 Shorts 링크를 기존 유튜브 레이아웃으로 바꿔줍니다!

이거도 사실 그냥 유튜브 shorts url을 유튜브 watch url로 바꿔주는 간단한 것...


3. 유튜브 플레이어의 position을 fixed로 바꿔서 스크롤을 내려서 코멘트를 보면서 동시에 동영상도 보게 해줍니다!

4. 확장프로그램 팝업에 팝캣을 추가해봤어요! 누르면 소리가 나옴!

어떻게 하면 소리랑 이미지를 불러올 수 있을까 하는 공부 차원에서 넣어봤어요..

patreon은 무시해주세요.. 엄청 유명한 확장프로그램들 하는거 보고 멋있어서 저도 넣어봤는데.. 부끄럽네요..


5. PIP 버튼!

사실 pip는 이미 유튜브 플레이어 두번 우클릭하면 온오프 할 수 있기도 하고, Google이 이미 pip 확장프로그램을 만들어놨기도 한데..

저는 이걸 DOM에 한번 집어넣어서 한번 클릭으로 바로 pip가 되게끔 해보고싶었어요.




.. 글 쓰고 보니까 엄청 허접하게 보이기도 하고.. 버그도 많고.. 3번 기능 보면 네비게이션바라든지 그런게 따로 놀고 있고..

아무튼 되게 부끄럽네요..


깃갤 처음인데 좋은 스타트일지 모르겠습니다..


혹시 사용하시다가

'어 이거 이케하면 더 좋을것같은데여' 라든지..

'님 왜 이렇게 만듬? 이렇게 말고 이렇게 하면 더 괜찮지않음?' 이라든지..

'이거 한번 넣어볼 생각 없음?' 이라든지..

'님 코드 보니까 존나 지저분한테 빨리 뒤지기 싫으면 보기 좋게 바꾸세요' 라든지..


모든 피드백을 감사히 받고 있으니.. 부디 거리낌 없이 제게 발전할 기회를 주셨으면 좋겠습니다.. 미리 감사합니다!

프론트 공부 열심히 하겠습니다! 잘부탁드립니다!