Кнопка «Записать только нажатие» в консоли | Расширение Chrome content.js ⇐ Javascript

[Anonymous]

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

Приведенный ниже код является частью content.js расширения Chrome, находящегося в стадии разработки.
const observer = new MutationObserver(function (mutationsList) {
mutationsList.forEach(mutation => {
if (mutation.type === "childList") {
const toolBarDivs = document.querySelectorAll('div[aria-label*="replies"]')

toolBarDivs.forEach(toolBarDiv => {
if (!toolBarDiv.dataset.siblingInjected) {
try {
const newDiv = document.createElement("div")
newDiv.classList.add("css-175oi2r", "r-18u37iz", "r-1h0z5md", "r-13awgt0", "copy-paste-button")
newDiv.innerHTML = `










`
toolBarDiv.insertBefore(newDiv, toolBarDiv.children[3] || null)
toolBarDiv.dataset.siblingInjected = "true"
} catch (error) {
console.error("Error injecting button:", error)
}
}
})
}
})

const allButtons = document.querySelectorAll('button[data-testid="copypaste"]')

allButtons.forEach(button => {
button.addEventListener("click", event => {
console.log("Button clicked:", event.target)
})
})
})

observer.observe(document.body, { childList: true, subtree: true })

Позже
Я попробовал это (внешняя логика наблюдателя мутаций) тоже не сработало—
document.body.addEventListener('click', function(event) {
if (event.target.tagName === 'BUTTON' && event.target.hasAttribute('data-testid') && event.target.getAttribute('data-testid') === 'copypaste') {
console.log('Button clicked:', event.target);
}
});


Подробнее здесь: https://stackoverflow.com/questions/793 ... content-js