chrome-devtools-mcp-for-extension 0.5.0

package/build/src/tools/webstore-submission.js

@@ -0,0 +1,332 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import fs from 'node:fs';
+import path from 'node:path';
+import archiver from 'archiver';
+import z from 'zod';
+import { ToolCategories } from './categories.js';
+import { defineTool } from './ToolDefinition.js';
+// Main submission tool - now with browser automation!
+export const submitToWebStore = defineTool({
+    name: 'submit_to_webstore',
+    description: `Automatically submit a Chrome extension to the Web Store using browser automation`,
+    annotations: {
+        category: ToolCategories.EXTENSION_DEVELOPMENT,
+        readOnlyHint: false,
+    },
+    schema: {
+        extensionPath: z.string().describe('Path to the extension directory'),
+        autoSubmit: z.boolean().optional().default(false).describe('Automatically submit via browser (requires login)'),
+    },
+    handler: async (request, response, context) => {
+        const { extensionPath } = request.params;
+        const outputPath = path.join(path.dirname(extensionPath), `${path.basename(extensionPath)}-submission.zip`);
+        response.appendResponseLine('🚀 **Chrome Web Store Submission Process**');
+        response.appendResponseLine('='.repeat(40));
+        response.appendResponseLine('');
+        // Step 1: Validate manifest
+        response.appendResponseLine('**Step 1: Validating manifest.json...**');
+        const manifestPath = path.join(extensionPath, 'manifest.json');
+        let manifest;
+        let manifestValid = true;
+        try {
+            if (!fs.existsSync(manifestPath)) {
+                response.appendResponseLine('❌ manifest.json not found');
+                return;
+            }
+            const manifestContent = fs.readFileSync(manifestPath, 'utf-8');
+            manifest = JSON.parse(manifestContent);
+            // Validation checks
+            const errors = [];
+            const warnings = [];
+            const suggestions = [];
+            // Required fields
+            if (manifest.manifest_version !== 3) {
+                errors.push('Must use Manifest V3 (manifest_version: 3)');
+                manifestValid = false;
+            }
+            if (!manifest.name || manifest.name.length > 45) {
+                errors.push('Name is required and must be <= 45 characters');
+                manifestValid = false;
+            }
+            if (!manifest.version || !/^\d+\.\d+\.\d+(\.\d+)?$/.test(manifest.version)) {
+                errors.push('Version must follow format: 1.0.0 or 1.0.0.0');
+                manifestValid = false;
+            }
+            if (!manifest.description || manifest.description.length > 132) {
+                warnings.push('Description should be provided and <= 132 characters');
+            }
+            // Icons
+            if (!manifest.icons || !manifest.icons['128']) {
+                warnings.push('Should include 128x128 icon');
+            }
+            // Permissions check
+            const dangerousPermissions = [
+                'debugger',
+                'devtools',
+                'management',
+                'privacy',
+                'proxy',
+                'system.cpu',
+                'system.memory',
+                'vpnProvider',
+            ];
+            const usedDangerousPerms = manifest.permissions?.filter(p => dangerousPermissions.includes(p)) || [];
+            if (usedDangerousPerms.length > 0) {
+                warnings.push(`Uses sensitive permissions: ${usedDangerousPerms.join(', ')}`);
+            }
+            // Host permissions
+            if (manifest.host_permissions?.includes('<all_urls>')) {
+                warnings.push('Using <all_urls> requires strong justification');
+            }
+            // Service worker check
+            if (manifest.background?.service_worker) {
+                const swPath = path.join(extensionPath, manifest.background.service_worker);
+                if (!fs.existsSync(swPath)) {
+                    errors.push(`Service worker file not found: ${manifest.background.service_worker}`);
+                    manifestValid = false;
+                }
+            }
+            // Suggestions
+            if (!manifest.icons?.['16'] || !manifest.icons?.['48']) {
+                suggestions.push('Consider adding 16x16 and 48x48 icons');
+            }
+            // Display results
+            if (manifestValid) {
+                response.appendResponseLine('✅ Manifest is valid');
+            }
+            else {
+                response.appendResponseLine('❌ Manifest has errors');
+            }
+            if (errors.length > 0) {
+                response.appendResponseLine('\n**Errors:**');
+                errors.forEach(err => response.appendResponseLine(`- ❌ ${err}`));
+            }
+            if (warnings.length > 0) {
+                response.appendResponseLine('\n**Warnings:**');
+                warnings.forEach(warn => response.appendResponseLine(`- ⚠️ ${warn}`));
+            }
+            if (suggestions.length > 0) {
+                response.appendResponseLine('\n**Suggestions:**');
+                suggestions.forEach(sug => response.appendResponseLine(`- 💡 ${sug}`));
+            }
+        }
+        catch (error) {
+            response.appendResponseLine(`❌ Failed to parse manifest: ${error}`);
+            return;
+        }
+        if (!manifestValid) {
+            response.appendResponseLine('');
+            response.appendResponseLine('❌ **Submission blocked:** Fix manifest errors first');
+            return;
+        }
+        response.appendResponseLine('');
+        // Step 2: Generate store listing
+        response.appendResponseLine('**Step 2: Generating store listing...**');
+        let description = `${manifest.name} is a Chrome extension that ${manifest.description || 'enhances your browsing experience'}.\n\n`;
+        description += '## Features\n\n';
+        // Infer features from permissions
+        if (manifest.permissions?.includes('tabs')) {
+            description += '• Manage and organize your browser tabs\n';
+        }
+        if (manifest.permissions?.includes('storage')) {
+            description += '• Save your preferences and settings\n';
+        }
+        if (manifest.permissions?.includes('notifications')) {
+            description += '• Receive helpful notifications\n';
+        }
+        if (manifest.content_scripts) {
+            description += '• Enhance website functionality\n';
+        }
+        if (manifest.action?.default_popup) {
+            description += '• Quick access from toolbar\n';
+        }
+        // Guess category
+        const { permissions = [], host_permissions = [] } = manifest;
+        let category = 'Productivity'; // Default
+        if (permissions.includes('tabs') || permissions.includes('bookmarks')) {
+            category = 'Productivity';
+        }
+        else if (permissions.includes('downloads')) {
+            category = 'Tools';
+        }
+        else if (host_permissions.some(h => h.includes('youtube') || h.includes('video'))) {
+            category = 'Entertainment';
+        }
+        else if (host_permissions.some(h => h.includes('facebook') || h.includes('twitter'))) {
+            category = 'Social & Communication';
+        }
+        response.appendResponseLine(`**Name:** ${manifest.name}`);
+        response.appendResponseLine(`**Summary:** ${manifest.description || `${manifest.name} - Chrome Extension`}`);
+        response.appendResponseLine(`**Category:** ${category}`);
+        response.appendResponseLine('');
+        response.appendResponseLine('**Generated Description Preview:**');
+        response.appendResponseLine(description.substring(0, 200) + '...');
+        response.appendResponseLine('');
+        // Step 3: Create submission package
+        response.appendResponseLine('**Step 3: Creating submission package...**');
+        try {
+            await new Promise((resolve, reject) => {
+                const output = fs.createWriteStream(outputPath);
+                const archive = archiver('zip', {
+                    zlib: { level: 9 } // Maximum compression
+                });
+                output.on('close', () => {
+                    const sizeKB = (archive.pointer() / 1024).toFixed(2);
+                    response.appendResponseLine(`📦 Package created: ${outputPath}`);
+                    response.appendResponseLine(`   Size: ${sizeKB} KB`);
+                    resolve();
+                });
+                archive.on('error', (err) => {
+                    response.appendResponseLine(`❌ Failed to create package: ${err}`);
+                    reject(err);
+                });
+                archive.pipe(output);
+                // Add extension files, excluding unnecessary ones
+                archive.glob('**/*', {
+                    cwd: extensionPath,
+                    ignore: [
+                        'node_modules/**',
+                        '.git/**',
+                        '.gitignore',
+                        '*.map',
+                        '.DS_Store',
+                        'Thumbs.db',
+                        '*.log',
+                        'test/**',
+                        'tests/**',
+                        'docs/**',
+                    ],
+                });
+                archive.finalize();
+            });
+            response.appendResponseLine('✅ Package created successfully!');
+        }
+        catch (error) {
+            response.appendResponseLine(`❌ Failed to create package: ${error}`);
+            return;
+        }
+        response.appendResponseLine('');
+        response.appendResponseLine('='.repeat(40));
+        response.appendResponseLine('**📋 Final Checklist:**');
+        response.appendResponseLine('');
+        response.appendResponseLine('Before submitting to Chrome Web Store:');
+        response.appendResponseLine('1. ✅ Manifest validated');
+        response.appendResponseLine('2. ✅ ZIP package created');
+        response.appendResponseLine('3. ⬜ Add screenshots (1280x800 recommended)');
+        response.appendResponseLine('4. ⬜ Add promotional images');
+        response.appendResponseLine('5. ⬜ Write privacy policy (if needed)');
+        response.appendResponseLine('6. ⬜ Pay $5 developer registration fee (first time only)');
+        response.appendResponseLine('');
+        response.appendResponseLine('**Submit at:** https://chrome.google.com/webstore/devconsole');
+        // Step 4: Auto-submit via browser automation
+        if (request.params.autoSubmit) {
+            response.appendResponseLine('');
+            response.appendResponseLine('='.repeat(40));
+            response.appendResponseLine('**🤖 Step 4: Automated Browser Submission**');
+            response.appendResponseLine('');
+            const page = context.getSelectedPage();
+            try {
+                // Navigate to Chrome Web Store Developer Dashboard
+                response.appendResponseLine('Navigating to Developer Dashboard...');
+                await page.goto('https://chrome.google.com/webstore/devconsole', {
+                    waitUntil: 'networkidle0',
+                });
+                // Check if user is logged in
+                await new Promise(resolve => setTimeout(resolve, 2000));
+                const currentUrl = page.url();
+                if (currentUrl.includes('accounts.google.com')) {
+                    response.appendResponseLine('⚠️ Login required. Please log in manually.');
+                    response.appendResponseLine('After logging in, run this command again.');
+                    return;
+                }
+                // Check if this is a new submission or update
+                response.appendResponseLine('Checking for existing extensions...');
+                // Look for "Add new item" button
+                const addNewButton = await page.$('button[aria-label="Add new item"], a[href*="register"]');
+                if (addNewButton) {
+                    response.appendResponseLine('Creating new extension submission...');
+                    await addNewButton.click();
+                    await page.waitForNavigation({ waitUntil: 'networkidle0' });
+                }
+                else {
+                    response.appendResponseLine('❌ Could not find "Add new item" button');
+                    response.appendResponseLine('Please ensure you are on the Developer Dashboard');
+                    return;
+                }
+                // Upload the ZIP file
+                response.appendResponseLine('Uploading extension package...');
+                const fileInput = await page.$('input[type="file"]');
+                if (fileInput) {
+                    await fileInput.uploadFile(outputPath);
+                    response.appendResponseLine('✅ Package uploaded');
+                    // Wait for processing
+                    await new Promise(resolve => setTimeout(resolve, 3000));
+                    // Look for any errors
+                    const errorElements = await page.$$('.error-message, [role="alert"]');
+                    if (errorElements.length > 0) {
+                        const errorText = await page.evaluate(() => {
+                            const errors = document.querySelectorAll('.error-message, [role="alert"]');
+                            return Array.from(errors).map(e => e.textContent).join('\n');
+                        });
+                        response.appendResponseLine(`⚠️ Upload errors detected: ${errorText}`);
+                    }
+                }
+                else {
+                    response.appendResponseLine('❌ Could not find file upload input');
+                    return;
+                }
+                // Fill in store listing information
+                response.appendResponseLine('Filling in store listing...');
+                // Title field (usually pre-filled from manifest)
+                const titleInput = await page.$('input[name="title"], input[aria-label*="title"]');
+                if (titleInput) {
+                    const currentTitle = await titleInput.evaluate(el => el.value);
+                    if (!currentTitle) {
+                        await titleInput.type(manifest.name);
+                    }
+                }
+                // Summary/Short description
+                const summaryInput = await page.$('textarea[name="summary"], textarea[aria-label*="summary"]');
+                if (summaryInput) {
+                    await summaryInput.click({ clickCount: 3 }); // Select all
+                    await summaryInput.type(manifest.description || `${manifest.name} - Chrome Extension`);
+                }
+                // Detailed description
+                const descriptionInput = await page.$('textarea[name="description"], textarea[aria-label*="description"]');
+                if (descriptionInput) {
+                    await descriptionInput.click({ clickCount: 3 });
+                    await descriptionInput.type(description);
+                }
+                // Category selection
+                const categorySelect = await page.$('select[name="category"], select[aria-label*="category"]');
+                if (categorySelect) {
+                    await categorySelect.select(category.toLowerCase().replace(/\s+/g, '_'));
+                }
+                // Language
+                const languageSelect = await page.$('select[name="language"], select[aria-label*="language"]');
+                if (languageSelect) {
+                    await languageSelect.select('en');
+                }
+                response.appendResponseLine('✅ Store listing filled');
+                // Screenshots reminder
+                response.appendResponseLine('');
+                response.appendResponseLine('⚠️ **Manual steps required:**');
+                response.appendResponseLine('1. Add at least 1 screenshot (1280x800 or 640x400)');
+                response.appendResponseLine('2. Add promotional images if needed');
+                response.appendResponseLine('3. Review all information');
+                response.appendResponseLine('4. Click "Save draft" or "Submit for review"');
+                response.appendResponseLine('');
+                response.appendResponseLine('The browser is now on the submission page.');
+                response.appendResponseLine('Complete the remaining steps manually.');
+            }
+            catch (error) {
+                response.appendResponseLine(`❌ Automation error: ${error}`);
+                response.appendResponseLine('You may need to complete the submission manually.');
+            }
+        }
+    },
+});

