How to add Start and Stop buttons for a timer / stopwatch using Tampermonkey - userscripts

Question

How do I create a Tampermonkey code with start stop buttons for timer?
When I select "start", the start time should be noted (ex: 1.30 PM).
When I select "stop", the stop time should be noted (ex: 1.35 PM)
And the time taken (ex: 5 min) should be displayed.
Is it possible to create this?

Answer 1

This similar to Add a JavaScript button using Greasemonkey or Tampermonkey?, see that question for formatting and positioning ideas.
It is recommended that you use the Performance API or the Moment.js library to handle the timing and/or time formatting. Or see: How to convert time milliseconds to hours, min, sec format in JavaScript? to do formatting the hard way.
Here is a complete working Tampermonkey userscript to illustrate the basics.
You can run the code snippet or install it using Tampermonkey to see it in action.
// ==UserScript==
// #name _Add a stopwatch / elapsed time button
// #match *://YOUR_SERVER.COM/YOUR_PATH/*
// #require https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js
// #grant GM_addStyle
// ==/UserScript==
var gblButtonClickTime;
$("body").prepend ( `
<div id="tmStopWatchBlck">
<button id="tmStopWatchBttn">Start</button>
<span id="tmTimeStat"> </span>
</div>
` );
$("#tmStopWatchBttn").click ( zEvent => {
var statusNode = $("#tmTimeStat");
var tmrButton = $(zEvent.target);
//--- Button text is either "Start" or "Stop".
if (tmrButton.text() === "Start") {
//-- Start the timer
tmrButton.text ("Stop");
statusNode.css ("background", "lightyellow");
gblButtonClickTime = performance.now ();
console.log (
"Timer started at: ", gblButtonClickTime.toFixed(0), new Date()
);
}
else {
//-- Stop the timer
tmrButton.text ("Start");
statusNode.css ("background", "lightgreen");
var stopTime = performance.now ();
var elapsedtime = stopTime - gblButtonClickTime; // Milliseconds
var purtyElpsdTime = (elapsedtime / 1000).toFixed(3) + " seconds";
console.log (
"Timer stopped at: ", stopTime.toFixed(0), new Date(),
"Elapsed: ", purtyElpsdTime
);
statusNode.text (purtyElpsdTime);
}
} );
GM_addStyle ( `
#tmStopWatchBttn {
font-size: 1.2em;
padding: 0.5ex 1em;
width: 5em;
}
#tmTimeStat {
margin-left: 1em;
padding: 0.2ex 2ex;
border: 1px solid lightgray;
border-radius: 0.5ex;
}
` );
/********************************************************************
******* Everything below this block is simulated target page. *******
******* It's NOT part of the userscript. *******
********************************************************************/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://greasyfork.org/scripts/44560-gm-addstyle-shim/code/GM_addStyle_shim.js"></script>