推荐语

零基础也能5小时开发AI插件？设计师亲授从灵感到上架全流程！

核心内容：
1. 设计师5小时完成谷歌插件开发的真实案例分享
2. 文本导出助手插件的9种实用输出格式详解
3. 从创意到上架的全流程避坑指南与工具推荐

杨芳贤

53AI创始人/腾讯云(TVP)最具价值专家

嗨大家好！今天是你们的 Hello World 搭子阿真！

最近我受朋友启发，尝试把自己需要的便携小功能使用AI工具做出来，考虑编程写代码目前还得咨询Claude，我最开始想着，和它聊几句获得一些灵感，结果聊了两句话以后，我的插件雏形已经做出来了。我：？？？

给大家看我和它的原始聊天记录：

插件的诞生：

向下滑动查看所有内容

今天的目录：

众所周不知，我是一个设计师，我的代码能力基本基于我看代码能认识的单词词汇量。对我来说，要是我自己来做这个插件，差不多是一年级小学生做高等微积分了。但是我都能做出来谷歌插件，相信绝大多数朋友也都能做出来。而我从脑子里冒出这个想法到完全做出来这个插件并且上架到谷歌（不包括审核时间），只用了大约5小时的时间。

这里我分享我制作和上架插件的过程以及其中踩过的坑分享给大家，希望对大家也有一些些启发。另外，插件已经上架，大家有需要可以下载，也可以尝试功能，如果有其他想法建议，欢迎评论区留言讨论！

叠甲：

1. 我基本算是编程小白，这个过程中有什么操作很傻瓜的也希望大家不要大声嘲笑我，谢谢哈哈哈！
2. 
   

1.功能说明

插件名称：文本导出助手

简单看一下使用方法：

此为1.0版本录屏，后续可能有修改

这个插件的作用，简单来说，只要我们有“我需要把这段复制下来的东西存起来”的想法，这个插件就能派上用场。它让我们省去了“打开记事本/Word/各种文件→新建文件→粘贴→点击保存→选择路径→命名”这一系列繁琐的步骤，将一切简化为“复制→点击插件→点击格式”，主打一个复制就读取，读取就输出。

无论是需要快速保存网页资料和论文引用的学生与研究者，还是随时捕捉灵感素材、整理草稿的内容创作者，亦或是需要将API返回的JSON数据和错误日志即时存档的开发者，以及希望将网页表格直接转为Excel、将会议纪要存为PDF的办公人员，都能通过这个插件简化从复制到保存的流程，提升工作与学习效率。

目前支持以下9种输出格式：

当我们选择了一段文字内容，右上角会出现这样的圆角弹窗，我们直接点击：

点击后就会出现文本导出助手插件。

点击【清空】，可以清空复制的所有内容。

点击上方复制的内容，可以对内容进行修改。

如果遇到第二次复制的内容没有同步到插件的文本框中，点击【刷新/重新读取】即可刷新。

然后点击选择我们需要的文件格式的按钮，文件就会导出了。其他的都是一键直接导出，除了PDF文件，最开始它会导出为一个html格式，我们点击【我知道了】会下载html文件：

点击打开html，选择【打印/转PDF】，即可输出PDF文档到自己选择的保存位置。

之所以调用浏览器自带的“另存为PDF”功能，是为了生成最高质量且完美兼容所有文字的PDF文件。这避免了集成一个庞大又可能有缺陷的程序库，让插件本身能始终保持轻巧和快速。

2.抓住脑海里的想法

之所以我有制作这个插件的想法，是因为有一天我想将复制的文本内容快速导出给到知识库，但每次导出都需要我重新保存，想保存为txt格式需要新建文本文档，保存为word也要新建文档，简单想快速分享内容到什么平台，复制纯文字和截图好像都差点感觉。

于是我就想，是不是可以有这样一个插件，非常轻便，操作极简，复制→点击插件→选择导出格式，3步即可完成这个目标。

最开始这个想法只是在我脑海里闪过，因为我虽然玩过很多无代码或者低代码的平台和工具，但是真要涉及编程还是觉得自己多少有点胆怯，这种知识上的壁垒让我望而却步。但是随着近期我的朋友@云舒的AI实践笔记 @赛博小熊猫Loki 都有做出自己的插件或者小工具，我开始想，好像也没那么难，先试试做个垃圾出来。

所以朋友们，首先，有想法就去做，不要犹豫！

