AI学习，我摸鱼，AI帮助我摸鱼！

　　最近我利用一个下午的时间，借助AI工具开发了一款名为PicFlow的Chrome插件，它可以让你在浏览任何网页时，单击图片即可全屏查看，并支持缩放、旋转，彻底告别“右键-新标签页打开”的繁琐操作。整个过程我没写一行前端代码，全靠与AI“结对编程”。本文将分享这次实践的完整思路、遇到的坑以及上架商店的经验。

设计思路

　　上班经常摸鱼的小伙伴应该都能感觉到，在浏览一些内容型网站（新闻资讯、博客平台、论坛社区）时，有些网站的图片，明明点开就能看清细节，却偏偏没做放大的功能；有些图片排列方向不是正的，而是反方向排列或者歪的，想要旋转一下吧，却发现只能右键“在新标签页中打开”，然后看着新标签页里孤零零的一张图，默默的把我的脑袋歪过来看，体验感瞬间回到石器时代。：

　　再比如，我在逛某个设计灵感网站时，想仔细看看图片里的字体、纹理，但图片本身固定了尺寸，鼠标滚轮没反应，右键也没用。我只能右键->“在新标签页中打开”，然后在新标签页里放大、旋转，再切回原网页对比……这样来回折腾，摸鱼的快乐瞬间减半。

　　于是我想：能不能有一个浏览器插件，让我在任何网页上，单击任意图片，就能弹出一个全屏查看器，直接放大、缩小、旋转？而且最好能有个全局开关，想用的时候打开，不想用的时候关闭，免得跟网站原本的点击事件打架。于是最简单、最基本的功能需求就这么产生了：

• 单击唤出：在任意网页上，单击图片就能触发插件，弹出全屏查看器。
• 弹框查看器内操作：支持放大、缩小、旋转，最好还能拖动查看细节。
• 一键开关：有一个浏览器工具栏上的开关，随时启用或禁用插件，避免干扰正常浏览。

　　虽然开发一个Chrome插件并不是什么难事，但是能用AI快速的开发一个Chrome插件，同时还能享受一下指挥他人干活的快感，谁不想体验呢？

插件已上架Chrome应用商店，搜索PicFlow即刻下载体验。

AI干活吧！

　　我把我的需求，完整的跟DeepSeek描述了一遍，让它帮我们生成整个项目的框架，结果如下：

　　DeepSeek听完，二话不说就开始咔咔干活；几分钟后，它就给我生成了整个项目的框架，包括manifest.json、background.js、content.js、popup.html等等，还贴心地写好了基础的交互逻辑。

　　看着这整齐的目录结构和代码，DeepSeek短短几分钟就干完了我几个小时的活；但是我心里还是暗暗觉得很爽：难道这就是领导的快乐吗？不，领导的快乐，我们永远都体会不到。

第一轮迭代：交互细节不满意，改！

　　框架虽然搭好了，功能也基本实现了，但是试用下来，一些交互细节方面不是很满意，比如触发弹框的交互，AI给出的设计方式比较“含蓄”，是将鼠标悬停在图片上，在图片旁边有一个放大镜图标，必须点击图标才会出现查看器。

　　我作为第一个小白用户，试用了几次下来，总觉得别扭。首先，用户不一定能注意到那个小图标；其次，鼠标在图片上挪走去点击小图标有可能会导致小图标消失，操作感很不友好，完全违背了“开箱即用”的初衷和“简单“的哲学理念。于是，我直接向DeepSeek下达指令：

　　DeepSeek立马刷刷刷地重写了事件监听逻辑，把mouseenter换成了click，还贴心地加上了事件代理，确保动态加载的图片也能生效。改完之后，我再次试用——单击图片，查看器瞬间弹出；那个爽快的感觉，就像给浏览器装上了“一键放大”的功能。

第二轮迭代：开关不生效，继续改！

　　功能看起来差不多了，但测试时又发现一个问题：在popup页面点击开启或关闭按钮后，如果不刷新页面，点击出现的弹框不会生效；如果用户每次开关都要刷新页面，体验也太差了吧？这不是明显的bug么？

　　二话不说，赶紧召唤DeepSeek帮我们改，好在它也很迅速的给出了原因和好几种解决方案，经过对比之后，我选择了第一种方案，向所有的tab页面广播，这也是一种相对更可靠的方案：

