Chrome扩展：多标签页实时同步链接显隐状态实现问题

你说得对，要实现所有标签页（包括新复制的）实时同步开关状态，确实需要借助background脚本来做全局状态管理和消息分发。当前的问题在于，你的popup只在切换时通知了当前活跃标签页，而新打开/复制的标签页没有收到状态更新的信号，除非刷新。

下面是具体的解决方案，分三步完成：

1. 创建Background脚本监听存储变化 #

background脚本会在后台运行，监听chrome.storage.sync的变化，一旦开关状态改变，就向所有目标标签页发送更新指令。

创建background.js文件，写入以下代码：

// background.js
// 监听存储中的状态变化
chrome.storage.onChanged.addListener((changes, namespace) => {
  // 只处理sync空间下的sampleChecked字段变化
  if (namespace === 'sync' && changes.sampleChecked) {
    const newState = changes.sampleChecked.newValue;
    // 查询所有匹配目标网站的标签页（替换成你需要的域名规则）
    chrome.tabs.query({ url: "*://your-target-website.com/*" }, (tabs) => {
      tabs.forEach(tab => {
        // 向每个标签页发送切换链接状态的消息
        chrome.tabs.sendMessage(tab.id, { 
          action: "updateLinkVisibility", 
          isVisible: newState 
        }).catch(err => {
          // 忽略无法发送消息的标签页（比如标签页未加载目标网站）
          console.log("无法向标签页发送消息:", err);
        });
      });
    });
  }
});

2. 修改Content脚本接收消息并更新 #

在content.js中添加消息监听，收到background的指令后直接切换链接的显隐状态，不用再重复查询存储：

// 在content.js的末尾添加以下代码
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === "updateLinkVisibility") {
    // 根据收到的状态直接切换链接显示/隐藏
    const targetLinks = $("label:contains('EIP')~a~a");
    request.isVisible ? targetLinks.show() : targetLinks.hide();
  }
});

// 保留原有的toggleLink函数作为页面初始化时的状态同步
function toggleLink() {
  chrome.storage.sync.get(["sampleChecked"], function (result) {
    const targetLinks = $("label:contains('EIP')~a~a");
    result.sampleChecked ? targetLinks.show() : targetLinks.hide();
  });
}

3. 更新Manifest配置引入Background脚本 #

确保你的manifest.json中配置了background脚本和必要的权限（以Manifest V3为例，V2的配置略有不同）：

{
  "manifest_version": 3,
  "name": "Link Toggle Extension",
  "version": "1.0",
  "permissions": ["storage", "tabs"],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon2.png"
  },
  "content_scripts": [
    {
      "matches": ["*://your-target-website.com/*"], // 替换成你的目标网站域名
      "js": ["jquery.js", "content.js"]
    }
  ]
}

如果是使用Manifest V2，把background字段改成：

"background": {
  "scripts": ["background.js"],
  "persistent": false
}

工作原理说明 #

1. 当你在popup中切换开关时，popup.js会更新chrome.storage.sync中的sampleChecked值。
2. Background脚本监听这个存储变化事件，立即查询所有打开的目标网站标签页。
3. Background向每个匹配的标签页发送消息，通知它们更新链接的显隐状态。
4. Content脚本收到消息后，直接执行切换操作，实现实时同步，无需刷新页面。

这样一来，无论是新复制的标签页，还是已经打开的标签页，都会在开关切换时立即同步状态啦！

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