V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
bearbest
V2EX  ›  分享创造

从想法到上线,仅 3 天时间开发上架人生的第一个 Chrome 扩展程序! Bear.Share 网页分享卡片生成器,欢迎免费使用~

  •  2
     
  •   bearbest ·
    gBearBest · 35 天前 · 1527 次点击
    这是一个创建于 35 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

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

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

    Bear Share 功能展示

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

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

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

    • 多种卡片模板随你选
    • 自动生成二维码(方便移动端访问)
    • 可以加上自己的个人签名
    • 操作超级简单,真的是一键生成

    操作界面展示

    用起来有多方便?

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

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

    启动方式展示

    想试试的话...

    Chrome 商店地址在这里:

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

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


    顺便唠叨几句

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

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


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

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

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

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

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

    第 1 条附言  ·  33 天前

    新版本 v1.1.0 上线~

    • 手搓了个新的扩展插件图标

      new icon

    • 新增一键复制 URL 功能

    • 修正了扩展安装后在已打开标签页中内容获取失败的问题

    欢迎安装体验~

    12 条回复    2025-08-26 15:00:31 +08:00
    yuanchao
        1
    yuanchao  
       35 天前
    挺好的,我之前有同样的想法,一直没来得及做
    bearbest
        2
    bearbest  
    OP
       35 天前
    @yuanchao 哈哈,有 AI 帮忙,实现特别快
    rangerting
        3
    rangerting  
       35 天前
    👍厉害,3 天就搞了个小产品。
    kkeep
        4
    kkeep  
       35 天前
    是的,有了 ai 什么想法都可以做
    bearbest
        5
    bearbest  
    OP
       35 天前
    @rangerting 是的,也是蛮震惊的,之前从来没接触过 Chrome 扩展的开发,全程没写一行完整的代码
    bearbest
        6
    bearbest  
    OP
       34 天前
    @kkeep 真是太方便了!
    bearbest
        7
    bearbest  
    OP
       33 天前
    新版本 v1.1.0 上线~

    - 手搓了个新的扩展插件图标

    - 新增一键复制 URL 功能
    - 修正了扩展安装后在已打开标签页中内容获取失败的问题

    欢迎安装体验~
    bearbest
        8
    bearbest  
    OP
       32 天前
    某鱼是个好地方,AI 出草图,比如这个新 logo ,然后上海鲜市场找人精修一下,非常方便~
    iorilu
        9
    iorilu  
       31 天前
    @bearbest 介绍下如何做 logo 阿, 用的什么工具
    bearbest
        10
    bearbest  
    OP
       30 天前
    @iorilu logo 最初是用 Midjourney 来生成的,因为之前生成过其他 App 的图标,就继续用了。不过对于扩展程序的图标确实有一些问题,就是 Midjourney 生成的图标过于复杂了,导致缩小后很难看清图标的内容(扩展图标常态下的显示尺寸比 App 图标小得多),所以最后这个图标是我手搓的,灵感来自浏览器+分享的概念,中间的分享图标是从开源网站上下载后微调了一下
    greatghoul
        11
    greatghoul  
       7 天前
    很赞。我之前做过一个类似的,但和你这相比,差很多。
    bearbest
        12
    bearbest  
    OP
       7 天前
    @greatghoul 哈哈,志同道合🤝
    关于   ·   帮助文档   ·   自助推广系统   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   930 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 21:44 · PVG 05:44 · LAX 14:44 · JFK 17:44
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.