Professional Documents
Culture Documents
TimeTracker Report PDF
TimeTracker Report PDF
on
TimeTracker
Submitted by
of
BACHELOR OF TECHNOLOGY
IN
AT
1
CERTIFICATE
This is to certify that the project report entitled “Time tracker” submitted by
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
Introduction 6
- HTML
- CSS
- Javascript
- 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
8
● Features - Refer to the diagram below
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
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.
12
CHAPTER 3
PROJECT IMPLEMENTATION
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.
13
14
Pie chart(Today)
- It shows the top 10 websites one at a time on hovering the mouse on the right side list.
15
3.2.2 All-Time view(UI)
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.
17
3.2.3 Installing the TimeTracker Chrome Extension Steps
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
20
CHAPTER 5
CONCLUSION & REFERENCES
5.1 Conclusion
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