匹配规则进阶:Adaptive Tab Bar Colour 的 URL、正则与通配符写法完全解析
匹配规则进阶Adaptive Tab Bar Colour 的 URL、正则与通配符写法完全解析【免费下载链接】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 ColourATBC是一款让 Firefox 标签栏、工具栏和侧边栏自动跟随网站配色变色的扩展。默认情况下它全自动工作但如果你希望某些网站永远使用指定颜色、忽略网站的 theme-color甚至从页面上某个元素取色就需要掌握它的「匹配规则」写法。本文面向新手用最直白的语言拆解 ATBC 匹配规则的四种写法URL、域名、通配符与正则并附上可直接套用的实战案例。 简单说规则 匹配谁URL 怎么写做什么选颜色/用主题色/取元素色何时生效明/暗/双模式。本文只讲最难的部分——匹配谁。一、规则在哪里设置打开扩展的选项页切到Rule list规则列表标签页即可看到规则卡片。输入框的占位提示原文是URL/regex/wildcard/domain也就是说 ATBC 支持四种匹配写法对应代码位于 preference.ts 的getRule方法中按顺序执行先试完整 URL 精确匹配再试正则接着是通配符最后是域名匹配命中即生效。每条规则还有三个附加属性属性可选值含义typeCOLOUR / THEME_COLOUR / QUERY_SELECTOR指定颜色 / 使用或忽略网站主题色 / 从元素取色schemeboth / light / dark明暗双模式 / 仅浅色 / 仅深色headerTypeURL / ADDON_ID按网址匹配 / 按扩展 ID 匹配二、四种匹配写法逐一拆解1. 完整 URL最精确的匹配规则写法直接粘贴完整网址即可例如https://example.com/blog/articlehttp://example.com需要注意ATBC 比较时会忽略末尾斜杠所以https://example.com/和https://example.com等价。缺点是只要 URL 里多一个参数、少一个目录就匹配不上适合只针对单篇文章、单个页面的场景。2. 域名匹配最常用的 Firefox 标签栏颜色规则这是大多数人的首选写法就是不带协议的域名可带可选的路径example.comexample.com/blog它最大的好处是自动覆盖所有子域名写example.com那么www.example.com、mail.example.com都能命中。协议https://、http://写不写都行带路径时则要求路径前缀一致example.com/blog能匹配example.com/blog/post。3. 通配符写法*、**与?的规则这是新手最容易踩坑的地方ATBC 的通配符规则如下符号含义注意事项**匹配任意长度的任意字符包括/、.、:*匹配任意字符但不匹配/、.、:?匹配任意单个字符一个?只占一个位置举几个例子帮助理解https://*.example.com—— 注意*不匹配.所以这里的*只能替代一个子域名段如news.example.com但匹配不了a.b.example.comhttps://**.example.com—— 换成**就能匹配任意层级的子域名https://example.com/path/*—— 匹配path/下一层任意内容但*不跨/所以到path/a/b就失效example.com/????—— 匹配任意 4 个字符组成的路径段另外协议前缀是可选的写*.example.com与https://*.example.com等效。4. 正则表达式进阶用户的终极武器ATBC 会把你输入的内容当作正则处理并且自动加上^和$锚点即必须从头到尾完全匹配同时不区分大小写。常见的实用写法.*\.example\.com—— 匹配 example.com 及其所有子域名含多级https://.*\.example\.com/.*—— 限定 https 协议并带任意路径example\.(com|org|net)—— 匹配多个顶级域名 如果正则写错语法无效这条规则会被静默忽略所以写完后务必测试。三、规则优先级后写的规则说了算ATBC 会从上到下遍历整张规则列表后面的匹配结果会覆盖前面的。举例先写了一条example.com指定红色再写一条news.example.com指定蓝色那么访问news.example.com时用的是蓝色。建议把「范围大、通用性强」的规则放前面把「范围小、特例」的规则放后面形成一个「默认 → 特例」的层级。四、三种「做什么」给匹配加上动作匹配写法只是「瞄准」还需要告诉 ATBC「开火」specify a colour指定颜色直接给该网站指定一个固定颜色这是最常见的用法use/ignore theme color使用/忽略主题色强制使用网站提供的 theme-color或反过来忽略它全局忽略在高级设置里也能开pick colour from element从元素取色输入 CSS 选择器例如header、.hero-banner、#logoATBC 会读取该元素颜色作为标签栏颜色元素找不到时会回退到页面取色 顺带一提如果你只想快速给「当前网站」加一条规则直接在扩展弹窗里点Add a new ruleATBC 会自动用当前域名生成一条规则见 RuleWidget.tsx再手动微调即可。五、实战速查表照着抄就行需求匹配写法header 一栏整个网站用指定颜色example.com某子域名用指定颜色mail.example.com网站 所有层级子域名**.example.com单个文章页https://example.com/blog/2024/01/01某目录下所有页面example.com/docs多个域名共用一条规则.*\.(example|test)\.com只想管深色模式写法不变把 scheme 切到 dark六、常见问题排查清单规则没生效先确认 scheme 是否与当前明暗模式匹配再确认前面有没有更靠后的规则覆盖了它*匹配不到带/的路径这是正常的路径用**或直接写完整 URL输入框标红提示「This rule will be ignored」说明写法无法被识别检查正则是否合法、通配符是否放错位置规则只在部分页面生效Firefox 的受保护页面如about:页、扩展页面不参与匹配这是浏览器的安全限制掌握以上四种写法你就能把 ATBC 从「全自动傻瓜模式」升级成「指哪打哪的精准模式」——既能让所有网站自动跟随配色又能为个别网站定制专属的 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),仅供参考