function getAllExecutors() {
    const executorSet = new Set();
    document.querySelectorAll('.ghx-avatar-img[title^="Исполнитель: "]')
        .forEach(executorElement => {
            const title = executorElement.getAttribute('title');
            const executorName = title.replace('Исполнитель: ', '').trim();
            executorSet.add(executorName);
        });
    return Array.from(executorSet);
}

// Выполняем getAllExecutors на странице и обрабатываем результат
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
    const tabId = tabs[0].id;

    chrome.scripting.executeScript({
        target: { tabId: tabId },
        func: getAllExecutors
    }, (results) => {
        if (results && results[0] && results[0].result) {
            const executorsList = results[0].result;

            executorsList.forEach(user => {
                // Добавляем обработчики событий для каждого пользователя
                const userElement = document.getElementById(user);
                if (userElement) {
                    userElement.addEventListener('click', () => {
                        chrome.scripting.executeScript({
                            target: { tabId: tabId },
                            func: toggleUser,
                            args: [user]
                        });
                    });
                }
            });
        }
    });
});

function toggleUser(executorName) {
  document.querySelectorAll('.js-detailview.ghx-issue.js-issue.ghx-has-avatar.ghx-issue-draggable.ghx-avatar-not-empty.js-parent-drag')
    .forEach(element => {
      const executorElement = element.querySelector(`.ghx-avatar-img[title*="Исполнитель: ${executorName}"]`);
      if (executorElement) {
        element.style.backgroundColor = element.style.backgroundColor === 'red' ? '' : 'red';
      }
    });
}


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Highlight Element</title>
 <style>
   body {
     width: 200px;
     padding: 20px;
   }
   button {
     width: 100%;
     padding: 10px;
     background-color: #007bff;
     color: white;
     border: none;
     border-radius: 5px;
     cursor: pointer;
     margin-bottom: 5px;  /* Добавляем отступ снизу /
   }
   button:last-child {
     margin-bottom: 0; / Убираем отступ для последней кнопки */
   }
   button:hover {
     background-color: #0056b3;
   }
 </style>
</head>
<body>
 <button id="Кайдалова Дарья Дмитриевна">Даша</button>
 <button id="">Саша</button>
 <button id="Borodin Evgeniy">Женя</button>
 <button id="Satkov Valery">Валера</button>
 <button id="">Андрей</button>
 <button id="Kolzenov Donat">Донат</button>
 <button id="Евдокимов Дмитрий Андреевич">Дима</button>
 <button id="Савченко Ирина Александровна">Ира</button>
 <button id="Иванов Ярослав Владимирович">Ярослав</button>
 <button id="Kashirin Nikita">Никита</button>
 <button id="Можайский Илья Вадимович">Илья</button>
 <button id="">Виталий</button>
 <script src="popup1.js"></script>
</body>
</html>

Как мне сделать чтобы кнопки добавлялись автоматически в моем расширении вместо жестко прописанных как сейчас, список всех доступных пользователей мы получаем в getAllExecutors