从0到1教你用AI做插件|老鸿SEO助手实战指南,普通人也能上手-夜雨聆风

从0到1教你用AI做插件|老鸿SEO助手实战指南,普通人也能上手

互联网时代，每个人的浏览器里都该有几个“懂自己”的工具。

但过去，定制一个浏览器插件意味着要懂 HTML/CSS/JS、熟悉各种技术规范、还要搞定各种调试环境……门槛太高。

直到今天，大语言模型彻底改写了规则。你只需要把需求说清楚，AI 就能帮你写出完整代码、排查 Bug、优化体验。

下面这款「老鸿SEO助手 Pro」，就是通过与 AI 对话迭代生成的。它精准解决了三类人群的痛点，而它的诞生过程，本身就是一份《普通人如何用 AI 开发浏览器插件》的实战指南。

一、它能解决什么？

1、给普通人：还你一个“干干净净”的搜索页

✅ 自动过滤广告：识别百度商业推广标记，直接隐藏，不占位、不干扰

2、给 SEO 从业者：排名一目了然

自然排名自动标号：过滤广告后，剩余搜索结果标题前自动标记 1. 2. 3…，数据干净整洁
支持多站点关键词高亮 + 自动定位：输入站点关键词，如品牌词/站点域名，匹配结果自动红框高亮，页面平滑滚动到位
右侧匹配面板：显示关键词、标题、排名，点击即定位，多结果一键切换
拖拽选词 + →右键秒搜：选中文字按右键，直接跳转百度并搜索，调研效率提升 300%

3、给运维/站长：域名 & SSL 到期直显

📅 到期时间实时查询：对接权威接口，直接显示当前域名到期日、SSL 证书到期日（精确到秒）
📊 一站式健康巡检：一键提取 TDK、全站链接扫描（内链/外链/Nofollow/友链）、死链批量检测
后续亦可继续优化新增更加个性化的功能

二、我是如何用 Qwen AI“捏”出这个插件的？（附完整 Prompt 进化史）

📝 第一步：把需求翻译成 AI 能懂的“产品文档”

很多人以为 AI 写代码就是“丢一句话，等结果”。其实，高质量的 AI 编程 = 清晰的需求拆解 + 持续的对话迭代。下面是我的操作路径参考

我的初始 Prompt：“请帮我开发一个浏览器扩展。核心功能分三块：百度搜索结果页自动隐藏广告，并为自然结果添加连续排名序号。支持配置多个站点关键词和监控域名，搜索结果中包含关键词的条目框起来并高亮，右侧生成可点击的定位列表。提供指定域名下的监控面板，显示当前页面的TDK，提供链接分析（去重、统计内外链/Nofollow/友链、死链检测），以及域名/SSL 证书到期时间查询（调用指定 GET 接口）。请输出完整的文件结构及核心代码。”

AI 返回：标准工程目录（manifest.json, options.html/js, content.js, styles.css）+ 基础逻辑框架。

第二步：核心逻辑“对话式”迭代（关键！）

AI 第一次生成的代码往往基本能用，但细节需要打磨。

我的做法是：发现问题 → 截图/详细描述 → 给出明确修改指令。

......迭代 1：功能优化调整，搜索结果列表页中。右侧匹配到的排名可能会有多条，所以可以搞个列表，并且支持点击滚动到指定位置。然后配置页面配置了中文关键词，但是域名监控对应的是英文域名，会无法正常监控，可以新增一个字段进行管理。需求升级，仅匹配到对应的站点名称才高亮不是站点名称不高亮，然后站点名称设置可以用英文逗号隔开运行设置多个，监控域名也可以英文隔开设置多个。搜索结果列表页右侧的“已过滤多少条广告”的文字改为白色；域名监控时，支持选择监控是否死链、友情链接且是否nofollow、当前域名的备案情况、SEO标题、描述和关键词、域名到期时间、ssl证书到期时间；配置页面可以设置为所有域名都监控还是指定域名进行监控。需求优化调整：1、监控面板取消ICP备案，显示完整的页面标题和描述和关键词（有内容溢出隐藏），链接和死链和友情链接支持点击显示具体链接内容，域名/SSL可以调用第三方接口，其中域名和证书的到期时间接口为https://www.laohongseo.com/app_http_ssl.html?urls=域名地址，返回内容为return json(['code' => "200", 'msg' =>$sccontent,'data'=>$cert_info,'expiryDate'=>$expiryDate]);里面的expiryDate就是域名到期时间直接显示输出即可，里面的msg就是ssl证书的时间，内容如"msg":"您查询的域名为：laohongseo.com，SSL 证书开始时间为：2026-03-23 06:44:23，SSL 证书到期时间为：2026-06-21 06:44:22"；2、搜索结果列表页中，如果配置了多个域名或关键词，都需要逐个判断和高亮显示，同时右边需要显示对应匹配到的站点名称、标题、点击定位，而不是现在这样没有高亮右边只有#序号点击定位才显示高亮需求升级：1、监控面板中的链接数据需要进行链接去重；2、域名/ssl查询需要改为get请求而不是option请求不然会拦截；需求优化：监控面板中，nofollow的数量不等于友情链接外链的数量，特别是个域名下的不属于外链友情链接；域名/ssl接口迭代 2：需要提供完整代码.需求升级：1、监控面板中的需要排除当前域名作为友情链接就行了；2、搜索结果列表页中，没有匹配到搜索结果的时候，也需要过滤掉广告部分，同时右侧显示已过滤多少条广告数据；需求升级：1、目前是直接进入百度搜索列表页的时候才会显示排名，但是在搜索页的时候再通过当前页面的百度搜索框搜索，是没有显示排名序号的；2、支持配置在搜索结果列表页中屏蔽指定样式的结果列表内容，如class="noclass"或者id="noneclass"我的意思是，目前无法正常去掉广告迭代 3：嗯嗯，保底请不要从广告的地方进行计入排名，只需要显示自然排名的序号迭代 4：可以了，但是搜索结果页当我选择分页的时候，就无法显示序号了，能否解决迭代 5：标题和序号应在同一行而不是换行迭代 6：这个搜索结果列表页一直在动态刷新，使得页面也随着样式刷新也跳动迭代 7：文本拖拽+方向键快速百度搜索，只需要→右方向键即可迭代 8：需求升级优化：拖拽选词 + →右键秒搜的时候，需要在新的页面上打开而不是当前页面打开......