Tuan Anh Phung's Blog

Chrome extension in 3 lines of code → remove YT Recommended videos

Chrome extension in 3 lines of code → remove YT Recommended videos

Tuan Anh Phung's photo
Tuan Anh Phung
·

2 min read

Have you ever find yourself going to youtube to see what's new and you end up just watching recommendation videos and once you realized you have seen already a several of them?

Make it hard for yourself to procrastiate

I fell into this situation many times, where at the evening I would spend most of my time browsing and watching youtube recomemded videos. I decieded to try out blocking the home screen and I have noticed that it limited my procrastination on youtube.

I found this chrome extension which does really good job.

image.png

In this article I want to show you how you can write a simple chrome extenion. Which can block your recommendation list of videos in a 3 simple lines.

We can define our script in content.js where the magic will hapen.

What we need to do is go into inspector and find the DOM which contains the list of recommended videos

image.png

This is the path to the selector we are searching for

#page-manager > ytd-browse > ytd-two-column-browse-results-renderer

The coding part

Now we can start the coding part. What we need to do is get the DOM which contains the list of recommended videos and then remove it.

// content.js

// Element which contains recomended videos on home page
// you can inspect this in inspector
const recommendedVideos = "ytd-two-column-browse-results-renderer";

// Use querySelector to save the DOM element to const
const procrastinationVideos = document.querySelector(recommendedVideos);

// Removing the DOM element with recommended videos
procrastinationVideos.remove();

We can even simplefy into a single line

// same thing, but in a single line
document.querySelector("ytd-two-column-browse-results-renderer").remove();

Manifest.json

The second part of this is to define the manifest.json. You can think of it as a package.json for your application.

// manifest.json

{
  "manifest_version": 2,
  "name": "Hide recommended youtube videos",
  "version": "1.0.0",
  "content_scripts": [
    {
      "run_at": "document_end",
      "matches": ["https://www.youtube.com/"],
      "js": ["content.js"]
    }
  ]
}

How to test your extension locally

image.png

Tadaaa → once you go to youtube url the extension will hide the recommended videos

image.png