package/build/src/trace-processing/parse.js

@@ -0,0 +1,93 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { PerformanceInsightFormatter } from '../../node_modules/chrome-devtools-frontend/front_end/models/ai_assistance/data_formatters/PerformanceInsightFormatter.js';
+import { PerformanceTraceFormatter } from '../../node_modules/chrome-devtools-frontend/front_end/models/ai_assistance/data_formatters/PerformanceTraceFormatter.js';
+import { AgentFocus } from '../../node_modules/chrome-devtools-frontend/front_end/models/ai_assistance/performance/AIContext.js';
+import * as TraceEngine from '../../node_modules/chrome-devtools-frontend/front_end/models/trace/trace.js';
+import { logger } from '../logger.js';
+const engine = TraceEngine.TraceModel.Model.createWithAllHandlers();
+export function traceResultIsSuccess(x) {
+    return 'parsedTrace' in x;
+}
+export async function parseRawTraceBuffer(buffer) {
+    engine.resetProcessor();
+    if (!buffer) {
+        return {
+            error: 'No buffer was provided.',
+        };
+    }
+    const asString = new TextDecoder().decode(buffer);
+    if (!asString) {
+        return {
+            error: 'Decoding the trace buffer returned an empty string.',
+        };
+    }
+    try {
+        const data = JSON.parse(asString);
+        const events = Array.isArray(data) ? data : data.traceEvents;
+        await engine.parse(events);
+        const parsedTrace = engine.parsedTrace();
+        if (!parsedTrace) {
+            return {
+                error: 'No parsed trace was returned from the trace engine.',
+            };
+        }
+        const insights = parsedTrace?.insights ?? null;
+        return {
+            parsedTrace,
+            insights,
+        };
+    }
+    catch (e) {
+        const errorText = e instanceof Error ? e.message : JSON.stringify(e);
+        logger(`Unexpeced error parsing trace: ${errorText}`);
+        return {
+            error: errorText,
+        };
+    }
+}
+const extraFormatDescriptions = `Information on performance traces may contain main thread activity represented as call frames and network requests.
+
+${PerformanceTraceFormatter.callFrameDataFormatDescription}
+
+${PerformanceTraceFormatter.networkDataFormatDescription}
+`;
+export function getTraceSummary(result) {
+    const focus = AgentFocus.fromParsedTrace(result.parsedTrace);
+    const formatter = new PerformanceTraceFormatter(focus);
+    const output = formatter.formatTraceSummary();
+    return `${extraFormatDescriptions}
+
+${output}`;
+}
+export function getInsightOutput(result, insightName) {
+    if (!result.insights) {
+        return {
+            error: 'No Performance insights are available for this trace.',
+        };
+    }
+    // Currently, we do not support inspecting traces with multiple navigations. We either:
+    // 1. Find Insights from the first navigation (common case: user records a trace with a page reload to test load performance)
+    // 2. Fall back to finding Insights not associated with a navigation (common case: user tests an interaction without a page load).
+    const mainNavigationId = result.parsedTrace.data.Meta.mainFrameNavigations.at(0)?.args.data
+        ?.navigationId;
+    const insightsForNav = result.insights.get(mainNavigationId ?? TraceEngine.Types.Events.NO_NAVIGATION);
+    if (!insightsForNav) {
+        return {
+            error: 'No Performance Insights for this trace.',
+        };
+    }
+    const matchingInsight = insightName in insightsForNav.model
+        ? insightsForNav.model[insightName]
+        : null;
+    if (!matchingInsight) {
+        return {
+            error: `No Insight with the name ${insightName} found. Double check the name you provided is accurate and try again.`,
+        };
+    }
+    const formatter = new PerformanceInsightFormatter(AgentFocus.fromParsedTrace(result.parsedTrace), matchingInsight);
+    return { output: formatter.formatInsight() };
+}

