chrometools-mcp 2.4.2 → 3.1.2

package/extension/icons/create-icons.js

@@ -0,0 +1,164 @@
+/**
+ * Create ChromeTools extension icons
+ * Run with: node create-icons.js
+ *
+ * Creates a happy robot icon with Chrome colors
+ */
+
+import Jimp from 'jimp';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+// Colors (RGBA format for Jimp)
+const CHROME_BLUE = 0x4285F4FF;
+const CHROME_GREEN = 0x34A853FF;
+const CHROME_YELLOW = 0xFBBC05FF;
+const CHROME_RED = 0xEA4335FF;
+const ROBOT_BODY = 0x5C6BC0FF;     // Nice indigo/purple
+const ROBOT_FACE = 0x7986CBFF;     // Lighter purple for face
+const ROBOT_LIGHT = 0x9FA8DAFF;    // Highlight
+const WHITE = 0xFFFFFFFF;
+const BLACK = 0x333333FF;
+const SMILE_COLOR = 0xFFFFFFFF;
+const ANTENNA_COLOR = 0xFFD54FFF;  // Golden antenna ball
+const TRANSPARENT = 0x00000000;
+
+async function createIcon(size) {
+  const image = new Jimp(size, size, TRANSPARENT);
+
+  const center = size / 2;
+  const headRadius = size * 0.38;
+
+  // Draw robot head (rounded rectangle approximation with circle)
+  for (let y = 0; y < size; y++) {
+    for (let x = 0; x < size; x++) {
+      const dx = x - center;
+      const dy = y - center + size * 0.05; // Slightly lower
+      const dist = Math.sqrt(dx * dx + dy * dy);
+
+      // Head shape (circle with flat bottom)
+      if (dist <= headRadius && y < center + headRadius * 0.85) {
+        // Gradient effect - lighter at top
+        const gradientFactor = 1 - (y / size) * 0.3;
+        if (dy < -headRadius * 0.3) {
+          image.setPixelColor(ROBOT_LIGHT, x, y);
+        } else {
+          image.setPixelColor(ROBOT_FACE, x, y);
+        }
+      }
+    }
+  }
+
+  // Draw ears (Chrome colored circles on sides)
+  const earRadius = size * 0.12;
+  const earY = center;
+  drawCircle(image, center - headRadius - earRadius * 0.3, earY, earRadius, CHROME_BLUE);
+  drawCircle(image, center + headRadius + earRadius * 0.3, earY, earRadius, CHROME_GREEN);
+
+  // Draw antenna
+  const antennaX = center;
+  const antennaTopY = center - headRadius - size * 0.12;
+  const antennaBottomY = center - headRadius + size * 0.05;
+
+  // Antenna stem
+  for (let y = antennaTopY + size * 0.06; y <= antennaBottomY; y++) {
+    const thickness = Math.max(1, size * 0.03);
+    for (let dx = -thickness; dx <= thickness; dx++) {
+      image.setPixelColor(ROBOT_LIGHT, Math.round(antennaX + dx), Math.round(y));
+    }
+  }
+
+  // Antenna ball (golden/yellow)
+  drawCircle(image, antennaX, antennaTopY + size * 0.03, size * 0.07, ANTENNA_COLOR);
+
+  // Draw happy eyes (big and expressive)
+  const eyeRadius = size * 0.11;
+  const eyeOffset = size * 0.15;
+  const eyeY = center - size * 0.05;
+
+  // Eye whites
+  drawCircle(image, center - eyeOffset, eyeY, eyeRadius, WHITE);
+  drawCircle(image, center + eyeOffset, eyeY, eyeRadius, WHITE);
+
+  // Pupils (looking slightly up and to the side - friendly look)
+  const pupilRadius = eyeRadius * 0.5;
+  const pupilOffsetX = size * 0.02;
+  const pupilOffsetY = -size * 0.02;
+  drawCircle(image, center - eyeOffset + pupilOffsetX, eyeY + pupilOffsetY, pupilRadius, CHROME_BLUE);
+  drawCircle(image, center + eyeOffset + pupilOffsetX, eyeY + pupilOffsetY, pupilRadius, CHROME_BLUE);
+
+  // Eye shine (small white dot)
+  if (size >= 32) {
+    const shineRadius = Math.max(1, size * 0.025);
+    drawCircle(image, center - eyeOffset + pupilOffsetX - size * 0.02, eyeY + pupilOffsetY - size * 0.02, shineRadius, WHITE);
+    drawCircle(image, center + eyeOffset + pupilOffsetX - size * 0.02, eyeY + pupilOffsetY - size * 0.02, shineRadius, WHITE);
+  }
+
+  // Draw big happy smile
+  const smileY = center + size * 0.12;
+  const smileWidth = size * 0.22;
+  const smileHeight = size * 0.08;
+
+  for (let x = center - smileWidth; x <= center + smileWidth; x++) {
+    // Curved smile (arc)
+    const normalizedX = (x - center) / smileWidth;
+    const curveY = smileHeight * (1 - normalizedX * normalizedX);
+
+    for (let dy = 0; dy <= curveY; dy++) {
+      const py = Math.round(smileY + dy);
+      if (py < size) {
+        image.setPixelColor(WHITE, Math.round(x), py);
+      }
+    }
+  }
+
+  // Rosy cheeks (small pink circles for larger sizes)
+  if (size >= 48) {
+    const cheekRadius = size * 0.04;
+    const cheekY = center + size * 0.08;
+    const cheekColor = 0xFFAB91FF; // Soft coral/pink
+
+    drawCircle(image, center - eyeOffset - size * 0.1, cheekY, cheekRadius, cheekColor);
+    drawCircle(image, center + eyeOffset + size * 0.1, cheekY, cheekRadius, cheekColor);
+  }
+
+  return image;
+}
+
+function drawCircle(image, cx, cy, radius, color) {
+  const r2 = radius * radius;
+  for (let y = cy - radius - 1; y <= cy + radius + 1; y++) {
+    for (let x = cx - radius - 1; x <= cx + radius + 1; x++) {
+      const dx = x - cx;
+      const dy = y - cy;
+      if (dx * dx + dy * dy <= r2) {
+        if (x >= 0 && x < image.getWidth() && y >= 0 && y < image.getHeight()) {
+          image.setPixelColor(color, Math.round(x), Math.round(y));
+        }
+      }
+    }
+  }
+}
+
+async function main() {
+  console.log('Creating ChromeTools icons (happy robot)...');
+
+  // Create icons
+  const icon16 = await createIcon(16);
+  const icon48 = await createIcon(48);
+  const icon128 = await createIcon(128);
+
+  // Save icons
+  await icon16.writeAsync(path.join(__dirname, 'icon16.png'));
+  await icon48.writeAsync(path.join(__dirname, 'icon48.png'));
+  await icon128.writeAsync(path.join(__dirname, 'icon128.png'));
+
+  console.log('✅ Icons created successfully!');
+  console.log('  - icon16.png (happy robot)');
+  console.log('  - icon48.png (happy robot)');
+  console.log('  - icon128.png (happy robot)');
+}
+
+main().catch(console.error);

