├── img
├── dead.png
├── imok.png
├── logo.png
├── tired.png
├── redsmile.png
├── refresh.png
└── yellowsmile.png
├── js
├── content-script.js
├── popup.js
└── background.js
├── background.html
├── manifest.json
├── README.md
└── popup.html
/img/dead.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sologgfun/drinkNow/HEAD/img/dead.png
--------------------------------------------------------------------------------
/img/imok.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sologgfun/drinkNow/HEAD/img/imok.png
--------------------------------------------------------------------------------
/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sologgfun/drinkNow/HEAD/img/logo.png
--------------------------------------------------------------------------------
/img/tired.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sologgfun/drinkNow/HEAD/img/tired.png
--------------------------------------------------------------------------------
/img/redsmile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sologgfun/drinkNow/HEAD/img/redsmile.png
--------------------------------------------------------------------------------
/img/refresh.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sologgfun/drinkNow/HEAD/img/refresh.png
--------------------------------------------------------------------------------
/img/yellowsmile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sologgfun/drinkNow/HEAD/img/yellowsmile.png
--------------------------------------------------------------------------------
/js/content-script.js:
--------------------------------------------------------------------------------
1 | var winWidth, winHeight;
2 |
3 | //屏幕分辨率版本
4 | winWidth = window.screen.width;
5 | winHeight = window.screen.height;
6 |
7 | chrome.runtime.sendMessage({
8 | winWidth: winWidth,
9 | winHeight: winHeight
10 | }, function (response) {
11 | });
--------------------------------------------------------------------------------
/background.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | background
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "manifest_version": 2,
3 | "name": "干杯！cheers~!",
4 | "version": "0.0.8",
5 | "description": "干杯！妈妈再也不担心我不喝水了!cheers!Mom is no longer worried that I will not drink water!",
6 | "icons": {
7 | "16": "./img/logo.png",
8 | "48": "./img/logo.png",
9 | "128": "./img/logo.png"
10 | },
11 | "permissions": [
12 | "notifications",
13 | "webRequestBlocking",
14 | "storage"
15 | ],
16 | "background": {
17 | "page": "./background.html"
18 | },
19 | "browser_action": {
20 | "default_icon": "./img/logo.png",
21 | "default_title": "drinkNow!",
22 | "default_popup": "./popup.html"
23 | },
24 | "content_scripts": [
25 | {
26 | "matches": [
27 | ""
28 | ],
29 | "js": [
30 | "js/content-script.js"
31 | ],
32 | "run_at": "document_start"
33 | }
34 | ]
35 | }
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 | 感觉工作之后写代码经常忘记喝水，而且我本身因为以前经常不吃早饭，有点胆结石，医生也提醒说要多喝水多运动，但是写代码集中精神之后就经常忘记了。。
3 |
4 | 前段时间公司体检后发现颈椎有点前倾，明明才刚毕业几个月，，大家一起注意身体健康吧！下面是插件的详细内容～
5 |
6 | **干杯！妈妈再也不担心我不喝水了!**
7 |
8 | v0.08更新！2019-9-7 13.04
9 |
10 | 修复浏览器console报错的小bug🙇
11 |
12 | v0.07更新！11-9 19.40
13 |
14 | 修复了小鸭子倒着游的重大bug🙇
15 |
16 | v0.06更新！10-19 15.00
17 |
18 | 之前计时重复了，30分钟喝一杯了，我对不起大家！小鸭子替我道歉🙇
19 |
20 | v0.05更新！10-18 19:55
21 |
22 | 1.白天点击refresh小鸭子变大，晚上点击小鸭子会变小（否则小鸭子似乎经常遭到毒手变的太大回不去！
23 |
24 | 2.提示出来之后点击喝水按钮后就刷新计时，不需要在标签里点击刷新啦！
25 |
26 | 3.谢谢大家的支持！
27 |
28 | *年轻人的第一个chrome插件！*
29 | *关注大家的身体健康;*
30 | *rua!!!*
31 |
32 | **主要功能：**
33 |
34 | ①通过标签提醒距离上次喝水已经过了多久
35 |
36 | ②点击右上角刷新时间
37 |
38 | ③点击太阳切换白昼/黑夜暂停时间
39 |
40 | ④60分钟会提示并且标签会变色
41 |
42 | （其实这个是一个养成类的游戏，小鸭子喝水会变大，不及时喝水会变小。哈哈哈哈哈哈
43 | (感谢小朋友🐏医生)
44 |
45 | The first chrome plugin for young people!
46 | Teach young people write plugins at the same time;
47 | Pay attention to your health;
48 | Rua!!!
49 |
50 | The main function:
51 | ①Through the badge to remind you how long it has been since drinking the last time
52 | ②click the top right corner to refresh the countdown
53 | ③click the sun to switch to the day/night to pause time losing
54 | ④every 60 minutes will prompt at once and the label will change color
55 |
56 | (In fact, this is a game , the ducklings will get bigger when you drink water and refresh, and they will get smaller if they don’t drink in time. Hahahahahaha
57 | (Thanks to doctors 🐏 - the one I love!❤)
58 |
59 | 
60 |
61 | 
62 |
63 | chrome插件地址：https://chrome.google.com/webstore/search/%E5%B9%B2%E6%9D%AF?hl=zh-CN
64 |
65 | github地址:https://github.com/sologgfun/drinkNow
66 |
--------------------------------------------------------------------------------
/js/popup.js:
--------------------------------------------------------------------------------
1 | var bg = chrome.extension.getBackgroundPage();
2 | var getHtml = document.getElementsByTagName("html")[0];
3 | var getClock = document.getElementById("img");
4 | var getImg = document.getElementById("clock");
5 | var progressbar = document.getElementById("progressbar");
6 | var light = bg.checklight();
7 | var check = document.getElementById("toggle");
8 | var duckwidth = bg.getduckwidth();
9 | //true为黑夜
10 | getClock.style.width = duckwidth + "%";
11 |
12 | if (!light) {
13 | getImg.innerText = `大魔法让时间停止了!`;
14 | check.checked = true;
15 | getHtml.id = "htmlbg2";
16 | progressbar.id = "progressbar2";
17 | }
18 | //自适应窗口大小
19 | var WandH = bg.getWandH();
20 | getHtml.style.width = WandH.winWidth * 1 / 5 + "px";
21 | getHtml.style.height = WandH.winHeight * 1 / 7 + "px";
22 | console.log(getHtml.style.width);
23 |
24 | //文字提示和小鸭子前进
25 | getClock.style.left = `${bg.timer() - 10}%`;
26 |
27 | if (Math.floor(bg.timer() * 36 / 60) == 60) {
28 | getImg.innerText = `快给我水给我水给我水！`;
29 | getClock.src = "../img/dead.png";
30 | }
31 |
32 | //水向前变色
33 | document.getElementsByClassName("bar")[0].style.width = `${bg.timer()}%`;
34 |
35 | document.getElementById("refresh").addEventListener("click", function (e) {
36 | //刷新计数，小鸭子跑回去
37 | bg.refresh();
38 | if (!light) {
39 | getClock.style.width = duckwidth - 2 + "%";
40 | bg.smallduck();
41 | duckwidth = duckwidth - 2;
42 | } else {
43 | getClock.style.width = duckwidth + 2 + "%";
44 | bg.duckbecomefat();
45 | duckwidth = duckwidth + 2;
46 | }
47 | getClock.src = "../img/imok.png";
48 | getImg.innerText = `哧溜哧溜～喝水了！`;
49 | getClock.style.left = `-10%`;
50 | document.getElementsByClassName("bar")[0].style.width = `0%`;
51 | });
52 | //点击太阳时改变样式，并且让background.js中的计数暂停
53 | document.getElementById("sun").addEventListener("click", function (e) {
54 | //暂停计数
55 | bg.turnlight();
56 | light = !light;
57 | //样式改变
58 | if (bg.checklight()) {
59 | getImg.innerText = ``;
60 | check.checked = false;
61 | getHtml.id = "htmlbg";
62 | progressbar.id = "progressbar";
63 | } else {
64 | getImg.innerText = `大魔法让时间停止了！`;
65 | check.checked = true;
66 | getHtml.id = "htmlbg2";
67 | progressbar.id = "progressbar2";
68 | }
69 | });
--------------------------------------------------------------------------------
/js/background.js:
--------------------------------------------------------------------------------
1 | var count = 0;
2 | var winWidth = 1440;
3 | var winHeight = 860;
4 | var notificationId;
5 | var countdownId = 0;
6 | var light = true;
7 | var duckwidth = 15;
8 |
9 | chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
10 | winWidth = request.winWidth;
11 | winHeight = request.winHeight;
12 | sendResponse('');
13 | });
14 |
15 | function duckbecomeslim() {
16 | duckwidth = duckwidth - 4;
17 | }
18 |
19 | function duckbecomefat() {
20 | duckwidth = duckwidth + 2;
21 | }
22 |
23 | function smallduck() {
24 | duckwidth = duckwidth - 2;
25 | }
26 |
27 | function getduckwidth() {
28 | return duckwidth;
29 | }
30 |
31 | function checklight() {
32 | return light
33 | }
34 |
35 | function turnlight() {
36 | light = !light;
37 | }
38 | //计时器，在后台默默计时
39 | function timer() {
40 | //黑夜停止计时
41 | if (!light) {
42 | return count / 36
43 | }
44 | if (count < 3600) {
45 | count++;
46 | //给浏览器右上角图标加上计时badge
47 | chrome.browserAction.setBadgeText({
48 | text: Math.floor(count / 60) + ''
49 | });
50 | chrome.browserAction.setBadgeBackgroundColor({
51 | color: "#70d2c9"
52 | });
53 | }
54 | //60分钟通知喝水！
55 | if (count == 3600) {
56 | duckbecomeslim();
57 | notificationAction();
58 | count++;
59 | }
60 | if (count >= 3600) {
61 | //图标改成红色和sos文案！
62 | chrome.browserAction.setBadgeText({
63 | text: 'sos'
64 | });
65 | chrome.browserAction.setBadgeBackgroundColor({
66 | color: [255, 0, 0, 255]
67 | });
68 | }
69 | return count / 36
70 | }
71 |
72 | function refresh() {
73 | count = 0;
74 | //清除五分钟倒计时
75 | window.clearInterval(countdownId);
76 | }
77 |
78 | var fivemin = 0;
79 | var Countdown = function () {
80 | fivemin++;
81 | if (fivemin == 300) {
82 | notificationAction();
83 | fivemin = 0;
84 | }
85 | };
86 |
87 | function notificationAction() {
88 | //notification的id要清空，否则create的时候之前id没有清空则会失效
89 | chrome.notifications.clear("1",
90 | (id) => {
91 |
92 | });
93 | chrome.notifications.create("1", {
94 | type: 'basic',
95 | iconUrl: 'img/logo.png',
96 | title: '快喝水！',
97 | buttons: [{
98 | title: "喝水",
99 | iconUrl: 'img/yellowsmile.png'
100 | }, {
101 | title: "等会儿",
102 | iconUrl: 'img/redsmile.png'
103 | }],
104 | message: '已经一个小时没喝水了！小鸭子渴死了！'
105 | });
106 | }
107 |
108 | chrome.notifications.onButtonClicked.addListener(function (id, btnIndex) {
109 | count = btnIndex ? count : 0;
110 | });
111 |
112 | function getWandH() {
113 | var WandH = {
114 | winWidth: winWidth,
115 | winHeight: winHeight
116 | }
117 | return WandH
118 | }
119 |
120 | setInterval(timer, 1000);
--------------------------------------------------------------------------------
/popup.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | drinknow
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |