chrome-devtools-MCPでニコニコの再生ページを魔改造するバイブコーディング入門

はじめに

「バイブコーディング」という言葉を聞いたことがあるだろうか。AIに「こうしたい」という雰囲気（バイブ）を伝えてコードを書かせる開発手法のことだ。

この記事では、chrome-devtools-mcpというMCPサーバーを使って、ニコニコ動画の再生ページをDOM操作で「侵襲的に」改造するChrome拡張機能を開発した経験から、バイブコーディングのノウハウを共有する。

実際に開発した拡張機能: better-niconico

chrome-devtools-mcpとは

chrome-devtools-mcpは、Google Chrome DevToolsチームが公式に開発しているMCPサーバーだ。これを使うと、Claude CodeやCursor等のAIコーディングツールから実際のブラウザを操作できるようになる。

できること: - ページのスクリーンショット撮影 - DOM構造のスナップショット取得 - JavaScript実行 - ネットワークリクエストの監視 - パフォーマンス計測

つまり、AIが実際にブラウザでページ内部を見ながらコードを書けるようになる。これがバイブコーディングにおいて革命的に重要。

セットアップ

1. Claude Codeのインストール

私がここで下手に説明するよりも自分で調べてくれた方が確実だろうので敢えてここでは説明を省く

2. chrome-devtools-mcpの設定

Claude Codeに以下のコマンドでMCPサーバーを追加:

bash claude mcp add chrome-devtools npx chrome-devtools-mcp@latest

これだけ。あとはClaude Codeを起動すれば自動的にChromeが立ち上がる。

実践: ニコニコ動画のUIを魔改造する

ステップ1: まずはAIに現状を見せる

バイブコーディングの第一歩は「現状を見せる」こと。プロンプト例:

ニコニコ動画の動画再生ページ https://www.nicovideo.jp/watch/sm9 を開いて、 ページ構造を確認して。特にプレミアム会員への誘導セクションがどこにあるか調べて。

するとAIが実際にページを開き、スクリーンショットを撮り、DOM構造を解析してくれる。

ステップ2: 「バイブ」を伝える

ここが肝心。「こういう感じにしたい」という雰囲気を伝える。

このプレミアム会員セクション、邪魔だから消したい。 Chrome拡張機能のContent Scriptで非表示にするコード書いて。 でもユーザーが設定でオン/オフできるようにしたい。

AIは実際のDOM構造を見ているので、正確なセレクタを使ったコードを生成できる。

ステップ3: 動作確認もAIに任せる

書いたコードをビルドして、拡張機能として読み込んだので、 実際にプレミアムセクションが消えるか確認して。

AIがブラウザで確認し、動作しなければ自分で修正する。このフィードバックループが全自動なのがchrome-devtools-mcpの強み。

実際に使えるプロンプト集

DOM要素を消すとき

[URL]を開いて、[消したい要素の説明]を見つけて非表示にするCSS/JSを書いて。 MutationObserverも使って、動的に追加される要素にも対応して。

レイアウトを変更するとき

[URL]の[要素A]を[要素B]の上に移動させたい。 元のDOMは壊さずに、視覚的な順序だけ変えるやり方で。

新機能を追加するとき

[URL]の[場所]に新しいボタンを追加して。 クリックしたら[動作]するようにして。 既存のUIに馴染むデザインで。

寝言

さてこれは寝言なのだが、この手法はニコニコのchrome拡張のみにとどまらず、AdGuardのコミュニティ製フィルターの作成やその他有用なニコニコ動画関連(≠親UNEI)のその他のコミュニティOSSに応用可能なのではないかという構想が個人的にある。現に私はコマンドラインからのHTML取得というより原始的なバイブコーディング手法ですら、蠍媛キラーの開発に成功しており、このchrome-devtools-mcpの応用が私よりも遥かに有能な技術者の強力な手助けとなるのではないかと考える。