如何用JavaScript复制Instagram三点菜单按钮的事件监听器并复用？

步骤1：定位原Block按钮元素 #

打开Instagram用户页面，右键点击右上角三点按钮→选择「检查」打开开发者工具。点击三点按钮展开下拉菜单，用开发者工具左上角的选择器工具（箭头图标）点击菜单里的「Block」按钮，快速在Elements面板定位到该元素。

步骤2：获取原按钮的控制台引用 #

切换到Console面板，直接用$0获取刚才选中的元素（如果刚用选择器点过Block按钮，$0就是它），或者手动写选择器定位：

// 按文本内容查找Block按钮（如果$0失效可以用这个）
const originalBlockBtn = Array.from(document.querySelectorAll('[role="menuitem"]')).find(el => el.textContent.trim() === 'Block');

步骤3：创建新按钮并绑定功能 #

推荐用模拟原按钮点击的方法（比复制监听器更简单可靠，适合初学者）：

// 创建新按钮
const newBlockBtn = document.createElement('button');
newBlockBtn.textContent = 'Block';
// 给按钮加基础样式（可选，和原按钮风格对齐）
newBlockBtn.style.padding = '8px 16px';
newBlockBtn.style.marginLeft = '8px';
newBlockBtn.style.border = 'none';
newBlockBtn.style.borderRadius = '4px';
newBlockBtn.style.backgroundColor = '#ef4444';
newBlockBtn.style.color = 'white';
newBlockBtn.style.cursor = 'pointer';

// 绑定点击事件：点击新按钮时直接触发原Block按钮的点击
newBlockBtn.addEventListener('click', () => {
  originalBlockBtn.click();
});

// 把新按钮放到Message按钮旁边（按你需求自行调整位置）
const messageBtn = document.querySelector('button[aria-label="Message"]');
messageBtn.parentNode.insertBefore(newBlockBtn, messageBtn.nextSibling);

注意事项 #

• Instagram页面结构会不定期更新，如果选择器失效，重新在Elements面板找新的元素属性（比如类名、aria标签）调整代码。
• 如果模拟点击没反应，检查原按钮元素是否正确获取，或者尝试刷新页面后重新操作。

内容的提问来源于stack exchange，提问作者PeKy