☰

Mastodon View in Home Instance

Show a Mastodon-style banner to view profiles on your own instance (avoids broken post links)

  1. // ==UserScript==
  2. // @name         Mastodon View in Home Instance
  3. // @version      1.5
  4. // @description  Show a Mastodon-style banner to view profiles on your own instance (avoids broken post links)
  5. // @author       https://mastodon.online/@prvrtl
  6. // @match        https://*/@*
  7. // @grant        none
  8. // @namespace https://greasyfork.org/users/1458606
  9. // ==/UserScript==
  10.  
  11. (function () {
  12.     const homeInstance = "mastodon.online";
  13.     const currentHost = window.location.hostname;
  14.  
  15.     if (currentHost === homeInstance) return;
  16.  
  17.     const path = window.location.pathname;
  18.     const usernameMatch = path.match(/^\/@([^\/]+)/); // only username part
  19.     if (!usernameMatch) return;
  20.  
  21.     const username = usernameMatch[1];
  22.     const federatedHost = currentHost.replace(/^www\./, "");
  23.     const redirectUrl = `https://${homeInstance}/@${username}@${federatedHost}`;
  24.  
  25.     // Create styled banner
  26.     const banner = document.createElement("div");
  27.     banner.style.cssText = `
  28.         position: fixed;
  29.         top: 0;
  30.         left: 0;
  31.         right: 0;
  32.         background: #282c37;
  33.         color: white;
  34.         padding: 12px 20px;
  35.         font-family: system-ui, BlinkMacSystemFont, sans-serif;
  36.         font-size: 15px;
  37.         z-index: 9999;
  38.         display: flex;
  39.         justify-content: space-between;
  40.         align-items: center;
  41.         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  42.         border-bottom: 1px solid #444;
  43.     `;
  44.  
  45.     const text = document.createElement("div");
  46.     text.innerHTML = `🌍 You're viewing a Mastodon profile on <strong>${currentHost}</strong>.`;
  47.  
  48.     const button = document.createElement("button");
  49.     button.textContent = `Open in ${homeInstance}`;
  50.     button.style.cssText = `
  51.         background: #6364ff;
  52.         color: white;
  53.         border: none;
  54.         padding: 8px 16px;
  55.         font-weight: 600;
  56.         font-size: 14px;
  57.         border-radius: 6px;
  58.         cursor: pointer;
  59.         transition: background 0.2s ease;
  60.         box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
  61.     `;
  62.     button.addEventListener("mouseover", () => {
  63.         button.style.background = "#5253e6";
  64.     });
  65.     button.addEventListener("mouseout", () => {
  66.         button.style.background = "#6364ff";
  67.     });
  68.     button.addEventListener("click", () => {
  69.         window.location.href = redirectUrl;
  70.     });
  71.  
  72.     banner.appendChild(text);
  73.     banner.appendChild(button);
  74.     document.body.style.paddingTop = "64px";
  75.     document.body.prepend(banner);
  76. })();