Chrome扩展content.js中点击按钮仅记录当前点击按钮的问题求助

我来帮你分析下问题出在哪，以及怎么解决～

你现在遇到的情况是：不管点击页面上哪个注入的按钮，控制台都会打印所有按钮的信息，而不是只打印被点击的那个。咱们先看看两种写法的问题根源：

问题原因分析 #

1. 第一种写法（MutationObserver里绑定所有按钮）的问题：
   每次DOM变化触发MutationObserver时，你都会重新查找所有按钮并绑定click事件。这就导致同一个按钮被绑定了N次事件（N是Observer触发的次数），点击一次就会触发N次回调，看起来像是所有按钮都被打印了，但其实是同一个按钮的多次回调在执行。

2. 第二种写法（事件委托）的问题：
   事件委托的思路是对的，但判断条件有漏洞——当你点击按钮里的<svg>图标时，event.target指向的是svg标签，不是button，所以event.target.tagName === 'BUTTON'这个条件不成立，自然无法触发打印。

解决方案 #

这里给你两个可行的修复方案，选一个顺手的就行：

方案一：修复事件委托（推荐，更高效）

用closest()方法向上查找最近的目标按钮，不管点击的是按钮本身还是内部的svg，都能正确定位到对应的button元素：

document.body.addEventListener('click', function(event) {
  // 向上查找最近的带有data-testid="copypaste"的button
  const clickedButton = event.target.closest('button[data-testid="copypaste"]');
  if (clickedButton) {
    console.log('Button clicked:', clickedButton);
  }
});

这个方法只需要绑定一次事件，就能监听所有现有和未来新增的按钮，不用在Observer里处理事件绑定，非常省心。

方案二：给新注入的按钮单独绑定事件（避免重复绑定）

如果你更习惯在注入按钮时绑定事件，那要注意只给刚创建的新按钮绑定一次，并且用currentTarget确保拿到按钮本身：

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";
                        
                        // 只给新创建的按钮绑定事件，避免重复绑定
                        const newButton = newDiv.querySelector('button[data-testid="copypaste"]');
                        newButton.addEventListener("click", event => {
                            console.log("Button clicked:", event.currentTarget); // 用currentTarget确保拿到按钮本身
                        });
                    } catch (error) {
                        console.error("Error injecting button:", error)
                    }
                }
            })
        }
    })
});

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

这里的关键是：

• 只给刚创建的新按钮绑定事件，而不是遍历所有按钮重复绑定
• 使用event.currentTarget代替event.target，确保拿到的是绑定事件的按钮元素，而不是点击的子元素（比如svg）

备注：内容来源于stack exchange，提问作者WordCent