如何在Chrome中同步多网站事件？新手入门开发Chrome扩展实现一键状态同步

Chrome扩展完全能解决你的问题，核心是用内容脚本监听其中一个网站的状态切换操作，自动触发另一个网站的对应按钮点击，零基础也能快速上手。

零基础入门步骤 #

1. 准备3个基础文件 #

新建一个空文件夹（比如叫status-sync-tool），里面创建3个文件：

manifest.json（扩展配置文件）

这是Chrome识别扩展的核心配置，复制以下内容，把里面的域名换成你实际用的两个网站地址：

{
  "manifest_version": 3,
  "name": "状态同步助手",
  "version": "1.0",
  "description": "一键同步两个网站的工作/休息状态",
  "content_scripts": [
    {
      "matches": ["https://第一个网站域名/*", "https://第二个网站域名/*"],
      "js": ["content.js"]
    }
  ],
  "permissions": ["activeTab"]
}

content.js（核心逻辑脚本）

这个脚本会自动注入到两个网站里，实现监听和自动点击。复制以下内容，替换里面的按钮选择器（怎么找选择器看下面提示）：

// 替换成两个网站的状态按钮选择器
const site1Btns = {
  rest: '替换成第一个网站「休息」按钮的选择器',
  work: '替换成第一个网站「工作」按钮的选择器'
};
const site2Btns = {
  rest: '替换成第二个网站「休息」按钮的选择器',
  work: '替换成第二个网站「工作」按钮的选择器'
};

// 判断当前打开的是哪个网站
const isSite1 = window.location.href.includes('第一个网站的域名关键词');
const isSite2 = window.location.href.includes('第二个网站的域名关键词');

// 设置点击监听
function initSync() {
  const currentBtns = isSite1 ? site1Btns : site2Btns;

  // 监听「休息」按钮点击
  document.querySelector(currentBtns.rest)?.addEventListener('click', () => {
    if (isSite1) {
      // 打开第二个网站并触发休息按钮点击
      const tab = window.open('https://第二个网站完整地址', '_blank');
      tab.onload = () => tab.document.querySelector(site2Btns.rest)?.click();
    } else {
      const tab = window.open('https://第一个网站完整地址', '_blank');
      tab.onload = () => tab.document.querySelector(site1Btns.rest)?.click();
    }
  });

  // 监听「工作」按钮点击
  document.querySelector(currentBtns.work)?.addEventListener('click', () => {
    if (isSite1) {
      const tab = window.open('https://第二个网站完整地址', '_blank');
      tab.onload = () => tab.document.querySelector(site2Btns.work)?.click();
    } else {
      const tab = window.open('https://第一个网站完整地址', '_blank');
      tab.onload = () => tab.document.querySelector(site1Btns.work)?.click();
    }
  });
}

// 页面加载完成后启动监听
window.addEventListener('load', initSync);

怎么找按钮选择器？ 打开Chrome按F12调出开发者工具，找到状态按钮，右键点击按钮元素→「复制」→「复制选择器」，把复制的内容粘贴到上面的对应位置就行。

可选：扩展图标

找一张128x128的图片（比如icon.png）放到文件夹里，然后在manifest.json里加一行：

"icons": { "128": "icon.png" }

2. 把扩展加载到Chrome #

• 打开Chrome，地址栏输入chrome://extensions/回车
• 打开右上角的「开发者模式」开关
• 点击「加载已解压的扩展程序」，选择你创建的status-sync-tool文件夹

3. 测试调试 #

• 打开两个目标网站的标签页
• 点击其中一个网站的状态按钮，看另一个网站是否自动切换状态
• 如果没生效，按F12打开控制台看报错，大概率是按钮选择器填错了，重新复制正确的选择器就行

进阶优化（可选） #

上面是基础版，每次点击会打开新标签页；如果想在已打开的标签页同步，后期可以学用chrome.tabs API找已打开的标签页，再用chrome.tabs.sendMessage跨标签触发点击，不用开新页面。

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