Tips And Tricks For Posting The Coli Megathread.

B

bnew

Veteran
Joined
Nov 1, 2015
Messages
62,890
Reputation
9,559
Daps
172,212
* used deepseek-R1 - perplexity finetune R1 1776

**doesn't get the replies to comments :(

The bookmarklet you're referring to is designed to extract comments from a TikTok video page and format them into a specific BBCode structure. Here's a detailed summary of what it does:

What the Bookmarklet Does:​

  1. Extracts Comments: The bookmarklet scans the TikTok video page for comments. It looks for elements with specific classes that contain comment text, usernames, timestamps, and other relevant information.
  2. Formats Comments into BBCode: It takes the extracted information and formats it into a BBCode structure. This includes:
    • Username: The username of the commenter is linked to their TikTok profile.
    • Comment Text: The actual text of the comment.
    • Timestamp: The time when the comment was posted.
    • Replies: If a comment has replies, they are indented under the parent comment.
  3. Copies to Clipboard: Once all comments are formatted, the bookmarklet copies the BBCode output to your clipboard. This allows you to easily paste the comments into a forum or chat platform that supports BBCode.
  4. Progress Indicator: While processing comments, a progress bar appears at the top of the page, showing how many comments have been processed out of the total. This helps you track the progress.
  5. Toast Notification: After the process is complete, a small notification appears briefly at the top of the page, confirming that the comments have been copied to your clipboard.
  6. Character Limit: The bookmarklet has a character limit (default is 7,000 characters) to prevent extremely long outputs. If the total character count exceeds this limit, the output is truncated with a "[TRUNCATED]" indicator.
  7. Handles Nested Replies: The bookmarklet can handle nested replies, meaning it will correctly indent replies to comments and replies to those replies, maintaining a clear hierarchical structure.
  8. API Fetching for Hidden Replies: If a comment has a "View X replies" button, the bookmarklet attempts to fetch those hidden replies using TikTok's API. However, this requires authentication and might not work if you're not logged in or if TikTok restricts API access.

Summary in Simple Terms:​

  • Extracts comments from a TikTok video page.
  • Formats them into BBCode with usernames linked, comment text, timestamps, and indented replies.
  • Copies the output to your clipboard.
  • Shows progress with a bar at the top.
  • Notifies completion with a brief toast message.
  • Handles nested replies and attempts to fetch hidden replies via API.
  • Truncates output if it exceeds a certain character limit.
This bookmarklet is useful for users who want to easily share or save comments from TikTok videos in a structured format.

Version 1 (With Hyperlinks):




Version 2 (No Hyperlinks):




Example Output Format:

Code: 
[SPOILER="tiktok comments"]
1/30
[url=https://www.tiktok.com/@beckabravo]@Becka Bravo[/url]
“It is easier to fool a man… than it is to convince a man… that he…. has been… fooled......” 🫥 how...
2-6

   [url=https://www.tiktok.com/@blaine.star.moon]@Moonlight[/url]
   I saw the best response...
   3/12/2024

2/30  
[url=https://www.tiktok.com/@ohwejo]@Wesley Kramer-Jones[/url]
“Cognitive negotiations with reality!” Speak on it 👏👏👏
 
   [url=https://www.tiktok.com/@user819806061684]@user819806061684[/url]
   What is her thought on everything now?
   3/14/2024
[/SPOILER]
 
B

bnew

Veteran
Joined
Nov 1, 2015
Messages
62,890
Reputation
9,559
Daps
172,212
and update(v.2.2) to the previous code i shared to post embeds from wshh.
now included title and description.

The bookmarklet you're using on WorldStarHipHop (WSHH) performs several tasks to extract and format information from a video page. Here's a detailed summary of what it does:

Main Functions​

  1. Extract Video Unique ID: It searches through the page's script tags to find a unique identifier for the video, known as videoUniqueId. This ID is crucial for embedding or referencing the video.
  2. Extract Video Title and Date: The bookmarklet extracts the title of the video and the date it was submitted. However, it initially had issues displaying the date correctly, showing the number of views instead. This has been fixed by adjusting the selectors to correctly target the date element.
  3. Extract Description: It attempts to extract a description from the page. Initially, it tried to use a meta description, but since that wasn't available, it targets a specific HTML element containing the description. The description is cleaned up to remove HTML tags like <br> and ensure proper new lines.
  4. Format Output: The extracted information is formatted into a specific output. This includes:
    • Video Embed Link or Media Tag: Depending on the configuration, it either uses a [MEDIA] tag with the videoUniqueId or generates an embed link.
    • Video Title: The title of the video.
    • Video Views and Date: The number of views and the submission date of the video.
    • Description in Spoiler Tag: The cleaned-up description is placed inside a [spoiler] tag.
  5. Copy to Clipboard: The formatted output is copied to the clipboard, making it easy to paste into forums or other platforms.
  6. Display Notification: A toast notification is displayed with the copied text, confirming that the information has been successfully copied.

Purpose​

The primary purpose of this bookmarklet is to simplify the process of sharing WSHH videos on forums or other platforms that support BBCode or similar markup languages. It provides a convenient way to format the video information and description in a way that is easily readable and shareable.


example output:
Code: 
[MEDIA=wshh]222715[/MEDIA]
Sheriff’s Deputy Overdoses On Duty After Smoking Fentanyl He Thought Was Meth… Collapses In Bathroom Right After Busting A Drug Addict!
Views: 133,746
Date: Mar 01, 2025

[spoiler]
On October 24, 2023, In Sacramento California an on-duty Sacramento County Sheriff's Deputy was found unresponsive in the restroom of the Central Division Station with a lighter in one hand and a glass pipe laying on the floor next to him. Responding deputies treated him with Narcan for suspected narcotics exposure, and he was transported via ambulance to the hospital for treatment.

An Internal affairs investigation was launched because sheriff's personnel on scene discovered a glass pipe used for smoking narcotics next to the deputy. During the early stages of the investigation, it was determined deputy Marvin Morales had confiscated narcotics wrapped in a tinfoil from an individual he had contact with earlier in his shift. After Morales was transported to the hospital similar appearing narcotics and packaging were found in his uniform pants pocket.

After the completion of the investigation Deputy Morales was terminated from the Sacramento County Sheriff's Department.



SCDSA MOU 18.5 (p) Failure of good behavior

a. General Order 1/18 - Alcoholic Beverages, Drugs, and Narcotics

SCDSA MOU 18.5 (d) - Inexcusable neglect on duty - Police Transparency | Posted by Thrillz
[/spoiler]

Source URL: https://worldstar.com/videos/wshh8RR60z14T0Dz6nYF/sheriffs-deputy-overdoses-on-duty-after-smoking-fentanyl-he-thought-was-meth-collapses-in-bathroom-right-after-busting-a-drug-addict

 
B

bnew

Veteran
Joined
Nov 1, 2015
Messages
62,890
Reputation
9,559
Daps
172,212
*for reference bsky vid GROK 3.5.1

updated bsky / bluesky post and comment extractor bookmarklet

It didn't reliably extract video playlists and .webm urls. image extraction might need improving

Let me break down what this bookmarklet does on Bluesky (bsky.app) in simple terms:

What It Does:​

This is a bookmarklet—a small piece of JavaScript you can save as a bookmark in your browser and click to run on a Bluesky page. When you run it:
  1. Pops Up a Number Picker:
    • A little window appears on the screen asking how many posts you want to grab (default is 12).
    • You can click numbers to set it, clear it, or submit it.
  2. Grabs Posts:
    • It looks at the Bluesky page you're on (like a profile or thread).
    • It collects up to the number of posts you chose from the original author (not replies from others).
  3. Pulls Out Info:
    • For each post, it grabs:
      • The text of the post.
      • The author’s username.
      • Any video links (like Bluesky videos or YouTube playlists).
      • Images (but not profile pictures).
      • Quoted posts (if there are any).
      • Regular links in the text.
  4. Formats Everything:
    • It organizes all this info into a neat format with special tags like [VIDEO], [img], or [URL] around links and media.
    • It adds the page URL and a list of thread links at the top.
  5. Copies to Clipboard:
    • Puts all the formatted text into your clipboard (like Ctrl+C).
    • Shows a little “Copied: X posts” message at the bottom of the screen that fades away.
  6. Works with Bluesky’s API:
    • It talks to Bluesky’s system behind the scenes to get extra details (like exact video URLs) that aren’t always shown on the page.

How It Works on Bluesky:​

  • Where It Runs: You use it on a Bluesky page (e.g., bsky.app/profile/username or a specific post).
  • What It Finds: It looks for posts marked with [data-testid^="postThreadItem-by-"] (Bluesky’s post tags) and pulls their content.
  • Videos: It finds Bluesky video playlists (like .m3u8 files) or webm videos and adds them with [VIDEO] or [WEBM] tags. It also spots YouTube playlist links in the text.
  • Output Example:If you ran it on a post with a video, it might look like:
    Code: 
    https://bsky.app/profile/atrupar.com/post/3ljkvodyf472m
[SPOILER="thread continued"]

https://bsky.app/profile/atrupar.com/post/3ljkvodyf472m
[/SPOILER]
[SPOILER="full text & large images"]
1/1
🇺 atrupar.com Trudeau: "Every country is very aware..."

[U][URL]https://video.bsky.app/watch/did:plc:4llrhdclvdlmmynkwsmg5tdc/bafkreiglvm7n22dgazmygvfz22qgphqarepuxrgekmqsfnw25hpouwprku/playlist.m3u8[/URL][/U]
[/SPOILER]

Why Use It?​

  • It’s great for saving or sharing Bluesky posts in a clean, forum-friendly format (like for thecoli.com, based on the link at the end).
  • It saves time by automatically collecting and formatting posts instead of you copying them by hand.
In short, it’s a tool to quickly snag and organize Bluesky posts—text, videos, images, and all—into a tidy package you can paste anywhere!




pastebin.com/jZJkvBF9
 
Last edited:
B

bnew

Veteran
Joined
Nov 1, 2015
Messages
62,890
Reputation
9,559
Daps
172,212
Below, I’ll explain what both versions of the "Lemmy to BBCode" bookmarklets do on Lemmy instances.

What Both Bookmarklets Do on Lemmy Instances (Simple Terms)​

Both bookmarklets work on Lemmy websites (like Lemmy.World) to help you copy posts and comments in a special format called BBCode, which is used on some forums. They add two buttons next to each post and comment:

  1. Green Button (📋): Copies just that post or comment with its details (like title, link, or text) in BBCode format.
  2. Blue Button (📋): Copies a comment along with its parent comments (the earlier comments it’s replying to), letting you choose how many parents to include using a dropdown menu.
  • Version 1 adds the username (who wrote it) and the date/time (when it was posted) inside the BBCode for both posts and comments.
  • Version 2 adds only the date/time inside the BBCode, skipping the username.
When you click either button, the text is copied to your clipboard, and a little pop-up says "Copied!" The blue button is hidden for posts since posts don’t have parent comments.

Extensive Detailed Summaries​

Version 1: "Lemmy to BBCode with Username and Date/Time (Nested Support)"​

  • Purpose: This bookmarklet makes it easy to grab a post or comment from a Lemmy instance and turn it into BBCode, including who wrote it and when, with an option to include parent comments for context.
  • How It Works:
    • On Posts:
      • Finds the post’s title, community name, and web link.
      • Grabs the username (e.g., "Tea") and exact posting time (e.g., "Monday, March 17th, 2025 at 6:53:43 AM GMT-04:00").
      • Looks for any pictures (like thumbnails) and text (if it’s a self-post or has a summary).
      • Formats everything into BBCode with the username and date/time inside a [spoiler] tag.
      • Adds a green button next to the post. Clicking it copies the BBCode to your clipboard.
      • Adds a blue button (hidden) for consistency, but it doesn’t do anything for posts.
    • On Comments:
      • Finds the comment’s text, web link, username, and posting time.
      • Formats the comment into BBCode with the username and date/time inside a [spoiler] tag.
      • Adds a green button to copy just that comment.
      • Adds a blue button that, when clicked, shows a dropdown (e.g., "0 parents," "1 parent," "2 parents") to choose how many parent comments to include. It then copies the comment plus the selected parents, each with their own link and BBCode.
  • Special Features:
    • Turns web links into [url] tags, pictures into [img] tags, and keeps bold/italic/strikethrough formatting.
    • For comments, it walks up the comment thread to find parents, ensuring no repeats by tracking comment IDs.
    • Shows a "Post copied!" or "Comment copied!" message after copying.
  • Example Output (Comment with 1 Parent):

    Code: 
    https://lemmy.world/post/26963461/15752978
[spoiler="text"]Commented by [b]Grimy[/b] on Monday, March 17th, 2025 at 2:00:00 PM GMT-04:00

This is a parent comment.[/spoiler]

https://lemmy.world/post/26963461/15755159
[spoiler="text"]
Commented by [b]Matty_r[/b] on Monday, March 17th, 2025 at 4:09:39 PM GMT-04:00

Probably so they can have an AI Agent...
[/spoiler]

Version 2: "Lemmy to BBCode with Date/Time Only (Nested Support)"​

  • Purpose: Similar to Version 1, but simpler—it skips the username and only includes the date/time, still with the option to grab parent comments.
  • How It Works:
    • On Posts:
      • Grabs the title, community name, web link, and posting time (no username).
      • Includes any pictures or text, formatted into BBCode with the date/time in a [spoiler] tag.
      • Adds a green button to copy the post and a hidden blue button.
    • On Comments:
      • Takes the comment’s text, web link, and posting time (no username).
      • Formats it into BBCode with the date/time in a [spoiler] tag.
      • Green button copies just the comment.
      • Blue button shows a dropdown to pick how many parent comments to include, then copies them plus the current comment, each with their link and BBCode.
  • Special Features:
    • Same link and picture formatting as Version 1.
    • Same parent-comment logic with duplicate prevention.
    • Same "Copied!" pop-up.
  • Example Output (Comment with 1 Parent):
    text

    Code: 
    https://lemmy.world/post/26963461/15752978
[spoiler="text"]
Commented on Monday, March 17th, 2025 at 2:00:00 PM GMT-04:00

This is a parent comment.
[/spoiler]

https://lemmy.world/post/26963461/15755159
[spoiler="text"]
Commented on Monday, March 17th, 2025 at 4:09:39 PM GMT-04:00

Probably so they can have an AI Agent...
[/spoiler]

Fixed Bookmarklets (No Duplicates)​

The original versions had a bug where the blue button sometimes copied the same comment multiple times when including parents. This was fixed by improving how the bookmarklet finds parent comments and adding a check to avoid duplicates. Here are the corrected versions:

Version 1: "Lemmy to BBCode with Username and Date/Time (Fixed Nested Support)"​

javascript


Version 2: "Lemmy to BBCode with Date/Time Only (Fixed Nested Support)"​

javascript


Fix Explanation​

  • Problem: The original getParentComments function was incorrectly traversing the DOM, sometimes re-selecting the same comment or siblings, causing duplicates.
  • Solution:
    • Improved Traversal: Starts at the current .comment-node, finds its <li>, then steps up to the parent <ul class="comments"> and its containing <li>, ensuring a clear parent-child progression.
    • Duplicate Prevention: Uses a Set (seenIds) initialized with the current comment’s ID and checks each new comment’s ID to avoid repeats.
    • Correct Flow: Moves up the nested <ul> structure accurately, stopping when no more parents are found or the depth is reached.
  • Result: The blue button now copies parent comments in the correct order without duplicates.


simpler bookmarklet ; no username, no date/time and no nested comment support:

 
Last edited:
B

bnew

Veteran
Joined
Nov 1, 2015
Messages
62,890
Reputation
9,559
Daps
172,212
create threads on the coli easier by copying/pasting content in bbcode format with a click of a button.
** some sites may have images or text missing in output but thats cause of "readability.js".


The userscript, "Article to BBCode Converter E" (version 0.9.10) is designed to extract content from web pages—specifically news websites, blogs, and other publication sites—and convert it into BBCode, a simple markup language used on forums. It adds a floating "BB" button to the page, which, when clicked, grabs the article’s title, author, date, text, and images, formats them into BBCode, and copies the result to your clipboard. Below, I’ll explain how it behaves on various types of sites and provide an extensive, detailed summary in simple terms.

What the Userscript Does on Different Sites​

1. News Websites (e.g., NPR, BBC, CNN)​

  • Behavior:
    • Finds the main headline (e.g., <h1> or page title), author, and date from typical news layouts (like <header> or metadata sections).
    • Extracts the article text from the main content area (e.g., <div id="storytext"> on NPR) using the Readability library to strip away ads and sidebars.
    • Grabs images from the article body (e.g., NPR’s <div class="bucketwrap image">) and sometimes a lead image if it’s in a header or top <figure>.
    • Places images between paragraphs where they appear in the original article, based on their position.
  • Example: On an NPR article about tree planting, it pulls the title, author, date, paragraphs, and tree-planting photos with captions, skipping sidebar images like related stories.
  • Challenges:
    • May miss lead images if they’re not in a <header> or styled unusually (e.g., CNN’s custom <div> classes).
    • Dynamic content (e.g., BBC’s lazy-loaded images) might load after the 1-second delay, missing some images.

2. Blogs (e.g., WordPress, Medium)​

  • Behavior:
    • Identifies the title from <h1> or <title> tags, often found in .entry-title or similar classes.
    • Extracts the post content from <article> or .entry-content, handling simple text and images well.
    • Includes images embedded in the post (e.g., <img> tags in <p> or <figure>), placing them after related paragraphs.
    • Copies metadata like author or date if present in a header or byline section.
  • Example: On a WordPress blog about cooking, it grabs the recipe title, steps, and photos of the dish, formatted neatly in BBCode.
  • Challenges:
    • Minimalist blogs without clear <article> tags might confuse it, falling back to the whole page.
    • Medium’s paywall or infinite scroll might hide content, resulting in incomplete output.

3. Other Publication Sites (e.g., Scientific American, The Atlantic)​

  • Behavior:
    • Pulls the headline from prominent <h1> tags or metadata.
    • Extracts the main article text, often in <article> or custom containers (e.g., .article-body on The Atlantic), using Readability.
    • Captures images within the article, like diagrams or photos, and tries to place them in order.
    • Handles author and date if they’re in a standard spot (e.g., <header> or .byline).
  • Example: On a Scientific American piece about climate change, it gets the title, text, and graphs, formatting them with [IMG] tags.
  • Challenges:
    • Paywalls (e.g., The Atlantic) might block text, leaving only the URL and title.
    • Complex layouts with nested images might misplace them if Readability reorders content.

4. Edge Cases (e.g., Forums, Aggregators, Poorly Structured Sites)​

  • Behavior:
    • Tries to find a title from <h1> or <title>, but may pick something generic if unclear.
    • Uses Readability to guess the main content, which might fail on forums with threaded posts or aggregators with snippets.
    • Grabs images from the guessed content area, but could include irrelevant ones if no clear article container exists.
  • Example: On a forum thread, it might extract the first post’s text and an avatar image, but miss the thread structure.
  • Challenges:
    • No clear article means it might grab everything (e.g., ads, comments), producing messy output.
    • Aggregators like Google News might only give a preview, not the full article.

Detailed Summary in Simple Terms​

The userscript is like a smart copier for web articles. Here’s what it does, step-by-step, in plain language:

  1. Adds a Button:
    • When you load a webpage, a little blue "BB" button pops up at the bottom left corner. It floats there, so you can click it anytime.
  2. Waits a Bit:
    • It waits 1 second after the page loads to give images and text time to appear (some sites load stuff slowly).
  3. Finds the Title:
    • It looks for the big headline at the top of the article (like “Is planting trees 'DEI'?” on NPR). If it can’t find one, it uses the page’s title from the browser tab.
  4. Grabs Author and Date:
    • It searches for who wrote the article and when it was posted, usually near the top. For example, it might find “By Jane Doe – March 21, 2025” and add it below the title.
  5. Cleans Up the Article:
    • It uses a tool called Readability to figure out the main story, ignoring junk like ads, menus, or sidebar links. It’s like highlighting just the article part of the page.
  6. Collects Images:
    • It looks for pictures in the article (e.g., photos of volunteers planting trees on NPR). It only takes images from the main story area, not random stuff like ads or sidebars.
    • It also checks for a “lead image” at the top, like a big photo before the text starts, if the site has one.
  7. Keeps Track of Image Order:
    • It numbers each image based on where it sits in the article, so it can put them back in the right spot later (e.g., after paragraph 1, then paragraph 2).
  8. Turns Everything into BBCode:
    • It formats the title with [HEADING=2] tags (like a bold title on a forum).
    • It adds author and date with underlines for links (e.g., [U][URL='author-page']Jane Doe[/URL][/U] – March 21, 2025).
    • It writes each paragraph as plain text with two line breaks between them.
    • It adds images with [IMG] tags (e.g., [IMG alt="Volunteers planting trees"]photo-url[/IMG]), placing them after the paragraph they go with, along with captions if there are any.
  9. Handles Special Stuff:
    • Links in the text get [U][URL='link']text[/URL][/U] tags.
    • YouTube or video links get simplified to their video URL.
    • Quotes or code snippets get [QUOTE] or [CODE] tags.
    • Lists (like bullet points) get [LIST][*]item[/LIST] tags.
  10. Copies to Clipboard:
    • When you click the "BB" button, it puts all this formatted text into your clipboard. You’ll see a green “BBCode copied!” message pop up. If something goes wrong (like no article found), it shows a red error message.
  11. Fixes Problems:
    • If the site loads images late, the 1-second wait helps catch them.
    • If Readability misses images, it double-checks the original page for them.
    • If paragraphs look funny (e.g., text and images squished together), it adds extra line breaks to keep things neat.

How It Works Across Sites​

  • Big News Sites (NPR, CNN):
    • Works great because they have clear headlines, authors, dates, and article sections. Images like photos of events or people get placed nicely between paragraphs. Might miss a fancy lead image if it’s styled oddly.
  • Blogs (WordPress):
    • Good for simple blogs with text and photos. Gets the post title, content, and pictures (e.g., a recipe with step-by-step images). Struggles if the blog has no clear “article” section or loads stuff after the script runs.
  • Magazines (The Atlantic):
    • Handles detailed articles with text and images well, like a science story with charts. Might cut off behind a paywall or miss a lead image if it’s not at the top.
  • Weird Sites (Forums, Old Blogs):
    • Tries its best but might grab too much (e.g., comments) or too little (e.g., just a title) if the page isn’t organized like a typical article.

Example Output (Simplified)​

For an NPR article:

Code: 
https://www.npr.org/2025/03/21/g-s1-55090/trump-dei-trees

[IMG alt="Lead photo of trees"]https://npr.brightspotcdn.com/lead.jpg[/IMG]
Credit: NPR

[HEADING=2]Is planting trees 'DEI'?[/HEADING]

[U][URL='https://npr.org/authors/jane-doe']Jane Doe[/URL][/U] – March 21, 2025The government cut tree planting funds.

[IMG alt="Volunteers planting"]https://npr.brightspotcdn.com/volunteers.jpg[/IMG]Volunteers worked hard. Arbor Day FoundationTrees help the climate.

[HR][/HR]

[HEADING=2]Strengths and Limits[/HEADING]
[LIST]
[*][B]Strengths[/B]:
[LIST]
[*]Makes articles easy to share on forums with clean formatting.
[*]Works on most news and blog sites without needing tweaks.
[*]Keeps images with the right text, skips junk like ads.
[/LIST]
[*][B]Limits[/B]:
[LIST]
[*]Might miss stuff on sites that load slowly or hide content (e.g., paywalls).
[*]Could get confused on messy pages with no clear article.
[*]Lead images need a common layout to be caught every time.
[/LIST]
[/LIST]
In short, it’s a handy tool for turning web articles into forum-ready posts, best for structured news and blogs, with some hiccups on trickier sites!






doesn't extract all images.
 
Last edited:
B

bnew

Veteran
Joined
Nov 1, 2015
Messages
62,890
Reputation
9,559
Daps
172,212

Changelog for "Article to BBCode Converter E" (v0.9.11 to v0.9.14)​

Below is a changelog detailing the updates from version 0.9.11 (the old code) to version 0.9.14 (the latest code provided). The changes are organized by version and described in simple terms.

Version 0.9.12 (Performance and Robustness Improvements)​

  • Added Per-Site Toggle: A new checkbox ("Enable on [domain]") was added to the options menu, letting users turn the script on or off for specific websites. This saves the choice in the browser and stops the script from slowing down sites where it’s not needed.
  • Improved Article Detection: The script now looks for more parts of a webpage (like .story, .entry-content, or main) to find the article, not just the <article> tag. This helps it work better on sites like CBC or TechCrunch.
  • Better Readability: Tweaked the Readability.js tool to keep more details (class names) from the page, making it smarter at finding the main text.
  • Added Paragraph Backup: If the main tool misses paragraphs, the script now grabs them directly from the page to avoid missing text.
  • Fixed Slowdowns: The script only runs when you click the button and it’s enabled for the site, reducing slowdown warnings from Tampermonkey.

Version 0.9.13 (UI Seamlessness and Tooltips)​

  • Smoother Options Menu: Changed the options menu to stay open when moving the mouse to it (on computers), using a small delay so it doesn’t vanish too fast. This makes it easier to click the toggles.
  • Added Tooltips: Added helpful hints (tooltips) to the checkboxes:
    • "Include all page images" now says "Include images from the entire page, not just the article."
    • "Enable on [domain]" says "Toggle BBCode conversion for [domain]."
    • These show up when you hover over the options, explaining what they do.
  • Kept Old Features: All the article-grabbing and BBCode-making stayed the same, just with a better menu experience.

Version 0.9.14 (Mobile Touchscreen Support)​

  • Mobile-Friendly Button: Made the "BB" button bigger (48x48 pixels) and the options easier to tap with more space and larger text. This follows mobile design rules for finger-friendly sizes.
  • Touch Controls: Added support for tapping on phones or tablets:
    • Tap the button to show/hide the options menu.
    • Tap outside to close the menu.
    • The button only converts to BBCode if the menu isn’t open, avoiding mix-ups.
  • Desktop vs. Mobile: The script now checks if you’re on a mobile device. On computers, it still uses hover; on phones, it uses taps.
  • Better Positioning: On small screens (like phones), the options menu centers itself and fits better, so it’s not cut off or too close to the edge.
  • No Slowdowns: Kept the per-site toggle to avoid running on mobile sites where it’s not wanted.

Summary of Changes in Simple Terms​

The userscript started at version 0.9.11 as a tool to turn articles from any webpage into BBCode—a format for forums—with a floating "BB" button. You could click it to copy the article’s URL, headline, text, and images, with an option to grab all page images or just the article’s. It worked okay but had some issues: it slowed down pages, didn’t always find all the text, and wasn’t great for phones.

Here’s what changed by version 0.9.14:

  1. Better Performance: It only runs when you want it to, thanks to a new "Enable on [site]" toggle. This stops it from slowing down every page and fixes Tampermonkey warnings.
  2. Smarter Article Grabbing: It now finds text and images better on tricky sites (like news or blogs) by looking at more parts of the page and double-checking for missed paragraphs.
  3. Easier to Use: On computers, the options menu stays open when you move to it, and tooltips explain what the checkboxes do. On phones, you tap to open the menu, and everything’s bigger and spaced out for your fingers.
  4. Mobile Ready: It works smoothly on touchscreens now—tap the button, pick your options, and tap again to convert, all without fuss.
  5. Looks and Feels Better: The button and menu got a slight size boost, and the layout adjusts for small screens, making it nicer to use anywhere.
By v0.9.14, it’s a more polished tool: faster, more reliable, and friendly for both computer mice and phone taps, while still doing its main job—turning articles into BBCode—really well!

 
B

bnew

Veteran
Joined
Nov 1, 2015
Messages
62,890
Reputation
9,559
Daps
172,212
another attempt at making a bluesky post extractor bookmarklet that covers all the different types of posts and order of posts on the site. :whew:


The bookmarklet, now named "Bluesky/Bsky to BBcode" v1.2, is a tool designed to work on the Bluesky social media platform (bsky.app). When you run it while viewing a post or thread on Bluesky, it grabs the content (text, images, videos, and links) from the post you’re focused on, along with related posts in the thread, and converts it into a special format called BBcode. BBcode is a simple way to style text (like bold or URLs) that works on many forums. The bookmarklet then copies this formatted text to your clipboard so you can paste it somewhere else, like a forum or website that supports BBcode.

Here’s a detailed summary in simple terms of what it does:

What "Bluesky/Bsky to BBcode" v1.2 Does on Bluesky​

  1. Finds the Post You’re Looking At:
    • It starts with the post you’re currently focused on (called the "active post"). This could be one you clicked on or the first visible post on the page.
    • It figures out who wrote it, what they said, and grabs any pictures, videos, or links in the post.
  2. Looks for Related Posts:
    • If the active post is a reply, it tries to find the parent post (the one it’s replying to) using Bluesky’s API (a behind-the-scenes data tool) or by checking the page if the parent is visible.
    • It also grabs up to a certain number of posts that come after the active post in the thread (like replies or continuations), based on a number you choose.
  3. Pulls in Extra Details:
    • It collects the author’s username (e.g., @joshtpm.bsky.social), the post’s URL (e.g., https://bsky.app/profile/joshtpm.bsky.social/post/3lky4roqne32u), and the text they wrote.
    • If there’s a quoted post (something embedded in the active or parent post), it grabs that too, including its text and author.
    • It finds images and videos, turning them into BBcode tags like [img] for pictures or [URL] for video links.
  4. Asks How Many Posts to Grab:
    • A little pop-up window appears asking how many posts you want to include (e.g., 1, 2, 10, etc.). You can type a number or click buttons like "1," "2," "10," "25," "35," or "50" to pick quickly.
  5. Formats Everything into BBcode:
    • It organizes the content into a neat BBcode structure:
      • Top Line: The URL of the active post (e.g., https://bsky.app/profile/joshtpm.bsky.social/post/3lky4roqne32u).
      • "Threads Continued" Section: A hidden (spoiler) box with URLs of the parent post, quoted posts, or other posts by the same author, but only if they’re different from the active post URL. This avoids duplicates.
      • "Full Text & Large Images" Section:Another hidden box with all the posts’ details:
        • Each post gets a number (e.g., "1/3," "2/3," "3/3").
        • Shows the author’s handle (e.g., 🇺 joshtpm.bsky.social).
        • Includes the text, images ([img] tags), videos ([URL] tags), and links ([U][URL] tags).
        • If there’s a quoted post, it’s added as [QUOTED POST] with its own text and author.
        • Ends with a red, bold note linking to a guide on how to use this format.
  6. Handles Big Threads:
    • If there are too many images (more than 20) or posts, it splits the output into chunks, separated by [threads continued] lines, so it’s not overwhelming.
  7. Copies to Clipboard:
    • Once everything is formatted, it copies the BBcode text to your clipboard automatically.
    • A small message pops up saying how many posts were copied (e.g., "Copied: 13 posts").
  8. Works Without Scrolling (Mostly):
    • It uses Bluesky’s API to get parent post info, so you don’t always have to scroll to see it. But if the API fails and the parent isn’t on the screen, it might miss it unless you scroll to load it.

Example of What It Creates​

If you run it on a Bluesky thread, it might look like this when pasted into a BBcode-compatible forum:

Code: 
https://bsky.app/profile/joshtpm.bsky.social/post/3lky4roqne32u
[SPOILER="Threads Continued"]
https://bsky.app/profile/joshtpm.bsky.social/post/3lky4roqmet2u
[/SPOILER]
[SPOILER="full text & large images"]
1/2
🇺 joshtpm.bsky.social
9/ with data that can be purchased commercially - the kind of profiles generated by sales data, social media graphs and so forth...
2/2
🇺 joshtpm.bsky.social
10/ you go to a whole new level. This stuff is deeply inculcated in the career staff at the IRS...
[COLOR=rgb(184,49,47)][B][SIZE=5]To post tweets in this format, more info here: [URL]https://www.thecoli.com/threads/tips-and-tricks-for-posting-the-coli-megathread.984734/post-52211196[/URL][/SIZE][/B][/COLOR]
[/SPOILER]

Detailed Summary in Simple Terms​

  • Purpose: It’s a quick way to take posts from Bluesky and turn them into a forum-friendly format (BBcode) that you can copy and paste anywhere that supports it, like discussion boards.
  • What It Grabs:
    • The post you’re on (text, images, videos, links).
    • The parent post if it’s a reply (even if you haven’t scrolled to it, thanks to the API).
    • Any quoted posts inside those.
    • Extra posts in the thread (up to the number you pick).
  • How It Formats:
    • Puts the main post’s URL at the top.
    • Hides extra URLs (like the parent or quoted posts) in a "Threads Continued" spoiler box to keep things tidy.
    • Puts all the text, pictures, and videos in a "full text & large images" spoiler box, numbered like "1/2," "2/2," with authors marked by a flag (🇺).
    • Adds links and media with BBcode tags so they work on forums (e.g., [img] for pics, [URL] for videos or links).
  • Why It’s Useful:
    • Saves time by grabbing everything at once instead of copying each post by hand.
    • Keeps threads organized with spoilers, so it’s not a wall of text.
    • Works even if you don’t see all the posts on screen (mostly), thanks to the API.
  • How You Use It:
    • Click the bookmarklet while on a Bluesky page.
    • Pick how many posts you want in the pop-up (e.g., click "2" or type "13").
    • Wait a second—it copies the formatted text, shows "Copied: X posts," and you paste it wherever you want.
  • Special Features:
    • Limits images to 10 per post to avoid overload.
    • Splits big threads into chunks if there are too many images or posts.
    • Avoids duplicate URLs in the "Threads Continued" box.
    • Handles self-replies (when the same person replies to themselves) correctly, showing both posts.
  • Limitations:
    • If Bluesky’s API fails and a parent post isn’t on screen, it might miss it unless you scroll to load it.
    • Only grabs one level up (parent) via API, not a whole deep thread.
    • Needs you to pick a number of posts, or it won’t run.
This version (v1.2) fixes earlier bugs like duplicate URLs, missing parent posts, and errors, making it smoother and more reliable for turning Bluesky threads into BBcode for forums as of March 24, 2025.

gu9eStZ.png





edit:

Change Log from V1.2 to V1.2.1​

V1.2.1 (March 24, 2025)​

  • Enhancements:
    • Improved Video URL Extraction for Quoted Posts: Added support for fetching video URLs from quoted posts using the Bluesky API (getPostThread with depth=0) when a quoted post ID is available. This ensures video playlist URLs (e.g., .m3u8) are included in the output for quoted content.
    • Fallback Video URL Methods: Implemented two fallback mechanisms for quoted post video URLs when the API fails:
      • Poster Fallback: Uses the poster attribute of a <video> element (e.g., https://video.bsky.app/watch/{did}/{cid}/thumbnail.jpg) to construct a playlist URL (https://video.bsky.app/watch/{did}/{cid}/playlist.m3u8).
      • Blob Fallback: Falls back to the blob URL (e.g., blob:Bluesky...) from the <video> src attribute if no other URL is found.
    • Refined Video Handling: Split getEmbedUrl and constructVideoUrl into separate functions for better modularity and readability. Removed direct WebM condition from getEmbedUrl to streamline logic, relying on constructVideoUrl for format-specific URLs.
  • Bug Fixes:
    • Duplicate Video URLs: Replaced array concatenation in extractMedia with a Set to eliminate duplicate video URLs from <video> and <source> elements, ensuring cleaner output.
    • Active Post Detection: Updated extractPosts to use URL matching (a[href*="/post/"]) instead of document.activeElement for identifying the active post, improving reliability across different page states.
    • Quoted Post Processing: Fixed extractPost to only process subsequent posts in extractPosts with isActivePost=false, preventing unnecessary API calls and ensuring consistent behavior.
  • Optimizations:
    • Code Cleanup: Simplified cleanText by inlining the URL normalization logic into the regex replacement, reducing function calls. Removed redundant variables in extractMedia for conciseness.
  • Known Issues:
    • The hasThreads condition in extractPosts contains a typo (quotedPostUrl&"edPostUrl!==activeUrl), which may cause syntax errors in some environments. This will be addressed in a future patch.

Summary in Simple Terms​

What’s New in V1.2.1?

  • Better Video Support: Now grabs video links from quoted posts using the Bluesky API. If that fails, it tries to guess the video URL from the video’s thumbnail or uses the temporary blob link as a backup.
  • No More Duplicates: Fixed a bug where the same video link could show up multiple times in the output.
  • Smarter Post Selection: Finds the current post based on the page URL instead of where your cursor is, making it more reliable.
  • Cleaner Code: Made some parts shorter and easier to read.
Why It Matters: This update makes the bookmarklet better at finding and showing video links, especially in quoted posts, and fixes some small issues so it works smoother.

 
Last edited:
B

bnew

Veteran
Joined
Nov 1, 2015
Messages
62,890
Reputation
9,559
Daps
172,212
post urls on quoted posts were malformed

Changelog (v1.2.1 to v1.2.2):

  1. Fixed quoted post handle extraction:
    • Changed from: quotedHandle = d.querySelector(".css-146c3p1.r-dnmrzs.r-1udh08x.r-1udbk01.r-3s2u2q.r-1iln25a")?.textContent?.trim() || "Unknown"
    • To: quotedHandle = d.querySelector('a[href*="/profile/"]')?.href?.split('/profile/')[1]?.split('/')[0] || "Unknown"
  2. Improved quoted post text extraction:
    • Now uses cleanText(t) instead of directly assigning the innerHTML
  3. Removed redundant variable declaration:
    • Removed: const quotedText = cleanText(t)
  4. Simplified quoted post URL construction:
    • Now uses the extracted handle directly instead of relying on potentially incorrect text content
  5. Minor code structure improvements and variable naming consistency
Summary:
The main improvement in version 1.2.2 is the fix for quoted post handle extraction. Instead of relying on the display name (which could include spaces and special characters), the new version extracts the handle from the profile link's URL. This ensures that the quoted post URLs are correctly formed with the actual handle rather than potentially including display names or other incorrect information. The changes also include some minor code optimizations and improvements in text cleaning for quoted posts.

 
B

bnew

Veteran
Joined
Nov 1, 2015
Messages
62,890
Reputation
9,559
Daps
172,212
pastebin / pastebin.com embeds is no longer working on thecoli and I haven't seen an update by the xenforo team or the dev that does the media plugin.

when you see
---

404 Not Found​


nginx

---

it's not necessarily because the file doesn't exist but because pastebin changed their embed url path from https://pastebin.com/embed_iframe.php?i=KiHTG5PG to https://pastebin.com/embed_js/KiHTG5PG

the bookmarklet and userscript below fixes it.


  • Problem: Old Pastebin iframe URLs (embed_iframe.php) return 404 errors; new URLs use embed_js/ or embed_iframe/.
  • Solution: A bookmarklet to dynamically update iframe src attributes on a webpage.


High-Level Overview​

The task is to explain what the bookmarklet and userscript do on XenForo-compatible forum sites and provide their latest optimized versions without comments. I’ll then append a detailed, simple summary of their functionality.

Scope​

  • Problem: Clarify the behavior of the bookmarklet (artifact_id: d1883ab9-de8c-4f43-98cd-717f926400e1, v7) and userscript (artifact_id: 6d25402a-f082-4c33-9df8-a48561c37039, v3) on XenForo forums.
  • Solution: Provide code without comments and a plain-language summary.
  • Constraints: Maintain prior optimizations (throttling, toast reuse), target XenForo compatibility.

Memory Log​

  • Prior interactions:
    1. Bookmarklet: Evolved from URL fixes to span-priority with optimizations.
    2. Userscript: Mirrored bookmarklet, targeted XenForo threads.
    3. Last update: Fixed CPU/memory issues with throttling and toast reuse.
  • Current request: Explain XenForo behavior, show code, add summary.

Bookmarklet (Without Comments)​


Pastebin URL Fix Bookmarklet (Optimized)

pastebin.com/AymATXhw

Userscript​


pastebin.com/gY50EbkU

Detailed Summary in Simple Terms​

What They Do on XenForo-Compatible Forum Sites​

The bookmarklet and userscript are tools designed to fix broken Pastebin links on XenForo forum sites (like xenforo.com/community/threads/* or any site with URLs like example.com/threads/*). These forums often let users embed Pastebin code snippets (e.g., for sharing scripts or text) into posts. However, older Pastebin embeds might use an outdated link format (embed_iframe.php) that no longer works properly, causing the embedded content to fail to load or display incorrectly. The bookmarklet and userscript step in to update these links to a modern, working format (embed_js/) and ensure the content shows up as intended.

Here’s how they work in simple steps:

  1. Finding Pastebin Embeds:
    • They first look for special <span> tags on the page that XenForo uses to mark Pastebin embeds. These tags hold information about the embed, like the Pastebin ID (e.g., B3aH8ynE), stored in a data-s9e-mediaembed-iframe attribute.
    • If no unprocessed spans are found, they check for existing <iframe> tags with the old embed_iframe.php format as a backup.
  2. Updating the Links:
    • For spans, they read the stored data, pull out the Pastebin ID, and create a new <iframe> with the updated link (https://pastebin.com/embed_js/[Pastebin ID]). This new iframe replaces the span.
    • For existing iframes, they take the old link, extract the Pastebin ID, and update the src attribute to the new format.
    • If the new embed_js/ link fails (e.g., due to site restrictions), they switch it to embed_iframe/ as a fallback.
  3. Showing Feedback:
    • A small pop-up message (called a "toast") appears in the bottom-right corner of the screen. It tells you how many embeds were fixed (e.g., "Updated 2 Pastebin embeds") or if none were found ("No outdated Pastebin embeds found").
    • The toast fades in, stays for 3 seconds, then fades out and disappears.
  4. Keeping Up with Changes:
    • The tools don’t just run once—they keep watching the page. If new Pastebin embeds appear (e.g., when you scroll and more posts load), they automatically update those too. To avoid slowing down your browser, they wait half a second between checks.
  5. Avoiding Duplicates:
    • They mark each span or iframe they process with a data-processed tag so they don’t keep redoing the same ones, which saves time and resources.

Why They’re Useful​

  • Fixes Broken Content: Old Pastebin embeds might not load, leaving blank spaces or errors in forum posts. These tools make sure you can see the code or text someone shared.
  • Works Automatically (Userscript): On XenForo sites, the userscript runs by itself when you load a thread page—no need to click anything.
  • One-Click Fix (Bookmarklet): For any page (not just XenForo), you can click the bookmarklet to fix embeds instantly.
  • Handles New Stuff: If a forum loads more posts as you scroll, the tools catch those new embeds too.

How They’re Optimized​

  • Low Impact: They’re designed to use less of your computer’s power. The watching feature waits between checks, and they reuse the same toast message instead of making new ones every time.
  • Error Handling: If something goes wrong (e.g., a weird span format), they show a toast like "Error parsing span data" and move on without crashing.
  • Smart Fallback: If the modern link format doesn’t work, they try the older one to keep things working.

Example Scenario​

Imagine you’re on a XenForo thread where someone posted a script using a Pastebin embed. The embed shows as a blank box because it’s using the old embed_iframe.php link. You run the bookmarklet (or the userscript does it automatically), and:

  • It finds the span or iframe, grabs the Pastebin ID (e.g., edy4B8du).
  • Updates it to https://pastebin.com/embed_js/edy4B8du.
  • Replaces or updates the embed, and the script appears in a neat box.
  • A toast pops up saying "Updated 1 Pastebin embed."

Limitations​

  • They only fix Pastebin embeds with valid IDs (at least 8 characters long).
  • They might miss embeds if XenForo uses a totally different format they don’t recognize.
  • On very busy pages with tons of changes, they might still use some CPU, but much less than before.
In short, these tools make sure Pastebin embeds on XenForo forums work again by updating old links, showing you what’s happening with toasts, and keeping an eye out for new embeds—all while being efficient and easy to use.
 
Last edited:
B

bnew

Veteran
Joined
Nov 1, 2015
Messages
62,890
Reputation
9,559
Daps
172,212
An update of "tiktok to xenforo bbcode" bookmarklet based on the provided HTML DOM structure, ensuring the JavaScript selectors align with the page's actual HTML attributes and class names. Below is the updated bookmarklet with the revised selectors and additional fixes:

Updated Bookmarklet​


javascript

pastebin.com/RPUVB3RD

Changes and Improvements​

  1. Selectors Updated:
    • Adjusted to match the DOM structure provided, such as:
      • Title: .css-6yud38-DivDescriptionContentContainer + span.css-j2a19r-SpanText.
      • Creator info: .css-1k4xbc2-DivCreatorInfoContainer.
      • Engagement metrics (data-e2e attributes for counts remain unchanged).
  2. Dynamic Content Compatibility:
    • Ensures fallback mechanisms with null checks for missing elements.
  3. Element Anchoring:
    • Anchored the "Copy TikTok Data" button to .css-1dqhyfg-DivMediaCardOverlayTop for better reliability in dynamic TikTok pages.
  4. Testing for TikTok Domain:
    • Added a check to ensure the script runs only on TikTok video pages.
  5. Error Handling:
    • Improved feedback messages for debugging purposes.

How to Use:​

  1. Save the bookmarklet script in your browser's bookmarks bar.
  2. Navigate to a TikTok video page.
  3. Click the bookmarklet. If successful, it will add a button ("Copy TikTok Data") to the page.
  4. Click the button to copy the video metadata in XenForo BBCode format to your clipboard.
This updated bookmarklet ensures compatibility with the latest TikTok DOM structure for scraping metadata systematically.

edit:
added a userscript


pastebin.com/vePzUvpy
 
Last edited:
B

bnew

Veteran
Joined
Nov 1, 2015
Messages
62,890
Reputation
9,559
Daps
172,212

Changelog for Threads.net Copy to BBCode Bookmarklet (v1 to v2)​

The following changes were made to the Threads.net Copy to BBCode bookmarklet from version 1 (v1) to version 2 (v2) to improve functionality and output quality.

Changelog: v1 to v2​

Added​


  • Profile Picture Exclusion: Enhanced image filtering to exclude profile pictures from [img] tags in the output.
  • Filters out images with the alt attribute containing "profile picture" (case-insensitive).
  • Excludes images with dimensions where both height <= 50 and width <= 50 to target small profile picture sizes.
  • Query Parameter Removal for Images: Modified the [img] URL processing to remove query parameters (e.g., ?stp=dst-jpg_s150x150...) from image URLs.
  • Uses decodeURIComponent(img.src).split('?')[0] to retain only the base URL, resulting in cleaner tags.

Changed​


[*]Image Filtering Logic:

  • v1: Only filtered images with favicon in the URL (!img.src.toLowerCase().includes('favicon')).
  • v2: Added multi-condition filter to exclude profile pictures and maintain content images:

[*]Image URL Processing:

  • v1: Included full image URLs with query parameters ([img]${url.href}).
  • v2: Strips query parameters from image URLs for cleaner output:

Fixed​


[*]Profile Picture Inclusion: Addressed the issue where profile pictures were included in tags in v1. The new filter in v2 ensures profile pictures (typically small images with specific alt attributes) are excluded.
[*]Cleaner Image URLs: Eliminated unnecessary query parameters in [img] URLs, improving readability and compatibility with BBCode rendering on target platforms.

Notes​

  • The changes focus on improving the quality of the BBCode output by excluding irrelevant images (profile pictures) and cleaning up image URLs.
  • The profile picture filter assumes images have an alt attribute containing "profile picture" or dimensions <= 50x50. If Threads.net changes its HTML structure, the filter may need further adjustments.
  • Query parameter removal applies only to [img] tags; other URLs (e.g., [U][URL] for videos or external links) retain their existing logic.

Testing Recommendations​


  • Test v2 on various Threads.net pages (single post, thread, profile view) to ensure profile pictures are excluded and image URLs are clean.
  • Verify that content images (e.g., post images) are still included in [img] tags.
  • If profile pictures persist, inspect their attributes (e.g., alt, height, width, src) and consider adding filters like !img.src.includes('s150x150') for Instagram-specific profile picture URLs.


pastebin.com/RSEQWE8v
 
Last edited:
B

bnew

Veteran
Joined
Nov 1, 2015
Messages
62,890
Reputation
9,559
Daps
172,212
To create a version of the bookmarklet that works on a Shoelace instance (e.g., Shoelace) but outputs Threads.net post URLs (e.g., https://www.threads.net/@username/post/<post-id>) instead of Shoelace post URLs (e.g., https://shoelace.lumaeris.com/t/<post-id>), we need to adapt the existing bookmarklet to:

  1. Parse Shoelace’s DOM: Use the provided HTML structure to extract post content, usernames, timestamps, images, and like counts from Shoelace’s <div class="post"> and <div class="subpost"> elements.
  2. Generate Threads.net URLs: Convert Shoelace post IDs (e.g., DIjITLRuys6) to Threads.net URLs (e.g., Ian Burrowes (@ian_octr100) on Threads) using the username and post ID from the DOM.
  3. Use Shoelace Images: Include Shoelace’s proxied image URLs (e.g., https://shoelace.lumaeris.com/proxy/...) in [img] tags to avoid CORS issues when rendered in BBCode.
    [*]Maintain v2 Features: Retain profile picture exclusion (using alt and size filters) and query parameter removal for image URLs.
  4. Handle CORS: Ensure the bookmarklet operates within Shoelace’s origin, avoiding cross-origin requests since it’s scraping the current page’s DOM.

    Analysis of Shoelace’s HTML​

    The provided HTML from Shoelace shows:

  5. Main Post: Contained in <div class="post"> with no subpost parent.
  6. Username: <a class="post-username" href="/@Username">@username</a>
  7. Timestamp: <p class="post-faint">YYYY-MM-DD</p> (no post ID link for the main post).
  8. Content: <p class="post-body">...</p>
  9. Images: <img class="post-media-object" src="https://shoelace.lumaeris.com/proxy/..." alt="...">
  10. Likes: <p class="post-like-count post-faint">N</p>
  11. Profile Picture: <img class="post-pfp" src="https://shoelace.lumaeris.com/proxy/...">
  12. Subposts: Contained in <div class="subpost"><div class="post">...</div></div>.
  13. Same structure as the main post, but timestamps include a post ID link: <a class="post-clickable-time" href="/t/<post-id>">YYYY-MM-DD</a>
  14. Key Differences from Threads.net:
  15. Shoelace uses post and subpost classes instead of [data-pressable-container="true"].
  16. Post IDs are available in subpost links (href="/t/<post-id>") but not for the main post, requiring extraction from the page URL (e.g., https://shoelace.lumaeris.com/t/DIjITLRuys6).
  17. Images are proxied via https://shoelace.lumaeris.com/proxy/..., which should avoid CORS issues in BBCode rendering.
  18. No quoted posts or external links are explicitly marked in the provided HTML, so we’ll exclude those features unless needed.


    Approach​

    1. Extract Main Post ID:
    2. Get the post ID from the current URL (e.g., DIjITLRuys6 from https://shoelace.lumaeris.com/t/DIjITLRuys6).
    3. Parse Posts:
    4. Main post: Select .post not inside .subpost.
    5. Subposts: Select .post inside .subpost.
    6. Extract username, content, images, likes, and post ID (from post-clickable-time for subposts).
    7. Generate Threads.net URLs:
    8. For the main post: https://www.threads.net/@<username>/post/<post-id> using the URL’s post ID and username from .post-username.
    9. For subposts: Use the post ID from post-clickable-time links and username from .post-username.
    10. Filter Images:
    11. Exclude profile pictures using post-pfp class instead of alt or size, as Shoelace explicitly marks them.
    12. Use post-media-object images, removing query parameters from src.
    13. Format BBCode:
    14. Output Threads.net URLs for posts and spoilers.
    15. Use Shoelace’s proxied image URLs in [img] tags.
    16. Include usernames, content, images, and likes, similar to v2’s format.


      Modified Bookmarklet Code (v4)​

      This bookmarklet is designed to run on Shoelace pages, use Shoelace’s proxied image URLs, and output Threads.net post URLs. It adapts the v2 bookmarklet to Shoelace’s DOM and simplifies some features (e.g., omits quoted posts and external links due to lack of evidence in the HTML).

      Key Features of v4​

      1. DOM Parsing:
      2. Main post: Selected via .post:not(.subpost .post).
      3. Subposts: Selected via .subpost .post.
      4. Username: From .post-username, stripped of @.
      5. Content: From .post-body, converting <br> to newlines.
      6. Images: From .post-media-object, excluding .post-pfp.
      7. Likes: From .post-like-count.
      8. Post ID: From URL (main post) or .post-clickable-time (subposts).
      9. Threads.net URLs:
      10. Main post: https://www.threads.net/@<username>/post/<post-id> using URL’s post ID.
      11. Subposts: https://www.threads.net/@<username>/post/<post-id> using post-clickable-time href.
      12. Image Handling:
      13. Uses Shoelace’s proxied URLs (e.g., https://shoelace.lumaeris.com/proxy/...).
      14. Excludes profile pictures via post-pfp class.
      15. Removes query parameters from src using split('?')[0].
      16. BBCode Format:
      17. Mimics v2’s structure: post URL, spoiler with continued threads, spoiler with full text and images.
      18. Adds like counts to each post’s text.
      19. Excludes quoted posts and external links (not present in Shoelace’s HTML).


        CORS Considerations​

      20. No Cross-Origin Requests: The bookmarklet runs on shoelace.lumaeris.com, scraping the current page’s DOM. No HTTP requests are made, so CORS errors are not an issue during execution.
      21. Image Rendering: Shoelace’s proxied images (/proxy/...) likely have permissive CORS headers (e.g., Access-Control-Allow-Origin: *), as Shoelace is designed to display images in browsers. This should prevent CORS errors when the BBCode is rendered on a forum.
      22. Testing Needed: Verify that Shoelace’s image URLs load correctly in a forum’s BBCode renderer. If CORS errors occur, a server-side proxy for images may be needed.

        Limitations​

        1. Main Post ID:
        2. Relies on the URL containing /t/<post-id>. If the URL structure changes (e.g., query parameters or different paths), the main post ID extraction may fail.
        3. Quoted Posts:
        4. Shoelace’s HTML doesn’t mark quoted posts explicitly, so this feature is omitted. If needed, we could infer quotes from post content or DOM structure (e.g., nested elements).
        5. External Links:
        6. Not present in the provided HTML, so omitted. If Shoelace includes links in <a> tags within .post-body, we can add them.
        7. DOM Fragility:
        8. Depends on Shoelace’s class names (e.g., post, subpost, post-media-object). Changes in Shoelace v0.2.2 or shoelace.lumaeris.com may break the bookmarklet.
        9. Profile Pictures:
        10. Uses post-pfp class for exclusion, which is more reliable than v2’s alt and size checks. If Shoelace changes profile picture classes, the filter may need updates.


          Testing Instructions​

          1. Setup:
          2. Minify the code (remove whitespace) if needed for bookmarklet use.
          3. Add as a browser bookmark.
          4. Run:
          5. Visit a Shoelace post (e.g., https://shoelace.lumaeris.com/t/DIjITLRuys6).
          6. Click the bookmarklet and check the clipboard output.
          7. Verify:
          8. Paste the output into a text editor.
          9. Check that post URLs use https://www.threads.net/@<username>/post/<post-id>.
          10. Ensure [img] tags use Shoelace’s /proxy/ URLs without query parameters.
          11. Confirm profile pictures (post-pfp) are excluded.
          12. Verify like counts are included.
          13. Post the BBCode to a forum and check that images load without CORS errors.
          14. Debug:
          15. Open DevTools (F12) and check the Console for errors.
          16. If images are missing or incorrect, inspect Shoelace’s DOM to verify class names.
          17. If profile pictures appear, add logging:
            javascript





            Sample Output (Based on Provided HTML)​

            For https://shoelace.lumaeris.com/t/DIjITLRuys6, the output might look like:

            If Issues Arise​

            If the bookmarklet doesn’t work as expected:

          18. Missing Main Post URL: Check if the URL lacks /t/<post-id>. We could prompt the user for the post ID or scrape it from another element.
          19. Profile Pictures Included: Verify .post-pfp class usage. Add logging to inspect included images.
          20. Image CORS Errors: Test Shoelace’s /proxy/ URLs in a forum. If they fail, consider a server-side image proxy.
          21. DOM Changes: If Shoelace’s HTML changes (e.g., new classes), update selectors (e.g., .post-media-object to .post-media img).
          22. Share Details: Provide console logs, sample output, or the Shoelace page URL for debugging.

            This v4 bookmarklet should meet your requirements by running on Shoelace, using its proxied images, and outputting Threads.net post URLs. Let me know if you need tweaks or encounter issues!




            pastebin.com/VrFg3svr[/img]
 
Last edited:
B

bnew

Veteran
Joined
Nov 1, 2015
Messages
62,890
Reputation
9,559
Daps
172,212

What the "Invidious to BBcode" Bookmarklet Does​

The "Invidious to BBcode" bookmarklet is a browser bookmarklet designed for users browsing YouTube videos on Invidious instances (privacy-friendly alternative YouTube frontends). When you activate this bookmarklet on a video page, it automatically:
  • Extracts key video details—such as the video title, channel name, channel URL, subscriber count, and video description—from the current Invidious video page.
  • Retrieves both the original YouTube video URL and the current Invidious page URL.
  • Formats all this information into a ready-to-use BBCode snippet, a markup language often used for formatting posts on forums and message boards.
  • Copies the BBCode snippet directly to your clipboard for easy pasting elsewhere.
  • Shows a brief notification ("toast") to confirm the info has been copied.

How It Works (Simple Terms)​

  • Finds video details: The script scans the page for relevant video metadata.
  • Builds a BBCode summary: It organizes the information in a neat, forum-friendly format with bold titles, URLs, channel links, subscriber info, and a spoiler-tagged description.
  • Copies for you: It copies this formatted BBCode to your clipboard so you can easily paste it into forums or other places that accept BBCode.
  • Notifies you: It shows a pop-up confirmation when the info is copied.

Example Output​

The BBCode output typically looks like:

Code: 
[b]Video Title[/b]

[url=https://www.youtube.com/watch?v=...]YouTube Link[/url]
[u][url=Current-Invidious-URL]Current-Invidious-URL[/url][/u]

[b]Channel Info[/b] [u][url=Channel-URL]Channel Name[/url][/u] Subscribers: [subscriber count]

[b]Description[/b] [spoiler]Full video description[/spoiler]

Summary:
The bookmarklet lets you quickly turn any Invidious video page into a ready-made, BBCode-formatted summary for easy forum sharing—saving you time from copying and formatting video details yourself.

update: works faster
4/26/2025
Key improvements made:
  1. Prioritized #player_data in selectors to use structured data when available
  2. Added immediate element check in waitForElement before observing DOM changes
  3. Reduced timeout from 10s to 5s
  4. Optimized DOM observation configuration
  5. Streamlined text sanitization and data extraction
  6. Added animation to the toast notification
  7. Improved error handling and observer cleanup
  8. Removed redundant checks and simplified conditionals
  9. More efficient DOM traversal by observing document.documentElement instead of body
These changes should make the copy process significantly faster while maintaining all original functionality. The script will now:
  1. Check for required elements immediately
  2. Use structured data from #player_data when available
  3. Fail faster if elements aren't found
  4. Clean up resources more aggressively
  5. Handle edge cases better with improved sanitization

pastebin.com/19t9TUxk

old code
4/25/2025

pastebin.com/wjb5kgqp
 
Last edited:
B

bnew

Veteran
Joined
Nov 1, 2015
Messages
62,890
Reputation
9,559
Daps
172,212

Changelog for lemmy to bbcode v2.1 NESTED​


Version 2.1 NESTED​



Version 2.0​


  • Post URL Extraction:
  • Community Link Handling:
    • Added extraction of the href attribute from the .community-link element to obtain the community URL (e.g., [URL="https://lemm.ee/c/linuxmemes@lemmy.world"]linuxmemes - lemm.ee[/URL]).
    • Formatted the community URL with ... BBCode in the header, replacing the previous plain text output linuxmemes@lemmy.world.
  • Image URL Formatting:
    • Introduced logic in the createCopyButtons function to wrap image URLs in [URL unfurl="true"]...[/URL] tags in the imgSection variable.
    • Retained
      tags inside the spoiler section to match the expected output format.
  • Error Handling:
    • Added fallbacks for communityUrl and communityName (empty string if not found) to prevent errors when the .community-link element is missing.

Version 1.0 (Initial Version)​


[*]Initial Functionality:
  • Provided a bookmarklet to convert Lemmy post and comment content to BBCode format.
  • Supported extraction of post title, community name (as plain text), image URLs, and post datetime.
  • Included functionality to copy post content with a green copy button and nested comment content with a blue nested button.
  • Used htmlToBBCode and extractTextWithLinks functions to process HTML content into BBCode.
  • Output format included title in [b] tags, community name in [i] tags, and image URLs without [URL unfurl="true"] wrapping.
[*]Limitations:
  • Did not include the post URL in the output.
  • Community link was output as plain text ([i]linuxmemes@lemmy.world[/i]) without a hyperlink.
  • Image URLs were included directly without [URL unfurl="true"] wrapping, leading to incorrect formatting compared to the expected output.

expected output:​

Code: 
[b]I never had problems with permission again after I know the real power of sudo[/b]
https://lemm.ee/post/62368151?scrollToComments=true
[I][URL='https://lemm.ee/c/linuxmemes@lemmy.world']linuxmemes@lemmy.world[/URL][/I]

[URL unfurl="true"]https://lemmy.ca/pictrs/image/3dc37c65-1a84-49f6-9e51-593774879e49.png[/URL]

[spoiler="text"]
Posted on Friday, April 25th, 2025 at 10:18:15 AM GMT-04:00

[img]https://lemmy.ca/pictrs/image/3dc37c65-1a84-49f6-9e51-593774879e49.png[/img]
[/spoiler]


pastebin.com/L9CyEBgW


Testing Instructions​

  1. Install the Bookmarklet:
    • Create a new bookmark in your browser.
    • Copy the entire JavaScript code, including the javascript: prefix.
    • Paste it as the URL of the bookmark.
  2. Run the Bookmarklet:
    • Navigate to a Lemmy post page (e.g., on lemm.ee or lemmy.ca).
    • Click the bookmarklet to execute it.
    • Look for the green copy button (📋) on the post.
  3. Verify Output:
    • Click the copy button.
    • Paste the clipboard content into a text editor.
    • Confirm the community link appears as [I][URL='https://lemm.ee/c/linuxmemes@lemmy.world']linuxmemes@lemmy.world[/URL][/I].
    • Ensure the rest of the output (post URL, image URLs, spoiler section) matches the expected format.
  4. Test Across Instances:
    • Test on different Lemmy instances to ensure the .community-link selector consistently retrieves the correct href and textContent.
    • If the community link is missing or incorrectly formatted, inspect the DOM to verify the .community-link element's structure.

Additional Notes​

  • Consistency Across Lemmy Instances: The .community-link selector should work across most Lemmy instances, but if the DOM structure varies (e.g., different class names), you may need to adjust the selector or add fallbacks.
  • Error Handling: The code includes a fallback for communityUrl and communityName (empty string if not found), which prevents the bookmarklet from breaking if the .community-link element is missing.
  • Future Improvements: If additional BBCode formatting changes are needed (e.g., for other elements like user names or timestamps), the createCopyButtons function can be further modified to accommodate those requirements.
 
Last edited:
You must log in or register to reply here.

Similar threads

B
Trump has signed an executive order to end collective bargaining and union protections for federal employees, leaving thousands without labor protecti
2 3
Replies
42
Views
2K
Strapped
Strapped
Top