　　代码发过来，我复制粘贴，重新加载插件——完美！点击开关，所有已打开的页面瞬间响应，无需刷新，无需重启。

第三轮迭代：新增需求，玩崩了！

　　笔者自己用了几天，摸鱼体验也是直线上升；但很快，看过了别的网站的弹框后，笔者又有新的想法冒出来了：有时候一个网页里有很多图片，我想一次性看看都有哪些，或者想把喜欢的图片存下来。现在的插件只能一张张点开看，想要下载还得右键另存为，还是不够爽。

　　于是，我又一次打开了和DeepSeek的对话框，开始提新的需求：

　　我把需求一股脑地扔给AI，满怀期待地等着它像前两次一样刷刷刷地生成完美代码。然而，这一次，万万没想到——生成的代码直接玩崩了。

　　最后的结果完全不能用，单击图片确实弹出了查看器，查看器的样式全部乱了；我盯着屏幕，陷入了沉思：AI也会罢工？还是我提的需求太贪心了？

　　冷静下来分析，我猜测问题出在需求太多、一次性全塞给了AI。下载功能和图片列表看起来简单，但涉及多个模块的改动，这些功能交织在一起，AI可能写乱了。于是，我还是老老实实的，将每个需求进行独立拆分，然后一个一个让AI去实现。

　　最终，经过了上面几轮“需求描述 → AI 生成 → 发现问题 → 指挥修改”的迭代，我几乎没有亲手写过一行正经代码，只是动动嘴皮子，就让AI帮我完成了一个功能完整的Chrome插件。而且最终效果和我的预想需求基本一致：单击图片弹出查看器、能放大缩小旋转、随时开关不干扰原网站。

　　这一刻，我突然理解了产品经理的快乐——只要需求提得清，开发累到冒火星；只要需求改得快，程序员就得连夜干。当然，作为这个项目的“产品经理兼测试兼老板”，我还是很满意AI的工作效率和态度的。毕竟，它从不抱怨需求变更，也不会在背后骂我傻X。

　　接下来，我只需要把插件打包发布到Chrome商店，就可以在摸鱼时尽情享受“一键看图”的快感了。而且，如果以后想加新功能，我依然可以继续指挥AI去实现——谁让它这么好用呢？

上架Chrome商店

　　经过上述开发，我们代码已经完成，但是如何上架Chrome商店呢？首先比较麻烦的是图标怎么来做，作为一个没有任何设计经验的开发人员，一开始这可难倒我了。但是好在想到了即梦每天有60积分的免费额度；于是，秉承着能白嫖绝不花钱的精神，先让DeepSeek大概给个思路：

　　接下来我又去继续指挥即梦给我干活了：

　　有了图标，manifest.json文件中还需要配置多种尺寸的图标，我们打开Chrome插件图标生成器可以生成多种规格的图标。

提交审核

　　插件功能已经接近完美了，接下来就是把它打包发布到Chrome Web Store开发者中心了，让更多人（包括我自己在其他电脑上）也能用上。本以为这一步就是走个过场，没想到还是费了点功夫。

注册账号：选对身份很重要

　　首先，打开Chrome Web Store开发者中心，用Google账号登录。但在选择账号类型时，我犹豫了：有“交易者账号”和“非交易者账号”两种。交易者账号用于要卖钱或者包含付费功能的插件，需要提供税务信息；而我的插件只是一个纯工具，免费无内购，果断选择非交易者账号，省去一堆填表的麻烦。

　　接下来，把插件代码打包成zip压缩包，根目录下需要包含manifest.json文件，而且需要注意permissions字段一定要只包含你用到的权限，不能多也不能少，因为会让你填每个权限申请的必要性。

　　我的manifest.json权限只包含了如下权限：

{
  "manifest_version": 3,
  "name": "PicFlow",
  "permissions": ["activeTab", "storage", "scripting"],
}

　　打开开发者中心控制台，点击“上传新内容”，选择刚才的zip包。上传成功后，页面自动跳转到商品详情编辑页面，需要填写一大堆信息：

• 插件说明：着重说明该内容的用途以及用户为何应该安装它
• 商店图标：128*128的图标
• 屏幕截图：1~5张1280x800或640x400截图
• 官方网址：插件的官方网址（可选）
• 单一用途说明：
• 请求权限的理由：每个权限申请的理由详细说明。

