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

Posted

技术标签:

【中文标题】使用浏览器扩展/插件设置浏览器的标签背景颜色【英文标题】: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。

【讨论】:

以上是关于使用浏览器扩展/插件设置浏览器的标签背景颜色的主要内容,如果未能解决你的问题,请参考以下文章

html中如何让背景颜色渐变???

HTML笔记--- 背景颜色和背景图片;图片img标签;超链接/热链接;列表

html div 背景颜色无显示

如何用css去掉a标签点击时的背景色?

再HTML中如何设置一个表格的背景色为透明的

怎么设置chrome打开应用程序