📌 **自动保存与恢复核心功能**：该Chrome插件的核心在于其自动保存用户在网站表单中输入内容的能力，并能在意外数据丢失后进行恢复。它通过`content.js`脚本监听页面的`input`事件，捕捉用户在``或``中的输入，并将输入框的ID、Name、XPath及值与当前页面的域名一起存储在`chrome.storage.local`中，实现数据的持久化。</p> <p>🔑 **精准定位与数据管理**：为了确保数据能被准确恢复，插件为每个输入元素生成唯一的XPath路径，并结合ID和Name进行定位。当用户触发恢复操作时，插件会根据当前域名从本地存储中检索相应数据，并利用这些信息精确地将保存的值填充回页面上的对应输入框，即使页面结构发生微小变化也能有效恢复。</p> <p>🌐 **用户友好的交互界面**：插件提供了直观的弹窗界面（`popup/popup.html`），允许用户查看所有已保存过数据的网站列表。用户可以方便地选择特定网站进行数据恢复，或一键清除该网站的所有已保存数据。这种设计不仅提升了用户体验，也增强了数据的可管理性。</p> <p>🚀 **广泛的应用场景**：这款插件不仅能解决长篇内容创作、客服工单、求职报名等普适性问题，还能在政企招投标、科研申报、考试报名、跨境物流、广告投放、财税申报、OA审批、CRM系统等专业领域发挥重要作用，极大地提高了工作效率，减少了因数据丢失带来的挫败感。</p> </div> <div id="content"> <p>大家一定都有遇到这种情况，在某个网站表单中编辑了很多内容，正准备提交的时候，不小心刷新了页面，或者浏览器意外关闭、系统崩溃、网络闪断、会话过期等各种场景，导致我们的长表单数据丢失，然后我们重新就得重新编辑提交。</p><p>如果有一款浏览器插件能实时保存我们输入的内容，还能及时恢复数据，那样就能省很多事情。</p><p>今天也是用codebuddy+V0手搓了一个chrome插件</p><p><img width="100%" height="auto" src="https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/301369587a04489eb45c274fe8dc06f2~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgQUnlsbHohJrlrabplb8=:q75.awebp?rk3s=f64ab15b&x-expires=1755964834&x-signature=04oGhsjOqX4i9%2BkBGreRQOo8Wzw%3D" /></p><p>目前能想到比较聚焦化的高场景：政企/招投标/科研申报/考试报名/跨境物流/广告投放/财税申报/OA-审批/CRM/工单系统等。</p><p>普适场景的话：长篇内容创作（博客、知识库、论坛）、客服工单、求职/招生报名，写求职信息总是填一大堆东西，烦的一批</p><p><img width="100%" height="auto" src="https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/82c8fce822684a79bb1ad803ff84d5c8~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgQUnlsbHohJrlrabplb8=:q75.awebp?rk3s=f64ab15b&x-expires=1755964834&x-signature=z28NxpelDtxrLhFmbM10ex1bMns%3D" /></p><h3 data-id="heading-0">1. Chrome 插件准备</h3><p>首先，项目的核心在于其文件结构和每个文件的角色。</p><ul><strong><code>manifest.json</code></strong>：这是插件的配置文件，定义了插件的元数据和权限。它声明了插件名称、版本、描述，并指定了以下关键组件：<ul><strong><code>permissions</code></strong>: 申请了 <code>storage</code> 权限用于本地存储数据，以及 <code>activeTab</code> 权限用于与当前活跃标签页的网页进行交互。<strong><code>background</code></strong>: 指定 <code>background.js</code> 作为后台脚本，在浏览器后台长期运行，处理全局事件。<strong><code>content_scripts</code></strong>: 指定 <code>content.js</code> 作为内容脚本，它会被注入到所有网页 (<code><all_urls></code>) 中，以便与页面 DOM 交互。<strong><code>action</code></strong>: 定义了点击插件图标后弹出的窗口，指向 <code>popup/popup.html</code>。</ul><strong><code>content.js</code></strong>：内容脚本，负责与网页内容进行直接交互。它的主要任务是监听网页上的输入事件、保存数据，并响应弹窗发来的恢复请求。<strong><code>background.js</code></strong>：后台脚本，处理插件的全局生命周期事件，比如安装事件和标签页更新事件。<strong><code>popup/popup.html</code></strong>：弹窗界面，包含了用户可以看到和交互的所有元素，如恢复按钮、清除按钮和已保存网站列表。<strong><code>popup/popup.js</code></strong> 和 <strong><code>popup/popup.css</code></strong>：分别处理弹窗的交互逻辑和样式。</ul><h3 data-id="heading-1">2. 页面内容监听</h3><p>实现自动保存的核心在于 <code>content.js</code> 文件。</p><ul><strong>获取 XPath</strong>：<code>content.js</code> 首先定义了一个 <code>getXPath</code> 函数。这个函数通过递归遍历父节点，为每一个输入元素生成一个唯一的 XPath 路径。如果元素有 ID，则直接使用 ID，否则通过父节点和同级元素的索引来构建路径。<strong>监听事件</strong>：脚本会为整个 <code>document</code> 添加一个 <code>input</code> 事件监听器。只要用户在任何 <code><input></code> 或 <code><textarea></code> 中输入内容，该事件就会被触发。<strong>按域名保存</strong>：当事件触发时，脚本会获取当前页面的域名作为键名。然后，它将输入框的 <code>id</code>、<code>name</code>、<code>xpath</code> 和 <code>value</code> 等信息打包成一个对象。这个数据对象会被保存到 <code>chrome.storage.local</code> 中，并以域名作为键进行分组。如果该输入项的数据已经存在，则会更新其值；否则，会添加新数据。</ul><h3 data-id="heading-2">3. 定义数据恢复管理页面</h3><p><code>popup/popup.html</code> 是用户与插件交互的界面。它包含以下元素：</p><ul><strong>恢复按钮</strong>：用于触发数据恢复操作。<strong>清除按钮</strong>：用于清除当前网站的已保存数据。<strong>已保存网站列表</strong>：一个容器 (<code>domainsContainer</code>)，用于动态展示所有已保存过数据的网站列表。</ul><h3 data-id="heading-3">4. 恢复数据</h3><p>恢复数据的过程涉及<strong>弹窗脚本</strong>和<strong>内容脚本</strong>之间的通信。</p><ul><strong>发送恢复消息</strong>：当用户在弹窗中点击“恢复”按钮时，<code>popup/popup.js</code> 会向当前活动标签页的 <code>content.js</code> 发送一条消息，请求执行 <code>restoreInputs</code> 操作。<strong>执行恢复操作</strong>：<code>content.js</code> 中的消息监听器会接收到这个请求。它会根据当前域名从本地存储中读取所有已保存的输入数据。然后，脚本会遍历这些数据，并尝试使用 <code>id</code>、<code>name</code> 或 <code>xpath</code> 精确定位页面上的对应输入框。如果成功找到，它会将保存的 <code>value</code> 填充到输入框中。</ul><h3 data-id="heading-4">5. 域名缓存列表</h3><p>为了在弹窗中展示已保存数据的网站列表，同样需要通信：</p><ul><p><strong>发送获取消息</strong>：在 <code>popup.js</code> 中，<code>loadDomainsList</code> 函数会向 <code>content.js</code> 发送一个 <code>getDomains</code> 消息。</p><p><strong>读取并返回数据</strong>：<code>content.js</code> 收到消息后，会查询 <code>chrome.storage.local</code> 中的所有数据。它会过滤出所有以域名为键的数组数据，并将其作为响应发送回 <code>popup.js</code>。</p><p><strong>在弹窗中展示</strong>：<code>popup.js</code> 接收到域名列表后，会遍历这个列表，并为每个域名创建一个新的 HTML 元素。它还会再次查询本地存储以获取每个域名下保存的输入项数量，并将其显示在列表中，为用户提供清晰的数据概览。</p></ul><p><img width="100%" height="auto" src="https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/e301880f110b4f37bd33c6059a3508ba~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgQUnlsbHohJrlrabplb8=:q75.awebp?rk3s=f64ab15b&x-expires=1755964834&x-signature=x1ehK2adINrq5wkQobw32UuJ1kE%3D" />欢迎后台找我领取源码 也可以直接上GitHub</p><p>数据救命神器 Chrome 扩展</p> <div id="recommend_bottom"></div><div id="article_bottom"></div><p id="ID_disclaimer" style="text-align:center;color:#666;font-size:10px;"></p> </div> </div> <div class="extension-group"> <a class="extension-wrap" href="https://web.fishaiapp.com/" title="Fish AI Reader" target="_blank"> <div class="extension-main"> <div class="logo-wrap" style="background-image: url(https://api.rss.fishai.com.cn/static/images/long_only_1x.png);">Fish AI Reader</div> <div class="extension-info"> <h2 class="extension-name"> Fish AI Reader </h2> <p class="extension-desc"> AI辅助创作，多种专业模板，深度分析，高质量内容生成。从观点提取到深度思考，FishAI为您提供全方位的创作支持。新版本引入自定义参数，让您的创作更加个性化和精准。 </p> </div> </div> </a> <div class="extension-wrap"> <div class="extension-main"> <img class="logo-wrap" alt="FishAI" src="/static/image/mini.jpg" /> <div class="extension-info" style="position: relative;"> <wx-open-launch-weapp username="gh_f7703f8c8e64" path="/pages/home/index" style="position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 2;"> <script type="text/wxtag-template"> <style> .open-weapp-extension-btn { width: 100%; height: 100%; } </style> <div href="javascript:;" class="open-weapp-extension-btn"></div> </script> </wx-open-launch-weapp> <h2 class="extension-name"> FishAI </h2> <p class="extension-desc"> 鱼阅，AI 时代的下一个智能信息助手，助你摆脱信息焦虑 </p> </div> </div> </div> <div class="extension-wrap"> <div class="extension-main"> <div class="extension-info" style="position: relative;"> <wx-open-launch-weapp username="gh_f7703f8c8e64" path="/pages/home/index" style="position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 2;"> <script type="text/wxtag-template"> <style> .open-weapp-extension-btn { width: 100%; height: 100%; } </style> <div href="javascript:;" class="open-weapp-extension-btn"></div> </script> </wx-open-launch-weapp> <h2 class="extension-name"> 联系邮箱 <a href="mailto:441953276@qq.com">441953276@qq.com</a> </h2> </div> </div> </div> </div> <div class="article_more"> <h2 class="article_more_title">相关标签</h2> <a href="/tag/Chrome%E6%8F%92%E4%BB%B6" target="_blank">Chrome插件</a> <a href="/tag/%E8%A1%A8%E5%8D%95%E6%95%B0%E6%8D%AE" target="_blank">表单数据</a> <a href="/tag/%E8%87%AA%E5%8A%A8%E4%BF%9D%E5%AD%98" target="_blank">自动保存</a> <a href="/tag/%E6%95%B0%E6%8D%AE%E6%81%A2%E5%A4%8D" target="_blank">数据恢复</a> </div> <div class="share-box"></div> <div id="downTips_end" class="none"> </div> <div class="cb"></div> <div id="relateArea"> <div class="top-liubai"></div> <div class="common_top">相关文章</div> <div id="top5"> <div class="relate_wrapper"> <div class="relate article"> <a title="炸！很快就可以一键虚拟试穿线上任何服装了！ 国外一位大佬正开发一款 Chrome 浏览器插件，让你可以在商城上一键虚拟试穿任何服装！ 从演示视频来看，安装了此插..." href="/news/10628"><span class="relate-title"><div class="topic-title">炸！很快就可以一键虚拟试穿线上任何服装了！ 国外一位大佬正开发一款 Chrome 浏览器插件，让你可以在商城上一键虚拟试穿任何服装！ 从演示视频来看，安装了此插...</div></span></a></div> <div class="relate article"> <a title="Using Neural Networks with Pytorch to Predict Fail of Automatic Recovery" href="/news/50858"><span class="relate-title"><div class="topic-title">Using Neural Networks with Pytorch to Predict Fail of Automatic Recovery</div></span></a></div> <div class="relate article"> <a title="惠普技术支持让我父亲的笔记本电脑变砖后的恢复问题" href="/news/63091"><span class="relate-title"><div class="topic-title">惠普技术支持让我父亲的笔记本电脑变砖后的恢复问题</div></span></a></div> <div class="relate article"> <a title="我常用的浏览器插件" href="/news/74026"><span class="relate-title"><div class="topic-title">我常用的浏览器插件</div></span></a></div> <div class="relate article"> <a title="华为坤灵M.2固态硬盘上线：512GB版本售价608元" href="/news/264443"><span class="relate-title"><div class="topic-title">华为坤灵M.2固态硬盘上线：512GB版本售价608元</div></span></a></div> <div class="relate article"> <a title="心碎了今夜有没有大佬" href="/news/297220"><span class="relate-title"><div class="topic-title">心碎了今夜有没有大佬</div></span></a></div> <div class="relate article"> <a title="产品安利社 07月07日" href="/news/369409"><span class="relate-title"><div class="topic-title">产品安利社 07月07日</div></span></a></div> <div class="relate article"> <a title="产品安利社 07月13日" href="/news/440005"><span class="relate-title"><div class="topic-title">产品安利社 07月13日</div></span></a></div> <div class="relate article"> <a title="iOS 18新增“已恢复”相册功能 可找回丢失或损坏的照片" href="/news/500037"><span class="relate-title"><div class="topic-title">iOS 18新增“已恢复”相册功能 可找回丢失或损坏的照片</div></span></a></div> </div> </div> </div> <style> .footer { width: 100%; /* 原先页面已经预留了空间 */ /* height: 2.3rem; */ position: relative; } .footer.padding-bottom{ padding-bottom: 1.2rem; } .footer .fixed-footer { position: fixed; bottom: 0; left: 0; width: 100%; height: 2.3rem; background-color: #191919; z-index: 100; } .footer.padding-bottom .fixed-footer{ padding-bottom: 1.2rem; } .footer .fixed-footer .flex-content{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 2.3rem; display: flex; box-sizing: border-box; align-items: center; justify-content: space-between; padding:0 .55rem; } .footer .icon-left, .footer .icon-right{ position: absolute; width: .55rem; height: .55rem; top: -0.54rem; } .footer .icon-left{ left: 0; } .footer .icon-left::after{ position: absolute; width: .55rem; height: .55rem; content: ''; bottom: -0.01rem; left: -0.01rem; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABC0lEQVQ4T63TMUrEUBDG8e+L5AYWeQFLC72A17Cw8gYqXkDBTryAoBaWixbWWlor1haW8pKZ4mElFj42I4GNhe6ym82bA/z4w8wQwAqAMRINy7Jcres6JPLAoig2VfU1JbijqnfJQOfcqYgcpwSfRGQrJTiOMa6FEOoUKJ1zBuBIRM5Sgu8isg7geyjaFcLM9lX1IhkIIJDcGHrkv4WTshsR2R1S+RdsrT0RuVwW/QeaWQSwrar3y6DTClvny8zal3zoi84C261HkocictUHnQl2CMnbLMsOvPcfi8BzwQkSzOxEVa/nHf+iYBfnSZ6THFVV5acV9wU7ozGzZ5KPAF6apnnL87z23n/+ADjcghv4tAnCAAAAAElFTkSuQmCC'); background-size: 100% 100%; background-repeat: no-repeat; } .footer .icon-right{ right: 0; } .footer .icon-right::after{ position: absolute; width: .55rem; height: .55rem; content: ''; bottom: -0.01rem; right: -0.01rem; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABC0lEQVQ4T63TMUrEUBDG8e+L5AYWeQFLC72A17Cw8gYqXkDBTryAoBaWixbWWlor1haW8pKZ4mElFj42I4GNhe6ym82bA/z4w8wQwAqAMRINy7Jcres6JPLAoig2VfU1JbijqnfJQOfcqYgcpwSfRGQrJTiOMa6FEOoUKJ1zBuBIRM5Sgu8isg7geyjaFcLM9lX1IhkIIJDcGHrkv4WTshsR2R1S+RdsrT0RuVwW/QeaWQSwrar3y6DTClvny8zal3zoi84C261HkocictUHnQl2CMnbLMsOvPcfi8BzwQkSzOxEVa/nHf+iYBfnSZ6THFVV5acV9wU7ozGzZ5KPAF6apnnL87z23n/+ADjcghv4tAnCAAAAAElFTkSuQmCC'); background-size: 100% 100%; background-repeat: no-repeat; transform: rotateY(180deg); } .footer .flex-content .open-weapp { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; opacity: 0; } .footer .flex-content .footer-left, .footer .flex-content .footer-right { position: relative; font-weight: bold; } .footer .flex-content .footer-left{ width: 4.35rem; height: 1.25rem; } .footer .flex-content .footer-left .footer-left-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; color: #D4D4D4; font-size: .65rem; } .footer .flex-content .footer-left .footer-left-content .logo{ width: 1.1rem; height: 1.1rem; background-image: url('http://app.myzaker.com/news/images/logo_icon.png'); background-size: 100% 100%; background-repeat: no-repeat; margin-right: .35rem; border-radius: 50%; } .footer .flex-content .footer-right{ width: 4.38rem; height: 1.25rem; line-height: 1.25rem; display: block; box-sizing: border-box; } .footer .flex-content .footer-right .open-weapp-btn{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #2B2B2B; border-radius: .15rem; color: #D4D4D4; font-size: .65rem; text-align: center; display: block; } </style> <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="/static/js/web3.js" type="text/javascript"></script> <script type="text/javascript" async="false"> var browser = { versions: (function () { var u = navigator.userAgent.toLowerCase(), isPad = false,isAndroidPad = false,isIpad = false,isMobile = false,isPc = false; if(u.indexOf('')) if(u.indexOf('android') > -1){ if(u.indexOf('mobile') == -1){ isAndroidPad = true; } } if(u.indexOf('ipad') > -1){ isIpad = true; } if(isAndroidPad||isIpad){ isPad = true; }else if((u.indexOf('mobile') > -1 && !isPad ) || (u.indexOf('android') > -1 && !isAndroidPad) || (u.indexOf('phone') > -1)){ isMobile = true; }else{ isPc = true; } return { android: u.indexOf('android') > -1 || u.indexOf('Linux') > -1, iPhone: u.indexOf('iphone') > -1, isPad: isPad, isMobile:isMobile, isPc:isPc, wx:u.toLowerCase().indexOf('micromessenger') > -1, }; })() } var checkInZaker = function(){ if (navigator.appinfo || navigator.userAgent.match(/zaker/ig)) { return true; } return false; } if( location.href.indexOf('mobile=1')<0 && (browser.versions.isPc || browser.versions.isPad) ){ var style = '<style type="text/css">'; style+= 'html{background-color:#f8f8f8;}'; style+= '#body{width:720px;margin:0 auto;background-color:#fff;border-left:1px solid #e8e8e8;border-right:1px solid #e8e8e8;font-style:normal}'; style+= '#temple_title,#content_text,.icon-font-origin,#top5{padding:0 50px;}'; style+= '#downTips{width:720px;}'; style+= '#qrcode{position:fixed;background-color:#fff;margin:44px 0 0 740px;}'; style+= '#downTips{display:none;}'; style+= '</style>'; document.write(style); } var _$ = function(id){return document.querySelector(id);}, isWap = true; var qrcodeHtml = '' if(location.href.indexOf('mobile=1')<0 && browser.versions.isPc){ qrcodeHtml += '<img id="qrcode" src="/static/image/qrcode_dingyuehao.jpg"/>' } qrcodeHtml += '<div class="zk_top_barwrap"><div class="zk_top_bar"><a href="/" class="zk_top_bar_logo"></a></div></div>' $('#body').prepend(qrcodeHtml); </script> <script type="text/javascript"> var new_style = ''; var vo = document.createElement("a"); vo.className = 'icon-font-origin-btn'; vo.style.borderBottom = 'none'; vo.style.color = '#00abff'; vo.style.marginLeft = '0px'; if(new_style){ vo.style.cssText="border-bottom-style: none;font-size: 11px;color: #ababab;margin-left: 6px;"; document.getElementById('ID_disclaimer').style.cssText='text-align: left;color:#ababab;font-size: 16px;line-height: 32px;padding:0;padding-top: 4px;'; } vo.href = 'https://juejin.cn/post/7538737860544249895'; vo.innerHTML = '查看原文'; var el_disclaimer = _$("#ID_disclaimer"); if(el_disclaimer){ el_disclaimer.appendChild(vo); } </script> <script type="text/javascript"> //图片初始化 (function () { var imglazy = document.querySelectorAll('.img_box .lazy'); imglazy = Array.prototype.slice.call(imglazy); imglazy.forEach(function(img){ // 获取宽高 var dWidth = img.dataset['width']; var dHeight = img.dataset['height']; // 获取父元素 var parentEle = img; do{ parentEle = parentEle.parentNode; } while(!parentEle.classList.contains('img_box') || parentEle.id == "content") // 获取图片的父容器占宽 var parentWidth = parentEle.offsetWidth; // 1. 图片原宽度大于容器宽度70%，撑到100% // 2. 图片原宽度大于容器宽度40%，小于容器宽度70%，保持图片原尺寸 // 3. 图片原宽度小于容器宽度40%，撑到40% var maxRate = 0.7; var minRate = 0.4; // 计算阀值 var maxWidth = maxRate * parentWidth; var minWidth = minRate * parentWidth; // 最终设定图片的宽高 var imgWidth, imgHeight; if (dWidth) { if (dWidth > maxWidth) { imgWidth = parentWidth; } else if (dWidth > minWidth) { imgWidth = dWidth; img.parentNode.style['display'] = 'inline-block'; // img.parent('.content_img_div').css('display', 'inline-block'); } else { imgWidth = minWidth; img.parentNode.style['display'] = 'inline-block'; // img.parent('.content_img_div').css('display', 'inline-block'); } // 计算高度 imgHeight = dHeight / dWidth * imgWidth; } else { imgWidth = parentWidth; } // 设置图片大小 img.style['width'] = imgWidth + "px"; img.style['height'] = imgHeight + "px"; }); })(); </script> <script> var inzaker = (navigator.userAgent.match(/zaker/ig)) ? true : false; if(!inzaker && !navigator.userAgent.match(/AlipayClient/ig) ){ if(document.querySelector('.ntpl_head')){ (function(){ function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return document.defaultView.getComputedStyle(obj,null)[attr]; } } var $ntplHead = document.querySelector('.ntpl_head'), pt = getStyle($ntplHead, 'paddingTop'); $ntplHead.style.paddingTop = (parseInt(pt, 10) - 20)+'px'; })(); } } window.zkgetWebConfig = function(data) { inzaker = true; if(data.appType == 'elderly'){ document.getElementsByTagName('body')[0].className += ' body_elderly'; } }; </script> </body> <!-- Google tag (gtag.js) --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-LT4LDFPVLZ"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-LT4LDFPVLZ'); </script> </html>
