chrome-devtools-mcp-for-extension 0.5.0 → 0.5.4

package/README.md

@@ -1,268 +1,124 @@
-# Chrome DevTools MCP
+# Chrome DevTools MCP for Extension Development
 
-[![npm chrome-devtools-mcp package](https://img.shields.io/npm/v/chrome-devtools-mcp.svg)](https://npmjs.org/package/chrome-devtools-mcp)
+[![npm chrome-devtools-mcp-for-extension package](https://img.shields.io/npm/v/chrome-devtools-mcp-for-extension.svg)](https://npmjs.org/package/chrome-devtools-mcp-for-extension)
 
-`chrome-devtools-mcp` lets your coding agent (such as Gemini, Claude, Cursor or Copilot)
-control and inspect a live Chrome browser. It acts as a Model-Context-Protocol
-(MCP) server, giving your AI coding assistant access to the full power of
-Chrome DevTools for reliable automation, in-depth debugging, and performance analysis.
+An MCP server that lets AI assistants control Chrome and develop Chrome extensions.
 
-## Key features
+Based on [chrome-devtools-mcp](https://github.com/ChromeDevTools/chrome-devtools-mcp) by Google.
 
-- **Get performance insights**: Uses [Chrome
-  DevTools](https://github.com/ChromeDevTools/devtools-frontend) to record
-  traces and extract actionable performance insights.
-- **Advanced browser debugging**: Analyze network requests, take screenshots and
-  check the browser console.
-- **Reliable automation**. Uses
-  [puppeteer](https://github.com/puppeteer/puppeteer) to automate actions in
-  Chrome and automatically wait for action results.
+## Quick Start
 
-## Disclaimers
-
-`chrome-devtools-mcp` exposes content of the browser instance to the MCP clients
-allowing them to inspect, debug, and modify any data in the browser or DevTools.
-Avoid sharing sensitive or personal information that you don't want to share with
-MCP clients.
-
-## Requirements
-
-- [Node.js 22.12.0](https://nodejs.org/) or newer.
-- [Chrome](https://www.google.com/chrome/) current stable version or newer.
-- [npm](https://www.npmjs.com/).
-
-## Getting started
-
-Add the following config to your MCP client:
+Add this configuration to your MCP client:
 
 ```json
 {
   "mcpServers": {
-    "chrome-devtools": {
+    "chrome-devtools-extension": {
       "command": "npx",
-      "args": ["chrome-devtools-mcp@latest"]
+      "args": ["chrome-devtools-mcp-for-extension@latest"]
     }
   }
 }
 ```
 
-> [!NOTE]  
-> Using `chrome-devtools-mcp@latest` ensures that your MCP client will always use the latest version of the Chrome DevTools MCP server.
-
-### MCP Client configuration
-
-<details>
-  <summary>Claude Code</summary>
-    Use the Claude Code CLI to add the Chrome DevTools MCP server (<a href="https://docs.anthropic.com/en/docs/claude-code/mcp">guide</a>):
-
-```bash
-claude mcp add chrome-devtools npx chrome-devtools-mcp@latest
-```
-
-</details>
-
-<details>
-  <summary>Cline</summary>
-  Follow https://docs.cline.bot/mcp/configuring-mcp-servers and use the config provided above.
-</details>
-
-<details>
-  <summary>Codex</summary>
-  Follow the <a href="https://github.com/openai/codex/blob/main/docs/advanced.md#model-context-protocol-mcp">configure MCP guide</a>
-  using the standard config from above. You can also install the Chrome DevTools MCP server using the Codex CLI:
+**Claude Code users:**
 
 ```bash
-codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest
+claude mcp add chrome-devtools-extension npx chrome-devtools-mcp-for-extension@latest
 ```
 
-</details>
-
 <details>
-  <summary>Copilot / VS Code</summary>
-  Follow the MCP install <a href="https://code.visualstudio.com/docs/copilot/chat/mcp-servers#_add-an-mcp-server">guide</a>,
-  with the standard config from above. You can also install the Chrome DevTools MCP server using the VS Code CLI:
-  
-  ```bash
-  code --add-mcp '{"name":"chrome-devtools","command":"npx","args":["chrome-devtools-mcp@latest"]}'
-  ```
-</details>
-
-<details>
-  <summary>Cursor</summary>
-
-**Click the button to install:**
-
-[<img src="https://cursor.com/deeplink/mcp-install-dark.svg" alt="Install in Cursor">](https://cursor.com/en/install-mcp?name=chrome-devtools&config=eyJjb21tYW5kIjoibnB4IGNocm9tZS1kZXZ0b29scy1tY3BAbGF0ZXN0In0%3D)
+<summary>Configuration file locations</summary>
 
-**Or install manually:**
-
-Go to `Cursor Settings` -> `MCP` -> `New MCP Server`. Use the config provided above.
-
-</details>
-
-<details>
-  <summary>Gemini CLI</summary>
-Install the Chrome DevTools MCP server using the Gemini CLI.
+**Configuration file locations:**
 
-**Project wide:**
+- **Cursor**: `~/.cursor/extensions_config.json`
+- **VS Code Copilot**: `.vscode/settings.json`
+- **Cline**: Follow Cline's MCP setup guide
 
-```bash
-gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest
+**JSON configuration:**
+```json
+{
+  "mcpServers": {
+    "chrome-devtools-extension": {
+      "command": "npx",
+      "args": ["chrome-devtools-mcp-for-extension@latest"]
+    }
+  }
+}
 ```
 
-**Globally:**
-
-```bash
-gemini mcp add -s user chrome-devtools npx chrome-devtools-mcp@latest
+**With extension loading:**
+```json
+{
+  "mcpServers": {
+    "chrome-devtools-extension": {
+      "command": "npx",
+      "args": [
+        "chrome-devtools-mcp-for-extension@latest",
+        "--loadExtension=/path/to/your/extension"
+      ]
+    }
+  }
+}
 ```
-
-Alternatively, follow the <a href="https://github.com/google-gemini/gemini-cli/blob/main/docs/tools/mcp-server.md#how-to-set-up-your-mcp-server">MCP guide</a> and use the standard config from above.
-
 </details>
 
-<details>
-  <summary>Gemini Code Assist</summary>
-  Follow the <a href="https://cloud.google.com/gemini/docs/codeassist/use-agentic-chat-pair-programmer#configure-mcp-servers">configure MCP guide</a>
-  using the standard config from above.
-</details>
-
-<details>
-  <summary>JetBrains AI Assistant & Junie</summary>
-
-Go to `Settings | Tools | AI Assistant | Model Context Protocol (MCP)` -> `Add`. Use the config provided above.
-The same way chrome-devtools-mcp can be configured for JetBrains Junie in `Settings | Tools | Junie | MCP Settings` -> `Add`. Use the config provided above.
-
-</details>
+### 2. Restart Claude Code
 
-### Your first prompt
+### 3. Try your first command
 
-Enter the following prompt in your MCP Client to check if everything is working:
+Tell your AI: "List all my Chrome extensions"
 
-```
-Check the performance of https://developers.chrome.com
-```
+## Features
 
-Your MCP client should open the browser and record a performance trace.
+- **Extension Development**: Load, debug, and reload Chrome extensions
+- **Web Store Automation**: Automated submission with screenshots
+- **Browser Control**: Navigate, click, fill forms, take screenshots
+- **Performance Analysis**: Chrome DevTools integration
+- **Network Debugging**: Request monitoring and analysis
 
-> [!NOTE]  
-> The MCP server will start the browser automatically once the MCP client uses a tool that requires a running browser instance. Connecting to the Chrome DevTools MCP server on its own will not automatically start the browser.
+---
 
-## Tools
+# 日本語 / Japanese
 
-<!-- BEGIN AUTO GENERATED TOOLS -->
+**AI が Chrome を制御して Chrome 拡張機能を開発するための MCP サーバー**
 
-- **Input automation** (7 tools)
-  - [`click`](docs/tool-reference.md#click)
-  - [`drag`](docs/tool-reference.md#drag)
-  - [`fill`](docs/tool-reference.md#fill)
-  - [`fill_form`](docs/tool-reference.md#fill_form)
-  - [`handle_dialog`](docs/tool-reference.md#handle_dialog)
-  - [`hover`](docs/tool-reference.md#hover)
-  - [`upload_file`](docs/tool-reference.md#upload_file)
-- **Navigation automation** (7 tools)
-  - [`close_page`](docs/tool-reference.md#close_page)
-  - [`list_pages`](docs/tool-reference.md#list_pages)
-  - [`navigate_page`](docs/tool-reference.md#navigate_page)
-  - [`navigate_page_history`](docs/tool-reference.md#navigate_page_history)
-  - [`new_page`](docs/tool-reference.md#new_page)
-  - [`select_page`](docs/tool-reference.md#select_page)
-  - [`wait_for`](docs/tool-reference.md#wait_for)
-- **Emulation** (3 tools)
-  - [`emulate_cpu`](docs/tool-reference.md#emulate_cpu)
-  - [`emulate_network`](docs/tool-reference.md#emulate_network)
-  - [`resize_page`](docs/tool-reference.md#resize_page)
-- **Performance** (3 tools)
-  - [`performance_analyze_insight`](docs/tool-reference.md#performance_analyze_insight)
-  - [`performance_start_trace`](docs/tool-reference.md#performance_start_trace)
-  - [`performance_stop_trace`](docs/tool-reference.md#performance_stop_trace)
-- **Network** (2 tools)
-  - [`get_network_request`](docs/tool-reference.md#get_network_request)
-  - [`list_network_requests`](docs/tool-reference.md#list_network_requests)
-- **Debugging** (4 tools)
-  - [`evaluate_script`](docs/tool-reference.md#evaluate_script)
-  - [`list_console_messages`](docs/tool-reference.md#list_console_messages)
-  - [`take_screenshot`](docs/tool-reference.md#take_screenshot)
-  - [`take_snapshot`](docs/tool-reference.md#take_snapshot)
+## クイックスタート
 
-<!-- END AUTO GENERATED TOOLS -->
-
-## Configuration
-
-The Chrome DevTools MCP server supports the following configuration option:
-
-<!-- BEGIN AUTO GENERATED OPTIONS -->
-
-- **`--browserUrl`, `-u`**
-  Connect to a running Chrome instance using port forwarding. For more details see: https://developer.chrome.com/docs/devtools/remote-debugging/local-server.
-  - **Type:** string
-
-- **`--headless`**
-  Whether to run in headless (no UI) mode.
-  - **Type:** boolean
-  - **Default:** `false`
-
-- **`--executablePath`, `-e`**
-  Path to custom Chrome executable.
-  - **Type:** string
-
-- **`--isolated`**
-  If specified, creates a temporary user-data-dir that is automatically cleaned up after the browser is closed.
-  - **Type:** boolean
-  - **Default:** `false`
-
-- **`--channel`**
-  Specify a different Chrome channel that should be used. The default is the stable channel version.
-  - **Type:** string
-  - **Choices:** `stable`, `canary`, `beta`, `dev`
-
-- **`--logFile`**
-  Path to a file to write debug logs to. Set the env variable `DEBUG` to `*` to enable verbose logs. Useful for submitting bug reports.
-  - **Type:** string
-
-<!-- END AUTO GENERATED OPTIONS -->
-
-Pass them via the `args` property in the JSON configuration. For example:
+MCP クライアントに設定を追加：
 
 ```json
 {
   "mcpServers": {
-    "chrome-devtools": {
+    "chrome-devtools-extension": {
       "command": "npx",
-      "args": [
-        "chrome-devtools-mcp@latest",
-        "--channel=canary",
-        "--headless=true",
-        "--isolated=true"
-      ]
+      "args": ["chrome-devtools-mcp-for-extension@latest"]
     }
   }
 }
 ```
 
-You can also run `npx chrome-devtools-mcp@latest --help` to see all available configuration options.
-
-## Concepts
-
-### User data directory
+## 機能
 
-`chrome-devtools-mcp` starts a Chrome's stable channel instance using the following user
-data directory:
+- **拡張機能開発**: ロード、デバッグ、リロード
+- **Web Store 自動申請**: スクリーンショット生成付き
+- **ブラウザ制御**: ナビゲーション、フォーム操作、スクリーンショット
+- **パフォーマンス分析**: Chrome DevTools 統合
 
-- Linux / MacOS: `$HOME/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL`
-- Window: `%HOMEPATH%/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL`
+## Use Cases
 
-The user data directory is not cleared between runs and shared across
-all instances of `chrome-devtools-mcp`. Set the `isolated` option to `true`
-to use a temporary user data dir instead which will be cleared automatically after
-the browser is closed.
-
-## Known limitations
+```
+"Create a Chrome extension that blocks ads"
+"Debug why my content script isn't working"
+"Submit my extension to Chrome Web Store"
+"Generate screenshots for store listing"
+```
 
-### Operating system sandboxes
+## 使用例
 
-Some MCP clients allow sandboxing the MCP server using macOS Seatbelt or Linux
-containers. If sandboxes are enabled, `chrome-devtools-mcp` is not able to start
-Chrome that requires permissions to create its own sandboxes. As a workaround,
-either disable sandboxing for `chrome-devtools-mcp` in your MCP client or use
-`--connect-url` to connect to a Chrome instance that you start manually outside
-of the MCP client sandbox.
+```
+"広告ブロック拡張機能を作成して"
+"コンテンツスクリプトが動かない原因をデバッグして"
+"Web Store に拡張機能を申請して"
+```

package/build/src/main.js

@@ -34,7 +34,7 @@ function readPackageJson() {
     }
     try {
         const json = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
-        assert.strict(json['name'], 'chrome-devtools-mcp');
+        assert.strict(json['name'], 'chrome-devtools-mcp-for-extension');
         return json;
     }
     catch {
@@ -44,10 +44,10 @@ function readPackageJson() {
 const version = readPackageJson().version ?? 'unknown';
 export const args = parseArguments(version);
 const logFile = args.logFile ? saveLogsToFile(args.logFile) : undefined;
-logger(`Starting Chrome DevTools MCP Server v${version}`);
+logger(`Starting Chrome DevTools MCP for Extension Development v${version}`);
 const server = new McpServer({
-    name: 'chrome_devtools',
-    title: 'Chrome DevTools MCP server',
+    name: 'chrome-devtools-extension',
+    title: 'Chrome DevTools MCP for Extension Development',
     version,
 }, { capabilities: { logging: {} } });
 server.server.setRequestHandler(SetLevelRequestSchema, () => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "chrome-devtools-mcp-for-extension",
-  "version": "0.5.0",
-  "description": "Enhanced Chrome DevTools MCP server with Chrome extension development and Web Store submission tools",
+  "version": "0.5.4",
+  "description": "Chrome extension development MCP server with Web Store automation. Fork of chrome-devtools-mcp with extension-specific tools.",
   "type": "module",
   "bin": "./build/src/index.js",
   "main": "index.js",
@@ -24,17 +24,21 @@
   "files": [
     "build/src",
     "build/node_modules",
+    "README.md",
     "LICENSE",
     "!*.tsbuildinfo"
   ],
-  "repository": "usedhonda/chrome-devtools-mcp",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/usedhonda/chrome-devtools-mcp.git"
+  },
   "author": "usedhonda (forked from Google LLC)",
   "license": "Apache-2.0",
   "bugs": {
     "url": "https://github.com/usedhonda/chrome-devtools-mcp/issues"
   },
   "homepage": "https://github.com/usedhonda/chrome-devtools-mcp#readme",
-  "mcpName": "io.github.usedhonda/chrome-devtools-mcp-for-extension",
+  "mcpName": "chrome-devtools-extension",
   "keywords": [
     "mcp",
     "chrome",