嘿，这个需求真的很实用！其实完全可以通过Chrome扩展实现，我来给你理清楚可行的方案：

一、用Chrome Theme API动态修改外观 #

你之前提到的“只能装一个主题”的问题，其实是针对从Chrome商店安装的静态主题而言的。Chrome提供的chrome.theme API允许扩展动态生成并实时更新主题配置，不需要安装多个独立主题文件，正好适配你的需求。

举个简单的实现思路：

1. 先获取当前活跃标签页的URL
2. 根据URL判断对应的配色方案（比如不同域名对应不同颜色）
3. 调用API把配色应用到Chrome的外观上

示例代码（后台脚本中）：

// 获取当前活跃标签页并更新主题
chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
  const activeUrl = tabs[0].url;
  let themeColors = {};
  
  // 这里可以根据你的需求，给不同URL匹配不同配色
  if (activeUrl.includes('example.com')) {
    themeColors = {
      frame: '#ff4444', // 浏览器标题栏颜色
      toolbar: '#ffebee', // 工具栏背景色
      tab_text: '#212121', // 活跃标签文字颜色
      tab_background_text: '#757575' // 非活跃标签文字颜色
    };
  } else if (activeUrl.includes('google.com')) {
    themeColors = {
      frame: '#4285f4',
      toolbar: '#e8f0fe',
      tab_text: '#202124',
      tab_background_text: '#5f6368'
    };
  }
  
  // 应用主题设置
  chrome.theme.update({
    colors: themeColors
  });
});

另外，别忘了在扩展的manifest.json中声明必要的权限：

{
  "manifest_version": 3,
  "name": "动态外观切换",
  "version": "1.0",
  "permissions": ["tabs", "theme"],
  "background": {
    "service_worker": "background.js"
  }
}

二、监听标签页变化，自动更新外观 #

要实现“切换标签自动改颜色”的效果，你需要在后台脚本中监听标签页的激活和URL更新事件，这样每次标签切换或者页面跳转时，都能自动触发主题更新：

// 监听标签激活事件
chrome.tabs.onActivated.addListener((activeInfo) => {
  updateTheme(activeInfo.tabId);
});

// 监听标签URL更新事件（比如页面跳转）
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  if (changeInfo.url) {
    updateTheme(tabId);
  }
});

// 封装主题更新函数
function updateTheme(tabId) {
  chrome.tabs.get(tabId, (tab) => {
    const activeUrl = tab.url;
    // 这里复用之前的URL判断和配色逻辑
    let themeColors = {};
    if (activeUrl.includes('xxx.com')) {
      // 设置对应配色
    }
    chrome.theme.update({colors: themeColors});
  });
}

三、补充说明 #

• 除了示例中的颜色项，chrome.theme.update还支持更多外观属性，比如按钮颜色、标签边框色等，你可以根据自己的需求调整配色参数。
• 如果你需要更复杂的配色逻辑（比如根据页面内容取色），还可以结合chrome.scripting API注入脚本到页面中，提取页面的主色调再应用到主题上。

备注：内容来源于stack exchange，提问作者W.N.