大家一定都有遇到这种情况，在某个网站表单中编辑了很多内容，正准备提交的时候，不小心刷新了页面，或者浏览器意外关闭、系统崩溃、网络闪断、会话过期等各种场景，导致我们的长表单数据丢失，然后我们重新就得重新编辑提交。
如果有一款浏览器插件能实时保存我们输入的内容，还能及时恢复数据，那样就能省很多事情。
今天也是用codebuddy+V0手搓了一个chrome插件
目前能想到比较聚焦化的高场景：政企/招投标/科研申报/考试报名/跨境物流/广告投放/财税申报/OA-审批/CRM/工单系统等。
普适场景的话：长篇内容创作（博客、知识库、论坛）、客服工单、求职/招生报名，写求职信息总是填一大堆东西，烦的一批
1. Chrome 插件准备
首先，项目的核心在于其文件结构和每个文件的角色。
manifest.json：这是插件的配置文件，定义了插件的元数据和权限。它声明了插件名称、版本、描述，并指定了以下关键组件：-
permissions: 申请了storage权限用于本地存储数据，以及activeTab权限用于与当前活跃标签页的网页进行交互。background: 指定background.js作为后台脚本，在浏览器后台长期运行，处理全局事件。content_scripts: 指定content.js作为内容脚本，它会被注入到所有网页 (<all_urls>) 中，以便与页面 DOM 交互。action: 定义了点击插件图标后弹出的窗口，指向popup/popup.html。
content.js：内容脚本，负责与网页内容进行直接交互。它的主要任务是监听网页上的输入事件、保存数据，并响应弹窗发来的恢复请求。background.js：后台脚本，处理插件的全局生命周期事件，比如安装事件和标签页更新事件。popup/popup.html：弹窗界面，包含了用户可以看到和交互的所有元素，如恢复按钮、清除按钮和已保存网站列表。popup/popup.js和popup/popup.css：分别处理弹窗的交互逻辑和样式。
2. 页面内容监听
实现自动保存的核心在于 content.js 文件。
- 获取 XPath ：
content.js首先定义了一个getXPath函数。这个函数通过递归遍历父节点，为每一个输入元素生成一个唯一的 XPath 路径。如果元素有 ID，则直接使用 ID，否则通过父节点和同级元素的索引来构建路径。 - 监听事件 ：脚本会为整个
document添加一个input事件监听器。只要用户在任何<input>或<textarea>中输入内容，该事件就会被触发。 - 按域名保存 ：当事件触发时，脚本会获取当前页面的域名作为键名。然后，它将输入框的
id、name、xpath和value等信息打包成一个对象。这个数据对象会被保存到chrome.storage.local中，并以域名作为键进行分组。如果该输入项的数据已经存在，则会更新其值；否则，会添加新数据。
3. 定义数据恢复管理页面
popup/popup.html 是用户与插件交互的界面。它包含以下元素：
- 恢复按钮：用于触发数据恢复操作。
- 清除按钮：用于清除当前网站的已保存数据。
- 已保存网站列表 ：一个容器 (
domainsContainer)，用于动态展示所有已保存过数据的网站列表。
4. 恢复数据
恢复数据的过程涉及弹窗脚本 和内容脚本之间的通信。
- 发送恢复消息 ：当用户在弹窗中点击"恢复"按钮时，
popup/popup.js会向当前活动标签页的content.js发送一条消息，请求执行restoreInputs操作。 - 执行恢复操作 ：
content.js中的消息监听器会接收到这个请求。它会根据当前域名从本地存储中读取所有已保存的输入数据。然后，脚本会遍历这些数据，并尝试使用id、name或xpath精确定位页面上的对应输入框。如果成功找到，它会将保存的value填充到输入框中。
5. 域名缓存列表
为了在弹窗中展示已保存数据的网站列表，同样需要通信：
-
发送获取消息 ：在
popup.js中，loadDomainsList函数会向content.js发送一个getDomains消息。 -
读取并返回数据 ：
content.js收到消息后，会查询chrome.storage.local中的所有数据。它会过滤出所有以域名为键的数组数据，并将其作为响应发送回popup.js。 -
在弹窗中展示 ：
popup.js接收到域名列表后，会遍历这个列表，并为每个域名创建一个新的 HTML 元素。它还会再次查询本地存储以获取每个域名下保存的输入项数量，并将其显示在列表中，为用户提供清晰的数据概览。
欢迎后台找我领取源码 也可以直接上GitHub
数据救命神器 Chrome 扩展