YouTubeの広告削除の仕組みを学ぼう（教育用サンプル）

YouTubeの広告削除の仕組みを学ぼう

概要

ブラウザ上で広告を操作する仕組みを学びます。
YouTubeの広告がどのように表示されているか。また広告の検出・操作方法の解説となります。

⚠️ 重要な注意事項

ここで紹介する内容は学習・教育目的のみで、実際に広告を消すことを推奨するものではありません。

広告の削除やスキップはサービスの利用規約違反になる可能性があります
YouTubeの利用規約に違反する行為はアカウント停止の原因となる可能性があります
このコードは教育目的で作成されており、実際の広告削除機能は無効化されています
商用利用や配布はお控えください

完成コードサンプル

こちらが完成したコードサンプルです。
このコードは教育目的で作成されており、実際の広告削除は行いませんので、コメント部分をよくみてみてください。

📚 学習の進め方

まず完成コードをコピーしてChrome拡張機能として登録してみる
YouTubeで動作確認し、開発者ツールのコンソールでログを確認する
コードの各部分がどのような役割を果たしているか理解する
セレクタや判定条件を変更して実験してみる

content.js

(function() {
  console.log("広告削除スクリプト（教育用サンプル）読み込み", "ver 1.0");

  // ----------------------------
  // 1. 広告要素のセレクタまとめ
  // ----------------------------
  const AD_SELECTORS = [
    ".video-ads",
    ".ytp-ad-player-overlay",
    ".ytp-ad-module",
    "#player-ads",
    "#masthead-ad",
    ".ytd-promoted-sparkles-web-renderer",
    ".ytd-display-ad-renderer"
  ];

  // ----------------------------
  // 2. 広告削除関数（教育用）
  // ----------------------------
  function removeAdsSample() {
    AD_SELECTORS.forEach(sel => {
      document.querySelectorAll(sel).forEach(el => {
        // 実際には削除せずにログだけ出す
        console.log("[教育用] 広告検出:", sel, el);
        // el.remove(); // 広告を消す場合はここを有効化
      });
    });
  }

  // ----------------------------
  // 3. 広告判定関数（教育用）
  // ----------------------------
  function isAdPlayingSample(video, player) {
    if (!video || !player) return false;

    // 広告判定の条件をログで解説
    const adShowing = player.classList.contains("ad-showing");
    const overlay = document.querySelector(".ytp-ad-player-overlay");
    const shortVideo = video.duration && video.duration <= 30;

    console.log("[教育用] 判定条件 -> adShowing:", adShowing,
                "overlay:", overlay,
                "短い動画:", shortVideo);

    return adShowing || overlay || shortVideo;
  }

  // ----------------------------
  // 4. ページ監視（教育用）
  // ----------------------------
  function initAdWatcherSample() {
    const player = document.querySelector(".html5-video-player");
    const video = document.querySelector("video");
    if (!player || !video) return;

    console.log("[教育用] プレイヤー・動画要素確認済み");

    // DOM 変化を監視（実際の広告削除は行わない）
    const observer = new MutationObserver(removeAdsSample);
    observer.observe(document.body, { childList: true, subtree: true });

    // 広告判定の定期チェック（ミュート・高速化は行わない）
    setInterval(() => isAdPlayingSample(video, player), 1000);
  }

  // ページ読み込み完了で初期化
  window.addEventListener("load", initAdWatcherSample);

})();

manifest.json

{
  "manifest_version": 3,
  "name": "YouTube Ad Blocker",
  "version": "1.0",
  "description": "広告削除＋ミュート＋早送り",
  "content_scripts": [
    {
      "matches": [
        "*://www.youtube.com/*",
        "*://youtube.com/*"
      ],
      "js": ["content.js"],
      "run_at": "document_idle"
    }
  ]
}

Chrome拡張機能への登録手順

作成したファイルをChrome拡張機能として登録する手順を説明します。

1. フォルダを作成

まず、拡張機能用のフォルダを作成します。

youtube-ad-blocker/
├── content.js
└── manifest.json

2. ファイルを作成

上記のコードをそれぞれのファイルに保存します。

content.js

JavaScriptのコードを保存

manifest.json

拡張機能の設定を保存

3. Chrome拡張機能管理画面を開く

Chromeの設定から拡張機能管理画面を開きます。

方法1: Chrome のアドレスバーに chrome://extensions/ と入力
方法2: メニュー → その他のツール → 拡張機能

4. デベロッパーモードを有効化

画面右上の「デベロッパーモード」をオンにします。

5. 拡張機能を読み込む

「パッケージ化されていない拡張機能を読み込む」をクリックして、作成したフォルダを選択します。

注意: フォルダ全体を選択してください。個別のファイルではありません。

6. 動作確認

YouTubeにアクセスして、開発者ツールのコンソールでログを確認します。

// コンソールに表示されるログ例
広告削除スクリプト（教育用サンプル）読み込み ver 1.0
[教育用] プレイヤー・動画要素確認済み
[教育用] 広告検出: .video-ads [element]
[教育用] 判定条件 -> adShowing: false overlay: null 短い動画: false

ここから解説です

1. 広告はどこにあるのか？

YouTube の広告には主に次の種類があります

１．動画広告

再生中に動画に被さる広告

セレクタ例

".video-ads"

２．バナー広告

動画の上や周囲に表示される静止広告

セレクタ例

".ytp-ad-player-overlay"

３．サイドバー広告

おすすめ動画の中に混ざっている広告

セレクタ例

"#player-ads"
".ytd-display-ad-renderer"

2. 広告を「検出」する方法

JavaScriptでは、document.querySelector や document.querySelectorAll を使って広告要素を検出できます。

基本的な検出方法

AD_SELECTORS.forEach(sel => {
  const ads = document.querySelectorAll(sel);
  ads.forEach(ad => {
    console.log("広告要素を検出:", ad);
    // 実際に削除はしない
  });
});

MutationObserver の活用

MutationObserver を使うと、ページが動的に変化したときも広告を監視できます。これは、YouTube のような SPA（シングルページアプリ）でも有効です。

なぜ必要？ YouTubeは動的にコンテンツを読み込むため、ページ読み込み時には存在しない広告要素が後から追加されることがあります。

3. 広告の自動判定

動画広告かどうかを判定する条件としては、次のような方法があります

プレイヤーに ad-showing クラスが付いている
動画上に ytp-ad-player-overlay が存在する
再生時間が極端に短い動画（例：30秒以下）

広告判定関数の例

function isAdPlaying(video, player) {
  return player.classList.contains("ad-showing") ||
         document.querySelector(".ytp-ad-player-overlay") ||
         (video.duration && video.duration <= 30);
}

注意：この関数は広告を検出する学習用であり、実際に広告をスキップするコードではありません。

まとめ

YouTube広告の仕組みを理解できました

DOM操作

querySelectorやMutationObserverを使った要素検出を学習

Chrome拡張機能

manifest.jsonとcontent.jsを使った拡張機能開発

セキュリティ意識

個人情報保護と安全な拡張機能の理解

重要なポイント

Chrome拡張機能で広告ブロッカーが存在しますが、自分で作成することでより深く理解できます。インストール時に「ユーザー情報をすべて読み取る許可」を求められることがあります。
大切な個人情報ですので、気軽に許可しないでください。

仕組みさえ理解すれば、自分で作ることができますので、明日をより便利にしましょう！

他の記事も見る