Major refactor: Multi-user Chrome MCP extension with remote server architecture

app/chrome-extension/inject-scripts/form-submit-helper.js

@@ -0,0 +1,277 @@
+/* eslint-disable */
+// form-submit-helper.js
+// Enhanced form submission with multiple methods
+
+if (window.__FORM_SUBMIT_HELPER_INITIALIZED__) {
+  // Already initialized, skip
+} else {
+  window.__FORM_SUBMIT_HELPER_INITIALIZED__ = true;
+
+  /**
+   * Submit a form using multiple methods
+   * @param {string} formSelector - CSS selector for the form
+   * @param {string} inputSelector - CSS selector for input field to focus (optional)
+   * @param {string} submitMethod - Preferred submission method
+   * @returns {Promise<Object>} - Result of the submission
+   */
+  async function submitForm(formSelector = 'form', inputSelector = null, submitMethod = 'auto') {
+    try {
+      console.log(`🔄 Attempting form submission with method: ${submitMethod}`);
+      
+      // Find the form
+      let form = null;
+      if (formSelector) {
+        form = document.querySelector(formSelector);
+      }
+      
+      // If no specific form found, try to find the form containing the input
+      if (!form && inputSelector) {
+        const input = document.querySelector(inputSelector);
+        if (input) {
+          form = input.closest('form');
+        }
+      }
+      
+      // If still no form, try to find any form on the page
+      if (!form) {
+        form = document.querySelector('form');
+      }
+
+      if (!form) {
+        return {
+          success: false,
+          error: 'No form found on the page',
+        };
+      }
+
+      // Focus input if specified
+      if (inputSelector) {
+        const input = document.querySelector(inputSelector);
+        if (input) {
+          input.focus();
+          await sleep(200);
+        }
+      }
+
+      // Try submission based on method
+      let result = null;
+      
+      if (submitMethod === 'enter' || submitMethod === 'auto') {
+        result = await tryEnterKeySubmission(form, inputSelector);
+        if (result && result.success) {
+          return result;
+        }
+      }
+      
+      if (submitMethod === 'button' || submitMethod === 'auto') {
+        result = await tryButtonSubmission(form);
+        if (result && result.success) {
+          return result;
+        }
+      }
+      
+      if (submitMethod === 'auto') {
+        result = await tryFormSubmission(form);
+        if (result && result.success) {
+          return result;
+        }
+      }
+
+      return {
+        success: false,
+        error: 'All submission methods failed',
+        attemptedMethods: submitMethod === 'auto' ? ['enter', 'button', 'form'] : [submitMethod],
+      };
+
+    } catch (error) {
+      console.error('Error in submitForm:', error);
+      return {
+        success: false,
+        error: `Unexpected error: ${error.message}`,
+      };
+    }
+  }
+
+  /**
+   * Try submitting form using Enter key
+   * @param {Element} form - The form element
+   * @param {string} inputSelector - Input selector to focus
+   * @returns {Promise<Object|null>}
+   */
+  async function tryEnterKeySubmission(form, inputSelector) {
+    try {
+      console.log('🔄 Trying Enter key submission');
+      
+      let targetElement = null;
+      
+      if (inputSelector) {
+        targetElement = document.querySelector(inputSelector);
+      }
+      
+      if (!targetElement) {
+        // Find the first input in the form
+        targetElement = form.querySelector('input[type="text"], input[type="search"], textarea, input:not([type])');
+      }
+      
+      if (!targetElement) {
+        return null;
+      }
+
+      targetElement.focus();
+      await sleep(200);
+      
+      const enterEvent = new KeyboardEvent('keydown', {
+        key: 'Enter',
+        code: 'Enter',
+        keyCode: 13,
+        which: 13,
+        bubbles: true,
+        cancelable: true
+      });
+      
+      targetElement.dispatchEvent(enterEvent);
+      
+      // Also try keypress and keyup for compatibility
+      const enterPress = new KeyboardEvent('keypress', {
+        key: 'Enter',
+        code: 'Enter',
+        keyCode: 13,
+        which: 13,
+        bubbles: true,
+        cancelable: true
+      });
+      targetElement.dispatchEvent(enterPress);
+      
+      const enterUp = new KeyboardEvent('keyup', {
+        key: 'Enter',
+        code: 'Enter',
+        keyCode: 13,
+        which: 13,
+        bubbles: true,
+        cancelable: true
+      });
+      targetElement.dispatchEvent(enterUp);
+      
+      await sleep(500);
+      
+      return {
+        success: true,
+        method: 'enter_key',
+        element: targetElement.tagName.toLowerCase(),
+      };
+      
+    } catch (error) {
+      console.debug('Enter key submission failed:', error);
+      return null;
+    }
+  }
+
+  /**
+   * Try submitting form by clicking submit button
+   * @param {Element} form - The form element
+   * @returns {Promise<Object|null>}
+   */
+  async function tryButtonSubmission(form) {
+    try {
+      console.log('🔄 Trying button submission');
+      
+      const buttonSelectors = [
+        'input[type="submit"]',
+        'button[type="submit"]',
+        'button:not([type])',  // Default button type is submit
+        'input[value*="Search" i]',
+        'input[value*="Submit" i]',
+        'input[value*="Send" i]',
+        'button:contains("Search")',
+        'button:contains("Submit")',
+        'button:contains("Send")',
+        '.submit-btn',
+        '.search-btn',
+        '.btn-submit',
+        '[role="button"][aria-label*="search" i]',
+        '[role="button"][aria-label*="submit" i]'
+      ];
+
+      for (const selector of buttonSelectors) {
+        try {
+          let button = form.querySelector(selector);
+          
+          // If not found in form, try the whole document
+          if (!button) {
+            button = document.querySelector(selector);
+          }
+          
+          if (button) {
+            button.click();
+            await sleep(300);
+            
+            return {
+              success: true,
+              method: 'button_click',
+              selector: selector,
+              element: button.tagName.toLowerCase(),
+            };
+          }
+        } catch (e) {
+          continue;
+        }
+      }
+      
+      return null;
+      
+    } catch (error) {
+      console.debug('Button submission failed:', error);
+      return null;
+    }
+  }
+
+  /**
+   * Try submitting form using form.submit()
+   * @param {Element} form - The form element
+   * @returns {Promise<Object|null>}
+   */
+  async function tryFormSubmission(form) {
+    try {
+      console.log('🔄 Trying form.submit()');
+      
+      form.submit();
+      await sleep(300);
+      
+      return {
+        success: true,
+        method: 'form_submit',
+      };
+      
+    } catch (error) {
+      console.debug('Form submission failed:', error);
+      return null;
+    }
+  }
+
+  /**
+   * Sleep utility function
+   * @param {number} ms - Milliseconds to sleep
+   * @returns {Promise<void>}
+   */
+  function sleep(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+  }
+
+  // Listen for messages from the extension
+  chrome.runtime.onMessage.addListener((request, _sender, sendResponse) => {
+    if (request.action === 'submitForm') {
+      submitForm(request.formSelector, request.inputSelector, request.submitMethod)
+        .then(sendResponse)
+        .catch((error) => {
+          sendResponse({
+            success: false,
+            error: `Unexpected error: ${error.message}`,
+          });
+        });
+      return true; // Indicates async response
+    } else if (request.action === 'form_submit_ping') {
+      sendResponse({ status: 'pong' });
+      return false;
+    }
+  });
+}