← 全部文章

指南

从 Stylish / Stylus 迁移到 JustZix —— 除了 CSS 你还能多得到什么

15 5月 2026 · 作者 JustZix Team

如果你用 Stylish 或 Stylus 已经很多年 —— JustZix 是它们的天然继任者。它们为 CSS 做的一切，JustZix 也做。此外：JS 规则（Stylus 没有）、带 6 种按钮类型（slider/toggle3/textarea）的动作栏、4 种前端窗口类型（CSS pane / JS pane / JS Console / Output Console）、用于仪表盘布局的吸附连接、带 TTL 的分享链接和多设备同步。没有账号、没有追踪，完全开源。本文说明从 Stylus 复制什么、以及沿途从 JustZix 添加什么。

为什么迁移 —— 快速总结

步骤 1 —— 从 Stylus 导出样式

Stylus 有内置的备份导出：

1. 打开 Stylus 扩展 → 「Manage」→ 「Backup」→ 「Export styles to file」
2. 保存 stylus_backup.json —— 它是带每个样式（CSS 代码 + 带 URL 前缀的 section）的 JSON

Stylish：如果你用过它，你大概有本地备份或 userstyles.org 的密钥。JustZix 没有直接导入 —— 按规则手动复制粘贴（每个样式 = 一条新的 JustZix 规则）。平均每个样式 30 秒。

步骤 2 —— 概念映射

术语不同，语义相似：

步骤 3 —— 粘贴 CSS

对每个 Stylus style：

1. 在 JustZix 选项里：文件夹 → +规则
2. 作用域：选「URL 模式」并粘贴 Stylus 的 URL 前缀（例如 https://reddit.com/*）
3. CSS 标签页：粘贴 Stylus section 的全部代码（不带 @-moz-document 包装器 —— JustZix 自动包它）
4. 保存

Stylus 语法相关：如果你在 Stylus 里用了 Less/Stylus/SCSS 预处理器，你得在粘贴前预处理成纯 CSS。JustZix 只是纯 CSS（浏览器里没有 babel）。

步骤 4 —— 添加 Stylus 没有的功能

CSS 迁移之后，你可以用 Stylus 里不可能的东西丰富每条规则：

4a. JS 规则 —— 自动跳过 cookie 横幅

Stylus 的经典空白 —— JS 是 CSS 用不上的旁路通道。JustZix：在同一条规则里加 JS：

// JS 规则（和 CSS 同一作用域）
const observer = new MutationObserver(() => {
  const accept = [...document.querySelectorAll('button, a')]
    .find(b => /accept all|akzeptieren/i.test(b.textContent));
  if (accept) { accept.click(); observer.disconnect(); }
});
observer.observe(document.body, { childList: true, subtree: true });

CSS 在视觉上隐藏了横幅（防守），JS 在横幅出现时点击「Accept」（进攻）。一条规则，两层。

4b. SLIDER 动作 —— 实时修改字号

带 var(--font-size) 和一个数字 prompt 的 Stylus userstyle —— 笨重。JustZix：

// SLIDER 动作「🔤 Font」
min: 12, max: 22, step: 1, defaultValue: 16, unit: 'px'

code: |
  document.documentElement.style.setProperty('--user-font', value + 'px');

CSS 规则使用：body, p, span { font-size: var(--user-font, 16px) !important; }。拖动动作栏里的滑块 → 实时更新，无需 F5。按域名的 memory。

4c. CSS pane —— 给新片段用的实时编辑器

Stylus 要求打开选项页 + 编辑 + 保存 + 重新加载页面。JustZix 的 CSS pane = 页面旁边一个面板，写 CSS，在标签页本身里实时更新。F5 保留 pane 内容（sessionStorage）。非常适合「临时试点东西」。

步骤 5 —— 配置同步

Stylus Sync 需要一个单独的 Stylus 账号 + 手动配置。JustZix 自动使用 chrome.storage.sync —— 如果你登录了 Chrome，规则会被加密并通过 Google 账号同步。

