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);
  }
})();
top 16 comments
sorted by: hot top controversial new old
[–] wmrch 5 points 1 year ago (1 children)

It works like a charm. But I'd suggest to add this to https://openuserjs.org/ or a similar site to make it available and update-able if necessary!

[–] fperson 1 points 1 year ago (1 children)

Thanks! Yup, I’ll add it to greasyfork later :)

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

can you do me a favor and add [UserScript] to the start of your post title? This will help distinguish it from plugins and stylus scripts.

[–] fperson 1 points 1 year ago
[–] BobbyBandwidth 3 points 1 year ago (1 children)

Pardon my ignorance, but what is a redirector in regards to Lemmy?

[–] [email protected] 5 points 1 year ago (2 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.

[–] BobbyBandwidth 1 points 1 year ago
[–] [email protected] 1 points 1 year ago (2 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!

[–] wmrch 1 points 1 year ago

It works in your browser. You need to install an extension like Greasemonkey and add this userscript.

[–] [email protected] 2 points 1 year ago* (last edited 1 year ago) (1 children)

Interesting

I see @match https://*/c/*, maybe should add to support https://*/u/* (users, like https://sh.itjust.works/u/Jakylla) for an even better redirector

[–] fperson 1 points 1 year ago

That’s a great idea, thanks! Will do :)

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

I think it’s pretty similar. But this is a bit more minimal and it’s a userscript (which I prefer over extensions for small stuff)

load more comments
view more: next ›