每次在博客留言时都要反复输入昵称、邮箱和网址，是不是觉得很麻烦？今天分享一个我一直在用的「偷懒」神器 —— 一个能自动填写评论信息的浏览器书签脚本。

一、什么是书签脚本？

浏览器书签不仅能保存网址，还可以保存一段 JavaScript 代码。当你点击这个特殊的书签时，代码就会在当前页面执行。利用这个特性，我们可以创建一键操作的便捷工具。

二、快速创建你的自动填充书签

  1. 在浏览器书签栏右键 → 选择「添加网页」
  2. 名称填写：一键评论填充
  3. 网址栏粘贴以下代码（​请先阅读下方的配置说明）：
javascript:(function(){var d={n:'蛋蛋之家',e:'[email protected]',w:'https://wuqishi.com'},s={n:['#author','input[name="comname"]','#inpName','input[name="author"]','#ds-dialog-name','#name','input[name="nick"]','#comment_author'],e:['#mail','#email','input[name="commail"]','#inpEmail','input[name="email"]','#ds-dialog-email','input[name="mail"]','#comment_email'],w:['#url','input[name="comurl"]','#inpHomePage','#ds-dialog-url','input[name="url"]','input[name="website"]','#website','input[name="link"]','#comment_url']},f=0;for(var t in s)for(var i=0;i<s[t].length;i++)try{var e=document.querySelector(s[t][i]);if(e&&e.tagName==='INPUT'){e.value=d[t];e.dispatchEvent(new Event('input',{bubbles:!0}));e.dispatchEvent(new Event('change',{bubbles:!0}));f++;break}}catch(r){}if(f>0){var m=document.createElement('div');m.textContent='✅ 已填充 '+f+' 项';m.style.cssText='position:fixed;top:20px;right:20px;background:#4CAF50;color:white;padding:12px 24px;border-radius:4px;z-index:999999;font-family:sans-serif;box-shadow:0 2px 10px rgba(0,0,0,0.2);animation:g 3s ease';document.body.appendChild(m);setTimeout(function(){m.remove()},3000);if(!document.querySelector('#x')){var a=document.createElement('style');a.id='x';a.textContent='@keyframes g{0%{opacity:0;transform:translateY(-10px);}15%{opacity:1;transform:translateY(0);}85%{opacity:1;transform:translateY(0);}100%{opacity:0;transform:translateY(-10px);}}';document.head.appendChild(a)}}})()

快速创建你的自动填充书签

三、配置说明（重要！）

在使用前，你需要修改代码开头的个人信息：

var d={
    n:'蛋蛋之家',              // 改成你的昵称
    e:'[email protected]',       // 改成你的邮箱
    w:'https://wuqishi.com'    // 改成你的网站
}

将 蛋蛋之家、[email protected]、https://wuqishi.com分别替换为你自己的昵称、邮箱和网址。

四、这个脚本有什么特点？

1. 智能匹配多种博客系统

脚本内置了多种常见博客评论框的选择器，包括：

  • WordPress 默认评论框
  • Typecho 评论系统
  • Hexo 常见主题
  • Disqus 评论插件
  • 以及各种自定义的评论表单

2. 友好的视觉反馈

成功填充后，页面右上角会显示绿色提示框，显示已填充的项数，3 秒后自动消失。

3. 触发表单事件

不仅填充值，还会触发 input和 change事件，确保一些依赖这些事件的表单验证能够正常工作。

4. 安全可靠

  • 只在前端操作，不会上传你的信息
  • 有错误处理机制，避免脚本崩溃
  • 只操作 INPUT 元素，不会误改其他内容

五、工作原理简析

脚本的核心逻辑很巧妙：

  1. ​数据准备：定义个人信息和常见选择器
  2. ​智能查找：按顺序尝试各种可能的选择器
  3. ​安全填充：找到匹配的输入框后填充并触发事件
  4. ​结果反馈：统计成功数并显示提示

六、使用场景与技巧

适用场景：

  • 经常在多个博客留言的创作者
  • 需要测试评论功能的前端开发者
  • 喜欢在不同平台交流的技术爱好者

实用技巧：

  1. ​创建多个版本：可以创建不同身份的书签，用于不同场景
  2. ​定期更新选择器：遇到无法填充的博客，可以查看其表单元素并添加对应选择器
  3. ​配合其他脚本：可以与自动填充评论内容的脚本结合使用

七、进阶思考

这个脚本虽然简单，但体现了「自动化」的核心思想 —— 将重复的操作交给代码。其实很多日常工作都可以通过类似的小工具来提升效率：

  • 表单自动填充
  • 页面信息提取
  • 批量操作自动化

技术应该服务于人，让人从重复劳动中解放出来，专注于更有价值的事情。

八、注意事项

  1. ​仅在信任的网站使用，避免在不安全的网站执行任何脚本
  2. ​及时更新选择器，新的博客系统可能需要添加新的选择器
  3. ​做好备份，浏览器书签同步是个好习惯

结语

在马年的新春里，愿这个小工具能像一匹快马，助你在博客的世界里畅行无阻。技术存在的意义就是让生活更简单，让交流更顺畅。

现在就去创建属于你自己的「一键填充」书签吧！如果在使用中遇到问题，或者有更好的选择器建议，欢迎在评论区交流分享。

让代码代替重复，让思考创造价值。