交互式教程带你完成第一套规则
扩展的新用户如今得到的不再只是手册里的一段简介——而是一个交互式教程,它会依次高亮界面元素,并一步步带你完成第一个项目的创建。它既可以在编辑面板中工作,也可以直接在你访问的页面上运行,支持 8 种语言,代码片段可一键复制。下面是我们在 v3.1 中带来的内容。
两套引擎,同一个目标
在引擎盖下有两个相互配合的模块。第一个——lib/onboarding.js——在 JustZix 的编辑面板中运行,带你穿过「目录 → 分组 → 规则集」的层级,讲解 CSS / JS / Actions 选项卡的布局。第二个——lib/onboarding-front.js——存在于内容脚本中,因此它可以直接在普通网页上高亮元素。两者合在一起覆盖了完整故事:从概念到一条能用的规则。
我们选择了 Glow 视觉方案——围绕目标的一圈发光,而不会让页面变暗。这正是它与典型「聚光灯」遮罩的区别:你仍然能看到完整页面和自己的内容,高亮只是指出应当聚焦之处。
19 步:「你的第一个项目」
默认场景会引导你完成一个完整示例:创建一个目录(用于存放相关规则的文件夹),打开 「default」分组,添加一个带有简单 CSS 和 JS(并且会真正改变页面)的规则集,接上一个动作栏,再加上一个带有自定义 JS 代码的开关动作。每一步都有一个被高亮的目标,加上一个带标题、简短说明以及「上一步 / 下一步」导航的气泡。交互步骤(例如「点击『添加规则集』按钮」)只有在你完成操作之后才会前进——无法盲目跳过。
气泡中出现的 CSS 和 JS 片段都带有复制按钮——直接粘贴到编辑器即可,无需重新敲打。完成场景之后,你的树中就会留下一套完整、能用的规则集,以便后续继续扩展。
教程启动器
第一次启动扩展时,教程会自动打开——以一个启动器(教程中心)的形式呈现,你可以从中选择场景。之后则可以从设置菜单进入(设置 → 「教程」)。同一个中心也会承载我们随时间陆续加入的新场景——每当有新场景上线,用户会在同一处看到它,不必到处寻找。
8 种语言、零表情符号、Esc 键
整个引擎与场景都被翻译为 8 种语言(PL、EN、DE、ES、FR、IT、RU、ZH)——完整的文本目录位于 lib/i18n.js 的 onboard.* 键下。图标只来自 JustZix 自有的图标集(JZ_ICONS):表示场景的靶心图标、气泡内的箭头、「复制」图标。没有表情符号,没有外部字体——UI 与扩展的其余部分保持一致。
Esc 键会关闭教程气泡与启动器。点击气泡之外或关闭按钮同样可以退出。进度会保存在 chrome.storage.local(jzOnboarding.frontCompleted)——如果你在中途停下,教程不会在每次重启时再次弹出。
接下来会有什么
第一个场景只是开始。启动器已经为更多场景做好了准备——我们计划为高级功能加入引导:AI 助手、TEMP 窗口、滑块 / toggle3 动作,以及 Ctrl+Alt+I 下独立窗口中的编辑面板。请通过联系表单告诉我们,你希望下一篇教程聚焦哪个主题。
另请参阅
- CSS 和 JavaScript 注入——你在教程中创建的规则究竟是什么
- 页面内窗口——文中提到的开发者窗口
- JustZix 与 Tampermonkey 对比——为什么迁移可能值得考虑
安装 JustZix——你的第一个项目用不到 15 分钟。
为这篇文章评分
暂无评分 — 成为第一个。