this post was submitted on 21 Jun 2023
16 points (100.0% liked)

Lemmy Plugins and Userscripts

375 readers
1 users here now

A general repository for user scripts and plugins used to enhance the Lemmy browsing experience.

Post (or cross-post) your favorite Lemmy enhancements here!

General posting suggestions:

Thanks!

founded 1 year ago
MODERATORS
 

Hey folks! I hope you're having a lovely day. I was using the "Lemmings fix" by @[email protected] 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:

Here's the code (modify localLemmy before using):

// ==UserScript==
// @name         Lemmings Fix
// @version      1.1
// @description  Redirect to your local Lemmy instance
// @author       @lemmy.world/u/soy, @lemmy.world/u/fperson
// @match        https://*/c/*
// @icon         https://join-lemmy.org/static/assets/icons/favicon.svg
// ==/UserScript==

(function () {
  'use strict';

  const localLemmy = 'lemmy.world';
  const isLemmy = document.head.querySelector('[name~=Description][content]').content === 'Lemmy';

  if (!isLemmy) {
    return;
  }

  // Get URL info
  const splitUrl = location.href.split('/');
  const instanceUrl = splitUrl[2];
  const community = splitUrl[4];
  let localizedUrl = `https://${localLemmy}/c/${community}`;
  if (!community.includes('@')) {
    localizedUrl = `${localizedUrl}@${instanceUrl}`;
  }

  // Create redirect button if not on local
  if (instanceUrl !== localLemmy) {
    var zNode = document.createElement('a'); // create anchor tag
    zNode.href = localizedUrl; // set the href
    zNode.textContent = `Open in ${localLemmy}`; // set the text
    zNode.id = 'localizeContainer'; // set the id
    // update styles for a more modern look
    zNode.style = `
          display: inline-block;
          cursor: pointer;
          padding: 5px 20px;
          background-color: #007BFF;
          color: #FFF;
          text-decoration: none;
          border-radius: 5px;
          border: none;
          box-shadow: 0 2px 5px rgba(0,0,0,0.15);
          font-size: 1rem;
          font-weight: bold;
          transition: background-color 0.3s ease;
          top: 5rem;
          right: 1rem;
          z-index: 1000;
          `;
    zNode.addEventListener('mouseenter', function () {
      this.style.backgroundColor = '#0056b3';
    });
    zNode.addEventListener('mouseleave', function () {
      this.style.backgroundColor = '#007BFF';
    });

    function addButtonIfNotPresent(node) {
      const link = node.querySelector('a[href*="/create_post"]');
      if (link && !link.parentNode.querySelector('#localizeContainer')) {
        var zNode = document.createElement('a');
        zNode.href = localizedUrl;
        zNode.textContent = `Open in ${localLemmy}`;
        zNode.id = 'localizeContainer';
        zNode.style = `
    display: inline-block;
    cursor: pointer;
    padding: 5px 20px;
    background-color: #007BFF;
    color: #FFF;
    text-decoration: none;
    border-radius: 5px;
    border: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    font-size: 1rem;
    font-weight: bold;
    transition: background-color 0.3s ease;
    top: 5rem;
    right: 1rem;
    z-index: 1000;
  `;
        zNode.addEventListener('mouseenter', function () {
          this.style.backgroundColor = '#0056b3';
        });
        zNode.addEventListener('mouseleave', function () {
          this.style.backgroundColor = '#007BFF';
        });

        link.parentNode.appendChild(zNode);
      }
    }

    const observer = new MutationObserver(function (mutationsList, observer) {
      for (let mutation of mutationsList) {
        if (mutation.type === 'childList') {
          mutation.addedNodes.forEach((node) => {
            if (node.nodeType === 1) {
              addButtonIfNotPresent(node);
            }
          });
        }
      }
    });

    // Options for the observer (which mutations to observe)
    const config = { childList: true, subtree: true };

    // Target node to observe
    const targetNode = document.body;

    // Start observing the target node for configured mutations
    observer.observe(targetNode, config);

    // Run initial check
    document.querySelectorAll('.card-body').forEach(addButtonIfNotPresent);
  }
})();
you are viewing a single comment's thread
view the rest of the comments
[–] [email protected] 5 points 1 year ago (5 children)

Lemmy works by instances, every instance federates to every other instance in theory. So if you were to visit a post on lemmy.ml or lemmy.world, but your account is on sh.itjust.works, you kinda want to be redirected to the same post, but on your "home" instance (in this example, sh.itjust.works). That's what this UserScript is for.

[–] [email protected] 1 points 1 year ago (3 children)

Does this work for an individual or does my home instance have to add this?

[–] [email protected] 3 points 1 year ago (1 children)

It's a user script, usually you install those with browser extensions like Tampermonkey (for Firefox) or Greasemonkey (Chrome, though it may be deprecated now I haven't used Chrome in forever for privacy reasons).

The scripts are run purely locally. It's up to the individual to install them, though lemmy devs might add a feature to redirect to a preferred instance in the future, who knows ?

[–] fperson 2 points 1 year ago

There’s an open-source and privacy-oriented userscript manager for Chrome(ium) called ViolentMonkey. Highly recommended using that!

load more comments (1 replies)
load more comments (2 replies)