Chrome/Edge extension with current time as tab-title

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

you can use the chrome.tabs API to get the current tab and update its title with the current time.

Here's a sample code snippet that you can use as a starting point:

// background.js

function updateTabTitle(tabId) {
  chrome.tabs.get(tabId, function(tab) {
    var currentTime = new Date().toLocaleTimeString();
    var newTitle = currentTime + " - " + tab.title;
    chrome.tabs.executeScript(tabId, {code: "document.title = '" + newTitle + "';"});
  });
}

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
  if (changeInfo.status == "complete") {
    updateTabTitle(tabId);
  }
});

This code listens for the tabs.onUpdated event, which is fired when a tab is updated (e.g. when a page finishes loading). When this event is fired, the updateTabTitle function is called with the tabId of the updated tab. This function gets the current time, constructs a new title string with the current time and the original tab title, and updates the tab's title using chrome.tabs.executeScript.

Note that this code only updates the tab title when the page finishes loading. If you want to update the title more frequently (e.g. every second), you can use setInterval to call updateTabTitle at regular intervals.

Also note that in manifest v3, the chrome.tabs.executeScript method requires the scripting permission to be explicitly granted in the manifest file. Here's an example of how to include this permission in your manifest:

{
  "name": "My Extension",
  "version": "1.0",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  },
  "permissions": [
    "tabs",
    "scripting"
  ]
}

For more information on the chrome.tabs API and the scripting permission, see the following links:

• chrome.tabs API documentation
• scripting permission documentation

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.