3.和Claude的对话

我在文章最开始给大家展示了，原本想多聊几句整合一个PRD（Product Requirements Document 产品需求文档）出来，结果Claude把文件做出来了。

骑虎难下啊。事已至此就继续做吧！

然后也没我想的那么简单了。第1个坑，从Claude直接下载的文件，文件名和文件结构中的名字可能不一样。务必要按照它的文件夹结构中的名字为文件命名。

图标的制作，可以使用AI生成，很多AI生成图片的工具都可以。比如我使用ChatGPT，我直接让Claude总结了功能，让ChatGPT生成图片。最开始要求模糊，得到的效果一般，我后面对话要求修改了2轮。

不过这个是1.0版本的图标，我后面重新修改了。

另外，准备的png图片要注意后缀是png文件，要注意调整分辨率的要求。这里有个工具可以修改图片分辨率：

https://www.iloveimg.com/resize-image#resize-options,pixels

可以将生成的图片输出为修改为3个分辨率并导出。分别是128x128、48x48、16x16。

做完这一步，再按照它的文件结构进行检查。确认无误，并且都放在同一个项目文件夹后，就可以将整个文件夹拉到谷歌扩展程序进行检查了。这里注意打开【开发者模式】：

然后我的第一步检查就继续遇到问题，PDF文件导出无法实现。我复制给Claude，它继续改。

这里我就开始烦了，我是一个懒人，每次要我重新导出修改的文件，每多一步我就会感觉兴趣减一减一，绝不可以。

决定了，想继续优化还是用Cursor。我这可恶的标题党哈哈哈。

4.在Cursor中debug

Cursor在代码修改的便捷性上还是更胜一筹，尤其是当我需要做这种快速、小型的代码调整，并且希望通过自然语言指令快速实现修改，喜欢在一个集成环境中完成所有操作的的话，另外，考虑到长期使用的成本，好像还是Cursor更划算点。

在Cursor中打开项目文件夹：

关于Cursor的三个模式（Agent、Ask 和 Manual）

注意，我还是个Cursor初学者，很多功能我还没有探索到，或者说因为这里不需要用到所以忽略没有提到，大家感兴趣的还是可以系统学一下的，后面我也会系统学习，希望和大家一起进步！

这个debug的过程还是持续了一些时间的，这里也是一个坑，我觉得大家可以避免的，就是最开始一定要想清楚，我要做什么，我的工具要实现什么功能，不要像我这次这样，一边做，一边想加入很多新的功能，比如我最开始想要6种输出格式，后来觉得还可以加上另外3种文件格式这种，最开始可以都一次性规划清楚。

5.优化细节

因为这确实是个相对比较简单的插件，功能也不多，加上前期Claude确实给力，把基础打得很好了，后期我做的就只是一些细节上的修改：

目前这个是1.0版本，存在的问题还有很多，比如目前只能复制文本还不能实现图片复制，同一页面第二次复制的时候可能不会出现复制成功提示（但实际已复制成功）等。后续还需要继续优化。

以上就是我的文本导出助手1.0的制作流程了。再次感谢AI让我这种编程小学生也能做出实用的工具。

如果我们不想把自己的插件上架到平台的话，那么做到这一步就结束了。只需要将保存插件内容的整个文件夹拉到插件拓展程序区，自己想怎么使用都可以。如果想把自己的插件提交到平台，那么就可以继续往下看～

6.插件提交到平台

然后就是把插件提交到平台了。开发者控制台的链接在这里：

https://accounts.google.com/v3/signin/confirmidentifier?authuser=0&continue=https%3A%2F%2Fchrome.google.com%2Fwebstore%2Fdevconsole%2F&hl=zh-CN&ifkv=AdBytiNOKsu5OMr4FLl8ze-Py2U_qt7We0RVqFHD8CLLrEz_D__mG4E-DQdVb-C5pKeJH7Js3YMjcw&passive=180&service=chromewebstore&flowName=GlifWebSignIn&flowEntry=ServiceLogin&dsh=S1964863286%3A1750427968738553

我们验证身份登录，完成开发者注册。其中有个需要收费5美元的地方，我忘记截图了。

这里第一个验证我上传的护照，第二个验证我上传的身份证，都是自己真实的信息填写的。个人资料也是按照自己个人的情况填写就好了。

这个上传了护照：

这个上传了身份证：

然后等待验证通过。