package/build/src/utils/pagination.js

@@ -0,0 +1,49 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+const DEFAULT_PAGE_SIZE = 20;
+export function paginate(items, options) {
+    const total = items.length;
+    if (!options || noPaginationOptions(options)) {
+        return {
+            items,
+            currentPage: 0,
+            totalPages: 1,
+            hasNextPage: false,
+            hasPreviousPage: false,
+            startIndex: 0,
+            endIndex: total,
+            invalidPage: false,
+        };
+    }
+    const pageSize = options.pageSize ?? DEFAULT_PAGE_SIZE;
+    const totalPages = Math.max(1, Math.ceil(total / pageSize));
+    const { currentPage, invalidPage } = resolvePageIndex(options.pageIdx, totalPages);
+    const startIndex = currentPage * pageSize;
+    const pageItems = items.slice(startIndex, startIndex + pageSize);
+    const endIndex = startIndex + pageItems.length;
+    return {
+        items: pageItems,
+        currentPage,
+        totalPages,
+        hasNextPage: currentPage < totalPages - 1,
+        hasPreviousPage: currentPage > 0,
+        startIndex,
+        endIndex,
+        invalidPage,
+    };
+}
+function noPaginationOptions(options) {
+    return options.pageSize === undefined && options.pageIdx === undefined;
+}
+function resolvePageIndex(pageIdx, totalPages) {
+    if (pageIdx === undefined) {
+        return { currentPage: 0, invalidPage: false };
+    }
+    if (pageIdx < 0 || pageIdx >= totalPages) {
+        return { currentPage: 0, invalidPage: true };
+    }
+    return { currentPage: pageIdx, invalidPage: false };
+}

package/package.json

@@ -0,0 +1,79 @@
+{
+  "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",
+  "type": "module",
+  "bin": "./build/src/index.js",
+  "main": "index.js",
+  "scripts": {
+    "build": "tsc && node --experimental-strip-types --no-warnings=ExperimentalWarning scripts/post-build.ts",
+    "typecheck": "tsc --noEmit",
+    "format": "eslint --cache --fix . && prettier --write --cache .",
+    "check-format": "eslint --cache . && prettier --check --cache .;",
+    "docs": "npm run build && npm run docs:generate && npm run format",
+    "docs:generate": "node --experimental-strip-types scripts/generate-docs.ts",
+    "start": "npm run build && node build/src/index.js",
+    "start-debug": "DEBUG=mcp:* DEBUG_COLORS=false npm run build && node build/src/index.js",
+    "test": "npm run build && node --require ./build/tests/setup.js --no-warnings=ExperimentalWarning --test-reporter spec --test-force-exit --test \"build/tests/**/*.test.js\"",
+    "test:only": "npm run build && node --require ./build/tests/setup.js --no-warnings=ExperimentalWarning --test-reporter spec --test-force-exit --test --test-only \"build/tests/**/*.test.js\"",
+    "test:only:no-build": "node --require ./build/tests/setup.js --no-warnings=ExperimentalWarning --test-reporter spec --test-force-exit --test --test-only \"build/tests/**/*.test.js\"",
+    "test:update-snapshots": "npm run build && node --require ./build/tests/setup.js --no-warnings=ExperimentalWarning --test-force-exit --test --test-update-snapshots \"build/tests/**/*.test.js\"",
+    "prepare": "node --experimental-strip-types scripts/prepare.ts",
+    "sync-server-json-version": "node  --experimental-strip-types scripts/sync-server-json-version.ts && npm run format"
+  },
+  "files": [
+    "build/src",
+    "build/node_modules",
+    "LICENSE",
+    "!*.tsbuildinfo"
+  ],
+  "repository": "usedhonda/chrome-devtools-mcp",
+  "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",
+  "keywords": [
+    "mcp",
+    "chrome",
+    "devtools",
+    "chrome-extension",
+    "webstore",
+    "browser-automation",
+    "extension-development"
+  ],
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "1.18.1",
+    "archiver": "^7.0.1",
+    "debug": "4.4.3",
+    "puppeteer-core": "24.22.3",
+    "yargs": "18.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.35.0",
+    "@stylistic/eslint-plugin": "^5.4.0",
+    "@types/archiver": "^6.0.2",
+    "@types/debug": "^4.1.12",
+    "@types/filesystem": "^0.0.36",
+    "@types/node": "^24.3.3",
+    "@types/sinon": "^17.0.4",
+    "@types/yargs": "^17.0.33",
+    "@typescript-eslint/eslint-plugin": "^8.43.0",
+    "@typescript-eslint/parser": "^8.43.0",
+    "chrome-devtools-frontend": "1.0.1520535",
+    "eslint": "^9.35.0",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-import-resolver-typescript": "^4.4.4",
+    "globals": "^16.4.0",
+    "prettier": "^3.6.2",
+    "puppeteer": "24.22.3",
+    "sinon": "^21.0.0",
+    "typescript-eslint": "^8.43.0",
+    "typescript": "^5.9.2"
+  },
+  "engines": {
+    "node": ">=22.12.0"
+  }
+}