Greasy Fork

来自缓存

Greasy Fork is available in English.

多套表单自动填充

基于 IndexedDB 存储,支持大容量表单数据,弹窗选择填充,Ctrl+M开关

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Greasemonkey 油猴子Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Userscripts ,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

作者
日安装量
0
总安装量
4
评分
0 0 0
版本
6.0
创建于
2026-03-30
更新于
2026-03-30
大小
19.9 KB
许可证
MIT
适用于
所有网站

多套表单自动填充脚本

脚本版本:v6.0 存储引擎:IndexedDB 运行环境:Tampermonkey / Violentmonkey 文档用途:开发维护、二次扩展、问题排查


一、全局配置

1.1 核心常量

// 域名标识(数据隔离依据)
const domain = location.hostname;

// IndexedDB 配置
const DB_NAME = 'FormAutoFillDB';
const DB_VERSION = 1;
const STORE_NAME = 'formSchemes';

// 表单捕获规则
const INPUT_SELECTOR = 'input:not([type="hidden"]), textarea, select';
const ALLOWED_INPUT_TYPES = [
  'text', 'email', 'tel', 'password', 'number',
  'search', 'url', 'date', 'month', 'time'
];

1.2 全局状态变量

变量名 类型 用途
db IDBDatabase IndexedDB 数据库实例
panel HTMLElement 主操作面板 DOM
currentModal HTMLElement 当前打开的弹窗 DOM

二、IndexedDB 存储层 API

所有存储方法均为 async/await 异步模式。

2.1 initDB() → Promise<void>

  • 功能:初始化/打开 IndexedDB 数据库
  • 逻辑:
    • 版本升级时自动创建对象仓库
    • domain 作为唯一主键
  • 异常:内部捕获,不阻塞页面

2.2 getList() → Promise<Array>

  • 功能:获取当前域名下所有保存的表单方案
  • 返回:[{ name, time, data }, ...]
  • 无数据时返回空数组

2.3 setList(list) → Promise<void>

  • 功能:保存/覆盖当前域名的表单方案列表
  • 参数:list 完整方案数组

2.4 getAllDomainData() → Promise<Array>

  • 功能:获取全网站所有表单数据(用于导出备份)

2.5 importAllData(dataMap) → Promise<void>

  • 功能:批量导入全站数据
  • 参数:{ 域名: 方案数组 } 结构对象

三、通用工具 API

3.1 getFields() → Array<HTMLElement>

  • 功能:获取页面所有可填充表单项
  • 过滤规则:
    • 排除 type="hidden"
    • 支持 textarea / select
    • 仅捕获白名单内 input 类型

3.2 getFirstInput() → HTMLElement | null

  • 功能:获取页面第一个有效输入框
  • 用途:主面板自动定位

3.3 showToast(text) → void

  • 功能:居中轻提示,1.5s 自动消失
  • z-index:1000001
  • 样式:半透明黑底、白色文字、圆角

3.4 closeAnyModal() → void

  • 功能:统一关闭填充/管理/导入导出等所有弹窗

四、业务功能 API

4.1 主面板

togglePanel() → void

  • 触发:Ctrl+M
  • 逻辑:存在则销毁,不存在则创建
  • 副作用:自动关闭所有弹窗

createPanel() → void

  • 功能:创建主操作面板
  • 定位:第一个输入框右侧
  • 按钮列表:
    1. 保存为新方案
    2. 一键覆盖最近方案
    3. 选择方案填充
    4. 管理方案
    5. 导入/导出数据

4.2 保存与覆盖

saveFormAsNew() → Promise<void>

  • 流程:
    1. 采集当前页面非空表单数据
    2. 弹出方案名称输入框
    3. 追加保存到方案列表

overwriteLatest() → Promise<void>

  • 功能:用当前页面内容覆盖最后一条方案
  • 适用场景:快速更新信息,不新增条目

4.3 填充功能

showFillModal() → Promise<void>

  • 功能:打开方案选择弹窗
  • 每项展示:方案名 + 保存时间 + 【选择填充】按钮

fillItem(item) → Promise<void>

  • 功能:执行表单填充
  • 自动触发:
    • input 事件
    • change 事件
  • 提示:填充完成后显示成功 Toast

4.4 管理与删除

showManageModal() → Promise<void>

  • 功能:打开管理弹窗,支持单条删除
  • 删除后自动刷新列表

4.5 导入导出

showImportExport() → void

  • 导出:遍历全网站数据 → 生成 JSON 文件下载
  • 导入:选择 JSON 文件 → 覆盖 IndexedDB
  • 文件名格式:form_backup_时间戳.json

4.6 快捷填充

fillLatest() → Promise<void>

  • 功能:填充最近保存的方案
  • 触发:Ctrl+Shift+F

五、快捷键系统

快捷键 功能 对应函数
Ctrl + M 开关主操作面板 togglePanel()
Ctrl + Shift + F 一键填充最近方案 fillLatest()

六、数据结构规范

6.1 单条表单方案

{
  "name": "方案名称",
  "time": "2026/03/30 18:00:00",
  "data": {
    "username": "xxx",
    "password": "xxx",
    "phone": "xxx",
    "...": "其他表单字段"
  }
}

6.2 IndexedDB 存储结构

  • 数据库:FormAutoFillDB
  • 对象仓库:formSchemes
  • 主键:domain(域名唯一)
  • 单条记录: javascript { "domain": "www.example.com", "list": [方案1, 方案2, ...] }

七、UI 样式规范

7.1 主题色值

组件 色值 用途
主按钮 #165DFF 保存、新建方案
填充按钮 #00B42A 选择填充
删除按钮 #F53F3F 删除方案
覆盖按钮 #FF7D00 一键覆盖
导入导出 #722ED1 数据备份

7.2 布局规范

  • 圆角:12px ~ 14px
  • 弹窗最大宽度:480px
  • 面板宽度:170px
  • 层级顺序:弹窗 > 主面板 > Toast

八、维护扩展指南

8.1 新增功能按钮

  1. createPanel() 中添加按钮 DOM
  2. 绑定点击事件
  3. 实现对应 async 业务函数

8.2 支持更多表单类型

ALLOWED_INPUT_TYPES 中添加类型即可。

8.3 修改存储逻辑

直接修改 IndexedDB 相关工具函数,上层业务无需改动。

8.4 新增快捷键

在全局 keydown 事件中添加判断分支。


九、稳定性与兼容性

  1. 全部使用弹窗,避免定位冲突
  2. 异步存储,不阻塞主线程
  3. 填充自动触发事件,兼容现代网站
  4. 按域名隔离,不跨站干扰
  5. 无外部网络请求,纯本地运行
  6. 支持大容量数据存储(无 5M 限制)