package/extension/manifest.json

@@ -0,0 +1,58 @@
+{
+  "manifest_version": 3,
+  "name": "ChromeTools MCP",
+  "version": "3.1.2",
+  "description": "Tab tracking and scenario recording for chrometools-mcp",
+
+  "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAxLLqg7Nu1h9ogRVgQoVMRPv8Jp7uRJugZSGUh++Niq0xm3khJefBuJ3L0dSG6xb9tkjTdgqUyg81VUgJBDVw9Bxu6iz1uL17VnEGHDZKe5wpsEpG8o6ZsTWtKRDeoxmkCGSOSDsh/ihlJe8mFaqpBYz6RBaO28R89TNobVhSobTQPB1ptyEND7W7JnsnMOiMcTo9l6j9HrIHLoHj7tO42DHNI4tEyLxI7C6R3i5dLIdwwxJMj0Hhrx4Ncmh24AzPyZypxVvpa1V7HP3sAXGBoUjLd/SEaY8j50lnaIQI3AkYv86pS9l6EZ6y3XCuW7C7W9guTTL/7ZNawYoE2bJ1HwIDAQAB",
+
+  "permissions": [
+    "tabs",
+    "activeTab",
+    "scripting",
+    "storage",
+    "webNavigation",
+    "nativeMessaging"
+  ],
+
+  "host_permissions": [
+    "<all_urls>"
+  ],
+
+  "background": {
+    "service_worker": "background.js",
+    "type": "module"
+  },
+
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["content.js"],
+      "css": ["recorder-overlay.css"],
+      "run_at": "document_start",
+      "all_frames": false
+    }
+  ],
+
+  "action": {
+    "default_popup": "popup/popup.html",
+    "default_icon": {
+      "16": "icons/icon16.png",
+      "48": "icons/icon48.png",
+      "128": "icons/icon128.png"
+    }
+  },
+
+  "icons": {
+    "16": "icons/icon16.png",
+    "48": "icons/icon48.png",
+    "128": "icons/icon128.png"
+  },
+
+  "web_accessible_resources": [
+    {
+      "resources": ["recorder-overlay.css"],
+      "matches": ["<all_urls>"]
+    }
+  ]
+}

package/extension/popup/popup.css

