Estoy creando una extensión de Chrome que funciona en un sitio web determinado para automatizar algunas tareas en el sitio web, la extensión toma una serie de datos y los envía uno por uno (simula hacer clic en un botón en el sitio web que envía los datos al backend), así que estoy automatizando esa tarea repetitiva asíncrona.
pero el problema es que no obtengo ningún dato del sitio web después de hacer clic en el botón Enviar porque no soy el propietario ni el desarrollador que creó ese sitio web
El sitio web es como una librería, debe buscar el libro por nombre y luego seguir trabajando con el libro, mi extensión trata de automatizar este proceso, por lo que en lugar de buscar el libro desde la interfaz de usuario del sitio web, la extensión tiene muchas entradas que aceptan varios nombres de libros y luego enviar esta colección al backend del sitio web imitando hacer clic en un botón de envío en la interfaz de usuario del sitio web
Mi problema aquí es que tengo una función que funciona con cada elemento de la colección una vez que hago clic en un botón en la extensión después de agregar algunos nombres de libros, pero el problema es que necesito esperar en cada ciclo hasta que el sitio web encuentre el libro, así que tengo un paso asíncrono aquí y este es mi problema real, necesito esperar a que se complete la función de búsqueda de libros y luego puedo hacer el trabajo adicional
//extension add books button const addBooks = document.getElementById('add-books'); //books collected from changing the extension inputs let bookCollection = [{...}, {...}, {...}] addBooks.addEventListener('click', async () => { for (let drug of collectedDrugs) { let { name, code, price } = book; //trying to await the website find the book await getBook(name); await addBook(price, qty); } })Desafortunadamente, esto no funciona y esta función debería funcionar con cada elemento de la colección esperando que finalice el paso asíncrono, complete la función y luego repita el mismo ciclo con otro libro, ¿cómo puedo arreglar este código para que funcione?
Tiene que mover su llamada de función asíncrona a un proxy que está fuera del oyente porque el ecosistema eventListener nativo es un poco heredado y no es compatible con la nueva función asíncrona:
function getBook(name){ console.log("getBook", name); } async function getBookProxy(name){ await getBook(name); } document.body.addEventListener('click', () => { getBookProxy("bob"); });