초보 개발자 질문합니다ㅠㅠ

Question

안녕하세요 올해 고2된 고삐리입니다 이번에 학교 땜시 4월 1일 까지 프로그램 하나를 맡게되었는데요 유튜브에서 숏츠 관련 영상을 추천하거나 클릭하지 못하게 하려고합니다 일단 생각해둔 건 1.유튜브 미러링 사이트를 만들고 숏츠 추천X 2.크롬 확장프로그램으로 숏츠 추천X 인데1은 아예 현실성이 없고 2는 그나마 할만해 보이는데 아예 시작도 못하겠습니다. 혹시 더 나은 방법이 있을지 궁금하고 없다면 확장프로그램으로 만들 갈피를 잡고 싶습니다 비주얼 스튜디오 사용 중이고 C언어 구조체 까지 가능하고 자바스크립트랑 파이썬 야메로 가능합니다.

kenu,전독시 · Answer

유튜브에서 숏츠 추천을 막기 위한 크롬 확장 프로그램을 만들기 위해서는, 확장 프로그램이 유튜브 페이지에서 실행될 때 특정 요소를 찾아 제거하거나 비활성화하는 코드를 작성해야 합니다. 이를 위해 크롬 확장 프로그램의 기본 구조를 이해하고, 특정 요소를 찾고 조작하는 방법을 알아야 합니다.크롬 확장 프로그램 매니페스트 파일 생성: 크롬 확장 프로그램은 manifest.json 파일을 통해 정의됩니다. 이 파일에서 확장 프로그램의 이름, 버전, 권한, 콘텐츠 스크립트 등을 정의합니다.콘텐츠 스크립트 작성: 콘텐츠 스크립트는 페이지의 DOM에 접근하여 원하는 요소를 조작할 수 있습니다. 이 스크립트에서 유튜브 숏츠 추천을 막기 위해 해당 요소를 찾아 제거하거나 비활성화하는 코드를 작성합니다.요소 찾기 및 조작: 콘텐츠 스크립트에서 document.querySelector 또는 document.getElementById 등의 메서드를 사용하여 숏츠 추천 요소를 찾습니다. 찾은 요소를 제거하거나 비활성화하는 코드를 작성합니다.아래는 간단한 예시 코드입니다. 이 예시는 유튜브 페이지에서 숏츠 추천 요소를 찾아 제거하는 기본적인 방법을 보여줍니다. 실제 코드는 유튜브의 웹 구조에 따라 달라질 수 있으므로, 실제 요소의 선택자를 찾아 적절히 조작해야 합니다.// manifest.json { "manifest_version": 2, "name": "YouTube Shorts Blocker", "version": "1.0", "permissions": ["activeTab"], "content_scripts": [ { "matches": ["*://www.youtube.com/*"], "js": ["contentScript.js"] } ] } // contentScript.js document.addEventListener('DOMContentLoaded', function() { // 예시: 숏츠 추천 요소의 선택자를 찾아 제거합니다. // 실제 선택자는 유튜브의 웹 구조에 따라 달라질 수 있습니다. var shortsRecommendation = document.querySelector('.shorts-recommendation-selector'); if (shortsRecommendation) { shortsRecommendation.parentNode.removeChild(shortsRecommendation); } }); 이 코드는 유튜브 페이지가 로드될 때 실행되며, 숏츠 추천 요소를 찾아 제거합니다. 실제 웹 구조에 따라 선택자를 찾아 조정해야 합니다. 또한, 이 코드는 단순한 예시이며, 실제 확장 프로그램 개발에는 더 복잡한 로직과 에러 처리가 필요할 수 있습니다.from: https://www.phind.com/search?cache=yydj1e5fmccwtwxvkwqxyw4j그런데 말입니다. 추천 못누르게 하는 숏츠 예시 하나 알려 주실 수 있나요?

비정규분포 · Answer

거저 먹으실거 같은디... 누가 해줬다고 말하지 마세요 ㅎㅎhttps://en.wikipedia.org/wiki/UBlock_Originhttps://github.com/gorhill/uBlock/wiki/Element-picker###like-button > .ytd-reel-player-overlay-renderer.style-scope

풍월상신(가니메디안) · Answer

리얼타임 유튜브 미러링은 불가능하기도 하고 배우는 입장에서 시도할 만한 일은 아닌 것 같습니다.옵션2 에서...확장프로그램 이외에도,파폭은 greaseMonkey크롬은 tamperMonkey 라는 추가 옵션이 있습니다.이 역시 브라우저 익스텐션이지만,해당 몽키 스크립트(브라우저 익스텐션으로 공식배포중임) 을 설치하면,[특정 도메인] 에 대한 [사용자정의 JS] 를 지정하고 제어할 수 있습니다.정식 브라우저 익스텐션과 다른 점이라면, service_worker 나 익스텐션 등록까지 직접 접근할 필요가 없다는 것 이죠.작동 원리는,먼저 탬퍼몽키 익스텐션을 설치한 브라우저에서,사용자 정의 JS 스크립트를 설치한다면,사용자가 접속한 사이트에서 사용자 정의 JS 가 작동한다는 것입니다.이 때, 사용자 정의 JS 는, app 처럼 자동 업데이트도 지원됩니다.예를 들면,유튜브에서 특정 영상의 thumbUp 버튼의 html 코드는

이렇게 잡히는데,별도의 service_worker 작업 없이도, 아래와 같은 monkey script 에서 작성한 코드가 youtube.com 도메인의 모든 페이지에서 작동하게 되는 것이죠. (물론, 몽키스크립트 익스텐션과 사용자 정의 JS 코드가 설치된 브라우저에서만 적용됩니다.)const thumbUpBtn = document.querySelectorAll(".yt-spec-touch-feedback-shape__fill")thumbUpBtn.addEventListener("click", (e) => { e.preventDefault(); return new error("ThumbUp not allowed");} )이런 코드가 youtube.com 에서 작동하게 됩니다.그리고 특정 블럭이 출력되는 걸 막고 싶다면,const blockArea = document.querySelectorAll(".yt-spec-touch-feedback-shape__fill")blockArea.style({ display: none });또는blockArea.html("This content is blocked for our project.");이런 식으로 처리하면 되겠죠.익스텐션으로 처리해도 어차피 엔드단에서 처리되는 코드는 같을 것이지만,익스텐션과 몽키 스크립트의 차이라면, '몽키스크트는 이미 설치된 익스텐션의 권한에 얹혀져서 실행된다'정도의 차이일 것입니다. (몽키만의 저장소가 있습니다. 나중에 관심이 생기면 알아보세요.)현실적으로 2주? 남짓동안 익스텐션 루트는 어려워 보이는데요.몽키스크립트로 과제의 범위를 좁히고, 좁혀진 과제 내에서 집중하시는게 최선일 것 같습니다.

초보 개발자 질문합니다ㅠㅠ

3개의 답변

Q&A 목록