Chromeの拡張機能ってAI使えば簡単に作れる説

Last updated at 2025-10-10Posted at 2025-09-08

「こんなChromeの拡張機能があったら便利なのにな～…」と、けっこう前からそう思ってはいたものの、私には拡張機能を自由自在に構築するほどの技術力がありませんでした。

ところが最近、ふと「AIを使えば簡単にできるのでは?」と思いつきました。

今回は、私が実際にAIを使って「Google検索結果からスポンサード広告 / 特定ドメインをブロックする拡張機能」を作った手順を紹介します。

制作時間はおそらく20分～30分程度。規約上、完成した拡張機能のコードをそのまま記事に貼り付けることはできませんが、やろうと思えば誰でも作れると思うので是非遊んでみてください。

1. 目標の整理

まずは作りたい機能をざっくり決めます。
今回の目標は以下の2つ。

Google検索結果内に表示されるスポンサード広告ブロック（#taw）を非表示にする
特定のドメインが検索結果に含まれていたら、そのブロックを丸ごと非表示にする

シンプルに言うと、邪魔なサイトを一切見えなくするChrome拡張機能です。

最近ってAI生成しただけの中身が空っぽな記事とか多いので、そういう記事量産型のサイトをブロックするのに便利です。

2. 必要なファイルを作る

Chrome拡張機能には最低限以下のファイルが必要です。

manifest.json
content.js
domains.json（ブロックしたいドメインを定義するファイル）

私の適当なプロンプトでやりたい事を伝えると、ChatGPTが勝手に必要なファイル構成とコードを作ってくれました。

当然ながら一発じゃうまくいかないため、この記事では何回か生成した結果のコードの一部を紹介しています。

コード自体は全ファイル合わせても100行に満たず、かなりコンパクトにまとまっています。

manifest.json

{
  "manifest_version": 3,
  "name": "Google Search Cleaner",
  "version": "1.0",
  "description": "Google検索結果から特定のドメインや広告を非表示にします",
  "permissions": [
    "activeTab",
    "scripting"
  ],
  "content_scripts": [
    {
      "matches": [
        "https://www.google.com/*"
      ],
      "js": ["content.js"],
      "run_at": "document_start"
    }
  ]
}

manifestでは、matches部分でブロック対象範囲を設定しています。今回は検索結果から省きたいので、「https://www.google.com/*」を設定しています。

これをyahooとかにしたらたぶんyahooでもブロックできるのかもしれません。私は使わないのでやってないですが。

3. 特定ドメインを設定できるようにする

ブロック対象のドメインを直接コードに書き込むのではなく、外部のdomains.jsonにまとめて管理できるようにしました。
この形式にしておけば、設定ファイルを書き換えるだけでブロック対象を簡単に変更できます。

domains.json

{
  "blockedDomains": [
    "example.com",
    "spam-site.com",
    "test-site.net"
  ]
}

4. 検索結果を監視して広告を消す

何かしら検索したとき、一番上に表示されるのはたいてい「スポンサー」と書かれた広告です。

1年くらい前まではここに詐欺サイトとかも普通に出てきててだいぶカオスでしたが、最近は整備されたのか、かなりマシになった印象。

ではさっそくブロックしていきます。F12を押してクラスとかIDとかをいろいろと見ていくと、スポンサード広告は「#taw」というIDが設定されていることがわかりました。

この#tawに対し、CSSで「display:none !important」を設定することで、Google側が再表示しても上書きされません。

処理の流れは以下の通りです。

ページロード直後に#tawを即座に非表示
DOM変化を監視し、#tawが追加されても瞬時に消す

こんな感じの処理をChatGPTが頑張って作ってくれました。
ちなみに無課金ユーザーなので、GPTのバージョンはChatGPT-5 miniです。

5. クラス名に依存しない構成に

最初はGoogle検索結果のクラス（.yhQgZbなど）を指定し、そのクラス内に対象ドメインがあったら非表示になるようにしていましたが、このクラスってページによって自動生成されるものなので、ページを移動したらもうブロッカーが機能しなくなります。

そのため、最終的にはクラスではなく、検索結果ブロック内のリンクを解析し、特定ドメインが含まれる場合は親要素を丸ごと非表示にする方法に切り替えました。

処理の流れはこうです。

ページ内のリンクをすべて取得
各リンクのhrefにブロック対象ドメインが含まれているかチェック
該当リンクを含む検索結果全体をclosest()で特定
該当ブロックをdisplay:none !importantで非表示

こうすることで、GoogleのHTML構造が多少変わっても安定して動作します。この流れもChatGPTが考えてくれたので、本当に優秀ですね。

6. 完成

最終的に完成したJavaScriptについても紹介したいところですが、それだと普通に拡張機能を配布してるのと変わらないため、さすがに宜しくないので掲載は控えます。

(規約上、不特定多数に配布する場合はChrome Web Storeを介さないといけないので)

処理内容を簡単にまとめると以下の内容になります。

1. 設定ファイル読み込み

domains.jsonを読み込み、ブロック対象のドメイン一覧を取得。

2. #taw（広告エリア）の非表示

ページ上にある#taw要素を即座にdisplay:none !importantで非表示にする。
さらにMutationObserverでページ内のDOM変化を監視し、#tawが動的に生成されても自動で非表示にする。

3. 特定ドメインの検索結果ブロック

ページ内のすべてのリンクをチェックし、リンク先にブロック対象のドメインが含まれている場合、そのリンクを含む検索結果ブロック（div[jscontroller]、div[data-hveid]、div.gなど）をdisplay:none !importantで非表示にする。
こちらもMutationObserverで動的に追加された検索結果を監視し、ブロックを適用。

4. エラー処理