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

Build in public 记录: 我们是如何开发 TinySnap 的

  •  
  •   dearroy · 2022-08-18 14:10:25 +08:00 · 2271 次点击
    这是一个创建于 589 天前的主题,其中的信息可能已经有所发展或是发生改变。

    文章发布于: https://tinysnap.app/blog/how-we-built-tinysnap-the-anatomy-of-a-browser-extension/

    背景

    其实 Chrome Web Store 中已经存在非常多的屏幕截图扩展了,但制作 TinySnap 的核心理念还是希望可以帮助繁忙的创业者、开发者以及营销人员提高生产力,尤其是那些有着完美主义情怀的人。我们想要用户在最短的时间内完成 “截图-美化-发布” 的过程。

    输出之后的截图如下: TinySnap 示例

    正如 Leila Hock 所说:“It’s not hard work–work is work, and yes, some work requires more brain power, but most of us smart people like that and want more of it, so let’s stop calling it hard. Let’s call it productive. Effective. Valuable. Anything that speaks to nature over quantity, because that’s what we need more of.” 这不是艰苦的工作——工作就是工作,是的,有些工作需要更多的脑力,但我们大多数聪明人都喜欢这样,并且想要更多,所以让我们停止说它很难。 让我们称之为生产力。 有效的。 有价值的。 任何与自然对话超过数量的东西,因为这是我们需要更多的东西。

    这就是我们开发构造 TinySnap 的原因。

    当我们想要开始做浏览器拓展时,占有率最高的浏览器是 Google Chrome ,我们自然是要从这里开始。

    Google Chrome 在 web extension 上表现得一直很激进,在开始 build 时,Chrome web store 已经不再接受 Manifest V2 extension ,Manifest V3 就是我们唯一的选择。

    Manifest V3

    Manifest V3 与之前的 V2 对比,有了不少的变化,对应到我们的 web extension 来说有下面这些改动:

    • Manifest V3 禁止执行任何的 remote script ,意味着所有的 script 必须在本地打包,即便是 gtm/ga 也需要下载到本地,然后打包进 extension
    • Background 从之前的 page 变成了 service worker ,意味着所有的与 DOM 相关的 API 都无法使用
    • host_permissions 从 permissions 拆分成单独的 field
    • Shortcuts must be explicitly defined in commands, otherwise the browser will not allow extension to get temporary activeTab permision

    开发工具和框架

    在过去的前端开发体验中,webpack 无论是开发还是打包所需要等待的时间都非常长。大型项目修改一小段代码,保存后都要等几秒才更新,打包则需要几分钟,甚至十几分钟。因此我们需要一个⚡快的工具来应对后续的开发。

    Vite 开发的体验非常好,直接将转换后的 ES module 代码给支持的现代浏览器,让浏览器自己去加载依赖,并且一些最新的 ES 语法并不需要转换成旧的语法来兼容开发者的浏览器,这些都大大的节省了开发时间。Vite 非常快速且稳定,已经是我们新项目的首选。

    框架上我们选择了 Vue 3 ,虽然我们已经有了非常丰富的 React 开发经验,但是我们还是想来尝试一下。Vue 3 + Pinia 配合 Typescript 相比于几年前 Vue 2 + Vuex 体验上几乎有了质的变化。某些场景上 Vue 的开发速度也比 React 要快不少。

    浏览器兼容

    Firefox 可能需要到今年年底才开始支持 V3 ,所以我们在完成 V3 之后,开始解决 V2 的兼容问题,出乎我们意料的是,这个过程异常的顺利。以下是我们遇到的需要额外处理的情况:

    Manifest

    我们定义了一个环境变量,这样在开发或者打包的时候可以区分不同的浏览器,从而生成不同的 manifest.json 文件。

    if (process.env.FIREFOX) {
        delete manifest.action
        delete manifest.host_permissions
    
        manifest = {
            ...manifest,
            manifest_version: 2,
            permissions: [
                ...,
                '<all_urls>'
            ],
            background: {
                scripts: ['./dist/background/index.mjs'],
            },
            browser_action: {
                default_icon: {
                    "32": "./assets/icon-512.png"
                },
                default_popup: "./dist/popup/index.html",
            }
        }
    }
    

    Canvas

    Manifest V3 中 Background 不支持任何与 Dom 相关的 API ,因此在图片渲染上只能选择 OffscreenCanvas ,虽然 Firefox 号称支持这一 API ,但是在实际开发过程中,却无法在 Background page 中使用,也许是我们使用的姿势不对。

    Clipboard

    最后一个 Firefox 与 Chrome 浏览器不一致的地方就是 clipboard ,Firefox 不支持 ClipboardItem ,也就意味着不能使用 navigator.clipboard.write 将图片复制到 clipboard. 但是 Firefox 支持 browser.clipboard.setImageData 这个 Chrome 已经废弃的 API 。


    总的来说,在开发 TinySnap web extension 没有遇到浏览器上太多的差异,并且在不考虑老旧浏览器的情况下,开发体验也比传统网页开发要轻松得多。在 Manifest V3 到 V2 的迁移过程中,我们也没有遇到太多的麻烦情况。

    8 条回复    2022-08-18 21:39:48 +08:00
    crs0910
        1
    crs0910  
       2022-08-18 17:03:14 +08:00
    User Story 用的假数据啊
    dearroy
        2
    dearroy  
    OP
       2022-08-18 17:23:05 +08:00
    @crs0910 是的,需要收集到足够数量的 testimonials 去替换掉。
    justin2018
        3
    justin2018  
       2022-08-18 18:47:26 +08:00
    截图完成 跳转到 options 页面 有一定几率会看到一个图裂的图片

    无法截图 太快了
    dearroy
        4
    dearroy  
    OP
       2022-08-18 18:52:05 +08:00
    @justin2018 已经复现了,会着手解决这个问题,感谢指出!
    justin2018
        5
    justin2018  
       2022-08-18 19:10:43 +08:00
    @dearroy 可否增加 使用快捷键截图功能 😁
    1423
        6
    1423  
       2022-08-18 19:22:40 +08:00
    有点失望。。我还以为选取截图是像 AdBlock 的元素 picker 一样,能够实时按 DOM 元素高亮并截图呢
    dearroy
        7
    dearroy  
    OP
       2022-08-18 21:38:22 +08:00
    @justin2018 快捷键其实已经有了,通过 Alt+Shift+S 唤起,这一点我打算在接下来的文档中进一步写明。
    dearroy
        8
    dearroy  
    OP
       2022-08-18 21:39:48 +08:00
    @1423 已经记录下来,后面会排期开发,感谢提供思路。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2809 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 12:56 · PVG 20:56 · LAX 05:56 · JFK 08:56
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.