How great it would be if we could create our own Chrome extension, and in this article we are going to learn how to do that.
We will make the Pomodoro timer app as a Chrome extension. Here is the code. For a detailed tutorial on building a Pomodoro Timer check out this article.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="./index.css" rel="stylesheet" />
<title>Pomodoro App</title>
</head>
<body>
<div class="container">
<div class="timer-container">
<button id="pomodorobtn" class="active">Pomodoro</button>
<button id="shortbrkbtn">Shortbreak</button>
<button id="longbrkbtn">Long break</button>
</div>
<div class="pomdoro-count"></div>
<div class="progressbar">
<div class="progrsbar-inner">
<h2 class="progressbar-number">25:00</h2>
</div>
</div>
<div class="function-buttons">
<button id="startbtn">Start</button>
<button id="pausebtn">Pause</button>
<button id="resetbtn">Reset</button>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
index.css
body {
margin: 0;
padding: 0;
box-sizing: border-box;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: "Roboto", sans-serif;
}
.container {
width: 400px;
height: 400px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: rgb(0, 0, 61);
padding: 50px 20px;
}
.timer-container {
margin-bottom: 50px;
display: flex;
align-items: center;
justify-content: space-between;
width: 80%;
}
.timer-container button {
padding: 10px;
border: none;
border-radius: 5px;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
color: white;
font-weight: bold;
background-color: rgb(243, 72, 109);
cursor: pointer;
}
.timer-container button:hover {
transform: scale(1.2);
}
.timer-container .active {
background-color: #db2a34;
}
#longbrkbtn {
display: none;
}
.pomdoro-count {
margin-bottom: 20px;
display: none;
font-weight: 800;
}
.function-buttons {
display: flex;
align-items: center;
justify-content: space-between;
width: 80%;
}
.function-buttons button:hover {
transform: scale(1.2);
}
#startbtn,
#pausebtn,
#resetbtn {
padding: 10px 20px;
border: none;
border-radius: 5px;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
color: white;
font-weight: bold;
background-color: rgb(243, 72, 109);
cursor: pointer;
}
#startbtn {
background-color: #008000;
}
#pausebtn {
background-color: #db2a34;
}
#resetbtn {
background-color: rgb(255, 166, 0);
}
.progressbar {
height: 180px;
width: 180px;
background: conic-gradient(crimson 0deg, rgb(243, 72, 109) 0deg);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
animation: pulse 3s infinite;
transition: all ease;
margin-bottom: 50px;
}
.progrsbar-inner {
height: 90%;
width: 90%;
background: rgb(3, 3, 63);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.progressbar-number {
color: white;
font-weight: 900;
font-size: 2rem;
}
@keyframes pulse {
0% {
transform: scale(0.97);
}
50% {
transform: scale(1);
}
100% {
transform: scale(0.97);
}
}
index.js
const startBtn = document.querySelector("#startbtn");
const stopBtn = document.querySelector("#pausebtn");
const resetBtn = document.querySelector("#resetbtn");
const progressbar = document.querySelector(".progressbar");
const progressbarNumber = document.querySelector(
".progressbar .progressbar-number"
);
const pomodoroBtn = document.getElementById("pomodorobtn");
const shortbrkBtn = document.getElementById("shortbrkbtn");
const longbrkBtn = document.getElementById("longbrkbtn");
const pomCount = document.querySelector(".pomdoro-count");
let pomdoroCount = 0;
const pomodorountilLongbrk = 4;
const pomodorotimer = 1500; /* 25 minutes*/
const shortbreaktimer = 300; /* 5 minutes*/
const longbreaktimer = 900; /* 20 minutes*/
let timerValue = pomodorotimer;
let multipliervalue = 360 / timerValue;
let progressInterval;
let pomodoroType = "POMODORO";
startBtn.addEventListener("click", () => {
startTimer();
});
stopBtn.addEventListener("click", () => {
pauseTimer();
});
pomodoroBtn.addEventListener("click", () => {
setTimeType("POMODORO");
});
shortbrkBtn.addEventListener("click", () => {
setTimeType("SHORTBREAK");
});
longbrkBtn.addEventListener("click", () => {
setTimeType("LONGBREAK");
});
resetBtn.addEventListener("click", () => {
resetTimer();
});
function NumbertoString(number) {
const minutes = Math.trunc(number / 60)
.toString()
.padStart(2, "0");
const seconds = Math.trunc(number % 60)
.toString()
.padStart(2, "0");
return `${minutes}:${seconds}`;
}
function startTimer() {
progressInterval = setInterval(() => {
timerValue--;
console.log(timerValue);
setProgressInfo();
if (timerValue === 0) {
clearInterval(progressInterval);
pomdoroCount++;
pomCount.style.display = "block";
pomCount.style.color = "white";
pomCount.style.fontSize = "30px";
pomCount.textContent = `Pomodoro Count ${pomdoroCount}`;
if (pomdoroCount % pomodorountilLongbrk === 0) {
longbrkBtn.style.display = "flex";
}
setTimeType(pomodoroType);
}
}, 1000);
}
function pauseTimer() {
clearInterval(progressInterval);
}
function resetTimer() {
clearInterval(progressInterval);
timerValue =
pomodoroType === "POMODORO"
? pomodorotimer
: pomodoroType === "SHORTBREAK"
? shortbreaktimer
: longbreaktimer;
multipliervalue = 360 / timerValue;
setProgressInfo();
}
function setProgressInfo() {
progressbarNumber.textContent = `${NumbertoString(timerValue)}`;
progressbar.style.background = `conic-gradient(rgb(243, 72, 109) ${
timerValue * multipliervalue
}deg,crimson 0deg)`;
}
function setTimeType(type) {
pomodoroType = type;
if (type === "POMODORO") {
pomodoroBtn.classList.add("active");
shortbrkBtn.classList.remove("active");
longbrkBtn.classList.remove("active");
} else if (type === "SHORTBREAK") {
pomodoroBtn.classList.remove("active");
shortbrkBtn.classList.add("active");
longbrkBtn.classList.remove("active");
} else {
pomodoroBtn.classList.remove("active");
shortbrkBtn.classList.remove("active");
longbrkBtn.classList.add("active");
}
resetTimer();
}
Create a file name called manifest.json and add this JSON object.
{
"name": "Pomodoro App",
"version": "1.0.0",
"description": "Pomodoro Timer App",
"manifest_version": 3,
"author": "Author name",
"action": {
"default_popup": "index.html",
"default_title": "Pomodoro Timer"
}
}
In your Google Chrome browser address bar, go to three dots, click extensions, and click manage extensions. Enable developer mode and click Load unpacked. Select the Pomodoro app project folder from your computer. Enable the loaded extension. hurray! we have successfully built our Chrome extension.
I hope you found this tutorial helpful! If you have any concerns or questions, please feel free to leave a comment. Your feedback is always appreciated! Follow me on Dev.to for my latest articles. Feel free to connect with me on LinkedIn.
Top comments (0)