經過昨天會寫了一個簡單的 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

感謝各位大大
我們明天見