Back

Technologies:

javascriptjavascript
avatar
Tolerim
a month ago

Can each element in an items list be downloaded through a trigger mechanism?

I've developed a chrome extension that allows me to download specific elements from a web page, but I'm facing an issue where only the last item in the list can be downloaded. My code runs without errors, and I've included console logs to track its execution. Can you suggest any solutions?

I attempted to set a setTimeout function to delay the download of each item by 5 seconds, but the problem persists.

Here's a code snippet:

<script>
var listItems = document.querySelectorAll(".track-list-row");

for (let i = 0; i < listItems.length; i++) {
  const item = listItems[i];
  item.dispatchEvent(new MouseEvent("contextmenu", { bubbles: true }));
  var contextMenu = document.querySelector('.context-menu');
  var meta = contextMenu.querySelector('.meta a');
  console.log(meta);
  var contextBody = contextMenu.querySelector(".panel-body");
  var contextMenuItems = contextBody.querySelectorAll(".context-menu-item");
  var downloadButton = contextMenuItems[contextMenuItems.length - 1];
  downloadButton.click()
  setTimeout(() => console.log("waiting..."), 5000);
}
</script>
Answers(2)
avatar
Vogi
a month ago
Verified Answer
It seems that the issue you're facing is that only the last item in the list can be downloaded. You mentioned that you've included console logs to track its execution. Have you checked if the logs show any errors or unexpected behavior? One possible solution is to use a Promise-based approach to ensure that each item is downloaded before moving on to the next one. Here's an example of how you could modify your code snippet: 
<script>
var listItems = document.querySelectorAll(".track-list-row");

function downloadItem(item) {
  return new Promise((resolve) => {
    item.dispatchEvent(new MouseEvent("contextmenu", { bubbles: true }));
    var contextMenu = document.querySelector('.context-menu');
    var meta = contextMenu.querySelector('.meta a');
    console.log(meta);
    var contextBody = contextMenu.querySelector(".panel-body");
    var contextMenuItems = contextBody.querySelectorAll(".context-menu-item");
    var downloadButton = contextMenuItems[contextMenuItems.length - 1];
    downloadButton.click();
    setTimeout(() => {
      console.log("waiting...");
      resolve();
    }, 5000);
  });
}

async function downloadAll() {
  for (let i = 0; i < listItems.length; i++) {
    const item = listItems[i];
    await downloadItem(item);
  }
}

downloadAll();
</script>
This code uses Promises and async/await to ensure that each item is downloaded before moving on to the next one. The downloadItem() function returns a Promise that resolves after the download has completed. The downloadAll() function uses a for loop to iterate over all items in the list and awaits each call to downloadItem(), ensuring that each item is downloaded before moving on to the next one. I hope this helps! Let me know if you have any other questions.

Sources

Get a list of installed chrome extensions - Super UserElement Locator - Chrome Web Store - Google Chromechrome.downloads - Chrome DevelopersSave Page WE - Chrome Web StoreTools to selectively Copy HTML+CSS+JS From A Specific Element of DOM ...
avatar
Tolerim
a month ago
The issue you are facing is caused by the asynchronous nature of JavaScript. The setTimeout function does not pause the execution of the for loop and instead queues up all the timeouts at once. This means that all the downloads are triggered within a very small window of time and only the last one appears to be successful. One solution to this would be to use async/await with a Promise and create a function that resolves after the specified timeout. You can then call this function within the for loop to wait for the specified time before moving on to the next download. Here's an example of how you can achieve this: 
function wait(timeout) {
  return new Promise(resolve => setTimeout(resolve, timeout));
}

async function downloadAll() {
  const listItems = document.querySelectorAll(".track-list-row");

  for (let i = 0; i < listItems.length; i++) {
    const item = listItems[i];
    item.dispatchEvent(new MouseEvent("contextmenu", { bubbles: true }));
    const contextMenu = document.querySelector('.context-menu');
    const meta = contextMenu.querySelector('.meta a');
    console.log(meta);
    const contextBody = contextMenu.querySelector(".panel-body");
    const contextMenuItems = contextBody.querySelectorAll(".context-menu-item");
    const downloadButton = contextMenuItems[contextMenuItems.length - 1];
    downloadButton.click()
    await wait(5000);
    console.log("waiting...");
  }
}

downloadAll();
In this code snippet, we have created a wait function that returns a Promise and resolves after the specified timeout. We then use the async/await syntax to wait for the wait function to resolve before moving on to the next download. This ensures that each download is triggered after the specified timeout has elapsed.
;