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

/* 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;
    }
  });
}