跳到主要内容

快速入门

本指南将帮助您快速安装和使用 Schema Element Editor 插件。

安装插件​

  1. 从 Releases 下载最新版本的插件包（.zip 文件）
  2. 打开 Chrome 浏览器，访问 chrome://extensions/
  3. 开启右上角的「开发者模式」
  4. 将下载的 .zip 文件直接拖拽到扩展页面中

安装成功后，您会在浏览器工具栏看到 Schema Element Editor 的图标。

激活插件​

点击工具栏中的 Schema Element Editor 图标来激活或停用插件：

  • 🔵 蓝色图标 = 插件已激活
  • ⚪ 灰色图标 = 插件未激活

基础使用流程​

第一步：确保页面已集成​

Schema Element Editor 需要与您的页面配合使用。页面需要：

  1. 标记可编辑元素 - 在 HTML 元素上添加 data-id 属性
<div data-id="message-1">这是一个可编辑的元素</div>
  1. 提供数据接口 - 页面需要实现获取和更新 Schema 的方法

如果您是开发者，请参阅 集成概述 了解如何集成。

第二步：检测元素​

  1. 激活插件（工具栏图标变为蓝色）
  2. 按住 Alt 键（Mac 上是 Option 键）
  3. 将鼠标悬停在页面元素上
  4. 带有 data-id 属性的元素会显示高亮框和参数标签

第三步：打开编辑器​

按住 Alt 键并点击高亮的元素，会从右侧滑出 Schema 编辑器抽屉：

第四步：编辑 Schema​

在编辑器中，您可以：

  • 直接编辑 JSON 内容
  • 使用工具栏按钮格式化、转义等
  • 按 Alt + S 保存修改

第五步：保存修改​

编辑完成后，点击底部的「保存」按钮或使用快捷键 Alt + S，修改会立即同步到页面。

快捷键速查​

快捷键功能
Alt + 悬停检测和高亮元素
Alt + 点击打开编辑器
Alt + A高亮页面所有可编辑元素
Alt + R切换录制模式
Alt + S保存修改（编辑器内）
Alt + F格式化 JSON（编辑器内）
Alt + P打开/更新预览（编辑器内）
Alt + Shift + P关闭预览（编辑器内）

下一步​

常见问题​

Q: 按住 Alt 键但元素没有高亮？​

可能的原因：

  1. 插件未激活 - 请检查工具栏图标是否为蓝色
  2. 元素没有 data-id 属性 - 页面需要正确标记元素
  3. 页面未集成 Schema Element Editor - 需要开发者配置

Q: 点击元素后编辑器没有打开？​

可能的原因：

  1. 页面未提供获取 Schema 的方法
  2. 通信配置不正确

请检查浏览器控制台是否有错误信息，并参考 集成文档。

Q: 保存后页面没有变化？​

可能的原因：

  1. 页面的更新方法未正确实现
  2. 页面需要手动刷新才能看到变化