Auto Forms

Auto Forms 是一款 Chrome 扩展程序，其主要功能是对网页表单模板进行保存和加载，能够让用户迅速填充输入框，极大地提升了表单填写效率。

功能特性

• 模板保存与加载：可以将当前表单数据保存为模板，后续需要时能快速加载模板来填充表单。
• 模板编辑与删除：支持对已保存的模板进行编辑和删除操作。
• 模板预览：能以高亮可复制的 JSON 格式预览模板数据。
• 屏蔽字段设置：用户可自定义屏蔽字段，在保存和加载模板时会跳过这些字段。
• 高亮显示功能：能够标记出所有可复制的表单元素，便于用户识别。

安装步骤

1. 把本项目的代码克隆到本地：

git clone https://github.com/unsiao/autoforms.git

2. 打开 Chrome 浏览器，在地址栏输入 chrome://extensions 并回车，进入扩展程序管理页面。
3. 开启右上角的“开发者模式”。
4. 点击“加载已解压的扩展程序”，选择刚才克隆到本地的项目文件夹。

使用方法

悬浮面板

当你打开任意网页时，页面右下角会出现一个悬浮面板，上面有各种操作按钮和模板选择下拉框。

保存模板

1. 填写好表单内容。
2. 点击悬浮面板中的“保存模板”按钮。
3. 在弹出的提示框中输入模板名称，然后点击“确定”。

加载模板

1. 在模板选择下拉框中挑选要加载的模板。
2. 点击“载入模板”按钮，表单就会自动填充所选模板的数据。

编辑模板

1. 在模板选择下拉框中选择要编辑的模板。
2. 点击“编辑模板”按钮，会弹出编辑对话框。
3. 在编辑对话框中修改模板字段的值，还能使用搜索框快速定位字段。
4. 点击“保存修改”按钮，模板数据就会更新。

删除模板

1. 在模板选择下拉框中选择要删除的模板。
2. 点击“删除模板”按钮，在确认提示框中点击“确定”，模板就会被删除。

预览模板

1. 在模板选择下拉框中选择要预览的模板。
2. 点击“预览模板”按钮，会弹出预览对话框，显示模板的 JSON 数据。
3. 点击“复制”按钮，可将 JSON 数据复制到剪贴板。

设置屏蔽字段

1. 点击悬浮面板中的“设置”按钮，会弹出设置对话框。
2. 在输入框中输入用逗号分隔的字段名，这些字段在保存和加载模板时会被屏蔽。
3. 点击“保存设置”按钮，设置会被保存。

高亮显示

点击“高亮显示”按钮，可复制的表单元素会被高亮标记，再次点击则取消高亮。

代码结构

• content.js：此为内容脚本，实现了扩展的主要功能，包含悬浮面板的创建、模板的保存和加载、对话框的显示等。
• manifest.json：这是扩展的清单文件，对扩展的基本信息、权限、内容脚本等进行了配置。
• styles.css：为扩展的样式文件，定义了悬浮面板、对话框、按钮等元素的样式。

贡献

如果你想要为这个项目贡献代码，可按以下步骤操作：

1. 把项目 fork 到自己的仓库。
2. 创建一个新的分支：git checkout -b feature/your-feature。
3. 对代码进行修改并提交：git commit -m "Add your feature"。
4. 把修改推送到自己的仓库：git push origin feature/your-feature。
5. 在 GitHub 上创建一个 Pull Request。

许可证

本项目采用 MIT 许可证。