Install this Userscript/Addon to improve your browsing experience on TheColi... view more embeds.

boogers

boogers

cats rule, dogs drool
Supporter
Joined
Mar 11, 2022
Messages
9,167
Reputation
3,792
Daps
26,500
Reppin
#catset
did you write the greasemonkey script or did you use chatGPT to do it?

i used chatGPT to throw together some Perl a while back and it was worthless. by the time i cleaned it up enough to actually run correctly i already realized a better solution
 
B

bnew

Veteran
Joined
Nov 1, 2015
Messages
59,211
Reputation
8,782
Daps
163,930
boogers said:
did you write the greasemonkey script or did you use chatGPT to do it?

i used chatGPT to throw together some Perl a while back and it was worthless. by the time i cleaned it up enough to actually run correctly i already realized a better solution
Click to expand...

i used LLama LLM by meta and deepseek coder, I started of with Llama 3 70b then updated recently with Llama-3.1-sonar-large-128k-chat.

I just realized the recent update is buggy in that it's no longer creating the x.com embeds/iframes or converting twitter.com links into iframes, none of the embed iframes are being created, so i'm testing scripts to see which one last worked and where a mistake was made.

edit
i just made a minor edit to the scipt and uncommented out this this line addMirrorLinks(document); which was at the very bottom, when i did a initial test in just one browser it created two sets of links. i realized 30 minutes later that because it the adding youtube mirrors code was originally part standalone userscript and i just copied and pasted to the end of my existing userscript, i never disabled the other userscript and incorrectly attributed the duplicate links to that one line. turns out I had uncommenting that one line effectively disabled the insertion of youtube mirror links.

i'm still troubleshooting the embed issue.
 
Last edited:
Blessings

Blessings

Superstar
Supporter
Joined
Feb 25, 2013
Messages
16,026
Reputation
2,568
Daps
46,273
Reppin
NULL
Its sad we have to do all of this for not an enhanced UX but just a basic one…
 
B

bnew

Veteran
Joined
Nov 1, 2015
Messages
59,211
Reputation
8,782
Daps
163,930
updated the userscript to use a different type of method to display bluesky embeds.



this version isn't on the first page.

LLM served by Perplexity Labs

Summary of the Bookmarklet​

This bookmarklet is a powerful tool designed to enhance the user experience on specific forums, particularly those using the Xenforo platform. Here’s a detailed breakdown of what it does:

1. Embed Social Media Posts​

The bookmarklet can embed posts from various social media platforms directly into forum threads. It supports:
  • X (Twitter): Embeds tweets from both x.com and twitter.com.
  • Threads.net: Embeds posts from Threads.net.
  • Mastodon: Embeds posts from Mastodon instances.
  • Bluesky: Embeds posts from Bluesky.

2. Dynamic Height Adjustment​

For each embedded post, the bookmarklet uses a technique called MessageChannel to dynamically adjust the height of the iframe to fit the content perfectly. This ensures that users do not have to scroll within the iframe to view the entire post.

3. URL Matching and Replacement​

The script uses regular expressions to match URLs of different social media platforms and replace them with iframes that embed the content.

Example:​

  • If a user posts a link to a tweet, the script will replace that link with an iframe containing the tweet.
  • Similarly, links to Threads.net, Mastodon, or Bluesky posts are replaced with iframes embedding those posts.

4. Handling Dynamic Content​

The script uses a MutationObserver to monitor changes in the document body. This allows it to handle dynamic content loading, ensuring that newly added links are also processed and embedded correctly.

5. Additional Features for Twitter​

For Twitter embeds, the script adds additional links below the embedded tweet:
  • Twstalker Links: Links to Twstalker, Archive.org, Archive.is, Nitter, Xcancel, and other archiving services.
  • URL Replacement: Automatically replaces x.com URLs with twitter.com URLs in text input fields and editable areas.

6. YouTube Mirror Links​

The script also adds mirror links for YouTube videos embedded on the page. It checks for YouTube iframes and links and adds additional links to alternative YouTube mirrors such as Yewtu.be, Invidious, etc.

7. Image URL Handling​

