# 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/...`). "Under the hood" the script uses [`Date.toLocaleString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString) to format the date. The format of the date & time may differ from the screenshots below. ## Requirements: - Something like the [Violentmonkey](https://violentmonkey.github.io/get-it/) extension installed for your browser. ## Installation: 1. Install a userscript extension (such as [Violentmonkey](https://violentmonkey.github.io/get-it/)). 2. Click on [this link](https://gist.github.com/Decicus/ec4745e680e06cfff5b1fa0a53fcff72/raw/twitch-clips-datetime.user.js) when Violentmonkey is installed, and it will prompt you to install the userscript. ## Changelog - v0.4.0 - 2021-08-29 - Date/time placement was adjusted due to changes in the page on Twitch's end. See [screenshots](#screenshots). - Previously I used Tampermonkey, but later switched to Violentmonkey. During my testing, I tested with Violentmonkey and it worked fine. However, if you're currently using Tampermonkey, v0.4.0 does not work. I'm unsure as to why, but I'll try to look into it. ## Screenshots: As of v0.4.0, the timestamp shows up a bit different compared to earlier versions. ### Without chat (beginning of clip)  ### With chat 

// ==UserScript== // @name Twitch Clips - Show date & time // @version 0.4.0 // @description Displays the actual date & time of when a clip was created, instead of the useless "xxx days/months/weeks ago" // @author Decicus // @updateURL https://gist.github.com/Decicus/ec4745e680e06cfff5b1fa0a53fcff72/raw/twitch-clips-datetime.user.js // @downloadURL https://gist.github.com/Decicus/ec4745e680e06cfff5b1fa0a53fcff72/raw/twitch-clips-datetime.user.js // @homepageURL https://gist.github.com/Decicus/ec4745e680e06cfff5b1fa0a53fcff72 // @icon https://i.alex.lol/2021-08-29_PmO4zo.png // @match https://clips.twitch.tv/* // @license MIT // ==/UserScript== async function fetchClip() { 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.querySelector('.clips-sidebar-info'); const layoutClass = box.classList[0]; const textElement = document.querySelector('span[class*="CoreText"]'); const textClass = textElement.classList[0]; const element = document.createElement('div'); element.className = layoutClass; element.setAttribute('style', 'text-align: center; margin-top: 1em;'); element.innerHTML = `<span class="${textClass}"><strong>Clip created:</strong> ${dateAndTime}</span>`; box.insertAdjacentElement('afterbegin', element); } /** * Observe the DOM until we find the element we're interested in. * Once complete, disconnect the observer and call the `fetchClip()` function which actually inserts the * timestamp into the DOM. */ function observerHandler(mutations, observer) { const textElement = document.querySelector('span[class*="CoreText"]'); if (!textElement) { return; } fetchClip(); observer.disconnect(); } window.addEventListener('DOMContentLoaded', function() { const observer = new MutationObserver(observerHandler); observer.observe(document, { attributes: false, childList: true, characterData: false, subtree: true, }); });