[Userscript] Hover Cards for users, get info without opening their profile
![[Userscript] Hover Cards for users, get info without opening their profile](https://sh.itjust.works/pictrs/image/07ad291d-7fe6-469c-b6c9-a939fb364944.png){kind=link}
Wanted to do this for a while. Did it today instead of sleeping.
Screenshot:
https://sh.itjust.works/pictrs/image/07ad291d-7fe6-469c-b6c9-a939fb364944.png
You can install it from here: greasyfork.org/en/…/468948-user-details-on-hover
Link to GitHub repo: github.com/lemmygod/lemmy-hovercards/tree/main
Or you can copy-paste the following code:
::: spoiler click here to view code.
<span style="font-style:italic;color:#969896;">// ==UserScript==
</span><span style="font-style:italic;color:#969896;">// @name User Details on Hover
</span><span style="font-style:italic;color:#969896;">// @namespace http://tampermonkey.net/
</span><span style="font-style:italic;color:#969896;">// @version 0.12
</span><span style="font-style:italic;color:#969896;">// @description Show user details on hover
</span><span style="font-style:italic;color:#969896;">// @author You
</span><span style="font-style:italic;color:#969896;">// @match *://*/*
</span><span style="font-style:italic;color:#969896;">// @grant none
</span><span style="font-style:italic;color:#969896;">// ==/UserScript==
</span><span style="color:#323232;">
</span><span style="color:#323232;">(</span><span style="font-weight:bold;color:#a71d5d;">function </span><span style="color:#323232;">() {
</span><span style="color:#323232;"> </span><span style="color:#183691;">"use strict"</span><span style="color:#323232;">;
</span><span style="color:#323232;"> </span><span style="font-weight:bold;color:#a71d5d;">const </span><span style="color:#323232;">isLemmy </span><span style="font-weight:bold;color:#a71d5d;">=
</span><span style="color:#323232;"> </span><span style="color:#0086b3;">document</span><span style="color:#323232;">.head.querySelector(</span><span style="color:#183691;">"[name~=Description][content]"</span><span style="color:#323232;">).content </span><span style="font-weight:bold;color:#a71d5d;">===
</span><span style="color:#323232;"> </span><span style="color:#183691;">"Lemmy"</span><span style="color:#323232;">;
</span><span style="color:#323232;"> </span><span style="font-weight:bold;color:#a71d5d;">if </span><span style="color:#323232;">(</span><span style="font-weight:bold;color:#a71d5d;">!</span><span style="color:#323232;">isLemmy) </span><span style="font-weight:bold;color:#a71d5d;">return</span><span style="color:#323232;">;
</span><span style="color:#323232;"> </span><span style="font-style:italic;color:#969896;">// Inject styles for the user card
</span><span style="color:#323232;"> </span><span style="font-weight:bold;color:#a71d5d;">function </span><span style="font-weight:bold;color:#795da3;">main</span><span style="color:#323232;">() {
</span><span style="color:#323232;"> </span><span style="font-weight:bold;color:#a71d5d;">const </span><span style="color:#323232;">style </span><span style="font-weight:bold;color:#a71d5d;">= </span><span style="color:#0086b3;">document</span><span style="color:#323232;">.</span><span style="color:#0086b3;">createElement</span><span style="color:#323232;">(</span><span style="color:#183691;">"style"</span><span style="color:#323232;">);
</span><span style="color:#323232;"> style.innerHTML </span><span style="font-weight:bold;color:#a71d5d;">= </span><span style="color:#183691;">`
</span><span style="color:#183691;"> .user-card {
</span><span style="color:#183691;"> position: absolute;
</span><span style="color:#183691;"> display: none;
</span><span style="color:#183691;"> width: 350px;
</span><span style="color:#183691;"> background-color: #242424;
</span><span style="color:#183691;"> color: white;
</span><span style="color:#183691;"> padding: 15px;
</span><span style="color:#183691;"> border-radius: 10px;
</span><span style="color:#183691;"> box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
</span><span style="color:#183691;"> z-index: 1000;
</span><span style="color:#183691;"> grid-gap: 10px;
</span><span style="color:#183691;"> font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
</span><span style="color:#183691;"> line-height: 1.4;
</span><span style="color:#183691;"> }
</span><span style="color:#183691;">
</span><span style="color:#183691;"> .user-card .header {
</span><span style="color:#183691;"> display: flex;
</span><span style="color:#183691;"> align-items: center;
</span><span style="color:#183691;"> margin-bottom: 10px;
</span><span style="color:#183691;"> }
</span><span style="color:#183691;">
</span><span style="color:#183691;"> .user-card img {
</span><span style="color:#183691;"> width: 80px;
</span><span style="color:#183691;"> height: 80px;
</span><span style="color:#183691;"> object-fit: cover;
</span><span style="color:#183691;"> border-radius: 50%;
</span><span style="color:#183691;"> margin-right: 15px;
</span><span style="color:#183691;"> }
</span><span style="color:#183691;">
</span><span style="color:#183691;"> .user-card .username {
</span><span style="color:#183691;"> font-size: 1.3em;
</span><span style="color:#183691;"> font-weight: bold;
</span><span style="color:#183691;"> }
</span><span style="color:#183691;">
</span><span style="color:#183691;"> .user-card .instance {
</span><span style="color:#183691;"> font-size: 0.8em;
</span><span style="color:#183691;"> color: #888;
</span><span style="color:#183691;"> }
</span><span style="color:#183691;">
</span><span style="color:#183691;"> .user-card .body {
</span><span style="color:#183691;"> display: grid;
</span><span style="color:#183691;"> grid-template-columns: 1fr 1fr;
</span><span style="color:#183691;"> grid-gap: 10px;
</span><span style="color:#183691;"> }
</span><span style="color:#183691;">
</span><span style="color:#183691;"> .user-card .key {
</span><span style="color:#183691;"> font-weight: bold;
</span><span style="color:#183691;"> }
</span><span style="color:#183691;">
</span><span style="color:#183691;"> .user-card .value {
</span><span style="color:#183691;"> color: #ddd;
</span><span style="color:#183691;"> margin-top: 10px;
</span><span style="color:#183691;"> }
</span><span style="color:#183691;">
</span><span style="color:#183691;"> .user-card .bio {
</span><span style="color:#183691;"> grid-column: 1 / -1;
</span><span style="color:#183691;"> font-style: italic;
</span><span style="color:#183691;"> }`</span><span style="color:#323232;">;
</span><span style="color:#323232;"> </span><span style="color:#0086b3;">document</span><span style="color:#323232;">.head.</span><span style="color:#0086b3;">appendChild</span><span style="color:#323232;">(style);
</span><span style="color:#323232;">
</span><span style="color:#323232;"> </span><span style="font-style:italic;color:#969896;">// Create the user card
</span><span style="color:#323232;"> </span><span style="font-weight:bold;color:#a71d5d;">const </span><span style="color:#323232;">userCard </span><span style="font-weight:bold;color:#a71d5d;">= </span><span style="color:#0086b3;">document</span><span style="color:#323232;">.</span><span style="color:#0086b3;">createElement</span><span style="color:#323232;">(</span><span style="color:#183691;">"div"</span><span style="color:#323232;">);
</span><span style="color:#323232;"> userCard.classList.</span><span style="color:#0086b3;">add</span><span style="color:#323232;">(</span><span style="color:#183691;">"user-card"</span><span style="color:#323232;">);
</span><span style="color:#323232;"> userCard.id </span><span style="font-weight:bold;color:#a71d5d;">= </span><span style="color:#183691;">"user-card"</span><span style="color:#323232;">;
</span><span style="color:#323232;"> </span><span style="color:#0086b3;">document</span><span style="color:#323232;">.body.</span><span style="color:#0086b3;">appendChild</span><span style="color:#323232;">(userCard);
</span><span style="color:#323232;">
</span><span style="color:#323232;"> </span><span style="font-weight:bold;color:#a71d5d;">let </span><span style="color:#323232;">timer;
</span><span style="color:#323232;"> </span><span style="font-style:italic;color:#969896;">// Find all user links
</span><span style="color:#323232;"> </span><span style="font-weight:bold;color:#a71d5d;">const </span><span style="color:#323232;">userLinks </span><span style="font-weight:bold;color:#a71d5d;">= </span><span style="color:#0086b3;">document</span><span style="color:#323232;">.querySelectorAll(</span><span style="color:#183691;">'a.text-info[href*="/u/"]'</span><span style="color:#323232;">);
</span><span style="color:#323232;"> userLinks.forEach((userLink) </span><span style="font-weight:bold;color:#a71d5d;">=> </span><span style="color:#323232;">{
</span><span style="color:#323232;"> userLink.</span><span style="color:#0086b3;">setAttribute</span><span style="color:#323232;">(</span><span style="color:#183691;">"title"</span><span style="color:#323232;">, </span><span style="color:#183691;">""</span><span style="color:#323232;">);
</span><span style="color:#323232;"> </span><span style="font-style:italic;color:#969896;">// When mouse enters, show the user card
</span><span style="color:#323232;"> userLink.addEventListener(</span><span style="color:#183691;">"mouseenter"</span><span style="color:#323232;">, </span><span style="font-weight:bold;color:#a71d5d;">async </span><span style="color:#323232;">(event) </span><span style="font-weight:bold;color:#a71d5d;">=> </span><span style="color:#323232;">{
</span><span style="color:#323232;"> </span><span style="font-weight:bold;color:#a71d5d;">const </span><span style="color:#323232;">username </span><span style="font-weight:bold;color:#a71d5d;">= </span><span style="color:#323232;">userLink.href.split(</span><span style="color:#183691;">"/u/"</span><span style="color:#323232;">)[</span><span style="color:#0086b3;">1</span><span style="color:#323232;">];
</span><span style="color:#323232;">
</span><span style="color:#323232;"> </span><span style="font-style:italic;color:#969896;">// Fetch user details
</span><span style="color:#323232;"> </span><span style="font-weight:bold;color:#a71d5d;">const </span><span style="color:#323232;">userInfo </span><span style="font-weight:bold;color:#a71d5d;">= </span><span style="color:#323232;">await getUserInfo(username);
</span><span style="color:#323232;">
</span><span style="color:#323232;"> </span><span style="font-style:italic;color:#969896;">// Format the date
</span><span style="color:#323232;"> </span><span style="font-weight:bold;color:#a71d5d;">const </span><span style="color:#323232;">date </span><span style="font-weight:bold;color:#a71d5d;">= new </span><span style="color:#0086b3;">Date</span><span style="color:#323232;">(userInfo.creationDate);
</span><span style="color:#323232;"> </span><span style="font-weight:bold;color:#a71d5d;">const </span><span style="color:#323232;">formattedDate </span><span style="font-weight:bold;color:#a71d5d;">= </span><span style="color:#183691;">`</span><span style="color:#323232;">${date.getFullYear()}</span><span style="color:#183691;">/</span><span style="color:#323232;">${String(
</span><span style="color:#323232;"> date.getMonth() </span><span style="font-weight:bold;color:#a71d5d;">+ </span><span style="color:#0086b3;">1
</span><span style="color:#323232;"> ).padStart(</span><span style="color:#0086b3;">2</span><span style="color:#323232;">, </span><span style="color:#183691;">"0"</span><span style="color:#323232;">)}</span><span style="color:#183691;">/</span><span style="color:#323232;">${String(date.getDate()).padStart(</span><span style="color:#0086b3;">2</span><span style="color:#323232;">, </span><span style="color:#183691;">"0"</span><span style="color:#323232;">)}</span><span style="color:#183691;">`</span><span style="color:#323232;">;
</span><span style="color:#323232;">
</span><span style="color:#323232;"> </span><span style="font-style:italic;color:#969896;">// Update the user card
</span><span style="color:#323232;"> userCard.innerHTML </span><span style="font-weight:bold;color:#a71d5d;">= </span><span style="color:#183691;">`
</span><span style="color:#183691;"> <div class="header">
</span><span style="color:#183691;"> <img src="</span><span style="color:#323232;">${
</span><span style="color:#323232;"> userInfo.profilePicture </span><span style="font-weight:bold;color:#a71d5d;">||
</span><span style="color:#323232;"> </span><span style="color:#183691;">`https://api.dicebear.com/6.x/identicon/svg?seed=</span><span style="color:#323232;">${username}</span><span style="color:#183691;">`
</span><span style="color:#323232;"> }</span><span style="color:#183691;">" alt="User avatar">
</span><span style="color:#183691;"> <div>
</span><span style="color:#183691;"> <div class="username"></span><span style="color:#323232;">${
</span><span style="color:#323232;"> userInfo.name </span><span style="font-weight:bold;color:#a71d5d;">|| </span><span style="color:#323232;">username.split(</span><span style="color:#183691;">"@"</span><span style="color:#323232;">)[</span><span style="color:#0086b3;">0</span><span style="color:#323232;">]
</span><span style="color:#323232;"> }</span><span style="color:#183691;"></div>
</span><span style="color:#183691;"> <a href="https://</span><span style="color:#323232;">${
</span><span style="color:#323232;"> userInfo.instance
</span><span style="color:#323232;"> }</span><span style="color:#183691;">/u/</span><span style="color:#323232;">${username}</span><span style="color:#183691;">" class="instance"></span><span style="color:#323232;">${username}${
</span><span style="color:#323232;"> username.indexOf(</span><span style="color:#183691;">"@"</span><span style="color:#323232;">) </span><span style="font-weight:bold;color:#a71d5d;">=== -</span><span style="color:#0086b3;">1 </span><span style="font-weight:bold;color:#a71d5d;">? </span><span style="color:#183691;">"@" </span><span style="font-weight:bold;color:#a71d5d;">+ </span><span style="color:#323232;">userInfo.instance </span><span style="font-weight:bold;color:#a71d5d;">: </span><span style="color:#183691;">""
</span><span style="color:#323232;"> }
</span><span style="color:#183691;"> </a>
</span><span style="color:#183691;"> </div>
</span><span style="color:#183691;"> </div>
</span><span style="color:#183691;"> <div class="body">
</span><span style="color:#183691;"> <div><span class="key">ID:</span> <span class="value"></span><span style="color:#323232;">${
</span><span style="color:#323232;"> userInfo.id
</span><span style="color:#323232;"> }</span><span style="color:#183691;"></span></div>
</span><span style="color:#183691;"> <div style="display:flex; flex-direction: column; gap: 3px"><span class="key">
</span><span style="color:#183691;"> <svg class="icon"><use xlink:href="/static/assets/symbols.svg#icon-cake"></use><div class="sr-only"><title>cake</title></div></svg>
</span><span style="color:#183691;"> Cake Day:</span> <span class="value"></span><span style="color:#323232;">${formattedDate}</span><span style="color:#183691;"></span></div>
</span><span style="color:#183691;"> <div><span class="key">Posts:</span> <span class="value"></span><span style="color:#323232;">${
</span><span style="color:#323232;"> userInfo.post_count
</span><span style="color:#323232;"> }</span><span style="color:#183691;"></span></div>
</span><span style="color:#183691;"> <div><span class="key">Comments:</span> <span class="value"></span><span style="color:#323232;">${
</span><span style="color:#323232;"> userInfo.comment_count
</span><span style="color:#323232;"> }</span><span style="color:#183691;"></span></div>
</span><span style="color:#183691;"> <div><span class="key">Post Score:</span> <span class="value"></span><span style="color:#323232;">${
</span><span style="color:#323232;"> userInfo.post_score
</span><span style="color:#323232;"> }</span><span style="color:#183691;"></span></div>
</span><span style="color:#183691;"> <div><span class="key">Comment Score:</span> <span class="value"></span><span style="color:#323232;">${
</span><span style="color:#323232;"> userInfo.comment_score
</span><span style="color:#323232;"> }</span><span style="color:#183691;"></span></div>
</span><span style="color:#183691;"> </span><span style="color:#323232;">${
</span><span style="color:#323232;"> userInfo.bio </span><span style="font-weight:bold;color:#a71d5d;">? </span><span style="color:#183691;">`<div class="bio"></span><span style="color:#323232;">${userInfo.bio}</span><span style="color:#183691;"></div>` </span><span style="font-weight:bold;color:#a71d5d;">: </span><span style="color:#183691;">""
</span><span style="color:#323232;"> }
</span><span style="color:#183691;"> </div>`</span><span style="color:#323232;">;
</span><span style="color:#323232;">
</span><span style="color:#323232;"> </span><span style="font-style:italic;color:#969896;">// Show the user card at the cursor
</span><span style="color:#323232;"> </span><span style="font-weight:bold;color:#a71d5d;">const </span><span style="color:#323232;">rect </span><span style="font-weight:bold;color:#a71d5d;">= </span><span style="color:#323232;">userLink.getBoundingClientRect();
</span><span style="color:#323232;"> userCard.style.left </span><span style="font-weight:bold;color:#a71d5d;">= </span><span style="color:#183691;">`</span><span style="color:#323232;">${</span><span style="color:#0086b3;">window</span><span style="color:#323232;">.pageXOffset </span><span style="font-weight:bold;color:#a71d5d;">+ </span><span style="color:#323232;">rect.left}</span><span style="color:#183691;">px`</span><span style="color:#323232;">;
</span><span style="color:#323232;"> userCard.style.top </span><span style="font-weight:bold;color:#a71d5d;">= </span><span style="color:#183691;">`</span><span style="color:#323232;">${</span><span style="color:#0086b3;">window</span><span style="color:#323232;">.pageYOffset </span><span style="font-weight:bold;color:#a71d5d;">+ </span><span style="color:#323232;">rect.bottom </span><span style="font-weight:bold;color:#a71d5d;">+ </span><span style="color:#0086b3;">5</span><span style="color:#323232;">}</span><span style="color:#183691;">px`</span><span style="color:#323232;">;
</span><span style="color:#323232;"> </span><span style="font-style:italic;color:#969896;">// setTimeout(() => {
</span><span style="color:#323232;"> </span><span style="font-weight:bold;color:#a71d5d;">if </span><span style="color:#323232;">(userLink.querySelector(</span><span style="color:#183691;">":hover"</span><span style="color:#323232;">)) {
</span><span style="color:#323232;"> userCard.style.display </span><span style="font-weight:bold;color:#a71d5d;">= </span><span style="color:#183691;">"block"</span><span style="color:#323232;">;
</span><span style="color:#323232;"> }
</span><span style="color:#323232;"> </span><span style="font-style:italic;color:#969896;">// }, 250);
</span><span style="color:#323232;"> timer </span><span style="font-weight:bold;color:#a71d5d;">= </span><span style="color:#0086b3;">setTimeout</span><span style="color:#323232;">(() </span><span style="font-weight:bold;color:#a71d5d;">=> </span><span style="color:#323232;">{
</span><span style="color:#323232;"> </span><span style="font-style:italic;color:#969896;">// check if username is not being hovered anymore after 150ms, after which point we must change display to none
</span><span style="color:#323232;"> </span><span style="font-weight:bold;color:#a71d5d;">if </span><span style="color:#323232;">(</span><span style="font-weight:bold;color:#a71d5d;">!</span><span style="color:#323232;">userLink.querySelector(</span><span style="color:#183691;">":hover"</span><span style="color:#323232;">)) {
</span><span style="color:#323232;"> userCard.style.display </span><span style="font-weight:bold;color:#a71d5d;">= </span><span style="color:#183691;">"none"</span><span style="color:#323232;">;
</span><span style="color:#323232;"> }
</span><span style="color:#323232;"> }, </span><span style="color:#0086b3;">150</span><span style="color:#323232;">);
</span><span style="color:#323232;"> });
</span><span style="color:#323232;">
</span><span style="color:#323232;"> </span><span style="font-style:italic;color:#969896;">// When mouse leaves, hide the user card after a slight delay
</span><span style="color:#323232;"> userLink.addEventListener(</span><span style="color:#183691;">"mouseleave"</span><span style="color:#323232;">, () </span><span style="font-weight:bold;color:#a71d5d;">=> </span><span style="color:#323232;">{
</span><span style="color:#323232;"> </span><span style="font-style:italic;color:#969896;">// after a slight delay, delete the node
</span><span style="color:#323232;"> timer </span><span style="font-weight:bold;color:#a71d5d;">= </span><span style="color:#0086b3;">setTimeout</span><span style="color:#323232;">(() </span><span style="font-weight:bold;color:#a71d5d;">=> </span><span style="color:#323232;">{
</span><span style="color:#323232;"> </span><span style="font-style:italic;color:#969896;">// delete the node
</span><span style="color:#323232;"> </span><span style="font-style:italic;color:#969896;">// userCard.parentElement.removeChild(userCard);
</span><span style="color:#323232;"> userCard.style.display </span><span style="font-weight:bold;color:#a71d5d;">= </span><span style="color:#183691;">"none"</span><span style="color:#323232;">;
</span><span style="color:#323232;"> }, </span><span style="color:#0086b3;">250</span><span style="color:#323232;">);
</span><span style="color:#323232;"> </span><span style="color:#0086b3;">setTimeout</span><span style="color:#323232;">(() </span><span style="font-weight:bold;color:#a71d5d;">=> </span><span style="color:#323232;">{
</span><span style="color:#323232;"> </span><span style="font-style:italic;color:#969896;">// check if both are unhovered after 260ms, and if that's the case, removeChild anyway
</span><span style="color:#323232;"> </span><span style="font-weight:bold;color:#a71d5d;">if </span><span style="color:#323232;">(</span><span style="font-weight:bold;color:#a71d5d;">!</span><span style="color:#323232;">userCard.parentElement) </span><span style="font-weight:bold;color:#a71d5d;">return</span><span style="color:#323232;">;
</span><span style="color:#323232;"> </span><span style="font-weight:bold;color:#a71d5d;">if </span><span style="color:#323232;">(</span><span style="font-weight:bold;color:#a71d5d;">!</span><span style="color:#323232;">userCard.querySelector(</span><span style="color:#183691;">":hover"</span><span style="color:#323232;">)) {
</span><span style="color:#323232;"> </span><span style="font-style:italic;color:#969896;">// userCard.parentElement.removeChild(userCard);
</span><span style="color:#323232;"> userCard.style.display </span><span style="font-weight:bold;color:#a71d5d;">= </span><span style="color:#183691;">"none"</span><span style="color:#323232;">;
</span><span style="color:#323232;"> }
</span><span style="color:#323232;"> }, </span><span style="color:#0086b3;">250</span><span style="color:#323232;">);
</span><span style="color:#323232;">
</span><span style="color:#323232;"> </span><span style="font-style:italic;color:#969896;">// timer = setTimeout(() => {
</span><span style="color:#323232;"> </span><span style="font-style:italic;color:#969896;">// userCard.style.display = "none";
</span><span style="color:#323232;"> </span><span style="font-style:italic;color:#969896;">// }, 250);
</span><span style="color:#323232;"> });
</span><span style="color:#323232;"> });
</span><span style="color:#323232;">
</span><span style="color:#323232;"> userCard.addEventListener(</span><span style="color:#183691;">"mouseenter"</span><span style="color:#323232;">, () </span><span style="font-weight:bold;color:#a71d5d;">=> </span><span style="color:#323232;">{
</span><span style="color:#323232;"> </span><span style="color:#0086b3;">clearTimeout</span><span style="color:#323232;">(timer);
</span><span style="color:#323232;"> });
</span><span style="color:#323232;">
</span><span style="color:#323232;"> userCard.addEventListener(</span><span style="color:#183691;">"mouseleave"</span><span style="color:#323232;">, () </span><span style="font-weight:bold;color:#a71d5d;">=> </span><span style="color:#323232;">{
</span><span style="color:#323232;"> userCard.style.display </span><span style="font-weight:bold;color:#a71d5d;">= </span><span style="color:#183691;">"none"</span><span style="color:#323232;">;
</span><span style="color:#323232;"> </span><span style="font-style:italic;color:#969896;">// userCard.parentElement.removeChild(userCard);
</span><span style="color:#323232;"> });
</span><span style="color:#323232;">
</span><span style="color:#323232;"> </span><span style="font-style:italic;color:#969896;">// Fetch user info from the API
</span><span style="color:#323232;"> </span><span style="font-weight:bold;color:#a71d5d;">async function </span><span style="font-weight:bold;color:#795da3;">getUserInfo</span><span style="color:#323232;">(userName) {
</span><span style="color:#323232;"> </span><span style="font-weight:bold;color:#a71d5d;">const </span><span style="color:#323232;">instanceName </span><span style="font-weight:bold;color:#a71d5d;">= </span><span style="color:#323232;">location.href.split(</span><span style="color:#183691;">"/"</span><span style="color:#323232;">)[</span><span style="color:#0086b3;">2</span><span style="color:#323232;">];
</span><span style="color:#323232;"> </span><span style="font-weight:bold;color:#a71d5d;">const </span><span style="color:#323232;">response </span><span style="font-weight:bold;color:#a71d5d;">= </span><span style="color:#323232;">await fetch(
</span><span style="color:#323232;"> </span><span style="color:#183691;">`https://</span><span style="color:#323232;">${instanceName}</span><span style="color:#183691;">/api/v3/user?username=</span><span style="color:#323232;">${userName}</span><span style="color:#183691;">`</span><span style="color:#323232;">,
</span><span style="color:#323232;"> {
</span><span style="color:#323232;"> method: </span><span style="color:#183691;">"GET"</span><span style="color:#323232;">,
</span><span style="color:#323232;"> headers: {
</span><span style="color:#323232;"> </span><span style="color:#183691;">"Content-Type"</span><span style="color:#323232;">: </span><span style="color:#183691;">"application/json"</span><span style="color:#323232;">,
</span><span style="color:#323232;"> },
</span><span style="color:#323232;"> }
</span><span style="color:#323232;"> );
</span><span style="color:#323232;"> </span><span style="font-weight:bold;color:#a71d5d;">const </span><span style="color:#323232;">user </span><span style="font-weight:bold;color:#a71d5d;">= </span><span style="color:#323232;">await response.json();
</span><span style="color:#323232;"> </span><span style="font-weight:bold;color:#a71d5d;">const </span><span style="color:#323232;">{
</span><span style="color:#323232;"> published: creationDate,
</span><span style="color:#323232;"> avatar: profilePicture,
</span><span style="color:#323232;"> bio,
</span><span style="color:#323232;"> display_name: name,
</span><span style="color:#323232;"> name: username,
</span><span style="color:#323232;"> id,
</span><span style="color:#323232;"> banner,
</span><span style="color:#323232;"> } </span><span style="font-weight:bold;color:#a71d5d;">= </span><span style="color:#323232;">user.person_view.person;
</span><span style="color:#323232;"> </span><span style="font-weight:bold;color:#a71d5d;">const </span><span style="color:#323232;">{ comment_count, comment_score, post_count, post_score } </span><span style="font-weight:bold;color:#a71d5d;">=
</span><span style="color:#323232;"> user.person_view.counts;
</span><span style="color:#323232;">
</span><span style="color:#323232;"> </span><span style="font-weight:bold;color:#a71d5d;">return </span><span style="color:#323232;">{
</span><span style="color:#323232;"> creationDate,
</span><span style="color:#323232;"> profilePicture,
</span><span style="color:#323232;"> bio,
</span><span style="color:#323232;"> name,
</span><span style="color:#323232;"> username,
</span><span style="color:#323232;"> id,
</span><span style="color:#323232;"> banner,
</span><span style="color:#323232;"> instance: instanceName,
</span><span style="color:#323232;"> comment_count,
</span><span style="color:#323232;"> comment_score,
</span><span style="color:#323232;"> post_count,
</span><span style="color:#323232;"> post_score,
</span><span style="color:#323232;"> };
</span><span style="color:#323232;"> }
</span><span style="color:#323232;"> }
</span><span style="color:#323232;">
</span><span style="color:#323232;"> </span><span style="font-style:italic;color:#969896;">// detect react changed url but didn't reload the page by checking for url change
</span><span style="color:#323232;"> </span><span style="font-weight:bold;color:#a71d5d;">var </span><span style="color:#323232;">oldHref </span><span style="font-weight:bold;color:#a71d5d;">= </span><span style="color:#0086b3;">document</span><span style="color:#323232;">.location.href;
</span><span style="color:#323232;"> setInterval(</span><span style="font-weight:bold;color:#a71d5d;">function </span><span style="color:#323232;">() {
</span><span style="color:#323232;"> </span><span style="font-weight:bold;color:#a71d5d;">if </span><span style="color:#323232;">(</span><span style="color:#0086b3;">document</span><span style="color:#323232;">.location.href </span><span style="font-weight:bold;color:#a71d5d;">!== </span><span style="color:#323232;">oldHref) {
</span><span style="color:#323232;"> oldHref </span><span style="font-weight:bold;color:#a71d5d;">= </span><span style="color:#0086b3;">document</span><span style="color:#323232;">.location.href;
</span><span style="color:#323232;"> </span><span style="font-style:italic;color:#969896;">// Wait for the page to load
</span><span style="color:#323232;"> </span><span style="color:#0086b3;">setTimeout</span><span style="color:#323232;">(main, </span><span style="color:#0086b3;">1000</span><span style="color:#323232;">);
</span><span style="color:#323232;"> </span><span style="color:#795da3;">console</span><span style="color:#323232;">.</span><span style="color:#0086b3;">log</span><span style="color:#323232;">(</span><span style="color:#183691;">"url changed!"</span><span style="color:#323232;">);
</span><span style="color:#323232;"> }
</span><span style="color:#323232;"> }, </span><span style="color:#0086b3;">500</span><span style="color:#323232;">);
</span><span style="color:#323232;">
</span><span style="color:#323232;"> </span><span style="font-style:italic;color:#969896;">// run on page load
</span><span style="color:#323232;"> main();
</span><span style="color:#323232;">})();
</span>
Add comment