Chrome MCP Server でコーヒーサイトの新商品情報を確認🔍 | Wonder Soft Coffee

Chrome MCP Server でコーヒーサイトの新商品情報を確認🔍 | Wonder Soft Coffee

こんにちは。ワンダーソフトコーヒーのソフトウェア開発チームです。

本日は、Chrome MCP Server を利用して、コーヒーのサイトの商品一覧を取得する操作をしてみたのでその備忘録を共有させていただきます😊

アイスコーヒーなどを片手にご覧いただけますと幸いです🧊🐻❄️

Chrome MCP Server って？

以下のサイトで公開されている Google Chrome の MCP Server となります。

https://github.com/hangwin/mcp-chrome

claude code などから、日本語で、「〇〇のサイトを検索して。」や「〇〇のサイトの△□のスクリーンショットを撮って。」などができる MCP のようです。

設定方法

上記の GitHub のサイトの、Installation Steps を順に辿ることでできる、と思いきや、一部そうでもなかったので、記載します。

手順 1

以下から mcp chrome の source を zip でダウンロードします。

https://github.com/hangwin/mcp-chrome/releases

手順 2

ブラウザURLで、以下にアクセスします。

chrome://extensions/

右上の「デベロッパーモード」をオンにします。

「パッケージ化されていない拡張機能を読み込む」をクリックして、手順 1 でダウンロードした zip を選択して読み込みます。

手順 3

読み込んだ拡張機能の詳細画面へ移動して「ツールバーに固定する」を選択します。

このタイミングで権限やできることの制限もできそうなので必要に応じて設定をするとよさそうです。

手順 4

ライブラリをインストールします。

npm install -g mcp-chrome-bridge

手順 5

ターミナルを開いて、有効にしたいプロジェクトで、以下のコマンドを実行して Chrome MCP を有効にします。

claude mcp add-json streamable-mcp-server \
  '{
    "type":"stdio",
    "command":"npx",
    "args":["-y","mcp-remote","http://127.0.0.1:12306/mcp","--transport","http-first"]
  }' \
  --scope project

上記実行後に、claude コマンドを事項すると、mcp server が有効になることを確認できます。

❯ claude
❯  /mcp list
  
╭───────────────────────────────────────────────────╮
│ ✻ Welcome to Claude Code!                         │
│                                                   │
│   /help for help, /status for your current setup  │
│                                                   │
│   cwd: /Users/letusfly85/work/TIL/mcp_practice    │
╰───────────────────────────────────────────────────╯

╭─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ Manage MCP servers                                                                                                                              │
│                                                                                                                                                 │
│ ❯ 1. notion-mcp-light       ✔ connected · Enter to view details                                 
│    2. streamable-mcp-server  ✔ connected · Enter to view details

これで設定は完了です。

コーヒーサイトを閲覧してみる

コーヒーサイトを閲覧するようにお願いをしてみます。

 

❯このサイトで販売している新商品の名前を教えて https://coffee.wonder-soft.com/

するとブラウザが自動で立ち上がり、 New のラベルのついた商品を引き当ててくれました。

⏺ streamable-mcp-server:chrome_navigate (MCP)(url: "https://coffee.wonder-soft.com/")
  ⎿  {
       "status": "success",
       "message": "Tool executed successfully",
     … +11 lines (ctrl+r to expand)

⏺ streamable-mcp-server:chrome_get_web_content (MCP)(textContent: true)
  ⎿  {
       "status": "success",
       "message": "Tool executed successfully",
     … +29 lines (ctrl+r to expand)

⏺ サイトで販売している新商品は「バタック・ブルー」です。

  これは2025年夏のアイスコーヒー用として数量限定で発売されているインドネシア産のコーヒー豆で、生豆が青々としているところからブルーの名前が付け
  られています。


便利ですね。。

Playwright MCP との差分について

そういえば、まだ利用検証をしたことはありませんでしたが、playwright mcp もあったと思います。

違いや使い分けが気になったので、ここは一旦 ChatGPT の web 検索を利用して質問をしてみました。（後日自分たちでも触ってみて違いはしっかり確認予定です）

e2e などのテストなどが目的であれば Playwright がよさそうです。 Chrome MCP についてはもしかしてですが、普段実施してる業務を補助したり加速したりするような使い方が良いかもしれません。（打刻をしたりとか何かを必ず提出する業務など）

とはいえ、AIとこのライブラリ自体に色々操作されてしまう、と言うところについての一抹の不安もありますので利用シーンは吟味してみるのもよさそうです。

そして気づけば

Chrome MCP によって表示された新商品「バタック・ブルー」をみているうちにアイスコーヒーが飲みたくなってきました。氷をふんだんに使って冷たいアイスコーヒーを楽しみたいと思います。

今後も、ソフトウェア開発やデザインのあれこれについて、コーヒーとともにゆるく投稿していきますので、どうぞお楽しみに ☕✨

🔗 Wonder Soft Coffeeのオンラインストアはこちら：
👉 https://coffee.wonder-soft.com/collections/all

 

ブログに戻る