概要
https://qiita.com/nolanlover0527/items/32d8f4c1b3064eff5ecd
詳細内容
## Chromeの拡張機能ってAI使えば簡単に作れる説 #ChatGPT
https://qiita.com/nolanlover0527/items/32d8f4c1b3064eff5ecd
ChatGPTを活用することで、Google検索結果の広告や特定ドメインをブロックするChrome拡張機能をわずか20〜30分で効率的に開発できることを実証しています。
**Content Type**: Tutorial & Guide
**Scores**: Signal:4/5 | Depth:4/5 | Unique:4/5 | Practical:5/5 | Anti-Hype:4/5
**Main Journal**: 88/100 | **Annex Potential**: 85/100 | **Overall**: 84/100
**Topics**: [[Chrome拡張機能開発, ChatGPT活用, DOM操作, コンテンツフィルタリング, AIによる開発効率化]]
この記事は、ChatGPTを活用し、わずか20～30分でGoogle検索結果からスポンサー広告や特定のドメインをブロックするChrome拡張機能を開発した手順を解説しています。ウェブアプリケーションエンジニアにとって、この事例はジェネレーティブAIが日常の課題解決ツール開発の障壁をいかに低減するかを示す具体的なデモンストレーションです。
開発者は、まずChatGPTに目的（広告と特定ドメインのブロック）を伝え、必要なファイル構成（`manifest.json`, `content.js`, `domains.json`）とコードを生成させました。特に重要な点は、ブロック対象ドメインを外部ファイル`domains.json`で管理することで、コード修正なしに柔軟な設定変更を可能にしている点です。
技術的アプローチとして、広告ブロックにはGoogle検索結果の`#taw`ID要素を特定し、`display:none !important`で即時非表示にするとともに、`MutationObserver`を用いてDOMの変化を監視し、動的に追加される広告も瞬時にブロックします。特定のドメインブロックでは、Googleのクラス名が自動生成され不安定なため、検索結果ブロック内のリンク（`href`属性）を解析し、該当ドメインを含む親要素（例: `div[jscontroller]`, `div[data-hveid]`, `div.g`）を`closest()`メソッドで特定して非表示にする堅牢な手法を採用しています。この安定性重視の設計もChatGPTが提案したものです。
なぜこれが重要かというと、この事例は、AIが単なるコード生成だけでなく、特定のWebページの動的な構造変化に対応するための高度なロジック（`MutationObserver`や`closest()`を用いたDOM操作）まで考慮した解決策を提供できることを示しています。これにより、エンジニアは煩雑な調査や試行錯誤の時間を大幅に削減し、日常の「ちょっとした不満」を形にするための開発を劇的に加速できます。AIを自身の開発ワークフローに組み込むことで、個人開発の可能性が大きく広がることを強く示唆する内容です。