Chrome Extension That Skips YouTube Ads: Steps to Create

YouTube ads can be intrusive and disrupt the viewing experience. However, you can create a simple Chrome extension to automatically skip YouTube ads and enjoy uninterrupted video playback. In this article, we will guide you through the steps to create such an extension. Let’s get started!

Prerequisites

Before we begin, make sure you have the following prerequisites:

1. Google Chrome browser: Install the latest version of Google Chrome on your computer.
2. Basic understanding of HTML, CSS, and JavaScript: Familiarity with these web technologies will be helpful for creating the extension.

Step 1: Set Up the Project

To create a Chrome extension, follow these steps:

1. Create a new directory for your extension project. Choose a meaningful name for the directory.
2. Inside the project directory, create the following files:
   • manifest.json: This file contains metadata about the extension and defines its behavior.
   • contentScript.js: This file will contain the JavaScript code to skip the YouTube ads.
   • styles.css (optional): This file can contain CSS styles for modifying the appearance of the extension.

Step 2: Configure the Manifest

The manifest.json file is crucial for defining the extension’s behavior and permissions. Open the manifest.json file and add the following content:

{
  "manifest_version": 2,
  "name": "YouTube Ad Skipper",
  "version": "1.0",
  "description": "Skip YouTube ads automatically.",
  "permissions": ["tabs", "http://*/*", "https://*/*"],
  "content_scripts": [
    {
      "matches": ["*://*.youtube.com/*"],
      "js": ["contentScript.js"],
      "run_at": "document_end"
    }
  ],
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html",
    "default_title": "YouTube Ad Skipper"
  },
  "icons": {
    "16": "icon.png",
    "48": "icon.png",
    "128": "icon.png"
  }
}

The above manifest configuration sets the extension name, version, description, and required permissions. It also defines a content script (contentScript.js) to be injected into YouTube pages and a browser action with an icon (icon.png).

Step 3: Implement the Content Script

The content script is responsible for detecting and skipping YouTube ads. Open the contentScript.js file and add the following code:

// Skip YouTube ads
function skipAds() {
  const adSkipButton = document.querySelector('.ytp-ad-skip-button');
  const adOverlay = document.querySelector('.ytp-ad-overlay-close-button');

  if (adSkipButton) {
    adSkipButton.click();
  } else if (adOverlay) {
    adOverlay.click();
  }
}

// Run the ad skipping function when the page loads or when the video changes
function runAdSkipper() {
  skipAds();
  const videoContainer = document.querySelector('.html5-video-container');

  if (videoContainer) {
    const observer = new MutationObserver(skipAds);
    observer.observe(videoContainer, { childList: true, subtree: true });
  }
}

// Execute the ad skipping logic
runAdSkipper();

The code above defines the skipAds function that checks for the presence of the ad skip button or the ad overlay close button on YouTube pages. If either is found, it simulates a click to skip the ad.

The runAdSkipper function is responsible for running the skipAds function when the page loads or when the video changes. It also utilizes the MutationObserver to detect changes in the video container and trigger the ad skipping process.

Step 4: Add CSS Styling (Optional)

If you want to modify the appearance of the extension’s popup, open the styles.css file and add your desired CSS styles.

Step 5: Load the Extension in Chrome

To load your extension in Chrome, follow these steps:

1. Open Google Chrome and navigate to chrome://extensions in the address bar.
2. Enable the Developer mode toggle switch located in the top right corner of the page.
3. Click the Load unpacked button and select the directory containing your extension project.
4. Your extension should now be loaded and active.

Step 6: Test the Extension

To test the extension, open YouTube in a new tab and start watching a video. The ads should be automatically skipped as soon as they appear. You can also click on the extension’s icon in the Chrome toolbar to access the extension’s popup (if you defined one).

Congratulations! You have created a simple Chrome extension that skips YouTube ads. You can further enhance the extension by adding additional features or refining the ad skipping logic as per your requirements.

Please note that YouTube frequently updates its platform, and the ad skipping logic implemented in this tutorial may become outdated over time. Ensure you adapt the code as needed to match any changes to the YouTube website structure.

Happy ad-free YouTube viewing!