DEV Community

Caeee
Caeee

Posted on

How to Sequentially Fill and Submit Form Fields from CSV Using Chrome Extension and JavaScript

I'm developing a Chrome extension that uses a CSV file to populate and submit a form on a webpage. The goal is to enter data row-by-row from the CSV file into the form fields, wait for the form to be processed, submit the form, and then move to the next row.

Currently, my script processes all rows at once, causing the fields to be filled and submitted simultaneously. I need help to ensure that the form is filled and submitted sequentially for each row.

Here's my current approach:

a. Reading the CSV file using PapaParse.

b. Iterating over each row of the CSV data.

c. Each row contains a few fields of data

d. Using chrome.scripting.executeScript to fill the form fields and submit the form.

However, the script still processes all rows (including every field in every row) at once, instead of waiting for each submission to complete before moving to the next row. I tried to use setTimeout() to ensure the script waits before submitting, but that didn't work. It just processed all the rows (data) immediately and waited a few seconds before pressing the submit button. I also tried to use async functions, but it would always break; only one field would be submitted, none would be submitted, etc... I'm not sure how to do the logic I've stated above. There are no error messages, or build errors. I tried googling more about this issue and more about async functions, but I couldn't duplicate it for my project properly.

Here's my code below:
(i couldn't post it on the website, it was very buggy, apologies)
https://pastecode.io/s/3x2n46as

Top comments (0)