Массив URL - для каждой открытой страницы URL, вставьте содержимое JS, сделайте снимок экрана, перейдите к следующему URL

Question

Я пытаюсь создать расширение для Chrome, чтобы автоматизировать съемку скриншотов из нашей корпоративной сервисной системы.Пользователь вводит разделенную запятыми строку номеров сменных билетов, а расширение открывает URL-адрес по одному.Каждой странице потребуется вставить скрипт (для изменения выбранной вкладки на странице) и сделать снимок экрана.Затем код переместится на следующий номер заявки на изменение в массиве и повторит процесс.

Я очень плохо знаком с JavaScript, особенно с программированием расширений Chrome.Я понимаю, что ядром этой проблемы является вызов асинхронной функции в цикле.Другой областью, с которой, я полагаю, борется код, является обмен сообщениями между различными компонентами (события js, фон js и контент js).Вот код, который я до сих пор собирал вместе:

manifest.json
{
/*removed for brevity */
        "default_icon": "icon.png",
        "default_popup": "popup.html"
    },
    "background":{
            "scripts":["background_script.js"],
            "persistent":false
    },
    "content_scripts":[
        {
            "matches":["https://removed/*"],
            "js":["content.js"]
        }
    ],
    "web_accessible_resources": ["tab_three.js"],
/* Permissions removed for brevity */
}

event.js

var port = chrome.extension.connect({name: "urlport"});

function openWindow(messageToSend) {
    return new Promise((resolve, reject) => {
        port.postMessage(JSON.stringify(messageToSend));
        port.onMessage.addListener(function(msg){
        while (msg!="Ok"){}
        resolve();      
    });
    });
};

async function processArray(array) {
    for (const a of array) {
        await openWindow(a);
    }
};

window.onload=function(){
    var button=document.getElementById('save');
    var inputValue=document.getElementById('ticketnum');
    button.onclick=function(){
        var array=inputValue.value.split(',');
        processArray (array);   
        }
    };

background_script.js
/*savescreenshot removed for brevity*/

chrome.extension.onConnect.addListener(function(port) {
  port.onMessage.addListener(function(msg) {
      var msg = JSON.parse(msg);
      var counter = 0;
    chrome.tabs.update(null, 
    {url: "https://removed.com/text_search_exact_match.do?sysparm_search="+msg, active: true},
    function (tab){
        chrome.tabs.onUpdated.addListener(function listener (tabId, info){
            if (info.status==='complete' && tabId === tab.id /*&& counter ==0*/){
                counter ++;
                chrome.tabs.sendMessage(tab.id, {message: 'update_tab_three'}, (response)=> {
                    chrome.tabs.captureVisibleTab(null, {
                    format:"png"},
                    function (data) {
                        screenshot.data=data;
                        screenshot.saveScreenshot(msg);
                    });
                });

            }
            return true;
        });
    }
    );
    port.postMessage("Ok");
  });
  return true;
});

content.js

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (request.message == 'update_tab_three') {
        var s = document.createElement('script');
        s.src = chrome.extension.getURL('tab_three.js');
        (document.head||document.documentElement).appendChild(s);
        s.onload = function() {
            s.parentNode.removeChild(s);
        };
    }
  return true;
});

Код работает для одной записи билета.Однако, когда вводятся два (например, CHG123, CHG456), его поведение меняется.Обычно он сохраняет скриншот для CHG456 дважды, первый раз с именем CHG123 до полной загрузки экрана, затем CHG456 после того, как скрипт был введен и вкладка была выбрана.Я хотел бы, чтобы CHG123 загружался на экран, вставлялся скрипт, затем скриншот, затем CHG456 загружался на экран, вставлялся сценарий, а затем второй скриншот.Я уже давно крутил свои колеса и не знаю, куда идти дальше, поэтому любая помощь будет признательна!Спасибо.