GreasyFork项目中CSS到JS转换的端口处理规范

GreasyFork项目中CSS到JS转换的端口处理规范

greasyfork An online repository of user scripts. 项目地址: https://gitcode.com/gh_mirrors/gr/greasyfork

背景介绍

在用户脚本开发中，经常需要将CSS样式规则转换为JavaScript脚本规则。GreasyFork作为一个流行的用户脚本托管平台，其转换工具在处理URL匹配规则时需要特别注意端口号的规范处理。

端口号在匹配规则中的特殊性

在JavaScript的用户脚本匹配规则中，@match指令不允许包含端口号。这一限制源于浏览器安全策略，旨在防止潜在的安全风险。当CSS规则中包含带有端口的URL时，转换工具需要将其智能地转换为@include规则而非@match规则。

转换逻辑详解

基本判断条件

1. 路径判断：通过检查URL中斜杠的数量来确定是否包含路径部分
2. 端口判断：使用正则表达式检测URL中是否包含端口号

转换策略

对于不同的CSS规则类型，转换工具采用不同的处理方式：

1. 精确URL匹配(url)：

   • 包含端口的URL：转换为@include
   • 不包含端口的URL：保留为@match

2. URL前缀匹配(url-prefix)：

   • 包含端口的URL：
     • 有路径：转换为@include并添加通配符
     • 无路径：转换为@include并添加路径通配符
   • 不包含端口的URL：
     • 有路径：转换为@match并添加通配符
     • 无路径：转换为@include并添加双重通配符

实际应用案例

在实际项目中，这种转换逻辑可以正确处理各种复杂情况：

1. 对于Plex媒体服务器的样式规则，会将带端口的本地服务器地址(如:32400)转换为@include规则
2. 对于Sonarr应用的暗黑主题，会将localhost:8989这样的地址自动识别并正确转换
3. 标准URL(如Plex的官方域名)则保留为@match规则

技术实现建议

开发者可以构建一个转换工具，通过以下步骤实现自动转换：

1. 解析原始CSS文档规则
2. 识别URL中的端口号存在与否
3. 根据规则类型和端口情况选择适当的转换方式
4. 生成符合规范的JavaScript用户脚本元数据

这种自动转换机制大大简化了用户脚本的迁移过程，确保了兼容性同时遵循了浏览器安全规范。

greasyfork An online repository of user scripts. 项目地址: https://gitcode.com/gh_mirrors/gr/greasyfork