Userscript for displaying the date & time for when a Twitch clip was created.

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

Requirements:

Something like the Tampermonkey extension installed for your browser.

Installation:

Install a userscript extension (such as Tampermonkey).
Click on the 'Raw' button top-right 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

// ==UserScript==
// @name         Twitch Clips - Show date & time
// @version      0.2
// @description  Displays the actual date & time of when a clip was created, instead of the useless "xxx days/months/weeks ago"
// @author       Decicus
// @match        https://clips.twitch.tv/*
// ==/UserScript==

(async function() {
    'use strict';

const slug = window.location.href.match(/https\:\/\/clips\.twitch\.tv\/([A-z0-9]+)/m)[1];
    
    if (!slug) {
        return;
    }

const response = await fetch(`https://api.twitch.tv/kraken/clips/${slug}`, {
        headers: {
            Accept: 'application/vnd.twitchtv.v5+json',
            'Client-ID': 'zs377ogpzz01ogfx26pvbddx9jodg1',
        },
    });

const data = await response.json();

if (!data.created_at) {
        return;
    }

const created = new Date(data.created_at);
    const dateAndTime = created.toLocaleString();

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');
 const element = document.createElement('div');
 element.innerHTML = `Clip created: ${dateAndTime}`;

box[0].appendChild(element);
})();

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	})();