Как переписать скрипт под выполнение у посетителя в браузере?

Question

sasmoney @sasmoney

Как переписать скрипт под выполнение у посетителя в браузере?

Есть такой скрипт, отлично работающий при выполнении из консоли сервера, который по итогу выдает html код формы с страницы сайта.
Как переписать данный скрипт таким образом, чтобы его мог выполнить обычный посетитель из своего браузера, посетив страницу моего сайта?

const puppeteer = require('puppeteer');
const path = require('path');

(async () => {
  const browser = await puppeteer.launch({ args: ['--no-sandbox'], headless: 'new' });
  const page = await browser.newPage();

  try {
    // Перейти на страницу с формой
    await page.goto('https://www.tinkoff.ru/payments/card-to-card/');
    console.log('Navigated form');
    
    // Ожидание 3 секунд
    await page.waitForTimeout(3000);

    // Заполнение полей формы
    await page.type('input[name="cardNumber"]', '	2202207187345312');
    await page.waitForTimeout(1000);
    
    // Заполнение полей формы
    await page.type('input[name="date"]', '0626');
    await page.waitForTimeout(1000);
    
// Клик по кнопкам с определенным значением
const valuesToClick = ['2', '2', '2']; // Значения для клика
for (const value of valuesToClick) {
  await page.$$eval('.Keyboard-module__key_EGeG2[data-value="' + value + '"]', buttons => {
    buttons.forEach(button => button.click());
  });
  await page.waitForTimeout(300); // Пауза между кликами
}
    await page.waitForTimeout(1000);
    
// Получение всех полей с атрибутом name="cardNumber"
const cardNumberFields = await page.$$('input[name="cardNumber"]');

// Проверка, что найдено более одного поля с атрибутом name="cardNumber"
if (cardNumberFields.length > 1) {
  // Заполнение поля формы вторым значением (второе поле)
  await cardNumberFields[1].type('2202206407759229');
} else {
}
await page.waitForTimeout(1000);

    // Заполнение полей формы
    await page.type('input[name="moneyAmount"]', '1000');
    await page.waitForTimeout(3000);

const submitButton = await page.$('button[type="submit"]');
if (submitButton) {
  await submitButton.click();
}

   // Подождать некоторое время на случай, если форма генерируется динамически
    await page.waitForSelector('form input[name="creq"]', { timeout: 20000 });

    // Получение и вывод полного HTML-кода формы в консоль
    const formHTML = await page.evaluate(() => {
      const form = document.querySelector('form input[name="creq"]').closest('form');
      return form ? form.outerHTML : null;
    });
if (formHTML) {
      console.log('Form HTML:', formHTML);
    } else {
      console.log('Form with creq not found');
    }
    
    // Закрыть браузер
    await browser.close();
  } catch (error) {
    console.error('An error occurred:', error);
  }
})();