すべてのサイトで動画リンクを非表示にするChrome拡張機能の作り方

今回は、Chrome拡張機能を自作して、すべてのサイト上の動画リンクを非表示にする方法をご紹介します。外部ツールを使わず、純粋にJavaScriptとChromeの機能を使って拡張機能を作成します。これにより、特定の条件に合うリンクを検出し、それを非表示にすることができます。

1. Chrome拡張機能とは？

Chrome拡張機能は、Google Chromeに追加できる小さなプログラムで、ウェブページの閲覧体験をカスタマイズしたり、機能を拡張したりすることができます。JavaScript、HTML、CSSを組み合わせて、特定のタスクを実行するツールを簡単に作成できるのが特徴です。

拡張機能は次のような構成ファイルで作られます。

manifest.json: 拡張機能全体の設定ファイル
content.js: ウェブページ上で実行されるJavaScript
アイコンなどのリソースファイル

2. 動画リンク非表示の要件

今回の拡張機能の目的は、ウェブページ上に表示されている動画へのリンクを非表示にすることです。動画サイトのリンク（例：YouTubeやVimeo）や「video」というキーワードが含まれるリンクを対象に、リンク自体をページ上から見えないようにします。

具体的には、次のような要件があります。

すべてのサイトで機能すること
動画リンク（例：YouTubeやVimeo、videoというキーワードを含むリンク）を自動的に検出し、非表示にすること
簡単にインストールできること

3. Chrome拡張機能の構成要素

拡張機能を作成するために、以下のファイルを作成します。

manifest.json: 拡張機能の設定ファイル
content.js: ウェブページ上の動画リンクを非表示にするスクリプト
アイコン画像: Chromeの拡張機能アイコンとして表示される画像（任意）

`manifest.json` とは？

manifest.json は、Chrome拡張機能の基本情報（名前やバージョン、使用する権限など）を記述するファイルです。拡張機能がChromeにどのように動作するかを指定します。

`content.js` とは？

content.js は、拡張機能が対象となるウェブページ上で実行されるスクリプトです。JavaScriptで書かれており、ウェブページのDOMを操作することができます。今回のケースでは、特定のリンクを見つけ出して非表示にする役割を担います。

4. 具体的な実装方法

ステップ1: `manifest.json` を作成

まずは manifest.json を作成し、次の内容を記述します。

{
  "manifest_version": 3,
  "name": "Hide Video Links",
  "version": "1.0",
  "description": "Hide video links from all webpages",
  "permissions": ["activeTab", "scripting"],
  "content_scripts": [
    {
      "matches": ["*://*/*"],  // すべてのサイトを対象にする
      "js": ["content.js"]
    }
  ],
  "icons": {
    "48": "icon.png"
  }
}

この manifest.json のポイントは、matches に *://*/* を指定して、すべてのサイトでこの拡張機能を動作させる点です。また、permissions には activeTab と scripting を指定しています。これにより、現在アクティブなタブに対してスクリプトを実行する権限が与えられます。

ステップ2: `content.js` を作成

次に、動画リンクを非表示にするJavaScriptファイル content.js を作成します。

// content.js
document.querySelectorAll('a[href*="video"], a[href*="youtube"], a[href*="vimeo"]').forEach(link => {
  link.style.display = 'none';
});

このコードは、ページ内のリンクを検索し、そのリンクの href 属性に「video」や「youtube」、「vimeo」という文字列が含まれている場合、そのリンクを非表示にします。display: none; を適用することで、対象のリンクが見えなくなります。

ステップ3: アイコン画像を準備

アイコン画像（48x48pxのPNGファイル）を icon.png として保存します。このアイコンは、Chromeのツールバーに拡張機能のアイコンとして表示されます。任意の画像を使用してください。

5. 拡張機能のインストールと動作確認

これで拡張機能の準備が整いました。次に、作成した拡張機能をChromeにインストールし、動作を確認します。

手順

作成したファイル（manifest.json, content.js, icon.png）を1つのフォルダにまとめます。
Chromeブラウザで「拡張機能」のページに移動します。（アドレスバーに chrome://extensions/ と入力します）
右上にある「デベロッパーモード」をオンにします。
「パッケージ化されていない拡張機能を読み込む」ボタンをクリックし、先ほど作成したフォルダを選択します。
インストールが完了すると、拡張機能が有効化されます。

これで、すべてのサイトで動画リンクが非表示になるはずです。YouTubeやVimeo、videoというキーワードが含まれているリンクはすべて見えなくなります。

拡張機能のカスタマイズ

この拡張機能はシンプルですが、少しの調整でさらに柔軟な機能を追加できます。例えば、特定のドメインだけを対象にしたり、動画のリンクだけでなく埋め込み動画そのものを非表示にすることも可能です。content.js に追加のロジックを実装することで、さまざまな動作に対応できます。

まとめ

今回は、すべてのサイト上で動画リンクを非表示にするChrome拡張機能を作成しました。外部ツールに頼らず、シンプルなJavaScriptとChromeの機能だけで実装できるので、カスタマイズも容易です。拡張機能を自作することで、ブラウジング体験を自分好みにカスタマイズする力が手に入ります。

拡張機能の作成は最初は少し難しく感じるかもしれませんが、今回の例を元に自分で試してみることで、さまざまな機能を実装できるようになります。ぜひチャレンジしてみてください！