Pavel Bucka
Chrome Extension that can Skip YouTube Ads

Chrome Extension that can Skip YouTube Ads

Pavel Bucka's photo
Pavel Bucka
·

0 min read

A simple Chrome Extension, Skip Ad, can help you to automatically close the video ads on YouTube, hide the video overlay ads (look like banners) and ads in the column next to the video.

In comparison to adblockers (although not a replacement), it allows ads to be loaded so content creators can be compensated. It is also a much simpler solution that works fine for YouTube.

Check it out here:

– Download link

– Repository link

As Skip Ad is a really simple Chrome Extension, I would like to show you how to create it. (for learning purposes, we will call it No More Ad)

1. Create a new folder

mkdir no-more-ad
cd no-more-ad

2. Add manifest.json

manifest.json is a required file that sets the extension name, description, version, and more, to put things together.

touch manifest.json

Now, edit the file to contain:

{
  "manifest_version": 2,
  "name": "No More Ad",
  "description": "Automatically closes YouTube ads.",
  "version": "1.0"
}

To learn more about the file, check the documentation.

3. Add an icon

Usually, extension has an icon that is displayed in the extensions list and the toolbar.

icon128.png

toolbar.png

To use the same icon as Skip Ad has, download icon128.png from the Repository and put it inside the directory.

Now, update manifest.json to use the icon:

{
  "manifest_version": 2,
  "name": "No More Ad",
  "description": "Automatically closes YouTube ads.",
  "version": "1.0",
  "icons": { "128": "icon128.png" }
}

To learn more about the icons, check the documentation.

4. Add logic to skip / close ads

Prepare two files:

touch youtube.js
touch youtube.css

Now, if you take a closer look at YouTube page, you'll find out that video ads can be closed with Skip Ad or Skip Ads buttons. All is needed to close the ad, is to click the button when found. Edit youtube.js:

setInterval(() => {
  for (const button of document.getElementsByClassName("ytp-ad-skip-button")) {
    button.click(); // "Skip Ad" or "Skip Ads" buttons
  }
}, 300);

To hide the video overlay ads and ads in the column next to the video, a simple CSS works. Edit youtube.css:

.ytp-ad-overlay-container, #player-ads {
  display: none !important;
}

Test the script and styles manually by inserting them to YouTube page.

5. Define content_scripts

Content scripts are files that run in context of web pages (more in documentation). In our case, we would like to automatically insert files from previous step to YouTube pages. To do so, update manifest.json:

{
  "manifest_version": 2,
  "name": "No More Ad",
  "description": "Automatically closes YouTube ads.",
  "version": "1.1",
  "icons": { "128": "icon128.png" },
  "content_scripts": [
    {
      "matches": ["https://*.youtube.com/*"],
      "css": ["youtube.css"],
      "js": ["youtube.js"]
    }
  ]
}

6. Load the extension

The extension is now complete. To load the extension, open chrome://extensions/. Next, click the Load unpacked button and open no-more-ad folder.

7. Test the extension

If you open YouTube page, the ads should be skipped / closed.

To check that content scripts were loaded, see Inspect -> Sources -> Content scripts in case of javascript, and Inspect -> Elements -> Styles for styles.

Final words

Congratulations! You have now created your own Chrome Extension! :)

Resources

extensionJavaScriptShowHashnodechrome