[Userscript] Mucklet Media Embedder

1

Not sure if anyone else is a little annoyed by having to click on links to see images in text and room descriptions.

So fixed that for me. Hope this helps you too!

Description

Description

This userscript is made for the Mucklet / Wolfery web client. Its purpose is to turn supported media links into visible embedded content, so a plain link can become an image, video, audio player, or embedded YouTube / Spotify / SoundCloud player directly inside the interface.

Normally, the script watches the page for new content and checks links as they appear. If a link matches a supported media type and contains specific hash tags such as #replace, #popup, or #emot, the script changes how that link is displayed.

How it works

The script scans newly added page content with a mutation observer. That means it also reacts to content that appears later, not just what was visible during page load.

When it finds a supported link, it parses the URL and reads special directives from the hash part. Example:

https://example.com/picture.png#replace;w:300

In that case, the script reads:

  • replace = replace the link itself with media
  • w:300 = set the width to 300 pixels

If no replacement-style tag is used, the script usually keeps the link text and appends the embedded media below it.

Supported places

By default, the script is mainly focused on chat-like content such as messages and logs. With #info, it is also allowed to react to links inside room descriptions and character descriptions, which is useful because Mucklet has separate room and character profile page components.

Media behavior

For YouTube, the script creates an embed player and now uses the privacy-friendly youtube-nocookie.com domain. It can also read start times from hash fragments like t=90 or t=1m30s.

For Spotify, it supports embedded tracks, albums, playlists, episodes, and shows. For SoundCloud, it uses the standard SoundCloud player embed.

For direct file links, it detects:

  • Images like PNG, JPG, GIF, WEBP, SVG
  • Videos like MP4, WEBM, MOV
  • Audio like MP3, OGG, WAV, FLAC

Special tags

The hash tags control what the script does:

  • #replace = replace the link with the media
  • #popup = keep the link clickable and open the media in a popup overlay
  • #play = autoplay when supported
  • #emot = replace an image link with a small inline image aligned like text
  • #icon = replace an image link with an image that only gets the existing Mucklet class badge--icon, without a forced size; that class already exists in the Mucklet client
  • #info = also allow the script to work in room and character description areas, not only chat-style areas
  • #w:NUMBER = set width
  • #h:NUMBER = set height
  • #media:URL = use a different image source for the displayed image while keeping the original link

Features

  • Supports YouTube embeds with youtube-nocookie.com
  • Supports Spotify embeds
  • Supports SoundCloud embeds
  • Supports direct image links
  • Supports direct video links
  • Supports direct audio links
  • Watches dynamically added content
  • Works in chat and log style areas automatically
  • Works in room and character descriptions with #info
  • Can replace a link with embedded media via #replace
  • Can append embedded media below the link
  • Can open media in a popup via #popup
  • Can autoplay supported media via #play
  • Can show small inline image emotes via #emot
  • Can show icon-style images via #icon
  • Uses existing Mucklet badge--icon styling for icons
  • Can set custom width with #w:NUMBER
  • Can set custom height with #h:NUMBER
  • Can use alternate image display sources with #media:URL
  • Can read YouTube start times from hash parameters
  • Supports popup closing by button, overlay click, and Escape key

Script
Install

1 Like