仅记录控制台中单击的按钮 | Chrome 扩展程序 content.js

Question

我只想将单击的按钮记录在控制台中，无论该按钮是新注入的还是已经存在于页面中。

我希望将单击事件附加到所有存在的按钮，并且只有实际单击的按钮才应记录在控制台中。

但是，单击上述按钮后，页面中存在的所有实例（所有注入的按钮）都会登录到控制台。

下面的代码是正在开发的chrome扩展的content.js的一部分—

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 = `
                          <button aria-label="Copypaste" role="button" class="css-175oi2r r-1777fci r-bt1l66 r-bztko3 r-lrvibr r-1loqt21 r-1ny4l3l" data-testid="copypaste" type="button" data-copy-paste-button-added="true">
                              <svg fill="#000000" height="18px" width="18px" viewBox="0 0 502 502">
                                  <path d="M81.5,174H247c5.523,0,10-4.477,10-10s-4.477-10-10-10H81.5c-5.523,0-10,4.477-10,10S75.977,174,81.5,174z"></path>
                                  <path d="M306.5,220h-225c-5.523,0-10,4.477-10,10s4.477,10,10,10h225c5.523,0,10-4.477,10-10S312.023,220,306.5,220z"></path>
                                  <path d="M306.5,286h-225c-5.523,0-10,4.477-10,10s4.477,10,10,10h225c5.523,0,10-4.477,10-10S312.023,286,306.5,286z"></path>
                                  <path d="M306.5,352h-225c-5.523,0-10,4.477-10,10s4.477,10,10,10h225c5.523,0,10-4.477,10-10S312.023,352,306.5,352z"></path>
                                  <path d="M306.5,154h-22c-5.523,0-10,4.477-10,10s4.477,10,10,10h22c5.523,0,10-4.477,10-10S312.023,154,306.5,154z"></path>
                                  <path d="M481,379.417h-47.713c-2.364,0-4.287-1.923-4.287-4.287v-9.98c0-9.858-5.885-18.666-14.993-22.438c-9.108-3.772-19.497-1.706-26.468,5.265L377,358.516V103c0-2.652-1.054-5.196-2.929-7.071l-93-93C279.196,1.054,276.652,0,274,0H21c-5.523,0-10,4.477-10,10v482c0,5.523,4.477,10,10,10h346c5.523,0,10-4.477,10-10v-7.681l10.539,10.539c4.658,4.657,10.841,7.125,17.149,7.125c3.133,0,6.297-0.609,9.319-1.861c9.107-3.772,14.993-12.58,14.993-22.438v-9.98c0-2.364,1.923-4.287,4.287-4.287H481c5.523,0,10-4.477,10-10v-64C491,383.894,486.523,379.417,481,379.417z M284,34.142L342.858,93H284V34.142z M357,482H31V20h233v83c0,5.523,4.477,10,10,10h83v265.516l-35.831,35.83c-1.406,1.407-2.351,3.189-2.735,5.111c-0.128,0.641-0.194,1.297-0.194,1.96c0,2.652,1.054,5.196,2.929,7.071L357,464.319V482z M471,443.417h-37.713c-13.392,0-24.287,10.895-24.287,24.287v9.98c0,2.493-1.658,3.551-2.646,3.961c-0.99,0.409-2.911,0.833-4.672-0.93l-59.299-59.298l59.298-59.298c1.763-1.762,3.684-1.338,4.672-0.929c0.988,0.409,2.646,1.468,2.646,3.96v9.98c0,13.392,10.895,24.287,24.287,24.287H471V443.417z"></path>
                              </svg>
                          </button>
                      `
                        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);
  }
});

Answer 1

这个想法是正确的，但是

'click'

事件不适合，因为它无法通过这种方式捕获。

您可能需要一些更正：

window.addEventListener('mouseup', event => { 
    if (event.target.constructor == HTMLButtonElement
        && event.target.hasAttribute('data-testid'))
           console.log('Button clicked:', event.target);
           // and log something else
});

这只是想法。您可能需要一些改进。首先，使用这段代码。您可以记录一些误报事件，因为它可能是也可能不是一次点击。当您在其他地方按下鼠标按钮，将鼠标指针移动到按钮元素，然后释放鼠标按钮时，这可能是非单击

'mouseup'

。要过滤掉此类情况，您可能还需要处理

'mousedown'

，跟踪按钮的按下状态等。这是一个相当简单的技术，我认为你可以开发它。

此外，

event.target

中的

console.log

不会告诉您任何信息，因此您需要记录一些按钮属性和其他有用信息。我想这已经很清楚了。