Creating a YouTube Ad-Skipper Chrome Extension: A Detailed Tutorial

Welcome to this detailed tutorial on creating a YouTube ad-skipper Chrome extension! In this guide, we'll walk you through the steps to build an extension that waits for the "Skip Ad" button to be visible before clicking it, helping you skip YouTube ads seamlessly.

Prerequisites

Before you start, ensure you have the following:

• Basic knowledge of JavaScript.

• Google Chrome installed on your computer.

• A code editor (e.g., Visual Studio Code).

1. Setting Up Your Project

First, we need to set up the project directory and files.

Create the Project Directory

1. Create a new directory for your project:

mkdir youtube-ad-skipper
cd youtube-ad-skipper

2. Inside this directory, create the following files and folders:

youtube-ad-skipper/
├── content.js
├── manifest.json
└── icons/
    ├── icon16.png
    ├── icon48.png
    └── icon128.png

Create the Manifest File

The manifest.json file contains metadata about your extension. Here’s the content for a manifest version 2 extension:

{
    "manifest_version": 2,
    "name": "no-ads",
    "version": "1.0",
    "description": "It does what you think it does.",
    "permissions": [
        "https://*.youtube.com/"
    ],
    "content_scripts": [
        {
            "matches": [
                "*://*.youtube.com/*"
            ],
            "js": [
                "content.js"
            ],
            "run_at": "document_end"
        }
    ],
    "icons": {
        "16": "icons/icon16.png",
        "48": "icons/icon48.png",
        "128": "icons/icon128.png"
    }
}

Create content.js

This script will check for the "Skip Ad" button and click it when it appears. Save the following JavaScript code in content.js:

// Function to click the "Skip Ad" button if it appears and is visible
function clickSkipAdButton() {
    const skipButton = document.querySelector('.ytp-skip-ad-button');

    if (skipButton && isElementVisible(skipButton)) {
        setTimeout(() => {
            skipButton.click();

        }, getRandomDelay());
    }
}

// Function to check if an element is visible
function isElementVisible(element) {
    const style = window.getComputedStyle(element);
    return style.display !== 'none' && style.visibility !== 'hidden' && style.opacity !== '0';
}

// Function to get a random delay between 1 and 3 seconds
function getRandomDelay() {
    return Math.floor(Math.random() * 2000) + 1000;
}

// Run the function every second to check for the "Skip Ad" button
setInterval(clickSkipAdButton, 1000);

Create Icons

You’ll need icons for your extension. Create or download icons in PNG format with the following sizes: 16x16, 48x48, and 128x128 pixels. Place them in the icons/ folder.

2. Loading and Testing the Extension

Load the Extension in Chrome

1. Open Google Chrome and navigate to chrome://extensions/.

2. Enable "Developer mode" by toggling the switch in the top right corner.

3. Click "Load unpacked" and select the directory containing your manifest.json and other files.

4. Your extension should now be loaded and visible in the list of extensions.

Testing the Extension

• Go to YouTube and start playing a video with an ad.

• Observe the Developer Console (press Ctrl+Shift+I to open Developer Tools and go to the "Console" tab) for logs to verify if the "Skip Ad" button is being detected and clicked.

• If you see logs like "Skip Ad button found, waiting a moment before clicking..." and "Skipped ad!", the extension is working as expected.

3. Publishing the Extension

Prepare for Publishing

1. Ensure your files are correctly organized and that the extension is working as intended.

2. Create a ZIP file of your project directory:

cd path/to/youtube-ad-skipper
zip -r youtube-ad-skipper.zip *

Publish to the Chrome Web Store

• Go to the Chrome Web Store Developer Dashboard.

• Sign in with your Google account.

• Pay the $5 one time fee, if you have not already.

• Click "Add a new item" and upload the youtube-ad-skipper.zip file.

• Follow the instructions to complete the listing, including adding a description, screenshots, and setting up pricing (if applicable).

• Submit your extension for review.

Troubleshooting

• Extension Not Working: Check the console logs for errors. Ensure that the manifest.json and content.js files are correctly configured.

• Ad Blocker Detection: If YouTube detects your extension, consider adding randomness to the clicking behavior or adjusting the timing and visibility checks.

Final Code

Download the final code here

or

Visit the GitHub repo here

Conclusion

Congratulations! You’ve built a Chrome extension that can automatically skip YouTube ads. This tutorial covered everything from setting up the project to testing and publishing the extension. If you have any questions or need further assistance, feel free to reach out.

For additional support or feedback:

• Developer: Jared Hooker of Hooker Hill Studios
• Email: hookerhillstudios@gmail.com
• Website: www.hookerhillstudios.com

If this tutorial helped you, please consider supporting me:

• CashApp: $hookerhillstudios
• Paypal: Paypal