规则系统完全教程：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-ColourAdaptive 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 nametheme-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.ts3 条实用建议从弹出窗口快速创建打开扩展弹窗当前网页可直接设置颜色并一键生成对应规则比手动在选项中输入更省事。善用通配符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），仅供参考