[UserScript] Yet another redirector (hopefully, a better one!)
Hey folks! I hope you’re having a lovely day. I was using the “Lemmings fix” by @soy for a while now and have been improving it to tailor my needs.
This one
- works even when browsing remote instances on remote instances
- adds the redirect button to the “sidebar”/community card
- works on mobile, too
Here are a couple of screenshots:
https://lemmy.world/pictrs/image/a4d2b1ad-774f-44e9-adb7-289ee3025dc3.pnghttps://lemmy.world/pictrs/image/9dc24cfc-ca1e-4d65-a2bf-a311aba2d401.png
Here’s the code (modify localLemmy before using):
<span style="font-style:italic;color:#969896;">// ==UserScript==
</span><span style="font-style:italic;color:#969896;">// @name Lemmings Fix
</span><span style="font-style:italic;color:#969896;">// @version 1.1
</span><span style="font-style:italic;color:#969896;">// @description Redirect to your local Lemmy instance
</span><span style="font-style:italic;color:#969896;">// @author @lemmy.world/u/soy, @lemmy.world/u/fperson
</span><span style="font-style:italic;color:#969896;">// @match https://*/c/*
</span><span style="font-style:italic;color:#969896;">// @icon https://join-lemmy.org/static/assets/icons/favicon.svg
</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="color:#323232;"> </span><span style="font-weight:bold;color:#a71d5d;">const </span><span style="color:#323232;">localLemmy </span><span style="font-weight:bold;color:#a71d5d;">= </span><span style="color:#183691;">'lemmy.world'</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:#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:#183691;">'Lemmy'</span><span style="color:#323232;">;
</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="color:#323232;"> </span><span style="font-weight:bold;color:#a71d5d;">return</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;">// Get URL info
</span><span style="color:#323232;"> </span><span style="font-weight:bold;color:#a71d5d;">const </span><span style="color:#323232;">splitUrl </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:#323232;"> </span><span style="font-weight:bold;color:#a71d5d;">const </span><span style="color:#323232;">instanceUrl </span><span style="font-weight:bold;color:#a71d5d;">= </span><span style="color:#323232;">splitUrl[</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;">community </span><span style="font-weight:bold;color:#a71d5d;">= </span><span style="color:#323232;">splitUrl[</span><span style="color:#0086b3;">4</span><span style="color:#323232;">];
</span><span style="color:#323232;"> </span><span style="font-weight:bold;color:#a71d5d;">let </span><span style="color:#323232;">localizedUrl </span><span style="font-weight:bold;color:#a71d5d;">= </span><span style="color:#183691;">`https://</span><span style="color:#323232;">${localLemmy}</span><span style="color:#183691;">/c/</span><span style="color:#323232;">${community}</span><span style="color:#183691;">`</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;">community.includes(</span><span style="color:#183691;">'@'</span><span style="color:#323232;">)) {
</span><span style="color:#323232;"> localizedUrl </span><span style="font-weight:bold;color:#a71d5d;">= </span><span style="color:#183691;">`</span><span style="color:#323232;">${localizedUrl}</span><span style="color:#183691;">@</span><span style="color:#323232;">${instanceUrl}</span><span style="color:#183691;">`</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;">// Create redirect button if not on local
</span><span style="color:#323232;"> </span><span style="font-weight:bold;color:#a71d5d;">if </span><span style="color:#323232;">(instanceUrl </span><span style="font-weight:bold;color:#a71d5d;">!== </span><span style="color:#323232;">localLemmy) {
</span><span style="color:#323232;"> </span><span style="font-weight:bold;color:#a71d5d;">var </span><span style="color:#323232;">zNode </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;">'a'</span><span style="color:#323232;">); </span><span style="font-style:italic;color:#969896;">// create anchor tag
</span><span style="color:#323232;"> zNode.href </span><span style="font-weight:bold;color:#a71d5d;">= </span><span style="color:#323232;">localizedUrl; </span><span style="font-style:italic;color:#969896;">// set the href
</span><span style="color:#323232;"> zNode.textContent </span><span style="font-weight:bold;color:#a71d5d;">= </span><span style="color:#183691;">`Open in </span><span style="color:#323232;">${localLemmy}</span><span style="color:#183691;">`</span><span style="color:#323232;">; </span><span style="font-style:italic;color:#969896;">// set the text
</span><span style="color:#323232;"> zNode.id </span><span style="font-weight:bold;color:#a71d5d;">= </span><span style="color:#183691;">'localizeContainer'</span><span style="color:#323232;">; </span><span style="font-style:italic;color:#969896;">// set the id
</span><span style="color:#323232;"> </span><span style="font-style:italic;color:#969896;">// update styles for a more modern look
</span><span style="color:#323232;"> zNode.style </span><span style="font-weight:bold;color:#a71d5d;">= </span><span style="color:#183691;">`
</span><span style="color:#183691;"> display: inline-block;
</span><span style="color:#183691;"> cursor: pointer;
</span><span style="color:#183691;"> padding: 5px 20px;
</span><span style="color:#183691;"> background-color: #007BFF;
</span><span style="color:#183691;"> color: #FFF;
</span><span style="color:#183691;"> text-decoration: none;
</span><span style="color:#183691;"> border-radius: 5px;
</span><span style="color:#183691;"> border: none;
</span><span style="color:#183691;"> box-shadow: 0 2px 5px rgba(0,0,0,0.15);
</span><span style="color:#183691;"> font-size: 1rem;
</span><span style="color:#183691;"> font-weight: bold;
</span><span style="color:#183691;"> transition: background-color 0.3s ease;
</span><span style="color:#183691;"> top: 5rem;
</span><span style="color:#183691;"> right: 1rem;
</span><span style="color:#183691;"> z-index: 1000;
</span><span style="color:#183691;"> `</span><span style="color:#323232;">;
</span><span style="color:#323232;"> zNode.addEventListener(</span><span style="color:#183691;">'mouseenter'</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:#ed6a43;">this</span><span style="color:#323232;">.style.backgroundColor </span><span style="font-weight:bold;color:#a71d5d;">= </span><span style="color:#183691;">'#0056b3'</span><span style="color:#323232;">;
</span><span style="color:#323232;"> });
</span><span style="color:#323232;"> zNode.addEventListener(</span><span style="color:#183691;">'mouseleave'</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:#ed6a43;">this</span><span style="color:#323232;">.style.backgroundColor </span><span style="font-weight:bold;color:#a71d5d;">= </span><span style="color:#183691;">'#007BFF'</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;">function </span><span style="font-weight:bold;color:#795da3;">addButtonIfNotPresent</span><span style="color:#323232;">(node) {
</span><span style="color:#323232;"> </span><span style="font-weight:bold;color:#a71d5d;">const </span><span style="color:#323232;">link </span><span style="font-weight:bold;color:#a71d5d;">= </span><span style="color:#323232;">node.querySelector(</span><span style="color:#183691;">'a[href*="/create_post"]'</span><span style="color:#323232;">);
</span><span style="color:#323232;"> </span><span style="font-weight:bold;color:#a71d5d;">if </span><span style="color:#323232;">(link </span><span style="font-weight:bold;color:#a71d5d;">&& !</span><span style="color:#323232;">link.parentNode.querySelector(</span><span style="color:#183691;">'#localizeContainer'</span><span style="color:#323232;">)) {
</span><span style="color:#323232;"> </span><span style="font-weight:bold;color:#a71d5d;">var </span><span style="color:#323232;">zNode </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;">'a'</span><span style="color:#323232;">);
</span><span style="color:#323232;"> zNode.href </span><span style="font-weight:bold;color:#a71d5d;">= </span><span style="color:#323232;">localizedUrl;
</span><span style="color:#323232;"> zNode.textContent </span><span style="font-weight:bold;color:#a71d5d;">= </span><span style="color:#183691;">`Open in </span><span style="color:#323232;">${localLemmy}</span><span style="color:#183691;">`</span><span style="color:#323232;">;
</span><span style="color:#323232;"> zNode.id </span><span style="font-weight:bold;color:#a71d5d;">= </span><span style="color:#183691;">'localizeContainer'</span><span style="color:#323232;">;
</span><span style="color:#323232;"> zNode.style </span><span style="font-weight:bold;color:#a71d5d;">= </span><span style="color:#183691;">`
</span><span style="color:#183691;"> display: inline-block;
</span><span style="color:#183691;"> cursor: pointer;
</span><span style="color:#183691;"> padding: 5px 20px;
</span><span style="color:#183691;"> background-color: #007BFF;
</span><span style="color:#183691;"> color: #FFF;
</span><span style="color:#183691;"> text-decoration: none;
</span><span style="color:#183691;"> border-radius: 5px;
</span><span style="color:#183691;"> border: none;
</span><span style="color:#183691;"> box-shadow: 0 2px 5px rgba(0,0,0,0.15);
</span><span style="color:#183691;"> font-size: 1rem;
</span><span style="color:#183691;"> font-weight: bold;
</span><span style="color:#183691;"> transition: background-color 0.3s ease;
</span><span style="color:#183691;"> top: 5rem;
</span><span style="color:#183691;"> right: 1rem;
</span><span style="color:#183691;"> z-index: 1000;
</span><span style="color:#183691;"> `</span><span style="color:#323232;">;
</span><span style="color:#323232;"> zNode.addEventListener(</span><span style="color:#183691;">'mouseenter'</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:#ed6a43;">this</span><span style="color:#323232;">.style.backgroundColor </span><span style="font-weight:bold;color:#a71d5d;">= </span><span style="color:#183691;">'#0056b3'</span><span style="color:#323232;">;
</span><span style="color:#323232;"> });
</span><span style="color:#323232;"> zNode.addEventListener(</span><span style="color:#183691;">'mouseleave'</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:#ed6a43;">this</span><span style="color:#323232;">.style.backgroundColor </span><span style="font-weight:bold;color:#a71d5d;">= </span><span style="color:#183691;">'#007BFF'</span><span style="color:#323232;">;
</span><span style="color:#323232;"> });
</span><span style="color:#323232;">
</span><span style="color:#323232;"> link.parentNode.</span><span style="color:#0086b3;">appendChild</span><span style="color:#323232;">(zNode);
</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;">observer </span><span style="font-weight:bold;color:#a71d5d;">= new </span><span style="color:#323232;">MutationObserver(</span><span style="font-weight:bold;color:#a71d5d;">function </span><span style="color:#323232;">(mutationsList, observer) {
</span><span style="color:#323232;"> </span><span style="font-weight:bold;color:#a71d5d;">for </span><span style="color:#323232;">(</span><span style="font-weight:bold;color:#a71d5d;">let </span><span style="color:#323232;">mutation </span><span style="font-weight:bold;color:#a71d5d;">of </span><span style="color:#323232;">mutationsList) {
</span><span style="color:#323232;"> </span><span style="font-weight:bold;color:#a71d5d;">if </span><span style="color:#323232;">(mutation.type </span><span style="font-weight:bold;color:#a71d5d;">=== </span><span style="color:#183691;">'childList'</span><span style="color:#323232;">) {
</span><span style="color:#323232;"> mutation.addedNodes.forEach((node) </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;">if </span><span style="color:#323232;">(node.nodeType </span><span style="font-weight:bold;color:#a71d5d;">=== </span><span style="color:#0086b3;">1</span><span style="color:#323232;">) {
</span><span style="color:#323232;"> addButtonIfNotPresent(node);
</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="color:#323232;">
</span><span style="color:#323232;"> </span><span style="font-style:italic;color:#969896;">// Options for the observer (which mutations to observe)
</span><span style="color:#323232;"> </span><span style="font-weight:bold;color:#a71d5d;">const </span><span style="color:#323232;">config </span><span style="font-weight:bold;color:#a71d5d;">= </span><span style="color:#323232;">{ childList: </span><span style="color:#0086b3;">true</span><span style="color:#323232;">, subtree: </span><span style="color:#0086b3;">true </span><span style="color:#323232;">};
</span><span style="color:#323232;">
</span><span style="color:#323232;"> </span><span style="font-style:italic;color:#969896;">// Target node to observe
</span><span style="color:#323232;"> </span><span style="font-weight:bold;color:#a71d5d;">const </span><span style="color:#323232;">targetNode </span><span style="font-weight:bold;color:#a71d5d;">= </span><span style="color:#0086b3;">document</span><span style="color:#323232;">.body;
</span><span style="color:#323232;">
</span><span style="color:#323232;"> </span><span style="font-style:italic;color:#969896;">// Start observing the target node for configured mutations
</span><span style="color:#323232;"> observer.observe(targetNode, config);
</span><span style="color:#323232;">
</span><span style="color:#323232;"> </span><span style="font-style:italic;color:#969896;">// Run initial check
</span><span style="color:#323232;"> </span><span style="color:#0086b3;">document</span><span style="color:#323232;">.querySelectorAll(</span><span style="color:#183691;">'.card-body'</span><span style="color:#323232;">).forEach(addButtonIfNotPresent);
</span><span style="color:#323232;"> }
</span><span style="color:#323232;">})();
</span>
Add comment