PROJECT REPORT

on

TimeTracker
Submitted by

Srikant Sahoo (1829199)

Soumya Sai Biswal (1829102)
Shivam Kumar Gupta (1829093)
Meghna Singh (1829163)
Naveen Singh Rajput (1829070)

in partial fulfillment for the award of the degree

of

BACHELOR OF TECHNOLOGY

IN

COMPUTER SCIENCE & COMMUNICATION ENGINEERING

AT

SCHOOL OF COMPUTER ENGINEERING

1
 CERTIFICATE

This is to certify that the project report entitled “Time tracker” submitted by

Srikant Sahoo 1829199

Somya Sai Biswal 1829102

Meghna Singh 1829163

Shivam Kumar Gupta 1829093

Naveen Singh Rajput 1829070

in partial fulfillment of the requirements for the award of the Degree of Bachelor of
Technology in Computer Science & Communication Engineering is a bonafide record
of the work carried out under my(our) guidance and supervision at the School of
Computer Engineering, Kalinga Institute of Industrial Technology, Deemed to be
University.

Signature of Supervisor 1
Mamta Motwani
Assistant Professor
School Of Computer Engineering,
KIIT UNIVERSITY

................................................................................................................................................
The Project was evaluated by us on 29/12/2021

2
 KALINGA INSTITUTE OF INDUSTRIAL TECHNOLOGY

BHUBANESWAR, ODISHA
2021-22

ACKNOWLEDGEMENT

We feel immense pleasure and feel privileged in expressing our deepest and most sincere
gratitude to our supervisor Mamta Motwani, for her excellent guidance throughout our
project work. Its kindness, dedication, hard work, and attention to detail have been a great
inspiration. We express our thanks to KIIT University, Deemed to be University for
allowing us to conduct a TIME TRACKER APPLICATION project and always
supporting us at every step of the way.

The mentioned project was done under the supervision of our faculty. We feel thankful to
the college staff for giving us such a big opportunity and for their support and suggestions
during our course of project work in the final year of our undergraduate course.

3
 ABSTRACT

The Internet is overflowing with information on anything you need. But when you go
online you stand on a thin ridge with the task at hand on one side and time chewing
activities on the other. And somehow the gravity is more powerful over on the other side.
It’s easy to get pulled into aimless scrolling on Facebook or Twitter or watching cat
videos, they never get old, do they? And quite often we found doing the same, we
somehow needed to put a check on how we spent our time online. If we could find out
the exact amount of time that we waste online, then maybe we will be able to control our
habits. But to our knowledge, nothing like this existed yet, and so, we decided to work on
the idea.

The motivation for this project was how we can observe and analyze the time we spend
online browsing so that we can organize our time in such a way that we utilize most of it.

4
 TABLE OF CONTENTS

CONTENT PAGE NO.

Introduction 6

Background & Basic Concepts 7-12

- HTML

- CSS

- Javascript

- Chrome Extension APIs

Project Implementation 13-19

- Feature explanations

- UI views

- Installation steps

Future Work 20

Conclusion 21

References 21

5
 CHAPTER 1
INTRODUCTION

Chrome Extensions are small software programs that customize the browsing experience.
They enable users to tailor Chrome functionality and behavior to individual needs or
preferences. They are built on web technologies such as HTML, JavaScript, and CSS.

The original idea suggests showing the amount of time spent on certain sites on that day,
month, and year. Though it sounded nice, in our opinion it held more of a cosmetic value
than working towards helping us in achieving the goal. We decided to deviate a little
from the path the idea follows, and show the time collectively spent on every website.

The most important and final feature added to the extension was the activity graph. The
activity graph provided a visual history of time wasted online, each day adding a new bar
to the graph. The more time you waste, the taller the bar for that day would be. It's easier
to improve when you can see right in front of your eyes how you’ve been doing. The idea
was simple, on the very first day you browse the web as you normally would. This added
the very first bar in the graph. Which acts as a benchmark. With each passing day, you try
to keep the bar for that day shorter than one from the day before.

6
 CHAPTER 2
BACKGROUND & BASIC CONCEPTS

2.1 HTML

● The HyperText Markup Language or HTML is the standard markup language for
documents designed to be displayed in a web browser. HTML is the foundation of all
web pages.
● Originally, HTML was developed with the intent of defining the structure of documents
like headings, paragraphs, lists, and so forth to facilitate the sharing of scientific
information between researchers. Now, HTML is being widely used to format web pages
with the help of different tags available in HTML language.
● It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting
languages such as JavaScript.
● Versions of HTML -

2.2 CSS

● Cascading Style Sheets is a simply designed language intended to simplify the process
of making web pages presentable.
● CSS enables you to apply styles to web pages, independent of the HTML that makes up
each web page.
● CSS is designed to enable the separation of presentation and content, including layout,
colors, and fonts.

