使用浏览器扩展/插件设置浏览器的标签背景颜色

Posted 2023-02-19

【中文标题】使用浏览器扩展/插件设置浏览器的标签背景颜色

【英文标题】：Set the browser's tab background color with browser extension/addon

【发布时间】：2022-01-23 13:17:12

【问题描述】：

有没有什么方法可以在浏览器扩展/插件的帮助下设置浏览器的标签背景颜色（不是网站图标图像）和文本颜色。

我在互联网上来回搜索，但在 API 中什么也没找到。所以我认为这是不可能的。但也许有人对此有解决方案。

我想要实现的是根据应用程序上下文（开发、生产/暂存、暂存）对 TYPO3 选项卡的颜色进行着色。我设法根据应用程序上下文在 TYPO3 后端设置顶栏颜色，因此逻辑运行良好。我现在想要的是一种为标签着色的方法。

【问题讨论】：

Chrome 中没有这样的 API。在 FF 中有 browser.theme。

【参考方案1】：

您是对的：Firefox 或 Chrome API 中没有任何东西可以让您轻松地为单个标签着色。但是有一些解决方法的想法..

Colorful Tabs 使用主题覆盖来设置各个选项卡的样式，包括（默认情况下）基于域，使用只有 Firefox 支持的 browser.theme API。但是，在尝试之后，它可能不符合您的要求：在当前的 Firefox 版本中，它只影响当前选择的选项卡（和地址栏）的颜色，不能为您提供一个很好的概览。

Firefox 的一些其他扩展，例如TST Colored Tabs 使用复制标签栏的侧边栏标签表示，并可能进行增强。也不理想，而且是 Firefox 特有的。

对于 Chrome，有一个特定于 Chrome 的 API tabGroups 可以为标签添加颜色轮廓，但只能通过将它们添加到组中。你可以有很多组，但如果你的标签被散布或移动，它仍然会很丑。

所以让我提出一个开箱即用的解决方案：为每个应用程序上下文使用自定义网站图标，而不是尝试更改选项卡 UI 的外观。这将始终在选项卡条中可见，而浏览器部分没有任何代码。如果在应用程序端没有简单的方法，您也可以override favicons from extension code。