From e96cf6c11fbc51d497e48574b76618bfda131b48 Mon Sep 17 00:00:00 2001
From: Oleks <oleks.kuksenko@gmail.com>
Date: Mon, 27 Jul 2026 21:43:15 +0300
Subject: [PATCH] feat: initial commit for browser-plugin

---
 .mcp.json                          |  8 +++++++
 agents/browser_agent.py            | 34 +++++++++++++++++++++++++++
 plugin.json                        | 10 ++++++++
 skills/browser-automation/SKILL.md | 37 ++++++++++++++++++++++++++++++
 4 files changed, 89 insertions(+)
 create mode 100644 .mcp.json
 create mode 100644 agents/browser_agent.py
 create mode 100644 plugin.json
 create mode 100644 skills/browser-automation/SKILL.md

diff --git a/.mcp.json b/.mcp.json
new file mode 100644
index 0000000..f4f76ff
--- /dev/null
+++ b/.mcp.json
@@ -0,0 +1,8 @@
+{
+	"mcpServers": {
+		"browser": {
+			"type": "http",
+			"url": "http://127.0.0.1:12010/p/browser/mcp"
+		}
+	}
+}
diff --git a/agents/browser_agent.py b/agents/browser_agent.py
new file mode 100644
index 0000000..b9be9a2
--- /dev/null
+++ b/agents/browser_agent.py
@@ -0,0 +1,34 @@
+"""
+Browser Agent for Browser MCP Server automation & DOM inspection.
+"""
+
+type_name = "browser:browser-agent"
+description = """Browser automation, DOM inspection, and visual auditing subagent. Delegate to this subagent when you need to inspect live web pages, capture element screenshots, interact with forms, or audit CDP performance traces via Browser MCP tools."""
+
+system_instructions = r"""
+You are the specialized Browser Agent.
+Your role is to navigate web pages, inspect real-time DOM structures, take screenshot captures, interact with form fields, and audit browser performance traces using the Browser MCP Server (`http://127.0.0.1:12010/p/browser/mcp`).
+
+## Primary Capabilities
+
+1. **Tab & Window Operations**:
+   - Query open tabs using `get_windows_and_tabs`.
+   - Open or navigate tabs using `chrome_navigate`.
+   - Switch active tab focus using `chrome_switch_tab`.
+
+2. **DOM Inspection & Script Execution**:
+   - Extract the accessible element tree using `chrome_read_page`.
+   - Run JavaScript logic on open tabs using `chrome_javascript`.
+   - Monitor console output and errors using `chrome_console`.
+
+3. **Element Interaction**:
+   - Perform element clicks using `chrome_click_element`.
+   - Fill inputs and forms using `chrome_fill_or_select`.
+   - Trigger keyboard actions using `chrome_keyboard`.
+
+4. **Visual & Performance Auditing**:
+   - Capture section or element screenshots using `chrome_screenshot`.
+   - Run CDP performance traces using `performance_start_trace` and `performance_stop_trace`.
+
+Return concise, structured findings to the caller with exact URLs, Tab IDs, and visual/DOM evidence.
+"""
diff --git a/plugin.json b/plugin.json
new file mode 100644
index 0000000..d36920e
--- /dev/null
+++ b/plugin.json
@@ -0,0 +1,10 @@
+{
+	"name": "browser-plugin",
+	"version": "1.0.0",
+	"description": "Browser automation, tab inspection, accessibility auditing, and CDP trace performance analysis via Browser MCP Server.",
+	"author": {
+		"name": "Oleks",
+		"email": "oleksandrk@imagexmedia.com"
+	},
+	"license": "MIT"
+}
diff --git a/skills/browser-automation/SKILL.md b/skills/browser-automation/SKILL.md
new file mode 100644
index 0000000..2affe64
--- /dev/null
+++ b/skills/browser-automation/SKILL.md
@@ -0,0 +1,37 @@
+---
+name: browser-automation
+description: Real-time browser automation, tab inspection, accessibility auditing, DOM interaction, and CDP trace performance analysis via Browser MCP. Activate when navigating web pages, analyzing live DOM trees, capturing section screenshots, filling forms, or recording performance traces in Chrome.
+---
+
+# Browser Automation & Inspection Skill
+
+This skill provides full real-time control over the user's running Chrome browser instance through the **Browser MCP Server** (`http://127.0.0.1:12010/p/browser/mcp`).
+
+## Core Concepts & Tools
+
+1. **Tab & Window Management**:
+   - `get_windows_and_tabs`: List all open browser windows, active tab ID, titles, and URLs.
+   - `chrome_navigate`: Open a new URL or navigate an existing tab.
+   - `chrome_switch_tab`: Switch focus to a specific tab ID.
+   - `chrome_close_tabs`: Close one or more tabs.
+
+2. **DOM & Accessibility Tree Inspection**:
+   - `chrome_read_page`: Fetch the structured accessibility tree (text representation of elements with coordinates, roles, and refs).
+   - `chrome_javascript`: Execute custom JavaScript expressions directly in any browser tab (`code` argument).
+   - `chrome_console`: Capture live browser console warnings and runtime errors.
+
+3. **Element Interaction & Input**:
+   - `chrome_click_element`: Click buttons, links, or form fields.
+   - `chrome_fill_or_select`: Fill text inputs, textareas, or select dropdown options.
+   - `chrome_keyboard`: Send keystrokes (Enter, Tab, Esc).
+
+4. **Visual & Performance Auditing**:
+   - `chrome_screenshot`: Capture full-page or element-specific PNG screenshots (`selector`, `name`, `fullPage`).
+   - `performance_start_trace` / `performance_stop_trace`: Record and analyze CDP performance traces (LCP, CLS, long tasks).
+
+## Typical Workflow
+
+1. **Discover**: Call `get_windows_and_tabs` to identify open tabs.
+2. **Inspect**: Call `chrome_read_page` or `chrome_javascript` to inspect DOM state.
+3. **Interact**: Use `chrome_click_element`, `chrome_fill_or_select`, or `chrome_keyboard`.
+4. **Capture & Verify**: Use `chrome_screenshot` to verify visual layout and section placement.