V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
爱意满满的作品展示区。
sparkle2015

使用 React+TypeScript+Firebase 实现的 Chrome Extension 总结

  •  
  •   sparkle2015 · Oct 8, 2018 · 3430 views
    This topic created in 2758 days ago, the information mentioned may be changed or developed.

    粗略记录用 React+TypeScript+Firebase 实现一个用来统计 Gitlab Spent Time 的 Chrome Extension 的过程。

    内容包括:

    • 背景
    • 功能介绍
    • 如何使用
    • 用 Webpack 配置多个 js 入口
    • 使用 TypeScript
    • 把它变成 Chrome Extension
    • 使用 Firebase Auth 实现注册登录
    • 使用 Firestore 存取数据

    文章链接

    GitHub 项目链接

    6 replies    2018-10-09 09:17:29 +08:00
    troyerwang
        1
    troyerwang  
       Oct 8, 2018
    不错哦,加油 O(∩_∩)O 哈哈~
    Hilong
        2
    Hilong  
       Oct 8, 2018 via Android
    star 一下,我其实对 react+typescript 比较感兴趣,回头研究一下你的配置
    TabGre
        3
    TabGre  
       Oct 8, 2018 via iPhone
    回去也要学习下,同感兴趣 React 和 Ts
    vHypnos
        4
    vHypnos  
       Oct 9, 2018
    东西是好东西,mark 下。
    最大的疑问是 如果自己不记得 做了多久 怎么办
    sparkle2015
        5
    sparkle2015  
    OP
       Oct 9, 2018
    @vHypnos , good question!

    所以,我还写了一个插件 (早于上面这个插件,不然的话应该是可以集成到一个插件里的): https://github.com/baurine/gitlab-issue-time-tracker-ext

    ![]( https://raw.githubusercontent.com/baurine/gitlab-issue-time-tracker-ext/master/art/demo.gif)

    我现在的流程一般是这样的

    1. 准备开始做一个 issue,点击插件的 "start" 按钮开始计时
    1. 点击 "Create merge request" 自动创建分支及 Merge request
    1. 在分支上修改代码,提交,等待 review
    1. 点击插件的 "stop" 按钮停止计时
    1. log 所用时间
    sparkle2015
        6
    sparkle2015  
    OP
       Oct 9, 2018
    @vHypnos , 不过偶尔我也还是会忘的,但也没什么,log 的时间不用很精确,有时你可以根据你创建分支的时间来计算。
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   2786 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 35ms · UTC 15:41 · PVG 23:41 · LAX 08:41 · JFK 11:41
    ♥ Do have faith in what you're doing.