It adjusts image URLs from Twitter and Reddit to ensure they are displayed correctly:
  • For Twitter images, it removes unnecessary query parameters.
  • For Reddit preview images, it converts them to direct image links.

8. Cursor Position Management​

When replacing URLs in text input fields or editable areas, the script saves and restores the cursor position to maintain user convenience.

9. Throttling and Periodic Adjustments​

To optimize performance, certain functions like adjusting iframe heights are throttled to run at most once every few seconds.

How It Works​

  1. Initialization:
    • The script initializes by setting up event listeners for page load, keydown, and input events.
    • It defines regular expressions to match URLs from different social media platforms.
  2. Link Replacement:
    • It iterates through all links on the page and checks if they match any of the defined regular expressions.
    • If a match is found, it replaces the link with an iframe embedding the corresponding social media post.
  3. Dynamic Height Adjustment:
    • Each iframe is set up with a MessageChannel to communicate with the embedded content.
    • When the embedded content sends a message indicating its height, the script adjusts the iframe's height accordingly.
  4. Additional Links and Features:
    • For Twitter embeds, it adds Twstalker links and other archiving service links.
    • For YouTube embeds, it adds mirror links to alternative YouTube services.
  5. Continuous Monitoring:
    • The MutationObserver continuously monitors changes in the document body to handle dynamically loaded content.

Simple Summary​

This bookmarklet is like a magic button that makes social media links on forums come alive by turning them into interactive embeds. Here’s what it does in simple terms:
  • Embeds Social Media Posts: Turns links to tweets, Threads.net posts, Mastodon posts, and Bluesky posts into interactive iframes.
  • Adjusts Height Automatically: Makes sure the iframes are the right size so you don't have to scroll inside them.
  • Adds Extra Links for Twitter: Gives you quick access to archive services like Twstalker and others for tweets.
  • Handles YouTube Videos: Adds links to alternative YouTube mirrors for videos embedded on the page.
  • Fixes Image Links: Ensures images from Twitter and Reddit display correctly.
  • Monitors Page Changes: Continuously checks for new content and applies these changes automatically.
By using this bookmarklet, you can enhance your browsing experience on forums by making social media content more interactive and accessible.
 
B

bnew

Veteran
Joined
Nov 1, 2015
Messages
59,211
Reputation
8,782
Daps
163,930
just leaving this here for future reference.

To account for any domain and any subdomain, not just bsky.app, you can adjust the regular expression to match any valid domain. Here's the updated regular expression:

JavaScript: 
const blueskyRegex = /https:\/\/(?:[a-zA-Z0-9-]+\.)?[a-zA-Z0-9-]+\.[a-z]{2,6}\/profile\/(?:did:plc:[^\/]+|[^\/]+)\/post\/[^\/]+/;


Explanation of changes:​


  • (?:[a-zA-Z0-9-]+\.)?: This part still allows for any subdomain (optional). It will match a structure like subdomain.example.com or just example.com if there is no subdomain.
  • [a-zA-Z0-9-]+\.[a-z]{2,6}: This matches the main domain and top-level domain (TLD):
    • [a-zA-Z0-9-]+: Matches the domain name itself (e.g., bsky, example, myservice).
    • \.[a-z]{2,6}: Matches the TLD (e.g., .com, .org, .app, .io, .co, etc.).
  • /profile/: The rest of the regex is unchanged and matches the profile path in the URL.

How it works:​



Examples of URLs that will match:​



This regex is now more generalized and will work with any Bluesky AT Protocol-based domain, regardless of the subdomain or the main domain.
 
B

bnew

Veteran
Joined
Nov 1, 2015
Messages
59,211
Reputation
8,782
Daps
163,930
made a small change; added "&hl=en-US" so youtube mirrors webpages are in english.

JavaScript: 
    function createMirrorLinks(videoId) {
        log(`Creating mirror links for video ID: ${videoId}`);

        const links = mirrorDomains.map(domain => {
            return `<a href="https://${domain}/watch?v=${videoId}&hl=en-US" target="_blank" style="text-decoration: underline;">${domain}</a>`;
        }).join(' | ');

        log(`Generated mirror links: ${links}`);

        return links;
    }

 
You must log in or register to reply here.
Top