chrometools-mcp 1.8.2 → 2.2.0

package/recorder/recorder-script.js

@@ -27,6 +27,56 @@ export function generateRecorderScript() {
 (function() {
   'use strict';
 
+  // ==========================
+  // URL TO PROJECT UTILITIES
+  // ==========================
+
+  /**
+   * Extract project ID from URL (browser version)
+   * @param {string} url - Full URL
+   * @returns {string} - Project ID
+   */
+  function urlToProjectId(url) {
+    try {
+      if (url.startsWith('file://')) {
+        return 'local';
+      }
+
+      const urlObj = new URL(url);
+      let hostname = urlObj.hostname.toLowerCase();
+      const port = urlObj.port;
+
+      hostname = hostname.replace(/^www\\./, '');
+      const parts = hostname.split('.');
+
+      if (parts.length === 1) {
+        const projectId = sanitizeProjectId(parts[0]);
+        return port ? \`\${projectId}-\${port}\` : projectId;
+      }
+
+      const mainDomain = parts[parts.length - 2];
+      const projectId = sanitizeProjectId(mainDomain);
+      return port ? \`\${projectId}-\${port}\` : projectId;
+
+    } catch (error) {
+      console.error('[url-to-project] Invalid URL:', url, error);
+      return 'unknown';
+    }
+  }
+
+  /**
+   * Sanitize project ID (browser version)
+   * @param {string} id - Raw project ID
+   * @returns {string} - Sanitized ID
+   */
+  function sanitizeProjectId(id) {
+    return id
+      .toLowerCase()
+      .replace(/[^a-z0-9-]/g, '-')
+      .replace(/-+/g, '-')
+      .replace(/^-|-$/g, '');
+  }
+
   // ==========================
   // RECORDER STATE
   // ==========================
@@ -91,9 +141,28 @@ export function generateRecorderScript() {
         hoverDeletionCandidates: Array.from(state.hoverDeletionCandidates),
         timestamp: Date.now()
       };
-      localStorage.setItem(STORAGE_KEY, JSON.stringify(persistentState));
+
+      // Validate state before stringifying
+      let jsonString;
+      try {
+        jsonString = JSON.stringify(persistentState);
+      } catch (stringifyError) {
+        console.error('[Recorder] Failed to stringify state:', stringifyError.message);
+        console.error('[Recorder] Problematic state:', persistentState);
+        return;
+      }
+
+      // Validate JSON string
+      if (!jsonString || typeof jsonString !== 'string' || jsonString.length === 0) {
+        console.error('[Recorder] Invalid JSON string generated');
+        return;
+      }
+
+      // Save to localStorage
+      localStorage.setItem(STORAGE_KEY, jsonString);
     } catch (error) {
       console.error('[Recorder] Failed to save state:', error);
+      // Don't let save errors crash the recorder
     }
   }
 
@@ -108,11 +177,37 @@ export function generateRecorderScript() {
       const saved = localStorage.getItem(STORAGE_KEY);
       if (!saved) return null;
 
-      const persistentState = JSON.parse(saved);
+      // Validate JSON before parsing
+      if (typeof saved !== 'string' || saved.trim().length === 0) {
+        console.warn('[Recorder] Invalid state data in localStorage, clearing...');
+        clearStateFromLocalStorage();
+        resetClearingFlag();
+        return null;
+      }
+
+      let persistentState;
+      try {
+        persistentState = JSON.parse(saved);
+      } catch (parseError) {
+        console.error('[Recorder] Corrupted state data in localStorage:', parseError.message);
+        console.error('[Recorder] Data preview:', saved.substring(0, 100));
+        clearStateFromLocalStorage();
+        resetClearingFlag();
+        return null;
+      }
+
+      // Validate parsed state structure
+      if (!persistentState || typeof persistentState !== 'object') {
+        console.warn('[Recorder] Invalid state structure, clearing...');
+        clearStateFromLocalStorage();
+        resetClearingFlag();
+        return null;
+      }
 
       // Check if state is not too old (max 24 hours)
       const maxAge = 24 * 60 * 60 * 1000; // 24 hours
-      if (Date.now() - persistentState.timestamp > maxAge) {
+      if (Date.now() - (persistentState.timestamp || 0) > maxAge) {
+        console.log('[Recorder] State too old, clearing...');
         clearStateFromLocalStorage();
         resetClearingFlag();
         return null;
@@ -121,6 +216,13 @@ export function generateRecorderScript() {
       return persistentState;
     } catch (error) {
       console.error('[Recorder] Failed to load state:', error);
+      // Clear potentially corrupted state
+      try {
+        clearStateFromLocalStorage();
+        resetClearingFlag();
+      } catch (clearError) {
+        console.error('[Recorder] Failed to clear corrupted state:', clearError);
+      }
       return null;
     }
   }
@@ -1341,7 +1443,10 @@ export function generateRecorderScript() {
     // Call MCP server via exposed function
     if (window.saveScenarioToMCP) {
       try {
-        const result = await window.saveScenarioToMCP(scenario);
+        // Extract projectId from URL
+        const urlProjectId = urlToProjectId(state.startUrl || window.location.href);
+
+        const result = await window.saveScenarioToMCP(scenario, urlProjectId);
         if (result.success) {
           // Set clearing flag to prevent any saves during cleanup
           isClearing = true;
@@ -1599,9 +1704,10 @@ export function generateRecorderScript() {
 
 /**
  * Inject recorder into page
+ * Project ID will be automatically determined from URL in browser context
  * @param {Object} page - Puppeteer page instance
  */
-export async function injectRecorder(page, baseDir) {
+export async function injectRecorder(page) {
   try {
     // Check if recorder is already injected
     const alreadyInjected = await page.evaluate(() => {
@@ -1629,20 +1735,20 @@ export async function injectRecorder(page, baseDir) {
 
     // Only expose functions if they don't exist yet
     if (!functionExists) {
-      await page.exposeFunction('saveScenarioToMCP', async (scenarioData) => {
+      // saveScenarioToMCP now receives urlProjectId from browser
+      await page.exposeFunction('saveScenarioToMCP', async (scenarioData, urlProjectId) => {
         const { saveScenario } = await import('./scenario-storage.js');
-        return await saveScenario(scenarioData, baseDir);
+        return await saveScenario(scenarioData, urlProjectId);
       });
 
+      // listScenariosFromMCP returns ALL scenarios (no filtering by project)
       await page.exposeFunction('listScenariosFromMCP', async () => {
-        const { loadIndex } = await import('./scenario-storage.js');
-        const path = await import('path');
+        const { listScenarios } = await import('./scenario-storage.js');
         try {
-          const scenariosDir = path.join(baseDir, 'scenarios');
-          const index = await loadIndex(scenariosDir);
+          const scenarios = await listScenarios(null, true); // null projectId, allProjects=true
           return {
             success: true,
-            scenarios: Object.values(index)
+            scenarios: scenarios
           };
         } catch (error) {
           return {