A rewrite of Poly+, my quality-of-life browser extension for Polytoria. Built entirely fresh using the WXT extension framework, Typescript, and with added better overall code quality.
extension
1/**
2 * Detects any username mentions in a forum post and turns them into clickable links.
3 */
4export function forumMentions() {
5 const textBlocks = document.querySelectorAll('p:not(.text-muted):not(.mb-0)');
6 const regex = /@([\w.]+)/g;
7
8 textBlocks.forEach(text => {
9 const walker = document.createTreeWalker(text, NodeFilter.SHOW_TEXT, null);
10 let node;
11
12 while ((node = walker.nextNode())) {
13 const fragment = document.createDocumentFragment();
14 let lastIndex = 0;
15 let match;
16
17 while ((match = regex.exec(node.nodeValue!)) !== null) {
18 const username = match[1];
19 const link = document.createElement('a');
20 link.href = `/u/${username}`;
21 link.className = 'polyplus-mention';
22 link.textContent = match[0];
23
24 fragment.appendChild(document.createTextNode(node.nodeValue!.substring(lastIndex, match.index)));
25 fragment.appendChild(link);
26 lastIndex = match.index + match[0].length;
27 }
28
29 fragment.appendChild(document.createTextNode(node.nodeValue!.substring(lastIndex)));
30 node.parentNode!.replaceChild(fragment, node);
31 }
32 });
33}