Get a directly shareable gif on Tenor and Giphy

get-direct-link-giphy-tenor.js

// ==UserScript==
// @name         GIF Direct Link (Tenor & Giphy)
// @namespace    http://tampermonkey.net/
// @version      0.3
// @description  Add direct link buttons for Tenor and Giphy GIFs
// @match        https://tenor.com/view/*
// @match        https://giphy.com/gifs/*
// @match        https://giphy.com/embed/*
// @grant        none
// @author       pyronaur
// ==/UserScript==

(function () {
	'use strict';

	function getDirectUrl() {
		if (location.hostname === 'tenor.com') {
			const metaTag = document.querySelector('meta[itemprop="contentUrl"]');
			if (metaTag) {
				const directUrl = metaTag.getAttribute('content');
				const id = directUrl.split('/').slice(-2)[0];
				return { id, url: `https://c.tenor.com/${id}/tenor.gif`, type: 'tenor' };
			}
		} else if (location.hostname === 'giphy.com') {
			const giphyMatch = location.pathname.match(/\/(?:gifs|embed)\/(.+)/);
			if (giphyMatch) {
				const id = giphyMatch[1].split('-').pop().replace(/#.*$/, '');
				return { id, url: `https://i.giphy.com/${id}.gif`, type: 'giphy' };
			}
		}

		return null;
	}

	function addButtons() {
		const result = getDirectUrl();
		if (!result) return;

		const { id, url: directUrl, type } = result;
		console.log(`${type.charAt(0).toUpperCase() + type.slice(1)} Link`, directUrl);

		const buttonContainer = document.createElement('div');
		buttonContainer.style.position = 'fixed';
		buttonContainer.style.top = '50px';
		buttonContainer.style.right = '50px';
		buttonContainer.style.display = 'flex';
		buttonContainer.style.flexDirection = 'column';
		buttonContainer.style.gap = '10px';
		buttonContainer.style.zIndex = '9999';

		const directLink = createButton(`🔗 Open ${id}.gif`, directUrl);
		directLink.target = '_blank';

		const copyAsImageButton = createButton('📋 Copy as image', '#');
		copyAsImageButton.addEventListener('click', () => copyAsImage(directUrl, copyAsImageButton));

		buttonContainer.appendChild(directLink);
		buttonContainer.appendChild(copyAsImageButton);

		document.body.appendChild(buttonContainer);
	}

	function createButton(text, href) {
		const button = document.createElement('a');
		button.href = href;
		button.style.padding = '10px 20px';
		button.style.backgroundColor = 'rgb(0 0 0)';
		button.style.color = 'white';
		button.style.textDecoration = 'none';
		button.style.borderRadius = '5px';
		button.style.fontWeight = 'bold';
		button.textContent = text;
		return button;
	}

	function copyAsImage(url, button) {
		const title = document.querySelector('meta[property="og:title"]')?.content.split(' GIF ')[0] || '';
		const imgTag = `<img src="${url}" alt="${title}" title="${title}" />`;
		navigator.clipboard.writeText(imgTag).then(() => {
			const originalText = button.textContent;
			button.textContent = 'Copied!';
			setTimeout(() => {
				button.textContent = originalText;
			}, 3000);
		}).catch(err => {
			console.error('Failed to copy: ', err);
		});
	}

	// Run the replacement when the page loads
	window.addEventListener('load', addButtons);
})();