├── banner.jpg
├── assets
├── icon.png
├── banner.PNG
└── jal-lijiye.mp3
├── style.css
├── README.md
├── index.html
├── background.js
├── manifest.json
└── app.js
/banner.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jagdishpatil02/drink-water/HEAD/banner.jpg
--------------------------------------------------------------------------------
/assets/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jagdishpatil02/drink-water/HEAD/assets/icon.png
--------------------------------------------------------------------------------
/assets/banner.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jagdishpatil02/drink-water/HEAD/assets/banner.PNG
--------------------------------------------------------------------------------
/assets/jal-lijiye.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jagdishpatil02/drink-water/HEAD/assets/jal-lijiye.mp3
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | padding: 0;
3 | margin: 0;
4 | }
5 |
6 | body {
7 | display: flex;
8 | justify-content: center;
9 | flex-direction: column;
10 | align-items: center;
11 | }
12 |
13 | .image-wrapper {
14 | background-image: url(./assets/banner.PNG);
15 | width: 350px;
16 | background-size: cover;
17 | height: 350px;
18 | }
19 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Drink Water(Jal lijiye)
2 |
3 | Now you can directly install it from here: https://chrome.google.com/webstore/detail/drink-water-jal-lijiye/blohhdbhbdmaandamdbaomjkofpbclaf
4 |
5 | Drink Water(Jal lijiye) is a chrome extension that will remind you to drink water after every 20 minutes.
6 |
7 | 
8 |
9 | ## Tech Stack
10 | - HTML
11 | - CSS
12 | - JavaScript
13 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Jal lijye
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/background.js:
--------------------------------------------------------------------------------
1 | // Create a variable to store the tab ID
2 | let tabId = null;
3 |
4 | // Create the new tab once
5 | chrome.tabs.create({}, function (newTab) {
6 | tabId = newTab.id;
7 | });
8 |
9 | // Update the tab whenever the alarm fires
10 | chrome.alarms.onAlarm.addListener(function (alarm) {
11 | if (alarm && tabId !== null) {
12 | let url = chrome.runtime.getURL("./assets/jal-lijiye.mp3");
13 | url += "?volume=0.5&src=jal-lijiye.mp3&length=1000";
14 |
15 | chrome.tabs.update(tabId, { url: url });
16 | }
17 | });
18 |
--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "manifest_version": 3,
3 | "name": "Drink Water (Jal Lijiye)",
4 | "description": "Drink Water (Jal Lijiye) is an extension that will remind you drink water after every 20 mins.",
5 | "version": "3.0",
6 | "permissions": ["alarms"],
7 | "icons": {
8 | "128": "./assets/icon.png",
9 | "48": "./assets/icon.png",
10 | "16": "./assets/icon.png"
11 | },
12 | "background": {
13 | "service_worker": "background.js"
14 | },
15 | "action": {
16 | "default_icon": "./assets/icon.png",
17 | "default_popup": "index.html"
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
1 | var alarmClock = {
2 | onHandler: function (e) {
3 | chrome.alarms.create("myAlarm", {
4 | delayInMinutes: 20,
5 | periodInMinutes: 20,
6 | });
7 | },
8 |
9 | offHandler: function (e) {},
10 |
11 | setup: function () {},
12 | };
13 |
14 | document.addEventListener("DOMContentLoaded", function () {
15 | alarmClock.setup();
16 | alarmClock.onHandler();
17 | });
18 |
19 | window.resizeTo(0, 0);
20 | onload = () => {
21 | const queryString = window.location.search;
22 | const urlParams = new URLSearchParams(queryString);
23 | let audio = new Audio(urlParams.get("src"));
24 | audio.volume = urlParams.get("volume");
25 | console.log(JSON.parse(audio));
26 | audio.play();
27 | setTimeout(() => {
28 | close();
29 | }, urlParams.get("length"));
30 | };
31 |
--------------------------------------------------------------------------------