@@ -0,0 +1,437 @@
+/* ChromeTools MCP Extension - Popup Styles */
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 13px;
+  color: #1f2937;
+  background: #f9fafb;
+  min-width: 320px;
+  max-width: 320px;
+}
+
+.popup-container {
+  display: flex;
+  flex-direction: column;
+  min-height: 400px;
+}
+
+/* Header */
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.logo-icon {
+  width: 28px;
+  height: 28px;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-size: 11px;
+}
+
+.logo-text {
+  font-weight: 600;
+  font-size: 14px;
+}
+
+.connection-status {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  opacity: 0.9;
+}
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #ef4444;
+}
+
+.connection-status.connected .status-dot {
+  background: #10b981;
+}
+
+/* Tabs Navigation */
+.tabs {
+  display: flex;
+  background: white;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.tab {
+  flex: 1;
+  padding: 10px 16px;
+  border: none;
+  background: none;
+  font-size: 13px;
+  font-weight: 500;
+  color: #6b7280;
+  cursor: pointer;
+  transition: all 0.2s;
+  border-bottom: 2px solid transparent;
+}
+
+.tab:hover {
+  color: #374151;
+  background: #f3f4f6;
+}
+
+.tab.active {
+  color: #667eea;
+  border-bottom-color: #667eea;
+}
+
+/* Tab Content */
+.tab-content {
+  display: none;
+  padding: 16px;
+  flex: 1;
+  background: white;
+}
+
+.tab-content.active {
+  display: block;
+}
+
+/* Recording Status */
+.recording-status {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 12px;
+  background: #f3f4f6;
+  border-radius: 8px;
+  margin-bottom: 16px;
+}
+
+.recording-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: #9ca3af;
+}
+
+.recording-status.recording .recording-dot {
+  background: #ef4444;
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+.recording-status.paused .recording-dot {
+  background: #f59e0b;
+  animation: none;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.5; transform: scale(1.1); }
+}
+
+.recording-text {
+  font-weight: 500;
+  color: #374151;
+}
+
+/* Metadata Form */
+.metadata-form {
+  margin-bottom: 16px;
+}
+
+.form-group {
+  margin-bottom: 12px;
+}
+
+.form-group label {
+  display: block;
+  font-size: 11px;
+  font-weight: 500;
+  color: #6b7280;
+  margin-bottom: 4px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.form-group input {
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  font-size: 13px;
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.form-group input:focus {
+  outline: none;
+  border-color: #667eea;
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+.form-group input::placeholder {
+  color: #9ca3af;
+}
+
+/* Action Count Display */
+.action-count-display {
+  text-align: center;
+  padding: 24px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 8px;
+  color: white;
+  margin-bottom: 16px;
+}
+
+.count-number {
+  display: block;
+  font-size: 48px;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.count-label {
+  font-size: 12px;
+  opacity: 0.8;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+
+/* Buttons */
+.controls {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 12px 16px;
+  border: none;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.btn:hover {
+  transform: translateY(-1px);
+}
+
+.btn:active {
+  transform: translateY(0);
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.btn-icon {
+  font-size: 10px;
+}
+
+.btn-primary {
+  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+  color: white;
+  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
+}
+
+.btn-primary:hover {
+  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
+}
+
+.btn-secondary {
+  background: #f3f4f6;
+  color: #374151;
+}
+
+.btn-secondary:hover {
+  background: #e5e7eb;
+}
+
+.btn-danger {
+  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+  color: white;
+  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
+}
+
+.btn-danger:hover {
+  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
+}
+
+.btn-ghost {
+  background: transparent;
+  color: #6b7280;
+}
+
+.btn-ghost:hover {
+  background: #f3f4f6;
+}
+
+.btn-reset {
+  background: #fef2f2;
+  color: #dc2626;
+  border: 1px solid #fecaca;
+}
+
+.btn-reset:hover {
+  background: #fee2e2;
+}
+
+/* Actions Preview */
+.actions-preview {
+  margin-top: 16px;
+  border-top: 1px solid #e5e7eb;
+  padding-top: 16px;
+}
+
+.actions-preview h4 {
+  font-size: 11px;
+  font-weight: 600;
+  color: #6b7280;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 8px;
+}
+
+.actions-list {
+  list-style: none;
+  max-height: 150px;
+  overflow-y: auto;
+}
+
+.actions-list li {
+  padding: 8px;
+  background: #f9fafb;
+  border-radius: 4px;
+  margin-bottom: 4px;
+  font-size: 11px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.action-type {
+  font-weight: 600;
+  color: #667eea;
+}
+
+.action-details {
+  color: #6b7280;
+  font-size: 10px;
+  max-width: 150px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Tabs List */
+.tabs-list {
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.tabs-loading {
+  text-align: center;
+  padding: 32px;
+  color: #9ca3af;
+}
+
+.tab-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.tab-item:hover {
+  background: #f3f4f6;
+}
+
+.tab-item.active {
+  background: rgba(102, 126, 234, 0.1);
+}
+
+.tab-favicon {
+  width: 16px;
+  height: 16px;
+  border-radius: 2px;
+  background: #e5e7eb;
+}
+
+.tab-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.tab-title {
+  font-weight: 500;
+  color: #1f2937;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.tab-url {
+  font-size: 11px;
+  color: #9ca3af;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.tab-active-badge {
+  font-size: 9px;
+  padding: 2px 6px;
+  background: #10b981;
+  color: white;
+  border-radius: 10px;
+  text-transform: uppercase;
+  font-weight: 600;
+}
+
+/* Footer */
+.footer {
+  padding: 8px 16px;
+  background: #f9fafb;
+  border-top: 1px solid #e5e7eb;
+  text-align: center;
+}
+
+.version {
+  font-size: 10px;
+  color: #9ca3af;
+}
+
+/* Utility */
+.hidden {
+  display: none !important;
+}