chrome.storage.sync 的限制：总共 100 KB + 每个 item 8 KB。JustZix 把大规则拆分到多个 item。实践中 50-100 条 CSS+JS 规则毫无问题。超出 → 回退到 chrome.storage.local（按设备，无同步）。

步骤 6 —— 通过 TTL 链接分享（而不是 userstyles.org）

userstyles.org = 中心化、公开、持久的注册库。JustZix Share = 短暂、自愿加入、TTL 从 1h 到 48h：

1. JustZix 规则 → 「Share」（右上角的剪贴板图标）
2. 选择 TTL：1h / 8h / 24h / 48h
3. 得到一个链接 https://www.justzix.com/s/aBcDeF123
4. 在 Slack/Discord 里把它粘给你的团队。点击 → 他们在自己那里导入规则
5. TTL 之后 → 链接返回 404，数据从后端删除（GDPR 合规）

非常适合 QA 团队 —— 「用我的配置测这个流程」、「试试这个 UI 改动」、「这是一个可导入的 QA 栏」。不会在公开注册库里持久存在。

使用场景 1 —— Reddit 阅读模式

一个 Stylus userstyle「Old Reddit reader mode」→ 200 行隐藏侧边栏、广告、推荐的 CSS。JustZix：

• CSS 规则（同样的 200 行）
• 外加一个 TOGGLE3「Mode」（Reader / Default / Compact）—— 3 个状态带不同的 CSS 变量
• 外加一个 SLIDER「Width」—— 文本列宽度
• 外加一个 Output Console —— 记录每个「点击链接」动作（调试，看它追踪了什么）

Stylus = 静态样式。JustZix = 交互式个性化层。

使用场景 2 —— GitHub 深色模式（更好的一个版本）

一个 Stylus userstyle「GitHub Dark」→ 500 行带硬编码颜色的 CSS。JustZix：

• 带 CSS 变量的 CSS 规则（--bg、--text、--accent）
• TOGGLE3「Mode」（Light / Dim / Dark / Auto-system）—— 4 个状态，每个设置变量
• SLIDER「Saturation」—— 给颜色去饱和让眼睛更舒服

个性化直接在标签页里进行，无需回到 Stylus 的选项页。

迁移的坑

• JustZix 不导入 Stylus 的 JSON。按规则手动复制粘贴。实践中：每个样式 30 秒。如果你有 50 个样式 → 约 25 分钟。建议在喝咖啡休息时集中做这个工作。
• 没有 Less/Stylus/SCSS 预处理。JustZix 的 CSS 是纯的。在粘贴前于构建时预处理，或者用 CSS 变量代替 Less 变量。
• Stylus 的正则语法和 JustZix 不同。Stylus 在 @-moz-document 里用 regexp("...")，JustZix 的 scope.url 接受 JS 风格的正则。细微的语法差异 —— 迁移后测试模式。
• 中心化注册库 userstyles.org 没了。userstyles.world 是一个部分的继任者。JustZix 的分享是短暂的、非公开的 —— 这是有意的。如果你想要公开的 CSS 托管 → 用一个 GitHub Gist + JustZix 分享做快速链接。
• Stylish 的历史追踪事件。2018 年 Stylish 被下架，发现遥测追踪是开启的。JustZix 是 MIT 开源，默认无分析，GA4 仅通过明确的 cookie 同意（GDPR）。

接下来做什么

从 Stylus 迁移之后你拥有同样的功能 + 多 5 倍。一切可选 —— 你可以像在 Stylus 里那样只用 CSS 规则，或者逐个探索 JS 规则、动作栏、pane。另见：

• 标签页里的迷你 IDE —— JustZix 工具的完整地图
• CSS pane —— 标签页里的实时编辑器（最「Stylus 化」的功能）
• 为任何网站启用深色模式 —— 一段可直接迁移的现成代码

安装 JustZix —— Stylus 可以并行存在（Chrome 允许两个扩展同时存在），所以你可以试 JustZix 而不删掉 Stylus。一周之后你会发现只需要一个。