V2EX 07月29日 20:12
[分享创造] 从想法到上线,仅 3 天时间开发上架人生的第一个 Chrome 扩展程序! Bear.Share 网页分享卡片生成器,欢迎免费使用~
index_new5.html
../../../zaker_core/zaker_tpl_static/wap/tpl_guoji1.html

 

本文作者分享了如何利用AI工具,在三天碎片时间内开发出第一个Chrome扩展——Bear.Share。该工具能够一键将网页内容转化为精美的分享卡片,并支持多种模板、二维码生成和个人签名添加。作者强调了AI在代码编写、样式调整乃至宣传图制作方面的强大助力,特别是GitHub Copilot在项目开发中的作用。文章还介绍了利用Figma生成代码包再结合AI完成宣传图设计的创新思路,展现了AI辅助开发的高效与潜力,鼓励读者尝试用AI实现创意。

🚀 **Bear.Share:网页分享卡片一键生成** 这是一个由作者开发的Chrome扩展,可以将任意网页内容快速转化为精美的分享卡片,便于用户向朋友或在社交媒体上分享。用户可以通过点击浏览器扩展图标或在网页上右键选择分享来启动该工具,操作极为便捷。

💡 **AI赋能,三天快速开发** 作者利用AI工具,如GitHub Copilot,在短短三天碎片时间内完成了Bear.Share扩展的开发。这表明AI在代码编写、功能实现方面极大地提高了开发效率,作者甚至表示项目几乎所有代码都由AI生成,仅需少量样式调整。

🎨 **多功能设计与便捷体验** Bear.Share提供多种卡片模板供用户选择,并能自动生成二维码方便移动端访问,同时支持添加个人签名,满足用户个性化分享的需求。其核心优势在于操作简单,真正实现“一键生成”高质量分享图。

✨ **AI在宣传图制作中的创新应用** 在制作上架宣传图时,作者尝试了Figma生成代码包,并结合AI(GitHub Copilot)来设计和调整宣传图。这种将AI用于前端代码分析、依赖安装和图片导出(html2canvas)的思路,为开发者在设计环节提供了新的解决方案,即使不如专业设计工具,也能实现灵活调整和多语言支持。

开个香槟先🍾~ 我人生的第一个 Chrome 扩展上线了!🎉

事情是这样的,最近摸鱼的时候看到几个 Markdown 转分享卡片的小工具,试了试觉得挺有意思。上周三再次看到一个类似的新工具,然后脑子里就冒出个想法:既然 Markdown 能做分享卡片,那我平时看到的好网页为啥不能也一键生成个漂亮的分享图呢?

想必大家都知道作为一个码农突然有个新的 idea 的那种感觉吧,想法一来就停不下来。说干就干,立马撸起袖子开始搞。

遇到点小插曲,但问题不大

一开始用 Cursor 写代码,结果没用多久免费额度就见底了(贫穷限制了我的发挥)。好在想起来 GitHub Copilot 我订阅了快两年,平时一直只是当个代码补全用,现在想想真的是亏大了!

在 AI 的帮助下,三天的碎片时间就搞定了这个小作品:Bear.Share

这个小工具能帮你做什么?

简单说就是把任何网页内容一键变成精美的分享卡片!不管是看到好文章想推荐给朋友,还是发现有趣的新闻想分享到朋友圈,都能快速生成那种很专业的分享图。

功能也不复杂,但该有的都有:

用起来有多方便?

两种方式启动,怎么顺手怎么来:

    直接点浏览器扩展图标在网页上右键选择分享

想试试的话...

Chrome 商店地址在这里:

Bear.Share - 网页分享卡片生成器 - Chrome 应用商店

扩展完全免费,装上试试呗!如果觉得还不错,记得给个好评哈,对我这种新手开发者来说真的很重要~


顺便唠叨几句

现在的 AI 真的太厉害了!几年前我还把它当搜索引擎的补充或增强,去年学 Swift 的时候 AI 也就是帮忙写写代码片段。现在竟然能替我完成整个项目开发,而且这个扩展几乎没有一行代码是我亲手写的,最多就是调了调样式。

整个开发过程也就用了 3 天的碎片时间:前两天主要功能开发,第三天调样式 + 准备上架材料。效率高得我自己都有点不敢相信。


小彩蛋分享:那些宣传图是怎么做的?

说到上架材料,上架材料中需要各种尺寸的宣传图,就像上面正文中的那种宣传图,一定有很多设计困难的程序猿同行都为此头疼过,我也一样!这里的我起初想用绘图 AI ,但考虑到后期调整麻烦就放弃了(特别是图片中的文字可能需要多次编辑调整)。然后我试了试 Figma 推出的 Figma make ,搞了半天,结果发现生成的竟然是网页而不是设计稿 🤯,也不好改。

然后我灵机一动——既然 Figma make 能生成前端代码包,那我为啥不直接用 GitHub Copilot 来"设计"宣传图呢?

就这么着,我把 Figma 生成的代码包下载下来,丢给 AI 分析项目需要的依赖包,自动安装上依赖,项目就跑起来了!虽然不如专业设计工具那么方便,但该调的都能调,最后还能像前端项目一样支持多语言,用 html2canvas 直接导出图片。这个思路是不是挺有意思的?😄

总之,这次小尝试让我对 AI 辅助开发有了全新认识。说不定你也可以试试用 AI 帮你实现一些小想法哈,真的很方便!

Fish AI Reader

Fish AI Reader

AI辅助创作,多种专业模板,深度分析,高质量内容生成。从观点提取到深度思考,FishAI为您提供全方位的创作支持。新版本引入自定义参数,让您的创作更加个性化和精准。

FishAI

FishAI

鱼阅,AI 时代的下一个智能信息助手,助你摆脱信息焦虑

联系邮箱 441953276@qq.com

相关标签

AI开发 Chrome扩展 Bear.Share GitHub Copilot 网页分享
相关文章