Improve README badges and Option+Click emphasis, fix release workflow

- Add npm version, chrome extension, and license badges to README
- Emphasize Option+Click usage with backticks throughout README
- Fix release workflow to prevent README from being committed:
  - Move README copy to right before npm publish
  - Add cleanup step to remove copied README after publish
- Add automatic manifest version bumping in release workflow
- Create bump-manifest script for chrome extension
- Remove copied server README from git tracking
- Remove redundant enabled config check in chrome extension background

Author: elieteyssedou

.github/workflows/release.yml

@@ -40,8 +40,8 @@ jobs:
       - name: Run tests
         run: pnpm test
 
-      - name: Copy README to server package for npm
-        run: cp README.md packages/server/README.md
+      - name: Bump Chrome extension manifest version
+        run: pnpm -C packages/chrome-extension bump-manifest
 
       - name: Build all packages
         run: pnpm build
@@ -50,6 +50,9 @@ jobs:
         working-directory: packages/chrome-extension/dist
         run: zip -r ../../../mcp-pointer-chrome-extension.zip .
 
+      - name: Copy README for npm package
+        run: cp README.md packages/server/README.md
+
       - name: Attest Build Provenance
         uses: actions/attest-build-provenance@v3.0.0
         with:
@@ -63,6 +66,9 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
+      - name: Clean up copied README
+        run: rm -f packages/server/README.md
+
       - name: Upload Chrome extension to release
         if: steps.changesets.outputs.published == 'true'
         uses: softprops/action-gh-release@v1

README.md