　　面对这些“小作文”，我头都大了。写代码我在行，写这种又正式又要有说服力的文案，实在不擅长。但没关系，我有AI！我再次打开DeepSeek的对话框，开始“布置作业”，最终也是很顺利的就通过了。

　　填完所有信息后，我信心满满地点击了“提请审核”按钮；然后就开始了一边摸鱼一边等待的日子。Chrome商店的审核周期通常是3~5个工作日，听起来不算太久，但当你真的在等的时候，每一天都像过了一个世纪。

　　第四天早上，我终于收到了邮件：“您的插件已通过审核，现已在Chrome Web Store上线！”那一刻的喜悦，不亚于第一次看到自己写的代码跑起来。我赶紧去商店搜索“PicFlow”，还真搜到了！赶紧安装试用，一切正常。完美！

　　然而，没过多久，我就发现了需要优化的地方，我又一次打包、上传、填写更新说明，然后再次点击“提请审核”。然后，我又开始了新一轮的等待。一天、两天、三天……我忍不住吐槽：Google的审核速度，怎么跟第一次一样慢啊！说好的增量更新优先审核呢？完全没有！

　　在微信小程序上也有过类似经历，不过小程序审核通常几个小时就能搞定，最快的一次不到两小时就通过了。而Chrome插件的审核，无论是首次提交还是后续更新，都是一视同仁地慢。这让我一度怀疑：Google的审核团队是不是也人手不足，或者他们也在摸鱼？

国际化

　　在应用商店上架几天后，笔者看了一下安装情况，发现居然还有外国的友人安装，这让我感到非常的意外；再看了安装的语言都是中文，于是连夜准备国际化语言，毕竟咱也不能怠慢了不是？

　　于是我又又召唤了DeepSeek：

　　这次生成的效果是我没有想到的，首先基本把我能想到的地方都覆盖了；其次，针对popup.html页面有很多需要翻译的内容，DeepSeek也贴心的使用了批量翻译函数，我只需要在html上给每个div添加data-i18n="key"，然后调用批量查询翻译的函数即可，这是我没有想到的一个解决方案：

function localizeHtmlPage() {
  const elements = document.querySelectorAll('[data-i18n]');
  elements.forEach(el => {
    const key = el.getAttribute('data-i18n');
    const translation = chrome.i18n.getMessage(key);
    if (translation) {
      if (translation.includes('<') && translation.includes('>')) {
        el.innerHTML = translation;
      } else {
        el.textContent = translation;
      }
    }
  });
}

结语

　　回过头看，整个开发到发布的过程，AI帮我完成了99%的工作：写代码、修bug、写文案、改权限说明。放在几年前，要实现这样一个功能完整的插件，我需要：翻文档、查API、设计UI交互、手动P图标等等，少说也要几天的时间；但是这一次，我几乎没写过一行正经代码，只是花了不到一个下午，不断地向DeepSeek“提需求——发现问题——指挥修改”，就把事情做成了。

　　这让我不禁思考：在AI时代，我们的角色正在悄然转变。以前，我们是“写代码的人”，需要用双手把想法一行行敲进编辑器；现在，我们更像是“指挥代码的人”，需要用清晰的思路引导AI，把模糊的需求变成精准的实现。这种转变，对每个人的要求反而更高了——不是技术上的，而是思考力和表达力上的。

• 你能把复杂需求拆解成多少个可执行的小步骤？
• 你能在AI犯错时准确指出问题所在并让其快速修复吗？
• 你能在AI写出的庞杂代码中发现潜在的bug吗？

　　所以你看，AI并没有让技术能力贬值，反而让更高阶的能力——定义问题、拆解问题、验证解决方案的能力——浮出水面，成为核心竞争力。未来的开发者，不再是那个埋头敲代码的人，而是那个能清晰地告诉AI“我们要做什么、怎么做、哪里做得不对”的人。提示词能力，才是这个时代的“元技能”。

　　现在，我的插件已经上线了🚀，如果你也想在摸鱼时畅快看图，可以去Chrome商店搜索“PicFlow”体验一下。当然，你也可以像我一样，有了想法，自己动手指挥AI写一个——毕竟，指挥AI的快乐，用过的人才懂。

本项目开源地址