Chrome DevTools MCP Extension Setup

Problem

The chrome-devtools MCP server launches Chrome via Playwright, which does not load extensions by default. This is why the PAN DevTools extension doesn't appear when using the MCP tools.

Solution

To enable extension support, the chrome-devtools MCP server needs to be configured with specific Playwright launch arguments.

Required Changes

1. Playwright Launch Method

Change from browser.launch() to browser.launchPersistentContext():

// ❌ WRONG - Default launch (no extensions)
const browser = await chromium.launch({
  headless: false
});

// ✅ CORRECT - Persistent context (supports extensions)
const context = await chromium.launchPersistentContext(userDataDir, {
  headless: false,
  args: [
    `--load-extension=${extensionPath}`,
    '--disable-extensions-except=' + extensionPath
  ]
});

2. Extension Path Configuration

The chrome-devtools MCP server needs to know where your PAN DevTools extension is located:

const extensionPath = '/Users/cdr/Projects/larc-repos/devtools';

3. User Data Directory

const userDataDir = path.join(os.tmpdir(), 'chrome-devtools-mcp-profile');

MCP Server Configuration

If you control the chrome-devtools MCP server configuration, add these options:

Option 1: Environment Variables

export CHROME_EXTENSION_PATH="/Users/cdr/Projects/larc-repos/devtools"
export CHROME_USER_DATA_DIR="/tmp/chrome-devtools-mcp-profile"

Option 2: MCP Server Config

Update your MCP server configuration (typically in ~/.claude/claude_desktop_config.json or similar):

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["@executeautomation/chrome-devtools-mcp"],
      "env": {
        "CHROME_EXTENSION_PATH": "/Users/cdr/Projects/larc-repos/devtools",
        "CHROME_USER_DATA_DIR": "/tmp/chrome-devtools-mcp-profile"
      }
    }
  }
}

Option 3: Fork and Modify

If the MCP server doesn't support extension configuration:

Code Changes Needed

In the chrome-devtools MCP server source (typically src/index.ts or similar):

// Before:
async function launchBrowser() {
  const browser = await chromium.launch({
    headless: false,
    args: ['--disable-blink-features=AutomationControlled']
  });
  return browser;
}

// After:
async function launchBrowser(extensionPath?: string) {
  const userDataDir = path.join(os.tmpdir(), 'chrome-devtools-mcp-profile');

  const launchArgs = [
    '--disable-blink-features=AutomationControlled'
  ];

  if (extensionPath && fs.existsSync(extensionPath)) {
    launchArgs.push(
      `--load-extension=${extensionPath}`,
      `--disable-extensions-except=${extensionPath}`
    );
  }

  const context = await chromium.launchPersistentContext(userDataDir, {
    headless: false,
    args: launchArgs
  });

  return context;
}

Alternative: Manual Chrome Instance

If modifying the MCP server isn't feasible, you can test extensions manually:

# Launch Chrome with extension loaded
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
  --load-extension=/Users/cdr/Projects/larc-repos/devtools \
  --disable-extensions-except=/Users/cdr/Projects/larc-repos/devtools \
  --user-data-dir=/tmp/chrome-test-profile \
  http://localhost:8080/playground/

Testing Extension Loading

After configuration, verify the extension loads:

console.log(window.__panDevTools);
   // Should show: {getHistory: ƒ, clearHistory: ƒ, getComponents: ƒ, ...}

Current Workaround

Until the MCP server is configured for extensions, use the in-page PAN Bus Monitor:

<pg-bus-monitor></pg-bus-monitor>

This component works independently and doesn't require Chrome extensions.

References

• Playwright Extensions Documentation
• Chrome Extension Development
• PAN DevTools Extension: /Users/cdr/Projects/larc-repos/devtools/

Files Involved

• Extension Source: /Users/cdr/Projects/larc-repos/devtools/

• MCP Server: chrome-devtools MCP (external package)

Next Steps

npm list -g @executeautomation/chrome-devtools-mcp
   # or
   which chrome-devtools-mcp