Chrome でビルドする Chrome の仕組み、オリジン トライアルに参加して、あらゆる場所で Chrome を使って構築しましょう。
Chrome DevTools MCP に最近触れていて、衝撃を受けています。 Chrome DevTools MCP は、Claude Code などの MCP クライアントから Chrome DevTools Protocol(CDP) を通してブラウザを操作する仕組みです。ざっくり言えば、「AI に、普段使っている Chrome をそのまま操作させるためのインタフェース」です。従来の Selenium や Puppeteer のように大量の操作コードを書くのではなく、「このボタンを押して」「CSV をダウンロードして」と自然言語で指示できるのが特徴です。 過去にクローラー本を書いてきた人間として言うと、人類が「プログラムにやってほしかったこと」がかなり自然に実現できる時代になった、という感覚があります。HTML 要素を 1 つずつ調べてセレクタを書く、という作業を延々やらなくて済みま
どうも！オペ部の西村祐二です！ Playwright CLI v0.1.8 が 2026-04-14 にリリースされました。今回、 playwright-cli attach --cdp=chrome で普段使っているローカルの Chrome / Edge にそのまま接続できるようになった点です。これまでのようにサンドボックス化された別ブラウザを起動する必要がなく、既存のログイン状態や拡張機能を持った Chrome をそのままエージェントや CLI から操作できます。 何がリリースされたか 概要: attach --cdp=<channel> でローカル起動済みの Chrome / Edge へ接続する Remote debugging mode が追加されました。あわせて CLI 終了後に残る Chrome プロセスの解消と、MCP server registry のクリーンアップ修正も
自分が使ってるプロバイダーだけ対応すればいい。これがAI時代のツール作成だ。 技術スタック 主な技術スタックはこんな感じ。 React 19 + Mantine v9 — UIコンポーネント Vercel AI SDK v6 — マルチプロバイダー対応の要。ストリーミングもこれ Zustand — 状態管理 Chrome Extension APIs — Side Panel, UserScripts, Debugger... TypeScript 6 Vite+ 私はChrome拡張を作ったことがなかったが、やりたいことを実現しようとするとかなりの知識が必要だった。Service Worker、Content Security Policy、サンドボックスでのコード実行、メッセージパッシング・・・Chrome拡張の世界は思った以上に奥が深い。 とはいえ、一番驚いたのは技術選定そのものでは
AIエージェントがコマンドラインでブラウザを自動操作できる「Browser Use CLI 2.0」リリース。Chrome DevToolsへの接続などで操作速度が2倍に 人間やAIエージェントがコマンドラインから指示することでWebブラウザを操作できるオープンソースのPythonライブラリ「Browser Use CLI 2.0」がリリースされました。 Browser Use CLI 2.0では、Chromeブラウザに対してChrome DevTools Protocol（CDP）で接続して操作できるようになり、またセッションごとにWebブラウザを起動することなくデーモンによるセッションの保持が行われることで、前バージョンよりも操作速度が2倍になるなどの機能向上が実現されています。 Introducing: Browser Use CLI 2.0 The most efficient b
どうも！オペ部の西村祐二です！ Chrome 146のリリースに合わせて、Webアプリの機能をAIエージェントに公開できる新標準 WebMCP（Web Model Context Protocol） のアーリープレビューが開始されました。 この記事では、WebMCPの概要からAPIの仕組み、そして実際にサンプルサイトを作って動きをみるところまでを一通り紹介します。 WebMCPとは WebMCPは、Webアプリがフロントエンド側で構造化されたJavaScriptベースのツールをAIエージェントに公開できる仕様案です。サイト側がエージェント向けに"使ってよい機能"を明示的に提供するという考え方で、W3C Community Groupが策定を進めています。 項目 内容
画像生成AIや動画生成AIをChromeで動かせるようにしたものです。 Nano BananaやSeeDream、Kling、pixverseなど、多数のAIモデルに対応しています。 これを作ってみて改めて思ったんですが、プログラミングを始めた初心者に、まず作ってほしいものがあります。 それはChrome拡張です。 なぜChrome拡張なのか、理由を説明します。 Chrome拡張とはChrome拡張とは、Chrome（Googleのウェブブラウザー）上で動く拡張機能のことです。 ブラウザに新しい機能を追加したり、既存のウェブページに機能を付け足したりできます。 基本的にJavaScriptで動作します。 JavaScriptは世界で最も使われているプログラミング言語の一つで、学習リソースも豊富です。 Webサイトを作ったことがある人なら、すでに触れたことがあるかもしれません。 JavaSc
自律的な AI エージェントを利用したコーディングでは、生成したコードを実行した結果からフィードバックを得て、コードを改善していく反復的なプロセスが重要です。しかし、フロントエンド開発では、生成したコードはブラウザ上で実行されるため、AI エージェントが直接コードを実行したり、ブラウザのコンソールログを取得したりすることは困難です。Chrome DevTools MCP はこの課題を解決するためのツールです。 自律的な AI エージェントを利用したコーディングでは、生成したコードを実行した結果からフィードバックを得て、コードを改善していく反復的なプロセスが重要です。バックエンドや CLI ツールの開発では、生成したコードはターミナル上で実行されログが表示されるため、AI エージェントはコードの実行結果を容易に取得できます。しかし、フロントエンド開発では、生成したコードはブラウザ上で実行され
Published: September 23, 2025 We're launching today a public preview for the new Chrome DevTools Model Context Protocol (MCP) server, bringing the power of Chrome DevTools to AI coding assistants. Coding agents face a fundamental problem: they are not able to see what the code they generate actually does when it runs in the browser. They're effectively programming with a blindfold on. The Chrome D
「こんなChromeの拡張機能があったら便利なのにな～…」と、けっこう前からそう思ってはいたものの、私には拡張機能を自由自在に構築するほどの技術力がありませんでした。 ところが最近、ふと「AIを使えば簡単にできるのでは?」と思いつきました。 今回は、私が実際にAIを使って「Google検索結果からスポンサード広告 / 特定ドメインをブロックする拡張機能」を作った手順を紹介します。 制作時間はおそらく20分～30分程度。規約上、完成した拡張機能のコードをそのまま記事に貼り付けることはできませんが、やろうと思えば誰でも作れると思うので是非遊んでみてください。 1. 目標の整理 まずは作りたい機能をざっくり決めます。 今回の目標は以下の2つ。 Google検索結果内に表示されるスポンサード広告ブロック（#taw）を非表示にする 特定のドメインが検索結果に含まれていたら、そのブロックを丸ごと非表示
こんにちは、リテールアプリ共創部の戸田駿太です。 今回はChrome DevToolsを利用した手動テスト時の入力を効率化する方法をご紹介します。 この方法を使えば今まで手作業で行なっていた入力を簡易的に自動化することができるため手動テストの効率が向上します。 まずは実行動画から！ 左のカード登録画面（仮）のバリデーションテストをしている様子です。 この動画で行なっていること 正常な値を入力して登録 正常登録の確認 正常な値の状態から1つの入力を編集してバリデーションエラーの状態で登録 エラーが発生することを確認 Recorderを使うメリット ✅ 手動テストの効率が向上する 今までテスト項目毎に入力していた値をミスなく入力できるようになります。 コードベースの確実な操作ができるのでテストのミスも少なくなるので安心感も増します。 ✅ Chromeの開発者ツールであるため、環境構築が必要ない
Obsidianに入門しました LLMとマークダウンの相性がよいということで話題になっているObsidianに入門しました。本も買って読みました。 Obsidianで“育てる”最強ノート術 そして、色々試行錯誤してみたのですが…結局自分の場合は、あんまり使い道がないことに気づきました。ノートはiPadでApple Pencilで手書きが好きなのと、デジタル的なまとめは、はてなブログやZennにブログとしてまとめているからです。Notionもメモとかノートというよりは、データ置き場って感じなんですよね。 ただ、Web Clipperは、PCでもiPhone/iPadでもクリック（タップ）一発で、ウェブサイトを保存できて便利で活用することにしたので、設定方法を残しておきます。 Obsidianインストール Homebrewインストール済みの場合は、以下コマンドでOKです。 もちろん、公式サイト
browser-useについて調査する どういうものか ブラウザのデバッグプロトコルを使ってLLMで操作するpythonライブラリ Playwright API → Chrome DevTools Protocol (CDP) ClaudeのComputer useのスコープを狭めたものと理解できる 似たツールとしてMCPのPuppeteerサーバーがある→mcp/puppeteer モデル（LLM）の呼び出しにLangChain Modelのインターフェイスに依存することでマルチプロバイダ対応してる なのでLangChainで動くモデルに対応してる 結果的にLangChain風のAgentフレームワークのミニマムな実装になってる 何ができるの？ ブラウザ操作を自動化してできることはできる Hugging Faceで特定のライセンスを持つモデルを検索し、その情報をファイルに保存する 求人情
以下の公開計測会でやったものを個別に解説してみる。 細かいテクニックが多いのだが、それを可能な限りテキストとスクショで解説したい。使い方の解説が中心で、どういう意味があるかは解説しない。 Chrome131時点のスクリーンショットで、後で読む場合は頻繁にUIが変わっている点に注意。大事なのは意図。 宣伝: これを御社のサイトで解説する仕事をやっています。 デモのURL これに意味はなく、今日偶然見ていただけで意図はない。関係ないがエッジランナーズは最高のアニメ。 DevTools を開く F12 or 右クリックから「検証」 DevTools > Lighthouse この状態で計測 このとき、新しいプロファイルを作ったりして、可能な限り Chrome拡張が入ってない状態にすること。Chrome拡張による処理も計測に含まれてしまう。 Lighthouse レポートの読み方 点数部分にマウス
Google では大規模言語モデル（LLM）などの AI モデルをブラウザに直接統合するように設計された、Web プラットフォーム API とブラウザ機能を開発しています。これには Gimini Nano という AI モデルが含まれており、デスクトップパソコンにおいてローカルで実行されるように設計されています。この記事では Summarization API を使用して、文章を要約してみます。 Google では大規模言語モデル（LLM）などの AI モデルをブラウザに直接統合するように設計された、Web プラットフォーム API とブラウザ機能を開発しています。これには Gimini Nano という AI モデルが含まれており、デスクトップパソコンにおいてローカルで実行されるように設計されています。 ブラウザに直接 AI が組み込まることにより、開発者は独自の AI モデルをサーバー
Chrome 126 から Gemini Nano という AI がデスクトップクライアントに組み込まれる予定です。Gemini Nano は Google の AI モデルの中で最も小さいモデルです。デスクトップクライアントに直接組み込まれることで、ユーザーの手元の環境で AI を利用できることが特徴です。開発者は JavaScript から Chrome に組み込まれた Gemini Nano にアクセスして生成 AI の機能を実装することができます。 Chrome 126 から Gemini Nano という AI がデスクトップクライアントに組み込まれる予定です。Gemini Nano は Google の AI モデルの中で最も小さいモデルです。デスクトップクライアントに直接組み込まれることで、ユーザーの手元の環境で AI を利用できることが特徴です。 開発者は JavaScri
2024年6月11日リリースのChrome126から、View Transitions APIがパワーアップし、別ページへの遷移でも使うことができるようになったので紹介したいと思います。 View Transitions APIとは View Transitions APIは、画面遷移をなめらかに行うことができる機能です。 この機能を使うと、以下の動画で紹介されているように、ページ遷移にアニメーションをつけることができます。 まずはView Transitions APIの特徴から紹介したいと思います。 特徴1：異なるDOM要素間でアニメーションできる アニメーション前後のDOM構造が異なっていても、アニメーションを行うことが可能です。 例えば、<div>がアニメーションで変化しつつ<img>要素になる、といったアニメーションが可能です。 特徴2：アニメーションがCSSで自由自在 アニメー
![[JSなし] パワーアップしたView Transitions APIでMPAをSPAみたいにする - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/e2ad15ba91e448c8ae892575e0f9f67aa5d5e307/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fproxy.goincop1.workers.dev%3A443%2Fhttps%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkYwJTJGNjc4NjI1JTJGcHJvZmlsZS1pbWFnZXMlMkYxNzIwNDk0NTc5P2l4bGliPXJiLTQuMC4wJmFyPTElM0ExJmZpdD1jcm9wJm1hc2s9ZWxsaXBzZSZiZz1GRkZGRkYmZm09cG5nMzImcz1jMzA2MzM3YzVmZmIyZTc0MWI2ZmJhNzg0YTc3ZDM5Nw%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253De260628f2499eb95ac267667118df177%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCSlMlRTMlODElQUElRTMlODElOTclNUQlMjAlRTMlODMlOTElRTMlODMlQUYlRTMlODMlQkMlRTMlODIlQTIlRTMlODMlODMlRTMlODMlOTclRTMlODElOTclRTMlODElOUZWaWV3JTIwVHJhbnNpdGlvbnMlMjBBUEklRTMlODElQTdNUEElRTMlODIlOTJTUEElRTMlODElQkYlRTMlODElOUYlRTMlODElODQlRTMlODElQUIlRTMlODElOTklRTMlODIlOEImdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtcGFkPTAmcz05OWI1MjgwOWIyZDg4YmVmNmE0MTVjYzg1ZTc5YjFlMQ%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBhY2Nlc3MzMTUxZnEmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz03NTYxZDU1NDFiYjdiMjQ5MzZlMDc3YWYwZjdhM2VlYg%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3Db63cfdf1c18324c887a0dce38c276ec3)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
