[拯救上班族的 Chrome 扩充套件] 规划架构和使用情境

经过昨天会写了一个简单的 Hello Extension 後，
发现应该要回报进度和共同学习交叉的分享，
也是为了让各位能够更有感觉我要做的目的和主题，
想要藉由叙述情境和画了一些图让你们能够快速理解xDD

介面设计

先感谢 Ron 共同参与这专案，（目前就交由他了xD）

(目前为示意图，持续改善中)

关於实作细节之後有机会我再写个几篇来一起学习

因为我也是菜鸡啊QQ 目前只出一张嘴xD

这边主要规划

• 插入的图片可以由使用者自订义

  当该喝水的时间到的时候，你还没喝水他就会插入你所有的页面并且干扰你让你完全不能看网页xD（应该会有个北烂的预设图如果不放）

• 目标达成的喝水量

  设定希望一整天上班想要喝到多少的水量，然後由扩充显示进度。

• 喝水容器的容量

  设定你平常使用的喝水容器容量，方便能够帮你计算你喝了多少水

• 喝水总时长

  让使用者设定工作时段，
  这段时间扩充套件会自动帮你平均规划每次的喝水量。

  Note: 目前图示是填写小时，後续会改成以自行设定时段致，
  比方说 09:00-18:00 ，这样更方便使用者不用每天都要打开设定。

• 喝水时间间格

  可以设定多久时间要喝一次水，会依照这频率帮你规划一次至少要喝多少水。

• 喝水进度条

  让你可以随时随地知道目前喝水的进度

当使用者触发需要喝水时

如果触发喝水时你会可能会看到的画面，如下图示意图。

可能会有一只可爱的猫咪在你的占据你所有画面，看起来很北烂但是他是为了你好呀(X

目前还有规划应该除了插入图片外会给使用者能够快速选择喝了多少杯的水量倍数，比方说 2杯, 1.5杯 , 一杯, 0.5杯 , 没喝我坏坏。
当使用者点选任一选项则会把资料，传送给 Background Script 计算喝水的量。

流程图

以下是我的想像
使用者点开 Chrome Extension 设定参数 -> 将参数储存在 local storage -> Background Scripts 在背景检查是否达到触发喝水时间 -> 达到触发条件 -> 插入所有网页图片 -> 检查是否喝水 -> 已送出喝水资料 -> 取消所有插入的图片。

如下图所示

循序图

凭感觉画的xDD 如果有误或是画不好的在跟我说

popup(chrome extension UI) 设定参数 -> 送到 Background 将设定储存在 local storage -> Background 检查时间 -> 触发喝水的 event -> 搜寻所有分页 tabIds -> 对所有tab 发出插入图片的event -> 更新状态为喝水中 -> 当使用者送出喝水资讯 -> 搜寻所有分页的 tabIds -> 取消所有被插入图片的页面 -> 更新状态。

以上是今天的内容，今天差点难产，
持续开发中，如果你对我目前专案进度有兴趣的可以帮我先按个 star
Github repo - no-drinking-no-working

感谢各位大大
我们明天见