유튜브와 여러 줄의 JS 코드를 통한 생산성 향상

유튜브는 우리가 거의 모든 것을 찾을 수 있는 좋은 플랫폼이다.불행하게도, 이것은 우리가 제안한 내용이나 광고에 신경을 쓰기 쉽기 때문에 엄청난 시간 낭비이다. 만약 우리가 여전히 그것을 가장 효율적인 방식으로 사용하고 싶다면, 구독이나 고급 확장 브라우저에 추가 비용을 지불하지 않아도 된다. 어떻게 해야 합니까?이 문제는 매우 간단한 해결 방안이 하나 있다!너는 단지 몇 줄의 코드만 있으면 광고와 주의력을 분산시키는 내용에서 벗어날 수 있다.

이 강좌는 Firefox 웹 브라우저를 중점적으로 소개하지만, 당신은 여전히 서로 다른 웹 브라우저에서 거의 같은 기술을 응용할 수 있습니다.

웹 브라우저 확장
이게 어떻게 된 일입니까?대부분의 유행하는 웹 브라우저는 우리가 추가 플러그인을 추가할 수 있도록 한다. 다시 말하면 확장 플러그인이다.네가 짐작할 수 있는 바와 같이, 이것은 추가 스크립트로, 선택한 사이트나 그 어떠한 사이트의 백엔드에서 실행할 수 있다.우리의 예에서, 우리는 스크립트가 유튜브를 방문할 때 실행되기를 바란다.우리가 계속 확장 자체를 만들기 전에, 우리는 이 문제를 해결해야 한다.
YouTube
먼저, 우리가 유튜브 홈페이지를 방문할 때 커다란 격자를 볼 수 있다. 그 안에 몇 십 개의 추천 영상이 있어 우리의 주의를 끌 수 있고 때로는 우리를 잘못된 곳으로 데려가기도 쉽다.)우리 먼저 그 원소를 제거합시다.유튜브 홈페이지로 이동해 settings=>WebDeveloper=>WebDeveloper Tools 또는simplyCTRL+SHIFT+I를 클릭하고'요소 선택'버튼이나CTRL+SHIFT+C를 눌러라.그것은 웹 사이트의 주어진 항목에 멈추기만 하면 코드에서 쉽게 찾을 수 있게 할 것이다.다음 단계는 원소에 대한 특수한 태그 이름, id, 클래스 속성을 찾아서 숨기는 것입니다.이러한 클래스 이름과 ID는 시간이 지날수록 바뀔 수 있으므로 당시의 정확한 이름이 무엇인지 스스로 확인하는 것이 좋다.나의 예에서 본문을 작성할 때 격자를 가진 요소는 ytd-rich-grid-renderer라는 표기명이 있다.그리고 console 옵션 카드(CTRL+SHIFT+K)를 누르고 다음 코드 줄document.querySelector("ytd-rich-grid-renderer").style.display = 'none';을 작성하십시오.enter를 누르면 격자 요소가 보이지 않습니다.

광고.
자, 앞부분에서 격자 요소를 벗어날 수 있는 방법을 찾았는데 광고는요?알다시피 광고마다 건너뛰기 버튼이 필요하지만, 이 버튼은 적어도 5초 전에는 클릭할 수 없을 수도 있다.이 문제에 또 다른 비결이 있다.너도 비디오 플레이어를 검사할 수 있다. 이 버튼이 계속 거기에 있다는 것을 곧 발견할 수 있지만, 그것은 한동안 숨겨져 있다.우리는 심지어 그것을 볼 필요도 없고, DOM 조작을 사용하면, 그것을 표시하지 않고 클릭할 수 있다.본문을 작성할 때 이 단추의 클래스는 ytp-ad-skip-button이기 때문에 광고를 볼 때마다 컨트롤러를 열고 아래 코드 줄document.querySelector(".ytp-ad-skip-button").click();을 호출하면 광고가 사라지지만 추천하는 영상을 볼 수 있습니다.삭제하는 과정은 격자를 삭제하는 것과 매우 비슷하기 때문에 컨트롤러로 돌아가서 다음 코드 줄 document.querySelector("#secondary-inner").style.display = "none"; 을 입력하면 제안된 비디오 표시줄이 사라질 것입니다.
모든 것이 정상이다.그러나 우리는 광고를 보는 것보다 더 많은 시간을 들여 모든 조작을 한 번 또 한 번 호출해야 한다. 이 과정을 자동화하는 방법을 찾아야 한다. 확장이 도움이 될 것이다.그 순간부터 Firefox를 위한 확장 방식을 엄격히 따를 것입니다. 그러나 Chrome의 경우 이 과정은 매우 비슷해 보입니다.따라서 먼저 새 폴더를 만들고 필요에 따라 이름을 지정한 다음 이 폴더에 두 개의 파일을 만듭니다

