Chrome扩展：重复标签页元素点击的目标标签页适配问题

问题根源：你当前点击popup的startButton时，应该是用了全局广播的方式发送消息，导致所有匹配目标URL的标签页（包括tabA）都收到了指令，所以tabA执行了点击操作，而不是你操作的tabB。

以下是具体解决步骤和代码调整：

1. 在popup中精准定位当前激活标签页 #

点击startButton时，不要广播消息，而是先获取用户当前操作的激活标签页，只给这个标签页发送指令。修改popup的点击事件代码：

document.getElementById('startButton').addEventListener('click', async () => {
  // 获取当前窗口中激活的标签页
  const [activeTab] = await chrome.tabs.query({ active: true, currentWindow: true });
  if (!activeTab) return;

  // 仅向当前激活的标签页发送启动指令
  chrome.tabs.sendMessage(activeTab.id, { action: 'startAutoClick' });
});

2. 调整content script的逻辑 #

让每个标签页独立维护自己的定时器，并监听来自popup的定向消息：

let timerId = null;
const targetSelector = '你的目标元素选择器'; // 替换为实际选择器
const intervalSeconds = 5; // 替换为你的间隔秒数

function clickImage() {
  const targetElement = document.querySelector(targetSelector);
  if (targetElement) {
    targetElement.click();
  }
}

function startAutoClick() {
  // 立即执行一次点击
  clickImage();
  // 清除已有定时器，避免重复启动
  if (timerId) clearInterval(timerId);
  // 启动新的定时器
  timerId = setInterval(clickImage, intervalSeconds * 1000);
}

// 监听popup发来的定向消息
chrome.runtime.onMessage.addListener((msg) => {
  if (msg.action === 'startAutoClick') {
    startAutoClick();
  }
});

3. 更新manifest.json添加必要权限 #

需要添加tabs权限来查询激活标签页，修改manifest.json：

{
  "manifest_version": 3,
  "permissions": ["tabs"],
  "content_scripts": [
    {
      "matches": ["{Specific URL}"],
      "js": ["content.js"]
    }
  ],
  // 其他配置项...
}

原理说明 #

• 通过chrome.tabs.query精准获取当前激活的标签页ID，再用chrome.tabs.sendMessage定向发送消息，确保只有用户操作的tabB收到指令并执行点击。
• 每个标签页的content script独立运行，各自维护定时器，tabA和tabB的定时器互不干扰，各自按间隔执行点击操作。

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