<h2 id="%E4%BD%9C%E3%81%A3%E3%81%9F%E3%82%82%E3%81%AE" data-line="0" class="code-line">
<a class="header-anchor-link" href="#%E4%BD%9C%E3%81%A3%E3%81%9F%E3%82%82%E3%81%AE" aria-hidden="true"></a> 作ったもの</h2>
<p data-line="1" class="code-line">Chrome拡張機能 + MCPサーバー<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__ef9d3d1fdf945" src="https://embed.zenn.studio/card#zenn-embedded__ef9d3d1fdf945" data-content="https%3A%2F%2Fgithub.com%2Ftesla0225%2Fchromeextension" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/tesla0225/chromeextension" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/tesla0225/chromeextension</a></p>
<p data-line="4" class="code-line">動かし方はREADME_JP.mdにあります</p>
<h2 id="%E5%AE%9F%E9%9A%9B%E3%81%AE%E5%8B%95%E4%BD%9C%E3%82%B9%E3%82%AF%E3%82%B7%E3%83%A7" data-line="6" class="code-line">
<a class="header-anchor-link" href="#%E5%AE%9F%E9%9A%9B%E3%81%AE%E5%8B%95%E4%BD%9C%E3%82%B9%E3%82%AF%E3%82%B7%E3%83%A7" aria-hidden="true"></a> 実際の動作スクショ</h2>
<p data-line="8" class="code-line">動画<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-tweet"><iframe id="zenn-embedded__6fe9c4f4b1da6" src="https://embed.zenn.studio/tweet#zenn-embedded__6fe9c4f4b1da6" data-content="https%3A%2F%2Fx.com%2Ftesla0225%2Fstatus%2F1881133018771058777" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://x.com/tesla0225/status/1881133018771058777" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://x.com/tesla0225/status/1881133018771058777</a></p>
<p data-line="11" class="code-line">websocketとの通信を確認するポップアップ<br>
<img src="https://storage.googleapis.com/zenn-user-upload/09b9f9bee8c8-20250120.png" loading="lazy" class="md-img"></p>
<p data-line="14" class="code-line">既存のtabの確認<br>
<img src="https://storage.googleapis.com/zenn-user-upload/c25461659445-20250120.png" loading="lazy" class="md-img"></p>
<p data-line="17" class="code-line">新しいtabを開いて検索<br>
<img src="https://storage.googleapis.com/zenn-user-upload/4c2749c19399-20250120.png" loading="lazy" class="md-img"></p>
<p data-line="20" class="code-line">zennの記事取得 =&gt; 整形<br>
<img src="https://storage.googleapis.com/zenn-user-upload/1552aa55b2d4-20250120.png" loading="lazy" class="md-img"></p>
<h2 id="%E6%A7%8B%E6%88%90" data-line="23" class="code-line">
<a class="header-anchor-link" href="#%E6%A7%8B%E6%88%90" aria-hidden="true"></a> 構成</h2>
<ul data-line="24" class="code-line">
<li data-line="24" class="code-line">ClaudeクライアントはMCPサーバーと通常のクライアント・サーバー関係で接続。</li>
<li data-line="25" class="code-line">これにより、ClaudeはMCPサーバーを通じて様々な操作を行う</li>
<li data-line="26" class="code-line">Chrome拡張機能はMCPサーバーと WebSocketで接続。この接続により、リアルタイムで双方向通信が可能</li>
<li data-line="27" class="code-line">Chrome拡張機能はChromeブラウザのAPI を利用して、ブラウザ内のタブ管理やスクリプトの実行、CSSの注入などの操作を行う<br>
<img src="https://storage.googleapis.com/zenn-user-upload/58b9035bca02-20250120.png" loading="lazy" class="md-img">
</li>
</ul>
<h2 id="%E6%84%9F%E6%83%B3" data-line="31" class="code-line">
<a class="header-anchor-link" href="#%E6%84%9F%E6%83%B3" aria-hidden="true"></a> 感想</h2>
<ul data-line="32" class="code-line">
<li data-line="32" class="code-line">
<p data-line="32" class="code-line">型エラーがいくつか直せてない</p>
</li>
<li data-line="33" class="code-line">
<p data-line="33" class="code-line">多分ちゃんとPromptを組んであげないと結構迷う<br>
<img src="https://storage.googleapis.com/zenn-user-upload/ba899daae465-20250120.png" loading="lazy" class="md-img"></p>
</li>
<li data-line="36" class="code-line">
<p data-line="36" class="code-line">過去に拡張機能実装したことがあったので思いついてからは割とすんなりできた</p>
</li>
</ul>
<p data-line="38" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__fd0994fafa5a6" src="https://embed.zenn.studio/card#zenn-embedded__fd0994fafa5a6" data-content="https%3A%2F%2Fzenn.dev%2Ftesla%2Farticles%2F6d17245bc81079" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://zenn.dev/tesla/articles/6d17245bc81079" style="display:none" target="_blank">https://zenn.dev/tesla/articles/6d17245bc81079</a></p>


MCPを使ってClaudeから拡張機能を通してChromeを操作する

chrome拡張

Discussion