@@ -2,6 +2,9 @@
 
 [![CI](https://github.com/etsd-tech/mcp-pointer/actions/workflows/ci.yml/badge.svg?branch=main)](https://github.com/etsd-tech/mcp-pointer/actions/workflows/ci.yml)
 [![Release](https://github.com/etsd-tech/mcp-pointer/actions/workflows/release.yml/badge.svg?branch=main)](https://github.com/etsd-tech/mcp-pointer/actions/workflows/release.yml)
+[![npm version](https://img.shields.io/npm/v/@mcp-pointer/server?label=Server)](https://www.npmjs.com/package/@mcp-pointer/server)
+[![Chrome Extension](https://img.shields.io/github/package-json/v/etsd-tech/mcp-pointer?filename=packages%2Fchrome-extension%2Fpackage.json&label=Chrome-Extension)](https://github.com/etsd-tech/mcp-pointer/releases)
+[![License: MIT](https://img.shields.io/github/license/etsd-tech/mcp-pointer?label=License)](https://github.com/etsd-tech/mcp-pointer/blob/main/LICENSE)
 
 # 👆 MCP Pointer
 
@@ -10,13 +13,13 @@
 MCP Pointer is a *local* tool combining an MCP Server with a Chrome Extension:
 
 1. **🖥️ MCP Server** (Node.js package) - Bridges between the browser and AI tools via the Model Context Protocol
-2. **🌐 Chrome Extension** - Captures DOM element selections in the browser using Option+Click
+2. **🌐 Chrome Extension** - Captures DOM element selections in the browser using `Option+Click`
 
 The extension lets you visually select DOM elements in the browser, and the MCP server makes this **textual context** available to agentic coding tools like Claude Code, Cursor, and Windsurf through standardized MCP tools.
 
 ## ✨ Features
 
-- 🎯 **Option+Click Selection** - Simply hold Option (Alt on Windows) and click any element
+- 🎯 **`Option+Click` Selection** - Simply hold `Option` (Alt on Windows) and click any element
 - 📋 **Complete Element Data** - Text content, CSS classes, HTML attributes, positioning, and styling
 - ⚛️ **React Component Detection** - Component names and source files via Fiber (experimental)
 - 🔗 **WebSocket Connection** - Real-time communication between browser and AI tools
@@ -26,7 +29,7 @@ The extension lets you visually select DOM elements in the browser, and the MCP
 
 https://github.com/user-attachments/assets/98c4adf6-1f05-4c9b-be41-0416ab784e2c
 
-See MCP Pointer in action: Option+Click any element in your browser, then ask your agentic coding tool about it (in this example, Claude Code). The AI gets complete textual context about the selected DOM element including CSS properties, url, selector, and more.
+See MCP Pointer in action: `Option+Click` any element in your browser, then ask your agentic coding tool about it (in this example, Claude Code). The AI gets complete textual context about the selected DOM element including CSS properties, url, selector, and more.
 
 ## 🚀 Getting Started
 
@@ -46,6 +49,8 @@ npx -y @mcp-pointer/server config manual     # Shows manual configuration for ot
 
 > **Optional:** You can install globally with `npm install -g @mcp-pointer/server` to use `mcp-pointer` instead of `npx -y @mcp-pointer/server`
 
+After configuration, **restart your coding tool** to load the MCP connection.
+
 ### 2. Install Chrome Extension
 
 **Option A: Download from Releases (Recommended)**
@@ -56,18 +61,20 @@ npx -y @mcp-pointer/server config manual     # Shows manual configuration for ot
 4. Open Chrome → Settings → Extensions → Developer mode (toggle ON)
 5. Click "Load unpacked" and select the extracted folder
 6. The MCP Pointer extension should appear in your extensions list
+7. **Reload web pages** to activate the extension
 
 **Option B: Build from Source**
 
 1. Clone this repository
 2. Follow the build instructions in [CONTRIBUTING.md](./CONTRIBUTING.md)
 3. Open Chrome → Settings → Extensions → Developer mode (toggle ON)
 4. Click "Load unpacked" and select the `packages/chrome-extension/dist/` folder
+5. **Reload web pages** to activate the extension
 
 ### 3. Start Using
 
 1. **Navigate to any webpage** 
-2. **Option+Click** any element to select it
+2. **`Option+Click`** any element to select it
 3. **Ask your AI** to analyze the targeted element!
 
 Your AI tool will automatically start the MCP server when needed using the `npx -y @mcp-pointer/server start` command.
@@ -79,7 +86,7 @@ Your AI tool will automatically start the MCP server when needed using the `npx
 
 ## 🎯 How It Works
 
-1. **Element Selection**: Content script captures Option+Click events
+1. **Element Selection**: Content script captures `Option+Click` events
 2. **Data Extraction**: Analyzes element structure, CSS, and framework info
 3. **WebSocket Transport**: Sends data to MCP server on port 7007
 4. **MCP Protocol**: Makes data available to AI tools via MCP tools
@@ -151,6 +158,10 @@ We welcome contributions! Please see our [CONTRIBUTING.md](./CONTRIBUTING.md) gu
 
 ---
 
+*Inspired by tools like [Click-to-Component](https://github.com/ericclemmons/click-to-component) for component development workflows.*
+
+---
+
 **Made with ❤️ for AI-powered web development**
 
-*Now your AI can analyze any element you point at! 👆*
+*Now your AI can analyze any element you point at with `Option+Click`! 👆*

packages/chrome-extension/package.json

@@ -11,6 +11,7 @@
     "clean": "rm -rf dist",
     "clean-dev": "rm -rf dev",
     "typecheck": "tsc --noEmit src/*.ts",
+    "bump-manifest": "node scripts/bump-manifest.js",
     "build": "pnpm clean && esbuild src/background.ts src/content.ts src/popup.ts src/styles.css src/popup.css src/manifest.json src/popup.html src/*.png --bundle --outdir=dist --outbase=src --format=iife --platform=browser --target=chrome100 --minify --define:IS_DEV=false --loader:.css=copy --loader:.html=copy --loader:.json=copy --loader:.png=copy",
     "dev": "pnpm clean-dev && esbuild src/background.ts src/content.ts src/popup.ts src/styles.css src/popup.css src/manifest.json src/popup.html src/*.png --bundle --outdir=dev --outbase=src --format=iife --platform=browser --target=chrome100 --sourcemap --define:IS_DEV=true --loader:.css=copy --loader:.html=copy --loader:.json=copy --loader:.png=copy --watch"
   },

packages/chrome-extension/scripts/bump-manifest.js

@@ -0,0 +1,24 @@
+const fs = require('fs');
+const path = require('path');
+
+// Read version from local package.json  
+const packageJsonPath = path.join(__dirname, '../package.json');
+const manifestPath = path.join(__dirname, '../src/manifest.json');
+
+try {
+  // Get version from package.json
+  const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
+  const version = packageJson.version;
+
+  // Read and update manifest.json
+  const manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf8'));
+  manifest.version = version;
+
+  // Write back to manifest.json with proper formatting
+  fs.writeFileSync(manifestPath, JSON.stringify(manifest, null, 2) + '\n');
+
+  console.log(`✅ Bumped manifest version to ${version}`);
+} catch (error) {
+  console.error('❌ Error bumping manifest version:', error.message);
+  process.exit(1);
+}

packages/chrome-extension/src/background.ts

@@ -37,11 +37,6 @@ ConfigStorageService.onChange((newConfig: ExtensionConfig) => {
 // Listen for messages from content script
 chrome.runtime.onMessage
   .addListener((request: any, _sender: any, sendResponse: (response: any) => void) => {
-    if (!currentConfig?.enabled) {
-      sendResponse({ success: false, error: 'Extension is disabled' });
-      return;
-    }
-
     if (request.type === 'ELEMENT_SELECTED' && request.data) {
       // Send element with current port and status callback
       elementSender.sendElement(

packages/chrome-extension/src/services/element-sender-service.ts

@@ -13,17 +13,17 @@ export class ElementSenderService {
 
   private idleTimeout: NodeJS.Timeout | null = null;
 
-  private readonly IDLE_DURATION = 120000; // 2 minutes of inactivity
+  private readonly IDLE_DURATION = 10000; // 10 seconds of inactivity
 
-  private readonly CONNECTION_TIMEOUT = 5000; // 5 seconds to wait for connection
+  private readonly CONNECTION_TIMEOUT = 10000; // 5 seconds to wait for connection
 
   private readonly MAX_RECONNECTION_DELAY = 10000; // 10 seconds max delay
 
   private readonly MIN_RECONNECTION_DELAY = 1000; // 1 second min delay
 
   private readonly RECONNECTION_DELAY_GROW_FACTOR = 1.5; // Exponential backoff factor
 
-  private readonly MAX_RETRIES = 5; // Maximum connection retry attempts
+  private readonly MAX_RETRIES = 10; // Maximum connection retry attempts
 
   async sendElement(
     element: TargetedElement,
@@ -186,6 +186,8 @@ export class ElementSenderService {
       this.ws.close();
       this.ws = null;
     }
+
+    logger.debug('🔌 WS client disconnected');
   }
 
   private get isConnected(): boolean {

packages/chrome-extension/src/utils/config.ts

@@ -18,7 +18,7 @@ const config: ExtensionConfig = {
   },
   logger: {
     enabled: IS_DEV,
-    level: LogLevel.INFO,
+    level: LogLevel.DEBUG,
   },
 };