Chrome/Edge extension with current time as tab-title

Question

How can I develop a Chrome/Edge extension that always displays the current time in the tab title before the actual title?

Answer 1

1.) Create new folder "time2tab".

2.) Put new file "manifest.js" in it:

{
  "manifest_version": 3,
  "name": "time2tab",
  "version": "1.0",
  "description": "A simple Chrome extension that changes the title of the current tab to the current timestamp.",
  "content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
      "js": [
        "content.js"
      ]
    }
  ]
}

3.) Put new file "content.js" in it:

var originalTitel = document.title;
  
function updateTime() {
  
  var now = new Date();
  var hours = now.getHours();
  var minutes = now.getMinutes();
  var seconds = now.getSeconds();
  var tenthOfASecond = Math.floor(now.getMilliseconds() / 100);
  
  var timeString = hours.toString().padStart(2, '0') + ':' + minutes.toString().padStart(2, '0') + ':' + seconds.toString().padStart(2, '0') + '.' + tenthOfASecond.toString();
  
  document.title = timeString + " " + originalTitel;
  
}
 
setInterval(updateTime, 100);

4.) Aktivate Developer mode in Extensions-Tab. Load the folder via Load unpacked.

Use cases for this extension:

• This extension can be used as a minimal working example for developing a Chrome/Edge extension.
• It can also be used to record the current time in a screencast recording an automated test.