7
 ● Types - Refer to the diagram below

● Versions -

2.3 JavaScript

● JavaScript (JS) is a lightweight, interpreted, or just-in-time compiled programming

language with first-class functions.
● It is a text-based programming language used both on the client-side and server-side that
allows you to make web pages interactive.
● Over 97% of websites use JavaScript on the client-side for web page behavior, often
incorporating third-party libraries.

8
 ● Features - Refer to the diagram below

2.4 Chrome Extension APIs

Extensions are basically add ons that we can add to any browser which extends its
capabilities to make it more able to perform certain tasks. So Chrome extensions are
similarly used to extend the browser’s capabilities.

9
Architecture Diagram

10
There are 4 components required in a basic chrome extension

1. Content scripts - It runs on the web page which is opened. It is injected.

2. Background Scripts - It is used to maintain a global state in our application.
3. Popup Scripts - It is used to open the popup and run javascript there.
4. Manifest.json v2/v3 file - Used to store the metadata of the extension.

All these scripts communicate using IPC(Inter-process communication).

Our Manifest v2 JSON File:

11
It is mandatory to have a manifest JSON to create an extension. In this file you need to
define the permissions you require from the user, icons, extension name, etc.

For the specific details of the possible key-value pairs in the JSON file please refer to the
chrome extension documentation.

Manifest file format - Chrome Developers

12
 CHAPTER 3
PROJECT IMPLEMENTATION

3.1 Chrome Extension

The objective of Chrome extension:

It is to track users’ activity and showcase their data in front of them in a user-friendly meaningful
way. The users will be able to analyze where their most of the time is going. Then they can take
actions to remove those time-killing websites from their daily browsing and save time.
As rightly said Time == Money.

3.2 Feature Explanations

Our TimeTracker application is divided into 2 parts.

1. Daily view(Today) - it shows today’s data.
2. All-time view - it shows the summary of all stats in a lifetime

3.2.1 Today view(UI)

Our TimeTracker today view is again divided into 2 parts.

1. Pie chart(Today) - it shows today’s top 10 websites data.
2. List tabular view - it shows today’s all data.

13
14
Pie chart(Today)
- It shows the top 10 websites one at a time on hovering the mouse on the right side list.

List tabular view

- It shows the total time spent today and total sites visited in between the pie chart and list
view.
- We also calculate the total percentage of the total time a website is contributing

15
3.2.2 All-Time view(UI)

Our TimeTracker All-Time view is again divided into 3 parts.

1. One-time Statistics(All-Time) - it shows all-time’s statistics.
2. Pie chart(All-Time) - it shows all time’s top 10 websites data.
3. List tabular view - it shows all time’s all data.

16
One-Time Statistics(All-Time)
It shows the following statistics
- First Day - the extension started recording the data
- Active Days - The total number of days the user was active and using the browser with
extension installed.
- Days in total - is the total days from which the extension was installed.
- Today - Shows the total time spent on websites today
- All-Time - shows the aggregate combined time of all the websites
- Average by active days - shows the average time spent on all websites in the active days
- Most active day - is the date on which you browsed the most.
- Most Inactive day - is the date on which you opened the browser but were least active

Pie chart(All-Time)
- It shows the top 10 websites one at a time on hovering the mouse on the right side list.

List tabular view

- It shows the aggregate data of total time spent all-time and total sites visited in between
the pie chart and list view.
- We also calculate the total percentage of the total time a website is contributing to the
all-time data.

17
3.2.3 Installing the TimeTracker Chrome Extension Steps

1. Go to chrome://extensions URL in the browser.

2. Toggle the developer mode

18
3. Click “Load Unpacked” and select “Timetracker” source code “src” or “build” folder and open
it.

4. You will then be able to see the TimeTracker extension in your browser.

19
 CHAPTER 4
FUTURE WORK

● We intend to implement a website blocking feature.

● Also a ‘SETTINGS’ page
○ Having the option to switch to a dark theme,
○ The functionality to export user data to a csv file or Excel file.
● More charts could be included to help people better understand their data.
○ ex: TimeCharts, Bar charts, etc

20
 CHAPTER 5
CONCLUSION & REFERENCES

5.1 Conclusion

● We saw a significant improvement in time management. We discovered where our time

was going, which was something that all of the team members were interested in, i.e.
Social media: Linkedin, Facebook.

● As a result of identifying the time-killing websites, we were able to make informed

judgments and manage our time on those websites, allowing us to spend it on more
productive websites.

5.2 References

- https://developer.chrome.com/docs/extensions/mv3/manifest/
- https://google.com
- https://github.com
- https://chrome.google.com/
- https://chrome.google.com/webstore
- https://www.javascript.info

21