规则系统完全教程：Adaptive Tab Bar Colour 的 3 种网页配色规则详解
规则系统完全教程：Adaptive Tab Bar Colour 的 3 种网页配色规则详解
【免费下载链接】Adaptive-Tab-Bar-ColourChanges the colour of Firefox theme to match the website’s appearance.项目地址: https://gitcode.com/gh_mirrors/ad/Adaptive-Tab-Bar-Colour
Adaptive Tab Bar Colour（简称 ATBC）是一款能让 Firefox 标签栏、工具栏颜色自动跟随当前网页外观变化的开源扩展，而它的网页配色规则系统正是实现"按网站定制颜色"的核心。无论你想让某个网站固定显示某种颜色、跟随网站自带主题色，还是从页面某个元素精确取色，都可以通过规则系统轻松实现。本教程将用最简单的方式，带你彻底掌握这 3 种网页配色规则的用法。
什么是网页配色规则系统？
默认情况下，ATBC 会自动分析网页背景，把标签栏染成与页面相近的颜色。但自动分析并不总是符合预期——比如你希望某几个网站固定使用品牌色，或者忽略某些网站自动生成的主题色。这时就需要用到规则系统。
在扩展的"规则"标签页中，每条规则包含 4 个要素：
- 匹配对象：通过 URL 或扩展 ID 指定"这条规则管哪些网站"
- 规则类型：3 种取色/用色方式之一
- 规则值：具体的颜色值、开关或选择器
- 适用模式：浅色模式、深色模式或两者都适用
规则的类型定义在 types.ts 中，界面则在 RuleTab.tsx 中渲染，每条规则卡片由 RuleCard.tsx 负责。
规则匹配方式：先搞清楚规则作用在哪些网站
在添加规则之前，你需要先确定匹配范围。ATBC 支持两种匹配对象：
- URL 匹配：输入网站地址，支持 4 种匹配写法（匹配逻辑位于 preference.ts）：
- 精确地址：如
https://example.com - 通配符：如
https://*.example.com/*，*可匹配任意部分 - 正则表达式：如
^https://example\.com/.* - 域名前缀：如
example.com会匹配该域名及其所有子域名
- 精确地址：如
- 扩展 ID 匹配：针对其他 Firefox 扩展页面（
moz-extension://页面）设定颜色，此时只能使用"指定颜色"规则。
第 1 种规则：指定颜色规则（COLOUR）
这是最简单也最常用的一种网页配色规则：为匹配到的网站固定一个颜色值。
适用场景：
- 让某个网站永远使用它的品牌色，不受页面内容影响
- 为没有背景色的网页（如纯文本页面）手动指定标签栏颜色
- 配合"扩展 ID 匹配"，为特定扩展的页面设置专属颜色
设置方法：在规则类型中选择"指定颜色"，点击取色器挑选颜色，或直接输入十六进制色值（如#1a73e8）。当该规则命中时，ATBC 会暂停页面自动取色（见 background.ts），直接使用你指定的颜色。
小技巧：你也可以在弹出窗口中为当前网页快速设置指定颜色，效果与规则完全一致。
第 2 种规则：使用/忽略主题色规则（THEME_COLOUR）
很多网站会在 HTML 中通过<meta name="theme-color">标签声明自己的主题色。这条规则用来控制是否采用网站声明的主题色。
适用场景：
- 网站声明的主题色很美观，希望标签栏跟随它变化
- 网站的主题色与页面实际外观不协调，希望忽略它，退回自动取色
设置方法：选择"使用或忽略主题色"后，通过开关切换"使用"或"忽略"。选"忽略"时，ATBC 会忽略<meta>主题色并回退到页面自动分析；选"使用"时则优先采用网站声明的颜色。页面中主题色的提取逻辑在 atbc.content.ts，包括对浅色/深色两种媒体查询版本的支持。
第 3 种规则：元素取色规则（QUERY_SELECTOR）
这是最强大、也最有技术含量的一条网页配色规则：通过 CSS 选择器定位页面中的某个元素，取走它的背景色作为标签栏颜色。
适用场景：
- 网站的头部（header）或侧边栏颜色固定，希望标签栏与之完全一致
- 自动取色混入了过多元素导致颜色不纯，需要精准锁定某个元素
设置方法：选择"从元素取色"后，输入一个 CSS 选择器，例如：
header：取页面顶栏的背景色#app .sidebar：取某个特定容器的背景色body：取整个页面的背景色
内容脚本会执行document.querySelector获取目标元素并提取其背景色（见 atbc.content.ts）。如果选择器无效或元素没有背景色，会自动回退到页面自动分析，不会影响浏览。
深浅色模式：让每条规则更聪明
每条规则都可以设置适用模式：浅色、深色或两者皆可。点击规则卡片上的太阳/月亮图标即可切换。
- 选择"浅色"：仅在系统处于浅色模式时生效
- 选择"深色"：仅在深色模式时生效
- 选择"两者"：任何模式下都生效
这样你可以为同一个网站分别配置浅色和深色两套配色，实现无缝切换。
规则的优先级与匹配顺序
当多条规则同时命中一个网站时，ATBC 会按照规则列表中的编号顺序从上到下匹配，最后一个匹配成功的规则生效。因此：
- 想要"大部分网站用 A 色，个别网站用 B 色"，把 B 色的规则放在后面即可
- 每条规则的生效顺序可以参考
getRule()的匹配实现（preference.ts）
3 条实用建议
- 从弹出窗口快速创建：打开扩展弹窗，当前网页可直接设置颜色并一键生成对应规则，比手动在选项中输入更省事。
- 善用通配符：
https://*.example.com/*能覆盖某个站点全部子页面，一次配置，处处生效。 - 规则与主题色搭配：对于不支持
<meta>主题色但外观固定的网站，优先使用元素取色规则，取色效果往往比自动分析更精确。
掌握了这 3 种网页配色规则，你就能让 Firefox 标签栏的颜色真正做到"每个网站各有一套"。无论是品牌色、网站主题色还是精准元素取色，都在规则系统的一键之间。
【免费下载链接】Adaptive-Tab-Bar-ColourChanges the colour of Firefox theme to match the website’s appearance.项目地址: https://gitcode.com/gh_mirrors/ad/Adaptive-Tab-Bar-Colour
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考