Twitch clip datetime userscript

A userscript for displaying the actual date & time (relative to local time) of when a Twitch clip was created.

FYI: It only works on URLs that start with https://clips.twitch.tv/.
This script does not work with URLs that are on the Twitch "channel pages" (https://www.twitch.tv/CHANNEL_NAME_HERE/clip/...).

Requirements:

Something like the Tampermonkey extension installed for your browser.

Installation:

Install a userscript extension (such as Tampermonkey).
Click on this link when Tampermonkey is installed, and it will prompt you to install the userscript.

Screenshot:

Screenshot of how userscript works

twitch-clips-datetime.user.js · 1.3 KiB · JavaScript Raw

1	// ==UserScript==
2	// @name Twitch Clips - Show date & time
3	// @version 0.2
4	// @description Displays the actual date & time of when a clip was created, instead of the useless "xxx days/months/weeks ago"
5	// @author Decicus
6	// @match https://clips.twitch.tv/*
7	// ==/UserScript==
8
9	(async function() {
10	'use strict';
11
12	const slug = window.location.href.match(/https\:\/\/clips\.twitch\.tv\/([A-z0-9]+)/m)[1];
13
14	if (!slug) {
15	return;
16	}
17
18	const response = await fetch(`https://api.twitch.tv/kraken/clips/${slug}`, {
19	headers: {
20	Accept: 'application/vnd.twitchtv.v5+json',
21	'Client-ID': 'zs377ogpzz01ogfx26pvbddx9jodg1',
22	},
23	});
24
25	const data = await response.json();
26
27	if (!data.created_at) {
28	return;
29	}
30
31	const created = new Date(data.created_at);
32	const dateAndTime = created.toLocaleString();
33
34	const box = document.getElementsByClassName('clips-chat-info tw-align-items-start tw-flex tw-flex-column tw-flex-grow-1 tw-flex-shrink-1 tw-justify-content-center tw-lg-mg-y-2 tw-mg-t-1');
35	const element = document.createElement('div');
36	element.innerHTML = `<span class="tw-font-size-5 tw-strong">Clip created:</span><br /><span>${dateAndTime}</span>`;
37
38	box[0].appendChild(element);
39	})();