FlowMattic has recently added a URL shortener to its abilities, and I wondered what I could build using this. After giving it some thought, I thought, Why not use Taper Monkey to run a script that lets me shorten any URL using this? After all, I can send it via webhook and return it using response.
Our TaperMonkey Script
The first and most important part of this is setting up our Tapermonkey script. This will grab the current URL, post it to our webhook, and wait for the shortened response.
The first thing to not is that yourdomain at line 10 and 17 needs to be accurate and in both places, in addition, if you are using a bearer token, you will need to add it in to the bearer_token constant.
// ==UserScript==
// @name Send URL to Webhook for Short Link
// @namespace http://tampermonkey.net/
// @version 1.0
// @description Link Shortner
// @author Stingray13
// @match *://*/*
// @grant GM_xmlhttpRequest
// @grant GM_setClipboard
// @connect yourdomain.com
// ==/UserScript==
(function() {
'use strict';
// ------------- CONFIG -------------
const WEBHOOK_URL = 'https://yourdomain.com/webhook/capture/9GRNAkZnzk';
// OPTIONAL — leave empty "" if not needed
const BEARER_TOKEN = ""; // Example: "abc123xyzTOKEN"
function buildPayload(currentUrl) {
return { url: currentUrl };
}
function extractShortUrl(responseText) {
try {
const data = JSON.parse(responseText);
return data.shortUrl || data.short_url || data.link || null;
} catch (e) {
if (responseText && responseText.trim()) {
return responseText.trim();
}
return null;
}
}
// ------------- UI ELEMENTS -------------
const btn = document.createElement('div');
btn.textContent = '≫';
Object.assign(btn.style, {
position: 'fixed',
top: '50%',
right: '0',
transform: 'translate(0, -50%)',
zIndex: '999999',
padding: '6px 8px',
fontSize: '14px',
fontFamily: 'sans-serif',
borderRadius: '6px 0 0 6px',
border: '1px solid #444',
background: '#111',
color: '#fff',
cursor: 'pointer',
opacity: '0.5',
transition: 'opacity 0.2s, transform 0.2s'
});
btn.addEventListener('mouseenter', () => {
btn.style.opacity = '1';
btn.style.transform = 'translate(-4px, -50%)';
});
btn.addEventListener('mouseleave', () => {
btn.style.opacity = '0.5';
btn.style.transform = 'translate(0, -50%)';
});
document.body.appendChild(btn);
// Toast popup
function showToast(message, isError = false) {
const toast = document.createElement('div');
toast.textContent = message;
Object.assign(toast.style, {
position: 'fixed',
top: '10px',
left: '50%',
transform: 'translateX(-50%)',
padding: '8px 12px',
background: isError ? '#b00020' : '#1b5e20',
color: '#fff',
fontSize: '12px',
fontFamily: 'sans-serif',
borderRadius: '4px',
zIndex: '999999',
boxShadow: '0 2px 8px rgba(0,0,0,0.3)'
});
document.body.appendChild(toast);
setTimeout(() => toast.remove(), 4000);
}
// ------------- MAIN LOGIC -------------
btn.addEventListener('click', () => {
const currentUrl = window.location.href;
showToast('Sending URL to webhook...');
// Build headers dynamically
const headers = { 'Content-Type': 'application/json' };
if (BEARER_TOKEN.trim()) {
headers['Authorization'] = 'Bearer ' + BEARER_TOKEN.trim();
}
GM_xmlhttpRequest({
method: 'POST',
url: WEBHOOK_URL,
headers,
data: JSON.stringify(buildPayload(currentUrl)),
onload: function(response) {
if (response.status >= 200 && response.status < 300) {
const shortUrl = extractShortUrl(response.responseText);
if (shortUrl) {
GM_setClipboard(shortUrl);
showToast('Short link copied: ' + shortUrl);
} else {
showToast('Webhook OK but no link found.', true);
console.log('Webhook response:', response.responseText);
}
} else {
showToast('Webhook error: ' + response.status, true);
}
},
onerror: function(err) {
showToast('Network error sending to webhook.', true);
console.error('Network error', err);
}
});
});
})();
Our FlowMattic workflow:
This is actually really simple: a webhook to capture our link, we then shorten that link and return it to our Tapermonkey script, which then adds it to our clipboard.
While this workflow and script are simple, it’s powerful and it uses tools I already use and own, so its cost to me is zero and it is quite a useful deployment.