在左边选择【内容】可以上传我们的插件文件，这里注意，上传的时候要将所有文件打包成zip压缩包，是你的插件里的文件是直接都在压缩包中，点开zip压缩包就是文件，而不是点开压缩包还有一层文件夹。

否则就会像下面这样报错：

插件上传成功后，会要求我们填写一系列信息，不会填写的，直接截图给Cursor。

比如下面我这个说明，就是Cursor老师写的。当然，觉得不满意可以让它修改，修改到我们满意为止。

然后来到这个图片资源的地方，商店图标可以就选择自己之前做的128x128像素的图标。屏幕截图主要用于插件上线后给用户看的对插件的介绍，可以包含功能、优点、操作方式等等。有条件也可以上传宣传视频到YouTube做一个系统的介绍。注意屏幕截图的数量为1-5张，分辨率为1280x800。

屏幕截图这里的文案我也是让Cursor输出的。因为它已经对这个插件工具非常了解了，输出的文案内容也基本是符合我需要的。下面是部分它输出内容的截图：

然后在隐私权这一部分，可能会遇到很多个需要填写的内容：

没关系，这些也可以通通交给Cursor包办。把截图上传给它。

注意，我在这里填写内容进行审核的时候也踩了坑，如下图：

也就是说，如果这个请求权限不是必须的，建议就不要这个权限。这个权限是不是必须可以询问Cursor让它确认。

这3个必须全选：

如果上面的所有内容都已完成或填写完毕，就可以在右上角点击【提请审核】了。如果【提请审核】还是灰色不可点击状态，那么点击它左边的【我为何无法提交？】就可以查看原因。继续解决问题即可。

等一切都完成了，可以看见【提请审核】的图标有颜色了，提请审核之前，可以点击右边预览。

完成了这一步，我们插件就已经可以提交了，等待审核通过，就可以在Chrome 应用商店找到它啦。

大家如果对我的插件感兴趣，可以在谷歌浏览器插件中心搜索【文本导出助手】。

或者复制链接到浏览器：https://chromewebstore.google.com/detail/%E6%96%87%E6%9C%AC%E5%AF%BC%E5%87%BA%E5%8A%A9%E6%89%8B/bcopcioiclfdeeeeiogejheahohffggm?hl=zh-CN&utm_source=ext_sidebar

感谢朋友们的支持！！

另外，我把这个插件的文件也都放在github上了，链接在这里：https://github.com/irenerachel/Text-Export-Assistant-1.0

7.小结

做到这里，感觉好像也没有那么难，毕竟大部分活都是AI工具干的，我只是输出了一些想法和要求而已（当然中间要仔细给Cursor描述我的需求还是有点抓狂的）。利用好AI工具，真的有很多机会能为我们的日常生活提高效率，让日常工作更加便捷。

但是我想说，这距离真正的程序员开发程序、插件、应用还有很远的距离，在专业知识上依然存在巨大鸿沟，绝不能因为用AI做出了一个插件，就小看了程序员的含金量。

程序员的工作有其核心价值，他们具备解决复杂问题的能力，而不是停留在浅显的表层问题上，他们能够架构整个系统并预见潜在问题。当系统出现性能瓶颈、安全漏洞或需要优化时，只有那些对底层原理有深入理解的专业人士才能调试这些真实生产环境中的复杂bug。还有理解用户需求，将一个个模糊的商业想法转化为具体技术方案，这些都需要大量的知识积淀和抽象思维能力。

对于程序员来说，现在的机会可能更大更多了，他们从重复性的编码中解放出来，有了更多精力去专注于具有创造性的工作。AI成为了他们强大的助手，让一个人就能完成以前需要团队才能完成的事情，大大提高了个人生产力的上限。

虽然经常有人开玩笑说AI技术爆发后压力最大的就是设计师和程序员，但事已至此，大家也只能拥抱变化，不断适应和学习，寻找新的机会。程序员有了更好的机会向"技术产品经理"转型，更多地关注工具功能能够解决哪些场景下的哪些问题，而不再仅仅聚焦于如何实现功能。

另外，也想感慨一句，技术发展速度越来越快，坚持持续学习比掌握某个特定技能更重要。像我这样的设计都能用AI制作插件了，这本身也说明了未来的趋势：技术工具会越来越智能化，这是不可阻挡的，但是真正有价值的还是知道如何去运用这些工具，创造实际价值的人。

我们一起继续努力吧，共勉～！