Chrome Extension That Skips YouTube Ads (+Steps How To Create It)
Tags: chrome, extension, javascript, tutorial
Published: 2020-01-02 15:03:54

---
title: Chrome Extension That Skips YouTube Ads (+Steps How To Create It)
published: true
description: 
tags:
- chrome
- extension
- javascript
- tutorial
cover_image: https://thepracticaldev.s3.amazonaws.com/i/63tj9rumor3tomkzth22.png
---

Recently I have created chrome extension called [**My Notes**](https://dev.to/penge/chrome-extension-that-turns-your-new-tab-into-a-note-taking-tool-4c7e) and as it received nice reviews, I have decided to create another one – **Skip Ad.**

I am also adding a tutorial this time, on how to create the extension.

---

# Skip Ad

**Skip Ad** is a simple chrome extension that will skip YouTube ads for you, at https://www.youtube.com, so you can enjoy the content without interruptions.

I chose to create **Skip Ad** as it is something I would like to use personally, and is also simple to create, which makes it suitable to showcase how to create chrome extension.

After this article, you should not only have YouTube "without" ads but also be able to create chrome extension like this one.

---

# Chapters

- [1 How to install **Skip Ad**](#1-how-to-install-skip-ad)
- [2 How **Skip Ad** looks](#2-how-skip-ad-looks)
- [3 How **Skip Ad** works](#3-how-skip-ad-works)
- [4 How to create **Skip Ad**](#4-how-to-create-skip-ad)
  - [4.1 Start by creating a new folder](#41-start-by-creating-a-new-folder)
  - [4.2 Create `manifest.json`](#42-create-raw-manifestjson-endraw-)
  - [4.3 Add icon](#43-add-icon)
  - [4.4 Install extension locally](#44-install-extension-locally)
  - [4.5 Time to **skip the ads**](#45-time-to-skip-the-ads)
  - [4.6 Setting **content script**](#46-setting-content-script)
  - [4.7 Reload the extension](#47-reload-the-extension)
  - [4.8 Test the extension](#48-test-the-extension)
- [5 **Repository**](#5-repository)

---

# 1 How to install **Skip Ad**

The extension can be installed from the Web Store, a place where extensions are published.

**Link:**

https://chrome.google.com/webstore/detail/skip-ad/bimlffinhbdhgpomhngmnhidjgnfcnoc

---

# 2 How **Skip Ad** looks

Once the extension is installed, the following icon appears in the extensions list and the toolbar.

![icon](https://thepracticaldev.s3.amazonaws.com/i/hee31xdop4jeuy452tzn.png)

![toolbar](https://thepracticaldev.s3.amazonaws.com/i/av2xyjs7oz2fau34fcop.png)

If you'd like to hide the icon from the toolbar, right-click the icon and select **Hide in Chrome menu**.

---

# 3 How **Skip Ad** works

After you open YouTube page, the extension will periodically check whether new ads are present and close them for you. If you already had some YouTube page open before the extension was installed, a simple page refresh will do.

The kind of ads that will be closed for you, and normally you would have to close manually by yourself, are shown below.

![video-ad](https://thepracticaldev.s3.amazonaws.com/i/ucy1tknzkzye0uig8me7.png)

**\^\^\^ Video Ad** can be closed with the **Skip Ad** button (single ad is shown), or **Skip Ads** button (multiple ads in the playlist).

![banner-ad](https://thepracticaldev.s3.amazonaws.com/i/y10bft9u5aoj26rdowco.png)

**\^\^\^ Banner Ad** can be closed with the **X** button.

Video Ad and Banner Ad can appear at the beginning of the video, or during the playback.

Buttons that are used to close the ad, are loaded with the ad, but in case of Video Ad, many times displayed after a delay. **Skip Ad** can skip the ad even before the button that closes the ad is shown. As a result, the ad may appear for a quick moment only.

---

# 4 How to create **Skip Ad**

---

### 4.1 Start by creating a new folder

We start by creating a new folder, to hold the extension files.

The name of the folder can be any. Usually, is the same as the name of the extension itself, just in kebab case (also called hyphen case).

**Example:** extension name **Skip Ad** => folder name `skip-ad`

> Can two extensions have the same name, you might ask? The answer is yes.
Two extensions can have the same name, and the same code, still, they both can be installed because their unique **ID** will be different.

For learning purposes, let's call the extension differently – **No More Ad**.

Create a folder `no-more-ad`.

---

### 4.2 Create `manifest.json`

Every file we create from now on will go inside the folder `no-more-ad`.

Every extension **has to have** `manifest.json` file. How you name and organize the other files, that's up to you.

Create `manifest.json` with the following content:

```json
{
  "manifest_version": 2,
  "name": "No More Ad",
  "description": "Skips YouTube Ads.",
  "version": "1.0"
}
```

**Required keys:** `manifest_version`, `name` and `version`. Anything else is optional. More at: https://developer.chrome.com/extensions/manifest.

> You might be surprised, but at this point, we have an extension that can be installed locally.
It won't do anything though, just appear in the list of extensions.

---

### 4.3 Add icon

Download the icon from the [repository](https://github.com/penge/skip-ad/raw/master/icon128.png) and put it inside the `no-more-ad` folder.

Update `manifest.json` to assign the icon.

```json
{
  "manifest_version": 2,
  "name": "No More Ad",
  "description": "Skips YouTube Ads.",
  "version": "1.0",
  "icons": { "128": "icon128.png" }
}
```

Now, as the extension has the icon, it will appear in the extensions list and the toolbar. You can try a different icon later.

---

### 4.4 Install extension locally

Although we have only `manifest.json` file, the extension can be installed already and as we update the code, it can be manually reloaded, which is also a way to test if nothing got broken.

To install the extension, open the **Extensions** list first, either via the menu or by entering `chrome://extensions` into the tab.

Now, click the **Load unpacked** button:

![load-unpacked](https://thepracticaldev.s3.amazonaws.com/i/b97wzqry5oxuxph9jcfq.png)

Navigate to `no-more-ad` folder and click **OPEN**.

After the extension is loaded, you should see the following card: 

![card](https://thepracticaldev.s3.amazonaws.com/i/g1jcqm7or4k13462r5of.png)

The orange icon indicates, the extension is installed locally.

If you have installed **Skip Ad,** disable it temporarily so it doesn't interfere with **No More Ad.**

---

### 4.5 Time to **skip the ads**

Buttons that are used to skip the ads ([3 How **Skip Ad** works](#3-how-skip-ad-works)) have CSS classes that make them easy to find.

**CSS classes:**

```js
// Video Ad; "Skip Ad" or "Skip Ads" button
"ytp-ad-skip-button-text"

// Banner Ad; "X" button
"ytp-ad-overlay-close-button"
```

The code to skip the ads will be fairly simple. It should look for the buttons that can close the ad, and if it finds them, trigger the `click()`.

Create `youtube.js` now:

```js
const click = (clazz) => {
  const buttons = document.getElementsByClassName(clazz);
  for (const button of buttons) {
    button.click();
    console.log("No More Ad");
  }
}

setInterval(() => {
  click("ytp-ad-skip-button-text");
  click("ytp-ad-overlay-close-button");
}, 300);
console.log("No More Ad - Init");
```

You can try the code by opening YouTube and paste it to the console. Then, check some videos. If the ad gets closed, you should see in the console:

```js
"No More Ad"
```

The last step of the puzzle is to get this code to the YouTube page without manually pasting it, that is, via the extension.

---

## 4.6 Setting **content script**

**Content script** can be either css, or js, or both. It is a term that, in other words, adds or modifies (as it can access the **DOM**) the content of the page, where it is inserted.

In our case, we intend to insert earlier created `youtube.js` to the YouTube page.

This step is very easy, as it requires only to update `manifest.json`:

```json
{
  "manifest_version": 2,
  "name": "No More Ad",
  "description": "Skips YouTube Ads.",
  "version": "1.0",
  "icons": { "128": "icon128.png" },
  "content_scripts": [
    {
      "matches": ["https://*.youtube.com/*"],
      "js": ["youtube.js"]
    }
  ]
}
```

We have defined, that any page that **matches** a YouTube page, should include `youtube.js`.

The content script defined via `manifest.json`, is injected **declaratively,** which means, automatically. It is the easiest way of inserting a script to the other page.

Another way how to inject the content script, is **programmatically.** It is more complicated, but also more customizable.

Content scripts run in an isolated environment, therefore, they cannot influence other scripts. What they can do, as mentioned above, is access the **DOM.** And that's exactly what we needed.

More about content scripts is here: https://developer.chrome.com/extensions/content_scripts

---

## 4.7 Reload the extension

The extension we installed in the step [4.4 Install extension locally](#44-install-extension-locally) requires to be reloaded, to apply the changes.

This is easy to do by clicking the reload button.

![card](https://thepracticaldev.s3.amazonaws.com/i/g1jcqm7or4k13462r5of.png)

If everything went well, no **Errors** should be shown.

---

## 4.8 Test the extension

Now, it's time to test the extension. Open a new YouTube page, or reload the existing.

To see that the content script was inserted, visit **Sources:**

![sources](https://thepracticaldev.s3.amazonaws.com/i/l6fbxltsrbexjd7n30dr.png)

In the console you can see:

```js
"No More Ad - Init"
```

Check some YouTube videos. What you should experience is, the ads are getting closed automatically.

Check the console again. For every ad that gets closed, you should see:

```js
"No More Ad"
```

You have now successfully created your extension.

---

# 5 **Repository**

You can check the extension here:

https://github.com/penge/skip-ad

---

I hope you enjoyed the article and learned new.

If you have any questions, I will gladly answer them.

If you'd like to see more tips or tricks, or series on this topic, let me know.

Now, let's enjoy this extension and start 2020 with fewer ads!

Cheers!