bitvest-chat-links.js

// to use this, add an extension that allows you to run custom JS on a site. some examples are included below for Chrome and Firefox
// but you should be able to find something similar in whatever browser you're running.

// User JavaScript and CSS (Chrome)
// https://chrome.google.com/webstore/detail/user-javascript-and-css

// Tampermonkey (Chrome)
// https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo?hl=en

// Tampermonkey (Firefox)
// https://addons.mozilla.org/en-US/firefox/addon/tampermonkey

const regex = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,4}\b([-a-zA-Z0-9@:%_\+.~#?&\/\/=]*)/gm;
const subst = `<a href="$&" target="_blank">$&</a>`;

$(document).on('DOMNodeInserted', function(e) {
	// the element that was inserted
	var element = $(e.target);
	
	// check and see if the element that was added is a message in chat, they are
	// divs with the class msg
	var isMsg = element.hasClass('msg');
	if (!isMsg) return;
	
	// before we update the message's html we add the msg-link class since
	// this event will trigger again and we can ignore it since it's been updated already
	var ignore = element.hasClass('msg-link');
	if (ignore) return;
	
	var message = element.html();
	
	// use regex to check and see if the message contains a link
	var match = regex.test(message);
	if (!match) return;
	
	// the new html
	var updatedMessage = message.replace(regex, subst);
	
	// before updating the element's html, add the msg-link class so we can ignore the event
	// when it's raised
	element.addClass('msg-link');
	
	// update the element's html with the formatted link
	element.html(updatedMessage);
	
	var id = element.attr('id');
	console.log(`Formatted chat message #${id}.`);
});