%20--%3e%3cdefs%3e%3cstyle%3e%20.st0%20{%20fill:%20%23061b40;%20}%20.st1%20{%20fill:%20%23306af1;%20}%20.st2%20{%20fill:%20%235ce5cf;%20}%20%3c/style%3e%3c/defs%3e%3cg%3e%3cpath%20class='st0'%20d='M55,10.5h9v3h-9v9h12V7.5h-12v3ZM64,19.5h-6v-3h6v3Z'/%3e%3cpolygon%20class='st0'%20points='69%2016.5%2078%2016.5%2078%2019.5%2069%2019.5%2069%2022.5%2081%2022.5%2081%2013.5%2072%2013.5%2072%2010.5%2081%2010.5%2081%207.5%2069%207.5%2069%2016.5'/%3e%3cpolygon%20class='st0'%20points='95%2010.5%2095%207.5%2083%207.5%2083%2022.5%2095%2022.5%2095%2019.5%2086%2019.5%2086%2016.5%2095%2016.5%2095%2013.5%2086%2013.5%2086%2010.5%2095%2010.5'/%3e%3cpath%20class='st0'%20d='M40,1.5v21h11.6l1.4-1.4v-7.6h0c0,0-1.4-1.5-1.4-1.5l1.4-1.4V2.9l-1.4-1.4h-11.6ZM50,19.5h-7v-6h7v6ZM50,10.5h-7v-6h7v6Z'/%3e%3c/g%3e%3cpath%20class='st1'%20d='M23.1,24L14.7,4.8l-4.9,11.2h3.8l-1.8,4H3.3L12.1,0H2C.9,0,0,.9,0,2v20c0,1.1.9,2,2,2h21.1Z'/%3e%3cpath%20class='st2'%20d='M34,0h-16.8l10.6,24h6.2c1.1,0,2-.9,2-2V2C36,.9,35.1,0,34,0ZM32.5,20h-4V4h4v16Z'/%3e%3c/svg%3e)
Element MCP
ウェブページのDOM要素を選択して保存するためのChrome拡張機能。
スコア : 2.5ポイント
ダウンロード数 : 4.6K
Element MCP とは？
Element MCP はChrome拡張機能で、ウェブページ上のDOM要素を簡単に選択して保存できます。これらの要素はサーバーに保存され、表形式で確認できます。Element MCP の使い方は？
Element MCP の使用方法は非常に簡単です。拡張機能をインストールし、指示に従って操作するだけで、ウェブページ内のDOM要素を選択して保存を開始できます。適用シーン
Element MCP は、ウェブページ要素を頻繁にチェックして管理する必要がある開発者、デザイナー、コンテンツ管理者に最適です。主な機能
DOM要素の選択と保存
ユーザーがウェブページ上の任意の要素をクリックすることで、それらをすばやく選択して保存できます。
表形式のビュー
保存された要素は表形式で確認でき、管理と分析が容易になります。
利点
使いやすく、様々なスキルレベルのユーザーに適しています。
作業効率を向上させ、ウェブページ要素の管理プロセスを簡素化します。
制限
Chromeブラウザのみをサポートしています。
データのアップロードを成功させるには、一定のネットワーク接続の安定性が必要になる場合があります。
使い方
リポジトリをクローンする
まず、Element MCP のGitHubリポジトリをローカルにクローンしてください。
%20--%3e%3cdefs%3e%3cstyle%3e%20.st0%20{%20fill:%20%230080ff;%20}%20%3c/style%3e%3c/defs%3e%3cpath%20class='st0'%20d='M16.2,11.1c.4.5.4,1.2,0,1.8l-4.7,7.1h-3.8l5.3-8L7.6,4h3.8l4.7,7.1Z'/%3e%3c/svg%3e)
サーバーを起動する
プロジェクトディレクトリに移動した後、以下のコマンドを実行して開発サーバーを起動します。
拡張機能を読み込む
Chromeブラウザを開き、chrome://extensions ページに移動し、開発者モードを有効にしてから「展開された拡張機能を読み込む」をクリックし、先ほどクローンしたプロジェクトフォルダを選択します。
使用を開始する
これでElement MCP拡張機能を有効にし、任意のウェブページでDOM要素の選択と保存を試すことができます。
使用例
ボタン要素を保存する
ウェブサイトを開発していて、特定のボタンのスタイルを保存したい場合、Element MCP を使用するとこのタスクを簡単に完了できます。
表レイアウトを確認する
ウェブページ上の表構造を確認する必要がある場合、Element MCP を利用して必要な情報をすばやく取得できます。
よくある質問
Element MCP は他のブラウザをサポートしていますか？
保存された要素を削除するにはどうすればいいですか？
関連リソース
Element MCP GitHub リポジトリ
Element MCP の公式GitHubリポジトリにアクセスして、最新バージョンとドキュメントを取得します。
Chrome拡張機能開発ガイド
Chrome拡張機能の基礎知識をもっと学びましょう。
Gmail MCP Server
Claude Desktop用に設計されたGmail自動認証MCPサーバーで、自然言語でのやり取りによるGmailの管理をサポートし、メール送信、ラベル管理、一括操作などの完全な機能を備えています。
TypeScript
12.4K
4.5ポイント
Edgeone Pages MCP Server
EdgeOne Pages MCPは、MCPプロトコルを通じてHTMLコンテンツをEdgeOne Pagesに迅速にデプロイし、公開URLを取得するサービスです。
TypeScript
15.2K
4.8ポイント
Context7
Context7 MCPは、AIプログラミングアシスタントにリアルタイムのバージョン固有のドキュメントとコード例を提供するサービスで、Model Context Protocolを通じてプロンプトに直接統合され、LLMが古い情報を使用する問題を解決します。
TypeScript
43.7K
4.7ポイント
Baidu Map
認証済み
百度マップMCPサーバーは国内初のMCPプロトコルに対応した地図サービスで、地理コーディング、ルート計画など10個の標準化されたAPIインターフェースを提供し、PythonとTypescriptでの迅速な接続をサポートし、エージェントに地図関連の機能を実現させます。
Python
23.7K
4.5ポイント
Gitlab MCP Server
認証済み
GitLab MCPサーバーは、Model Context Protocolに基づくプロジェクトで、GitLabアカウントとのやり取りに必要な包括的なツールセットを提供します。コードレビュー、マージリクエスト管理、CI/CD設定などの機能が含まれます。
TypeScript
13.1K
4.3ポイント
Unity
認証済み
UnityMCPはUnityエディターのプラグインで、モデルコンテキストプロトコル (MCP) を実装し、UnityとAIアシスタントのシームレスな統合を提供します。リアルタイムの状態監視、リモートコマンドの実行、ログ機能が含まれます。
C#
16.0K
5ポイント
Magic MCP
Magic Component Platform (MCP) はAI駆動のUIコンポーネント生成ツールで、自然言語での記述を通じて、開発者が迅速に現代的なUIコンポーネントを作成するのを支援し、複数のIDEとの統合をサポートします。
JavaScript
15.7K
5ポイント
Sequential Thinking MCP Server
MCPプロトコルに基づく構造化思考サーバーで、思考段階を定義することで複雑な問題を分解し要約を生成するのに役立ちます。
Python
20.5K
4.5ポイント