선적 명세서.json

스크립트.js

선창을 열다.json과 VS 코드 또는 기타 코드 편집기, 심지어는 수첩도 가능합니다.이 파일에서 JSON 객체를 작성해야 합니다. 여기에는 적어도 다음 속성이 포함되어 있습니다.

{
  "manifest_version": 2,
  "name": "nameForYourExtension",
  "version": "1.0",

  "description": "Removes ads and recommended videos from YouTube",

  "content_scripts": [
    {
      "matches": ["*://*.youtube.com/*"],
      "js": ["script.js"]
    }
  ]
}

선적 명세서 안에 있습니다.json, 스크립트가 실행될 주소와 먼저 일치하고, 두 번째 줄에서 자바스크립트 코드로 파일을 연결합니다.
그게 다야.제이슨, 이제 스크립트로 넘어갈게요.js 파일은 다음과 같습니다.

setInterval(() => {
  (async function () {
    const skipBtn = await document.querySelector(".ytp-ad-skip-button");
    skipBtn.click();
  })();

  (async function () {
    const grid = await document.querySelector(
      "ytd-rich-grid-renderer"
    );
    grid.style.display = "none";
  })();

  (async function () {
    const side = await document.querySelector("#secondary-inner");
    side.style.display = "none";
  })();
}, 500);

보시다시피 유튜브를 조회할 때 500밀리초에 한 번씩 호출되는 간격을 설정할 것입니다. 이 코드에는 3개의 IFFE 비동기 함수가 있고, 함수마다 하나의 단독 요소를 책임집니다.코드는 매우 간단합니다. 우리는 비동기 함수를 사용합니다. 때때로 일부 요소는 잠시 후에 불러올 수 있기 때문에 안전을 위해서 주어진 요소가 불러올 때까지 기다리는 것이 좋습니다.일단 우리가 그것을 가지게 되면, 우리는 그것들 중 하나하나에 대해 DOM 조회를 실행할 수 있다.
이제 우리의 새로운 확장을 테스트할 때입니다. Firefox에 들어가서 settings=>Add-ons Manager(CTRL+SHIFT+A)를 누르고 Gear 단추를 누르고 Debug Add-ons 옵션을 선택하십시오.그런 다음 임시 로드 항목 로드라는 버튼이 있는 새 탭을 볼 수 있습니다.이 단추를 누르면 불러오는 항목을 만드는 폴더로 이동하고 목록을 열 수 있습니다.json 파일.이제 모든 게 정상이야, 유튜브 광고나 추천 영상을 켤 때마다 사라져야 해!:)현재 유일한 문제는 Firefox의 공식적이고 승인된 추가 구성 요소가 아니기 때문에 Firefox를 열 때마다 임시 추가 프로그램을 반복해야 한다는 것이다.추가 구성 요소를 Firefox에 배치하는 것은 무료이기 때문에 계정을 만들고 확장자를 발표할 수 있습니다.

요약
현재 당신은'공짜 유튜브 구독'을 마음대로 누릴 수 있다. D는 불행하게도 Firefox에 발표하더라도 이 플러그인은 언젠가는 새로운 클래스나 다른 업데이트로 인해 작동을 멈출 수 있고, 다른 하나는 공식 유튜브 앱과 함께 일하지 않을 수도 있다는 단점이 있다.코드를 마음대로 수정하거나 새로운 기능까지 추가할 수 있다.우리가 끝내기 전에 잠재적인 질문에 대답합시다. 이미 많은 추가 구성 요소가 사용되고 있는데, 우리는 왜 신경을 써야 합니까?두 가지 이유가 있다. 첫 번째는 학습 목적과 자신의 마운트 항목을 만드는 만족감이다. 두 번째는 안전 문제이다. 모든 마운트 항목을 신뢰해서는 안 된다. 왜냐하면 현재 우리는 코드에 무엇이 포함되어 있는지 영원히 확정할 수 없기 때문이다.