bnew

Veteran
Joined
Nov 1, 2015
Messages
62,486
Reputation
9,488
Daps
171,175
so fix formatting of html code


Here's a change log in layman's terms from the initial code to the updated code, with the updated code appended: Version 1: Initial Code
  • The initial code was designed to format text within a textarea element on a webpage.
  • It replaced URLs with a specific format, added newlines before certain characters, and removed unnecessary tags.
  • It also removed duplicate newlines and improved the formatting of headings and images.
Version 2: Updated Code
  • **Fixed issue with characters∗∗:Theupdatedcodereplaced‘characters**:Theupdatedcodereplaced`characters∗∗:Theupdatedcodereplaced‘ characters with the correct brackets (‘and‘`and`‘and‘`) to fix a formatting issue.
  • Improved newline handling: The code now adds newlines before specific characters, such as headings and images, to improve readability.
  • Added support for math notation: The code now replaces text enclosed in double dollar signs ($$...$$) with LaTeX-style math notation ($$$1$$).
  • Improved paragraph formatting: The code now adds newlines between paragraphs to improve readability.
  • Added support for quote tags: The code now wraps text enclosed in
    tags in and tags to improve formatting.
  • Removed unnecessary patterns: The code removed some unnecessary patterns, such as pattern8, to simplify the formatting process.
  • Improved code organization: The code is now more organized, with each pattern and replacement clearly defined and separated.
Changes to Patterns
  • pattern1: Updated to match URLs with the correct brackets ($$ and $$).
  • pattern2: Updated to add newlines before specific characters, such as headings and images.
  • pattern3: Updated to add newlines before images with alt text.
  • pattern4: Updated to replace newlines with two newlines.
  • pattern5: Updated to add newlines before headings, lists, and images.
  • pattern6 and pattern7: Removed, as they are no longer necessary.
  • mathPattern: Added to replace text enclosed in double dollar signs with LaTeX-style math notation.
  • paragraphPattern: Added to add newlines between paragraphs.
  • quotePattern: Added to wrap text enclosed in
    tags in and tags.
Code:
javascript
javascript:(function() {
  var textareas = document.querySelectorAll('textarea.input');
  textareas.forEach(function(textarea) {
    var text = textarea.value;
    var pattern1 = /$$URL=(.*?)$$$$\/URL$$/g;
    var pattern2 = /(\n)([A-Z"]|\d|$$B$$|$$I$$|$$IMG$$)/g;
    var pattern3 = /$$IMG alt="([^"]*)"/g;
    var pattern4 = /\n/g;
    var pattern5 = /($$HEADING=2$$|$$LIST$$|$$\*$$|$$\/LIST$$|$$IMG$$)/g;
    var pattern6 = /$$\/?FONT(=.*?)?$$/g;
    var pattern7 = /$$\/?COLOR(=.*?)?$$/g;
    var pattern8 = /\$\$\/IMG$$([A-Za-z0-9])/g;
    var pattern9 = /\n{2,}/g;

    var mathPattern = /\$\$(.*?)\$\$/g;

    var paragraphPattern = /([^\n])\n([A-Z0-9])/g;
   
    var replacedText = text.replace(pattern1, '[U][URL=$1[/URL][/U]');
    replacedText = replacedText.replace(pattern2, '$1\n$2');
    replacedText = replacedText.replace(pattern3, '\n[IMG alt="$1"');
    replacedText = replacedText.replace(pattern4, '\n\n');
    replacedText = replacedText.replace(pattern5, '\n$1');
    replacedText = replacedText.replace(pattern6, '');
    replacedText = replacedText.replace(pattern7, '');
    replacedText = replacedText.replace(pattern8, ']\n[/IMG]$1');
    replacedText = replacedText.replace(pattern9, '\n');
    replacedText = replacedText.replace(/$$U$$\$\$U\$\$URL=(.*?)\/URL\$\$\/U\$\$\/U$$/g, '[U][URL=$1[/URL][/U]');
    replacedText = replacedText.replace(/$$\/HEADING$$\n/g, '[/HEADING]');
    replacedText = replacedText.replace(/$$\/IMG$$\n/g, '[/IMG]');

    replacedText = replacedText.replace(mathPattern, '\$$$1\$$');

    replacedText = replacedText.replace(paragraphPattern, '$1\n\n$2');
   
    var quotePattern = /$$QUOTE$$(?:.*?\n)*?(.*?)$$\/QUOTE$$/gs;
    replacedText = replacedText.replace(quotePattern, '[QUOTE][SIZE=4]$1[/SIZE][/QUOTE]');

    textarea.value = replacedText;
  });
})();
 

bnew

Veteran
Joined
Nov 1, 2015
Messages
62,486
Reputation
9,488
Daps
171,175
To ensure that the script does not replace the same URL tags multiple times (if they've already been wrapped with [U]), we can modify the replacement logic to only apply the [U] wrapping if it hasn’t been applied already. One way to do this is by adding a condition to check if the [U] tags are already present.


Here’s an updated version of the code to address that:

Code:
javascript:(function() {
  var textareas = document.querySelectorAll('textarea.input');
  textareas.forEach(function(textarea) {
    var text = textarea.value;
    
    
    var pattern1 = /\[URL\](.*?)\[\/URL\]/g; 
    var pattern2 = /\[URL=(.*?)\](.*?)\[\/URL\]/g; 
    
    
    var pattern3 = /(\n)([A-Z"]|\d|\[B\]|\[I\]|\[IMG\])/g;
    var pattern4 = /\[IMG alt="([^"]*)"/g;
    var pattern5 = /\n/g;
    var pattern6 = /(\[HEADING=2\]|\[LIST\]|\[\*\]|\[\/LIST\]|\[IMG\])/g;
    var pattern7 = /\[\/?FONT(=.*?)?\]/g;
    var pattern8 = /\[\/?COLOR(=.*?)?\]/g;
    var pattern9 = /\$\$\/IMG\]([A-Za-z0-9])/g;
    var pattern10 = /\n{2,}/g;

    var mathPattern = /\$\$(.*?)\$\$/g;

    var paragraphPattern = /([^\n])\n([A-Z0-9])/g;

    
    var replacedText = text.replace(pattern1, function(match, url) {
      
      if (!/\[U\]/.test(match)) {
        return `[U][URL]${url}[/URL][/U]`;
      }
      return match;
    });
    
    replacedText = replacedText.replace(pattern2, function(match, url, innerText) {
      
      if (!/\[U\]/.test(match)) {
        return `[U][URL=${url}]${innerText}[/URL][/U]`;
      }
      return match;
    });

    replacedText = replacedText.replace(pattern3, '$1\n$2');
    replacedText = replacedText.replace(pattern4, '\n[IMG alt="$1"');
    replacedText = replacedText.replace(pattern5, '\n\n');
    replacedText = replacedText.replace(pattern6, '');
    replacedText = replacedText.replace(pattern7, '');
    replacedText = replacedText.replace(pattern8, ']\n[/IMG]$1');
    replacedText = replacedText.replace(pattern10, '\n');
    replacedText = replacedText.replace(/\[U\]\$\$U\$\$URL=(.*?)\/URL\$\$\/U\$\$\/U\]/g, '[U][URL=$1[/URL][/U]');
    replacedText = replacedText.replace(/\[\/HEADING\]\n/g, '[/HEADING]');
    replacedText = replacedText.replace(/\[\/IMG\]\n/g, '[/IMG]');

    replacedText = replacedText.replace(mathPattern, '\\[$1\\]');

    replacedText = replacedText.replace(paragraphPattern, '$1\n\n$2');
    
    var quotePattern = /\[QUOTE\](?:.*?\n)*?(.*?)\[\/QUOTE\]/gs;
    replacedText = replacedText.replace(quotePattern, '[QUOTE][SIZE=4]$1[/SIZE][/QUOTE]');

    textarea.value = replacedText;
  });
})();


Key Changes:​


  1. Pattern Matching for [U][/B]: In the replacement functions for both pattern1 (the [URL]...[/URL] pattern) and pattern2 (the [URL=]...[/URL] pattern), I’ve added a check to see if the text is already wrapped in [U] using the regular expression /\[U\]/. If the text is already wrapped in [U], it will skip the wrapping and leave the original match as is.
    • This avoids wrapping [URL] tags multiple times.
    [*]Replacement Functions: I used replace() with a callback function, which checks each match and ensures that [U] tags are only added if not already present.



Example Input:

Code:
🛰️ Paper: [URL]https://arxiv.org/abs/2412.10360[/URL]
🌌 Website: [URL]https://apollo-lmms.github.io[/URL]



Expected Output:

Code:
🛰️ Paper: [U][URL]https://arxiv.org/abs/2412.10360[/URL][/U]
🌌 Website: [U][URL]https://apollo-lmms.github.io[/URL][/U]



Example After Running the Script Twice:


If you run the script on the same text twice, it will not apply the [U] tags again, ensuring that the result remains unchanged after the first execution.
 

bnew

Veteran
Joined
Nov 1, 2015
Messages
62,486
Reputation
9,488
Daps
171,175
updated the bluesky post extract bookmarklet to get playlist urls for videos moree reliably since the old one only retrieved one playlist url no matter how many vidos were in a thread.

*NOTE: quoted posts not working.. :(

What Does This Code Do?​

This code is a bookmarklet designed to work on Bluesky (BSky) posts and threads. When you run it on a Bluesky thread or profile page, it performs several tasks to extract and format the content of the posts in a user-friendly way. Here's a detailed breakdown of its functionality:

1. Prompts You to Specify How Many Posts to Extract​

- When you click the bookmarklet, it shows a pop-up window with a calculator-like interface.
- You can enter the number of posts you want to extract (e.g., 5, 10, or 20).
- If you enter an invalid number (like 0 or a negative number), it will ask you to try again.

2. Extracts Posts from the Thread​

- After you specify the number of posts, the script scans the Bluesky thread or profile page.
- It identifies all the posts made by the original author of the thread (ignoring replies from other users unless specified otherwise).
- It collects the following details for each post:
  • Author's username (prefixed with a 🇺 emoji for visual distinction).
  • Post content (the text of the post).
  • Embedded links (e.g., playlist links, video links, or image links).
  • Quoted posts (if the post references or quotes another post, it includes the quoted content).
  • Images (if the post contains images, it adds them as clickable links).

3. Fetches Additional Data from Bluesky's API​

- For each post, the script makes a call to Bluesky's public API to fetch additional details, such as:
  • Embedded media (e.g., playlists, videos, or images).
  • Post metadata (e.g., unique post IDs and URLs).
- If the post contains a playlist, video, or image, the script appends the link to the post's text.

4. Formats the Extracted Content​

- The script organizes the extracted posts into a structured and readable format:
  • Each post is numbered (e.g., "1/5", "2/5") to indicate its position in the thread.
  • The author's username is displayed with the 🇺 emoji (e.g., "🇺 username").
  • Links, quoted posts, and images are clearly marked and formatted for easy reading.
  • The entire thread is wrapped in spoiler tags (e.g., [SPOILER="thread continued"]) to make it compact and easy to navigate.

5. Copies the Formatted Text to Your Clipboard​

- Once the script finishes extracting and formatting the posts, it automatically copies the entire formatted text to your clipboard.
- You can then paste the text anywhere (e.g., a forum, document, or chat) without needing to manually copy and format each post.

6. Shows a Notification​

- After copying the text, the script displays a small notification at the bottom-left corner of the screen to let you know how many posts were copied (e.g., "Copied: 5 posts").
- The notification fades away after a few seconds.

7. Handles Errors Gracefully​

- If something goes wrong (e.g., the script can't find posts or fetch data from the API), it will log the error in the browser's console and continue processing the remaining posts.
- This ensures that the script doesn't break completely if it encounters an issue.

What Does the Final Output Look Like?​

Here’s an example of what the formatted output might look like when you paste it:

Code:
https://bsky.app/profile/username/post/12345

[SPOILER="thread continued"]
https://bsky.app/profile/username/post/12346
https://bsky.app/profile/username/post/12347
[/SPOILER]

[SPOILER="full text & large images"]

1/3
🇺 username
This is the first post in the thread.
[U][URL]https://example.com/playlist[/URL][/U]

2/3
🇺 username
This is the second post.
[Quoted post]
🇺 another_user
https://bsky.app/profile/another_user/post/67890
This is the quoted post content.

3/3
🇺 username
This is the third post with an image.
[img]https://example.com/image.jpg[/img]

[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]

Why Is This Useful?​

- Saves Time: Instead of manually copying and formatting each post, this script automates the process.
- Preserves Context: It includes all relevant details (e.g., links, quoted posts, images) in a structured format.
- Easy Sharing: The formatted text is ready to be pasted into forums, blogs, or other platforms that support BBCode or similar formatting.
- Customizable: You can choose how many posts to extract, making it flexible for both short and long threads.

Who Would Use This?​

- Forum Users: People who want to share Bluesky threads on forums that use BBCode formatting.
- Content Creators: Bloggers or writers who want to archive or reference Bluesky posts in their work.
- Casual Users: Anyone who wants to save or share Bluesky threads in a clean, readable format.

Conclusion​

In summary, this script is a powerful tool for extracting, formatting, and sharing Bluesky posts and threads with minimal effort. It’s designed to make your life easier when dealing with long or complex threads! Let me know if you have further questions or need additional features. 😊



v3.6

DeepSeek-V3 fixed the issue :in one shot :wow:

protip: when posting to the coli an output of more than 6,000 characters switch to bbcode editor so the post goes through without any 500 interval error message appearing.
 
Last edited:

bnew

Veteran
Joined
Nov 1, 2015
Messages
62,486
Reputation
9,488
Daps
171,175
made a threads.net bookmarklet that basically and ALPHA version since i have to figure out how to extract images properly. this is basically quick conversion from nitter bookmarklet that chains posts and only shares post links by main author.




This code is a bookmarklet—a small piece of JavaScript code that you can run in your browser to perform specific tasks on a webpage. In this case, the bookmarklet is designed to extract and format posts from a Threads.net page (a social media platform) into a structured, easy-to-read format. Here's a detailed breakdown of what it does, explained in simple terms:

What Does the Code Do?

  1. Finds All Posts on the Page:
    • The code looks for all the posts on the Threads.net page. Each post is identified by a specific HTML structure ([data-pressable-container="true"]).
  2. Extracts the Main Author's Username:
    • It identifies the username of the main author (the person who created the first post) by looking at the URL of the first post. For example, if the URL is https://threads.net/@theluigion/post/12345, it extracts theluigion as the username.
  3. Collects Post Data:
    • For each post, the code extracts:
      • Post Content: The text of the post.
      • Post Link: The URL of the post.
      • Author's Username: The username of the person who created the post (extracted from the post URL).
      • Quoted Posts: If the post includes a quoted post (a reference to another post), it extracts the quoted text and link.
      • Images and Videos: Any images or videos embedded in the post.
      • External Links: Links to external websites (e.g., https://www.syracuse.com).
  4. Formats the Data:
    • The extracted data is formatted into a structured output using BBCode (a markup language often used in forums). For example:
      • Post text is displayed as plain text.
      • Links are wrapped in [URL] tags.
      • Images are wrapped in [img] tags.
      • Quoted posts are labeled and included in the output.
  5. Groups Posts into Threads:
    • If there are multiple posts in a thread, the code groups them together and separates them into sections:
      • Thread Continued: Links to other posts in the thread by the main author.
      • Full Text & Large Images: The full content of all posts, including text, images, and videos.
  6. Copies the Output to the Clipboard:
    • Once the data is extracted and formatted, the code copies the entire output to your clipboard. You can then paste it wherever you need (e.g., into a forum or document).
  7. Shows a Notification:
    • A small notification pops up in the bottom-left corner of the screen to let you know how many posts were copied.

Why Is This Useful?​

  • Saves Time: Instead of manually copying and formatting posts, this tool does it automatically.
  • Preserves Structure: It keeps the structure of the thread intact, including quoted posts, images, and links.
  • Easy Sharing: The formatted output is ready to be shared on forums or other platforms that support BBCode.

Step-by-Step Example​

Let’s say you’re viewing a Threads.net thread with the following posts:
  1. Post 1 by @theluigion:
    • Text: "Check out this article!"
    • Link: https://threads.net/@theluigion/post/12345
    • External Link: https://www.syracuse.com/article
  2. Post 2 by @syracusedotcom:
    • Text: "Here's a follow-up to the article."
    • Link: https://threads.net/@syracusedotcom/post/67890
    • Image: https://example.com/image.jpg
When you run the bookmarklet, it will:
  1. Extract the content of both posts.
  2. Format the output like this:

    Code:
    https://threads.net/@theluigion/post/12345
    [SPOILER="thread continued"]
    https://threads.net/@syracusedotcom/post/67890
    [/SPOILER]
    [SPOILER="full text & large images"]
    1/2
    @theluigion
    Check out this article!
    [U][URL]https://www.syracuse.com/article[/URL][/U]
    
    2/2
    @syracusedotcom
    Here's a follow-up to the article.
    [img]https://example.com/image.jpg[/img]
    [/SPOILER]
  3. Copy this formatted text to your clipboard.

Key Features

  • Handles Multiple Authors: It correctly identifies and attributes posts to different authors.
  • Extracts Media: It includes images and videos in the output.
  • Filters Links: It only includes external links and excludes internal Threads.net links.
  • Ignores Favicons: It skips small icons (favicons) that are not part of the main content.

How to Use It

  1. Copy the bookmarklet code.
  2. Create a new bookmark in your browser and paste the code into the URL field.
  3. Open a Threads.net thread.
  4. Click the bookmarklet to run it.
  5. The formatted output will be copied to your clipboard, and a notification will confirm the action.

Who Is This For?

  • Social Media Users: If you want to share Threads.net posts on other platforms.
  • Forum Users: If you need to post Threads.net content in BBCode format.
  • Content Creators: If you want to archive or repurpose Threads.net posts.

In summary, this bookmarklet is a handy tool for automatically extracting and formatting Threads.net posts into a clean, structured format that’s easy to share or archive. It saves you time and ensures that all the important details (text, links, images, and videos) are preserved.

 

bnew

Veteran
Joined
Nov 1, 2015
Messages
62,486
Reputation
9,488
Daps
171,175
To include **all post URLs** in the `[SPOILER="thread continued"]` section (not just those by the main author), we need to modify the filtering logic. Here's the updated bookmarklet code:

---

### **Updated Bookmarklet (Includes All Post URLs in Threads Continued Spoiler)**


---

### **Key Changes**
1. **Include All Post URLs**:
- The `[SPOILER="thread continued"]` section now includes **all post URLs** from the thread, regardless of the author.
- This is done by removing the filtering logic that previously restricted it to only the main author's posts.

2. **Output Format**:
- The `[SPOILER="thread continued"]` section will now list all post URLs in the thread.



### **Example Output**
For a thread with the following posts:
1. **Post 1** by `@theluigion`:
- URL: `https://threads.net/@theluigion/post/12345`
2. **Post 2** by `@syracusedotcom`:
- URL: `https://threads.net/@syracusedotcom/post/67890`
3. **Post 3** by `@sarahrain68`:
- URL: `https://threads.net/@sarahrain68/post/98765`

The output will look like this:
Code:
https://threads.net/@theluigion/post/12345
[SPOILER="thread continued"]
https://threads.net/@syracusedotcom/post/67890
https://threads.net/@sarahrain68/post/98765
[/SPOILER]
[SPOILER="full text & large images"]
1/3
@theluigion
Check out this article!
[U][URL]https://www.syracuse.com/article[/URL][/U]

2/3
@syracusedotcom
Here's a follow-up to the article.
[img]https://example.com/image.jpg[/img]

3/3
@sarahrain68
Great discussion!
[/SPOILER]

---

### **How to Use**
1. Copy the updated bookmarklet code.
2. Create a new bookmark in your browser and paste the code into the URL field.
3. Open a Threads.net thread.
4. Click the bookmarklet to run it.
5. The formatted output will be copied to your clipboard, and a notification will confirm the action.

---

Let me know if you need further adjustments!

 

bnew

Veteran
Joined
Nov 1, 2015
Messages
62,486
Reputation
9,488
Daps
171,175
To modify the bookmarklet so that it **only includes posts and post URLs by the main author** in the `[SPOILER="thread continued"]` section, we need to filter the posts based on the author's username. Here's the updated code:

---

### **Key Changes**
1. **Filter Posts by Main Author**:
- The `[SPOILER="thread continued"]` section now only includes posts and post URLs by the **main author** (the author of the first post).
- This is done by filtering `userPosts` to include only those links where the post author matches `mainUsername`.

2. **Output Format**:
- Only posts and URLs by the main author are included in the `[SPOILER="thread continued"]` section.

---

### **Example Output**
For a thread with the following posts:
1. **Post 1** by `@theluigion`:
- URL: `https://threads.net/@theluigion/post/12345`
2. **Post 2** by `@syracusedotcom`:
- URL: `https://threads.net/@syracusedotcom/post/67890`
3. **Post 3** by `@theluigion`:
- URL: `https://threads.net/@theluigion/post/98765`

The output will look like this:
Code:
https://threads.net/@theluigion/post/12345
[SPOILER="thread continued"]
https://threads.net/@theluigion/post/98765
[/SPOILER]
[SPOILER="full text & large images"]
1/2
@theluigion
Check out this article!
[U][URL]https://www.syracuse.com/article[/URL][/U]

2/2
@theluigion
Here's a follow-up to the article.
[img]https://example.com/image.jpg[/img]
[/SPOILER]

---

### **How to Use**
1. Copy the updated bookmarklet code.
2. Create a new bookmark in your browser and paste the code into the URL field.
3. Open a Threads.net thread.
4. Click the bookmarklet to run it.
5. The formatted output will be copied to your clipboard, and a notification will confirm the action.

---

Let me know if you need further adjustments!


 

bnew

Veteran
Joined
Nov 1, 2015
Messages
62,486
Reputation
9,488
Daps
171,175
amended with chatgpt 4o-mini.

fixes lines and formatting when posting articles. must use BBcode editor.



Sure! Here’s a detailed summary of what the code does, broken down into simpler terms:

Overview​


This code is a bookmarklet written in JavaScript. When executed in a web browser, it looks for specific text areas on a webpage and modifies the text inside them according to certain rules. The primary purpose is to clean up and reformat text that uses a specific markup style, which appears to be related to forum or content management systems.

Detailed Breakdown​


  1. Selecting Text Areas:
    • The code starts by finding all <textarea> elements on the page that have a class of input. A <textarea> is a form field where users can enter multi-line text.
  2. Looping Through Each Text Area:
    • For each text area found, the code gets the current text inside that area. This is where the modifications will take place.
  3. Defining Patterns:
    • The code uses regular expressions (regex) to identify specific patterns in the text. Regular expressions are like search patterns that help find specific strings or formats in the text. Here are the main patterns used:
      • URL Pattern: Looks for links in a certain format (e.g., [URL='http://.../']).
      • Image Alt Text Pattern: Finds image tags that specify alternative text.
      • Empty List Pattern: Identifies
        • blocks that contain only list items (
        • ) or are empty.
        • List Item Pattern: Looks for list items followed by newlines to ensure they stay on the same line.
        • Formatting Tags: Identifies various tags like headings and lists that need specific formatting.
      • Text Replacement:
        • The code replaces certain parts of the text according to the patterns defined. For example:
        • It reformats URL tags to include underline formatting.
        • It ensures that list items have their content right after them on the same line.
        • It removes any empty list blocks that don't contain any content.
        • It cleans up formatting tags that are not necessary.
      • Cleaning Up Line Spacing:
        • After making the replacements, the code consolidates multiple empty lines into a maximum of two. This helps keep the text neat and readable.
      • Final Formatting:
        • The code trims any extra spaces from the start and end of each line and removes any completely empty lines.
      • Updating the Text Area:
        • Finally, the modified text is placed back into the original text area, replacing the old content with the cleaned-up version.

        Conclusion​


        In summary, this code is a helpful tool for cleaning and formatting text in specific input fields on a webpage. It makes sure that the text follows a consistent style, maintains proper line spacing, and removes any unnecessary or empty elements. This is particularly useful for users who are editing posts or messages that use a certain markup language. It helps ensure that the final output looks neat and professional, making it easier for readers to understand.

 
Last edited:

bnew

Veteran
Joined
Nov 1, 2015
Messages
62,486
Reputation
9,488
Daps
171,175
how to post , share , upload a worldstar / worldstarhiphop video since the url format changed on the world start site and they re no longer using urls that look like http://m.worldstarhiphop.com/video.php?v=wshh56rPQ87jOnQQvAm5.


This code is a bookmarklet, which is a small piece of JavaScript that can be saved as a bookmark in your web browser. Here’s what it does in simple terms:

What the Code Does​

  1. Extracts a Unique ID:
    • When you click the bookmarklet, it searches through the HTML code of the current webpage for a specific piece of information called videoUniqueId.
    • This ID is usually hidden within the webpage's scripts and is used to identify a particular video.
  2. Generates URLs:
    • Once it finds the videoUniqueId, it uses this ID to create two different types of URLs:
      • A short URL in the format [MEDIA=wshh]ID[/MEDIA].
      • A full URL in the format https://worldstarhiphop.com/embed/ID.
  3. Toggles Between URL Formats:
    • The code has a toggle switch (useMediaTag) that determines whether to use the short [MEDIA=wshh]ID[/MEDIA] format or the full URL format.
    • By default, it uses the short format, but you can change this by setting useMediaTag to false.
  4. Copies Text to Clipboard:
    • After generating the appropriate URL, it copies this URL along with the current webpage's address (URL) to your clipboard.
    • This means you can easily paste these URLs elsewhere.
  5. Displays a Toast Notification:
    • After copying the text to your clipboard, it shows a small pop-up message (toast notification) on your screen indicating what has been copied.
    • This notification includes both the generated URL and the current webpage's address.

Step-by-Step Breakdown​

  1. Search for Video Unique ID
    • The code looks through all script tags on the webpage for a specific string containing videoUniqueId.
    • If found, it extracts the ID number.
  2. Generate URLs
    • If useMediaTag is true, it creates a short URL like [MEDIA=wshh]12345[/MEDIA].
    • If useMediaTag is false, it creates a full URL like https://worldstarhiphop.com/embed/12345.
  3. Combine Text for Clipboard
    • It combines both the generated URL and the current webpage's address into one string.
    • For example:

      Code:
      [MEDIA=wshh]12345[/MEDIA]
      https://example.com/current-page
  4. Copy Text to Clipboard
    • It attempts to copy this combined text into your system's clipboard.
  5. Show Toast Notification
    • After copying, it displays a pop-up message showing what was copied.

Example Scenario​

  • You are on a webpage with a video from WorldStarHipHop.
  • You click the bookmarklet.
  • The script finds the videoUniqueId (e.g., 12345).
  • If using default settings (useMediaTag = true), it generates [MEDIA=wshh]12345[/MEDIA].
  • It also captures the current webpage's URL (e.g., https://example.com/current-page).
  • It copies both lines of text to your clipboard.
  • A toast notification appears showing:

Code:
Copied:
[MEDIA=wshh]12345[/MEDIA]
https://example.com/current-page


This way, you can easily share or use these URLs without having to manually copy them from different parts of the webpage.



userscript:






Instructions on manually getting the url you need to be able to share on the forum.

Markdown (GitHub flavored):
Here are the simple steps to extract the `videoUniqueId` from a WorldStarHipHop video page and construct the necessary URLs manually:


### Step-by-Step Instructions


#### 1. Open the Video Page

- Go to the WorldStarHipHop video page you want to extract the `videoUniqueId` from.


#### 2. View Page Source

- Right-click on the webpage and select "View Page Source" or press `Ctrl + U` (Windows) or `Cmd + Option + U` (Mac) to open the page source.


#### 3. Find the Script Tags

- In the page source, press `Ctrl + F` (Windows) or `Cmd + F` (Mac) to open the search bar.

- Type "videoUniqueId" in the search bar and press Enter.


#### 4. Extract the Video Unique ID

- Look for a line that looks something like this:

  ```javascript

  "videoUniqueId": 12345,

  ```

  The number after `"videoUniqueId":` is your unique ID (e.g., `12345`).


#### 5. Construct the URLs


##### Media Tag URL

- If you want to use the media tag format, construct it like this:

  ```

  [MEDIA=wshh]12345[/MEDIA]

  ```


##### Full Embed URL

- If you want to use the full embed URL format, construct it like this:

  ```

  https://worldstarhiphop.com/embed/12345

  ```


#### 6. Copy and Use

- Copy either of these constructed URLs and use them as needed.


### Example


Let's say you found this line in the page source:

```javascript

"videoUniqueId": 67890,

```


You would then construct your URLs as follows:


##### Media Tag URL

```

[MEDIA=wshh]67890[/MEDIA]

```


##### Full Embed URL

```

https://worldstarhiphop.com/embed/67890

```


### Additional Tips


- Make sure you are on a WorldStarHipHop video page when doing this.

- The `videoUniqueId` should be a number.

- If you can't find `"videoUniqueId"` in the page source, it might be hidden or not available on that specific page.


By following these steps, you can manually extract and construct the necessary URLs for any WorldStarHipHop video.
 
Last edited:

bnew

Veteran
Joined
Nov 1, 2015
Messages
62,486
Reputation
9,488
Daps
171,175
used kimi.ai to generate the code.
internal reference: Mastodon Instance copy to xenforo bookmarklet v1.1
issues:
post body doesn't output new lines as rendered on the site.
running bookmarklet on a reply will only output the reply and not the parent post too.
doesn't include additional post urls by main author/username in threads continued spoiler


The code is a JavaScript bookmarklet designed to work with Mastodon posts. Here's a detailed summary of what it does in simple terms:

What is a Bookmarklet?​

A bookmarklet is a small piece of JavaScript code that you can save as a bookmark in your browser. When you click on it, the code runs and performs a specific action on the webpage you're currently viewing.

Functionality of the Code:​

  1. Post Selection:
    • The code selects all elements on the page with the class .detailed-status__wrapper and .status__wrapper-reply. These are the main posts and replies on a Mastodon page.
  2. Content Extraction:
    • For each post or reply, it extracts the content, which includes text, images, and videos.
    • It processes the content to remove HTML tags and replace links with BBCode-style links (link).
  3. Media Handling:
    • It extracts image URLs and converts them into BBCode format (
      ).
    • Videos are linked directly using their source URL.
  4. Output Formatting:
    • The extracted content is formatted into a readable format, including the post number, author, and content.
    • It uses BBCode for formatting, which is similar to Markdown but uses different syntax for links and images.
  5. Thread Handling:
    • If there are many images or if it's the last post being processed, it creates a formatted output chain.
    • This includes a "thread continued" spoiler with links to other posts in the thread and a "full text & large images" spoiler with the detailed content.
  6. Clipboard Copying:
    • The final formatted text is copied to the clipboard.
    • A notification is displayed to confirm that the content has been copied.

Purpose:​

The main purpose of this code is to help users easily copy and format Mastodon posts, including replies, into a format that can be shared elsewhere, such as on forums or other social media platforms. It simplifies the process of extracting and formatting content from Mastodon threads.

Key Features:​

  • Thread Support: Handles both main posts and replies.
  • Media Extraction: Includes images and videos in the output.
  • BBCode Formatting: Uses BBCode for links and images.
  • Clipboard Copying: Automatically copies the formatted content to the clipboard.
  • Notification: Displays a temporary notification after copying.
Overall, this bookmarklet is a useful tool for anyone who wants to easily share Mastodon content in a formatted way.

example output:
Code:
https://mastodon.social/@flexghost/113974916141602522
[SPOILER="thread continued"]

[/SPOILER]
[SPOILER="full text & large images"]

1/6
@flexghost@mastodon.social
Meta illegally downloaded 80+ terabytes of books from LibGen, Anna’s Archive, and Z-Library to train their AIIn 2010, Aaron Swartz downloaded just 70GB of JSTOR articles     0.0875% of what Meta took He faced $1M in fines and 35 years in jail. The pressure from the US government caused Aaron to take his own life in 2013If corporations are people than what fate does Meta deserve?(VIDEO: Standing ovation for the Aaron Swartz statue unveiling at the Internet Archive)

[U][URL]https://files.mastodon.social/media_attachments/files/113/974/912/001/007/157/original/9802934a993e623d.mp4[/URL][/U]

2/6
@CiaoBruno@newsie.social
@flexghost

[img]https://media.mastodon.social/cache/media_attachments/files/113/974/957/036/592/124/small/e001f973895fc54a.jpeg[/img]

3/6
@whorfin
@CiaoBruno @flexghost Corporate Death Penalty: seize and sell all assets to benefit victims of wrongdoing, all IP to public domain

4/6
@bufalo1973@tuiter.rocks
@flexghostIf it was "fair", close to $1.5B and 40 000 years (distributed by shareholder investment)Edit: add to that the inflation.

5/6
@flexghost
@bufalo1973

6/6
@peteorrall
@flexghost #Meta deserves the worst.


[COLOR=rgb(184, 49, 47)][B][SIZE=5]To post posts 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]

edit:
bugfix: code wasn't domain agnostic, fixed images.
now v1.3

2/9/2025 v1.1
 
Last edited:

bnew

Veteran
Joined
Nov 1, 2015
Messages
62,486
Reputation
9,488
Daps
171,175
coli thread broken? too many embeds on a coli thread and the page won't load cause your preferences is set to more than 15 pages per post? heres a bookmarklet that will set the page back to 15 posts per page and when you're ready to change it back to your predefined settings (ex. 20, 25 35, 50) just press the bookmarklet again.

to change the number of posts per page in the code, copy the code to a text editor and press ctrl-F for the find option; look for "35" and replace 35 with the number of posts you'd prefer and add the bookmarklet to your browser.

What the Bookmarklet Does on a XenForo-Compatible Forum

This bookmarklet allows you to quickly switch the number of posts displayed per page in thread view between 15 and 35 posts per page. This is useful for fixing a known XenForo bug where some thread pages fail to load properly when using certain post-per-page settings.


How It Works (Step-by-Step)

1️⃣ Loads the Preferences Page

  • When you click the bookmarklet, it first makes a request to your account preferences page (/account/preferences).
  • It does this in the background without opening a new tab or navigating away from your current page.

2️⃣ Reads Your Current Setting

  • The script extracts the current posts-per-page setting from the page’s form data.
  • If your setting is already 15 posts per page, it will change it to 35 posts per page.
  • If it is anything other than 15, it will change it back to 15 posts per page.

3️⃣ Submits the Updated Setting

  • The script then sends a request to update your preference on XenForo’s server.
  • This is the same as manually changing it via the forum settings page, but done instantly in the background.

4️⃣ Shows a User-Friendly Notification

  • A small toast notification appears in the top-right corner of your screen.
  • It confirms whether the setting change was successful or failed.
  • The notification disappears after a few seconds, so it doesn’t clutter your screen.

5️⃣ Reloads the Page

  • If the setting change was successful, the script automatically reloads the page after a short delay.
  • This ensures that XenForo applies the new post count setting without requiring manual action.

Why This is Useful

✅ Fixes the XenForo Thread Loading Bug

  • Some XenForo forums experience issues where certain thread pages don’t load properly when using more than 15 posts per page.
  • This bookmarklet allows you to instantly switch to 15 posts per page to fix the issue.
✅ Lets You Toggle Back to 35 Posts Easily

  • If you prefer seeing more posts per page, running the bookmarklet again switches back to 35 posts per page automatically.
✅ Saves Time (No Manual Navigation Needed)

  • Normally, you would have to navigate to account settings, find the option, change it, and save the setting.
  • With this bookmarklet, everything happens in one click.
✅ Non-Destructive – No Other Preferences Are Changed

  • The script only modifies the posts-per-page setting and leaves all your other preferences untouched.
✅ Works in Dark Mode and Light Mode

  • The toast notification is styled to be readable in both dark and light themes on the forum.

How to Use the Bookmarklet

1️⃣ Copy the Code (from my previous response).
2️⃣ Create a New Bookmark in your browser.
3️⃣ Paste the Code into the URL Field (in the bookmark's settings).
4️⃣ Click the Bookmark When Needed on any XenForo forum page.


Final Summary

This bookmarklet is a one-click solution to instantly fix XenForo thread page loading issues by toggling between 15 and 35 posts per page. It automates the process, shows clear notifications, and saves you time from manually adjusting settings.

tBpRvod.gif




Below is an updated bookmarklet that toggles your posts‑per‑page setting between 15 and 35. This version uses brief, styled toast notifications designed to be legible in both light and dark modes. It fetches your current preferences form (extracting the CSRF token and all necessary fields), toggles the value of the posts‑per‑page setting, then POSTs the updated form back to your account preferences before reloading the page.



To install, create a new bookmark and paste the entire code (on one line) into the bookmark’s URL field:




How It Works​


  1. Toast Notifications:
    The showToast function creates a fixed-position container (if not already present) and appends a styled message box. The styling uses semi‑transparent backgrounds and white text to ensure readability in both light and dark modes.
  2. Fetching Preferences:
    The bookmarklet loads your preferences form from /account/preferences, then uses a DOMParser to extract the form (which includes your CSRF token and other necessary hidden fields).
  3. Toggling the Setting:
    It checks the current value of dpp_custom_config[posts]. If it’s "15", it sets it to "35"; otherwise, it changes it to "15".
  4. Submitting the Update:
    The updated FormData is POSTed back to /account/preferences with the proper credentials and headers.
  5. Reloading:
    Upon success, a toast confirms the update before reloading the page.

This bookmarklet should work for XenForo installations where the posts‑per‑page setting is stored as shown in your provided HTML. Adjust the selectors or endpoint if your installation differs.
 
Last edited:

Killer Instinct

To live in hearts we leave behind is to never die.
Supporter
Joined
May 1, 2012
Messages
34,824
Reputation
12,858
Daps
161,329
Reppin
LWO
@bnew

I had to get creative to see your post since the thread won't load with my current settings but I appreciate the tip for future reference. :salute:
 

Don Homer

Molto Bene
Supporter
Joined
Aug 25, 2013
Messages
32,126
Reputation
6,046
Daps
109,239
@bnew how do i stop that "Help Support TheColi" popup from showing up every few pages?
 

bnew

Veteran
Joined
Nov 1, 2015
Messages
62,486
Reputation
9,488
Daps
171,175
The provided JavaScript code is a bookmarklet designed to copy Reddit post content to BBCode format, which is commonly used in forums like XenForo. Here's a detailed summary of what it does and how it works on both new.reddit.com and old.reddit.com:

Functionality Overview​

  1. BBCode Conversion: The script converts HTML content from Reddit posts into BBCode format. This includes converting links, images, bold, italic, and strikethrough text into their respective BBCode equivalents.
  2. Code Block Handling: It handles code blocks by converting them into BBCode [code] or [icode] tags based on the content's complexity.
  3. Image Link Handling: The script identifies links that end with image file extensions and handles them appropriately.
  4. Copy Button Creation: For each post or comment, it creates a copy button. When clicked, this button copies the post content in BBCode format, along with a permalink to the comment, to the clipboard.
  5. Spoiler Tags: The copied content is wrapped in spoiler tags to conceal it until clicked.

Detailed Explanation​

BBCode Conversion​

  • Links: Converts HTML links (<a href="link">text</a>) to BBCode format ([u][url]link[/url][/u]).
  • Images: Converts HTML images (<img src="image_url">) to BBCode format ([img]image_url[/img]).
  • Bold, Italic, Strikethrough: Converts HTML bold (<b>text</b>), italic (<i>text</i>), and strikethrough (<s>text</s>) to BBCode (text, [i]text[/i], [s]text[/s]).

Code Block Handling​

  • Identifies code blocks within the HTML content.
  • If a code block is short or contains no newline characters, it is converted to content; otherwise, it is converted to [code]content[/code].

Image Link Handling​

  • Checks links for image file extensions (e.g., .jpg, .png, .jpeg, .webp, .gif, .pnj).
  • If a link ends with these extensions, it is handled as an image link.

Copy Button Creation​

  • Creates a green copy button (📋) next to each post or comment.
  • When clicked, it extracts the post content, converts it to BBCode, and copies it to the clipboard along with the permalink.

Spoiler Tags​

  • Wraps the copied content in spoiler tags ([spoiler="text"]content[/spoiler]) to hide it until clicked.

Compatibility with New and Old Reddit​

The script should work on both new.reddit.com and old.reddit.com, as it targets generic HTML elements that are present in both versions. However, the exact functionality might vary slightly depending on differences in HTML structure between the two versions.
  • New Reddit: The script should work seamlessly, as new Reddit uses modern HTML structures that the script is designed to handle.
  • Old Reddit: The script might require slight adjustments if old Reddit uses significantly different HTML structures for posts and comments. However, the core functionality should remain intact.
Overall, this bookmarklet simplifies the process of copying Reddit content into a format suitable for forums that use BBCode, making it easier to share content across platforms.

edit:
update fix image links inside of img bbcode tags.


[/cpoiler]


update:
2/23/2025

What the Code Does on Reddit:​

The updated bookmarklet code is designed to help users copy content from Reddit posts and comments into a BBCode format. Here's what it does in simple terms:
  1. Submission Posts:
    • Extracts the post title and any flair (like "Discussion").
    • Includes the URL of the post.
    • Extracts images from the post's gallery.
    • Copies the text content of the post.
    • Formats all this information into BBCode, which is a markup language used in forums.
  2. Comments:
    • Extracts the URL of the comment.
    • Copies the text content of the comment, including any links or images.
    • Converts the content into BBCode format.
    • Handles code blocks and inline images correctly.
  3. Copy Button:
    • Creates a button next to each post or comment.
    • When clicked, it copies the formatted content to the clipboard.
    • Displays a toast notification to confirm the copy action.

Updates from Original/Old Code:​

  1. Improved URL Extraction:
    • The new code correctly extracts the URL for submission posts by using the data-permalink attribute or the title link if necessary.
    • For comments, it uses the same logic as before but ensures the URL is correctly formatted.
  2. Gallery Image Handling:
    • The code now properly extracts images from submission post galleries without duplication.
    • It maintains the order of images as they appear in the post.
  3. Comment Processing:
    • Adopted the original logic for processing comments, which includes extracting links and images correctly.
    • Ensures that images within links are handled properly to avoid duplication.
  4. BBCode Conversion:
    • Maintains the original BBCode conversion functions but ensures they work correctly with the updated logic.
    • Handles code blocks and inline images as before.
  5. Notification System:
    • Reverted to using a non-intrusive toast notification instead of alerts.
    • This provides a more user-friendly experience by not interrupting the user with a modal dialog.
  6. Button Positioning:
    • For comments, the copy button is now positioned next to the comment content, similar to the original code.
    • For submission posts, it remains next to the post's timestamp.
Overall, the updated code improves upon the original by fixing issues with URL extraction, image handling, and notification style, while maintaining the core functionality of copying Reddit content into BBCode format.

* i deleted the link on 2/25/25 because i shared the wrong bookmarklet, this one works.


update​

3/5/10

works on www.reddit.com / new.reddit.com as well as old.reddit.com




iq40Hn5.png
 
Last edited:

bnew

Veteran
Joined
Nov 1, 2015
Messages
62,486
Reputation
9,488
Daps
171,175

Detailed Explanation of the Code’s Functionality on YouTube​


This JavaScript code is a bookmarklet designed to work on YouTube video pages. When you visit a YouTube video and activate this code, it performs a series of actions to gather specific details about the video and its associated content. After gathering this information, it formats it into a BBCode format, which is often used for forum posts or other platforms that support BBCode tags. The code then automatically copies the formatted BBCode to your clipboard, so you can easily paste it elsewhere (e.g., in a forum post).


Here’s a step-by-step breakdown of what the code does:


1. Selectors for Extracting YouTube Metadata:


The code starts by defining a set of selectors. These are CSS-style rules that target specific elements on a YouTube video page to extract data such as:


  • Title: The title of the video.
  • Channel Name: The name of the channel that uploaded the video.
  • Channel URL: A link to the channel.
  • Subscribers: The number of subscribers the channel has.
  • Likes: The number of likes the video has.
  • Description: The description text of the video.

The selectors are an array of possible CSS selectors because YouTube’s page layout might change over time, so there are different possible locations for the information.


2. Functions to Extract Data:


The code defines various functions to gather the required data:


  • getElement(selectors): This function takes a selector (or an array of selectors) and tries to find the matching element on the page. If it finds the element, it returns it.
  • getText(selectors): This function retrieves the text content of the element(s) found by getElement().
  • getNumber(text): This function extracts and cleans up numbers from a string (used to extract things like the number of subscribers or likes).
  • getVideoId(): This function grabs the video ID from the URL (which is needed to construct the video’s URL in BBCode format).
  • getDescription(): This function retrieves the video description from the page. If the description is not available, it attempts to find it from a backup source (YouTube's internal data).

3. Watching for Dynamic Content:


YouTube pages are often dynamically loaded (content is updated as you interact with the page), so the script uses a MutationObserver. This keeps an eye on changes in the page and automatically runs the script to extract metadata whenever the page’s elements (like the video title) are loaded or updated.


4. Format Data into BBCode:


Once the data is gathered, it is formatted into BBCode, a simple markup language used for formatting text. The BBCode string includes:


  • The video title inside [b] (bold) tags.
  • A URL to the video inside [url] tags.
  • The channel name and a link to the channel inside [u] (underlined) and [url] tags.
  • Subscriber count and like count are also included.
  • The description is included inside a [spoiler] tag, so it’s hidden by default (spoiler tags allow you to hide content until the user decides to reveal it).

5. Copying to Clipboard:


After creating the BBCode string, the code automatically copies it to your clipboard using a temporary <textarea> element (instead of an <input>, which would flatten newlines into spaces). This allows you to paste the BBCode anywhere, preserving the structure and line breaks.


6. Displaying a Toast Notification:


After the BBCode is copied, a small toast notification appears on the screen, telling you that the data has been copied successfully. This message typically disappears after a few seconds.


7. Conditions:


The code checks if you are on a YouTube video page (window.location.hostname === 'www.youtube.com'). If you’re not on a YouTube page, it will show an alert prompting you to use the bookmarklet on a valid YouTube video.


8. Fallback for Missing Description:


If the video description is missing or the primary method of extracting it fails, the code tries to fetch the description from YouTube’s internal JSON response (ytInitialPlayerResponse). This ensures that even if the normal description is unavailable, the code still has a chance to get it.




What Does the Code Do?​


  • Collects Metadata from YouTube Video:
    • The script looks for the title, channel name, channel URL, number of subscribers, likes, and description of the video.
  • Formats Information in BBCode:
    • It then puts all of this information into a pre-defined BBCode format. This includes bold and underlined tags, URLs, and a spoiler tag for the description.
  • Copies to Clipboard:
    • After formatting the data, the script automatically copies it to your clipboard so that you can paste it into a forum, chat, or anywhere else that supports BBCode.
  • Notifications & Feedback:
    • A small notification (toast) tells you when the data has been successfully copied.



Example Output (BBCode):​


Assuming you run the bookmarklet on a YouTube video page, the BBCode generated would look like this:

Code:
[b]Video Title[/b]
[url=https://www.youtube.com/watch?v=abcd1234]https://www.youtube.com/watch?v=abcd1234[/url]

[b]Channel Info[/b]
[u][url=https://www.youtube.com/channel/xyz]Channel Name[/url][/u]
Subscribers: 1,234

[b]Engagement[/b]
👍 Likes: 5,678

[b]Description[/b]
[spoiler]First paragraph of description.

Second paragraph of description.

Third paragraph of description.[/spoiler]


Summary:​


This script is a helpful tool for quickly extracting detailed metadata from a YouTube video page and formatting it in a BBCode format. It simplifies the process of collecting and sharing information about YouTube videos, particularly useful for forums or online platforms that use BBCode for post formatting. By wrapping the description in a [spoiler] tag, it ensures that long descriptions are hidden by default and only revealed when the user clicks to view them.

2/21/2025


edit:
3/23/2025

UPDATE to V2​


Here's a changelog detailing the differences between V1 and V2 of the bookmarklet:
  1. getElement function:
    • Changed from using Array.from().reduce() to a simple for loop for better readability and potentially better performance.
  2. Added new utility functions:
    • sanitizeBBCode: Removes dollar signs from text to prevent BBCode formatting issues.
    • truncate: Limits text length to prevent overly long descriptions.
  3. getDescription function:
    • Changed line break handling to replace multiple consecutive line breaks with a single double line break.
    • Added trim() to remove leading/trailing whitespace.
    • Applied truncate function to the final description.
  4. Added getChannelUrl function:
    • Provides a more robust method to extract and validate channel URLs.
  5. Added waitForElement function:
    • Replaces observeElement with a more flexible function that includes a timeout.
  6. processMetadata function:
    • Wrapped in a try-catch block for better error handling.
    • Applied sanitizeBBCode to title, channel name, and description.
    • Used getChannelUrl function for channel URL extraction.
    • Added fallback "Not available" for subscribers if not found.
    • Changed BBCode formatting:
      • Removed extra spaces and newlines for cleaner output.
      • Stopped splitting and rejoining description lines, using the cleaned-up description directly.
  7. Main execution:
    • Replaced observeElement with waitForElement for title detection.
    • Added error handling if the title element fails to load.
These changes aim to improve the robustness, error handling, and output formatting of the bookmarklet, addressing potential issues with different YouTube page layouts and content types.



edit:
update
V2.1

doesn't truncate title or description to 500 characters

 
Last edited:

bnew

Veteran
Joined
Nov 1, 2015
Messages
62,486
Reputation
9,488
Daps
171,175
TikTok Metadata Extractor

The userscript for TikTok is designed to enhance the user experience by adding a convenient feature to extract and copy video metadata. Here's a detailed summary of what it does:

What the Userscript Does​

  1. Adds a Button: The script inserts a new button labeled "Copy Metadata" next to the existing "Follow" button on a TikTok video page.
  2. Extracts Video Metadata: When you click the button, it extracts several key pieces of information from the video page:
    • Video Title: The title of the video.
    • Creator's Name: The username of the person who posted the video.
    • Creator's URL: A link to the creator's TikTok profile.
    • Like Count: The number of likes the video has received.
    • Comment Count: The number of comments on the video.
    • Share Count: The number of times the video has been shared.
  3. Formats Metadata: The extracted metadata is formatted into a structured text format, often using BBCode, which is commonly used in forums and other online platforms.
  4. Copies to Clipboard: Once the metadata is formatted, it is copied to your clipboard. This allows you to easily paste the information into a message, document, or anywhere else you need it.
  5. Displays a Notification: After copying the metadata, the script shows a brief notification to confirm that the data has been copied successfully.

How It Works​

  1. Automatic Button Insertion: The script uses a MutationObserver to wait for the necessary elements to load on the page before inserting the button. This ensures the button appears even if the page content loads dynamically.
  2. Dynamic Content Handling: The script is designed to handle TikTok's dynamic content loading, ensuring that the button is added correctly even if the page updates after initial load.
  3. Selector Verification: The script uses specific CSS selectors to target elements on the page. If TikTok updates their class names, these selectors might need to be updated to ensure the script continues working.
  4. Error Handling: The script includes basic error handling, such as displaying notifications, but does not handle complex errors like network issues or API rate limits.

Benefits​

  • Convenience: Saves time by automatically extracting and formatting metadata.
  • Sharing: Makes it easy to share video information in forums or social media platforms that support BBCode.
  • Organization: Helps organize metadata efficiently for documentation or tracking purposes.

Limitations​

  • TikTok API Integration: Does not use the TikTok API, so it does not require an access token or API setup.
  • Dynamic Content Issues: May not work if TikTok significantly changes their page structure or class names.
  • Browser Compatibility: Should work in most modern browsers but might require adjustments for older browsers.
Overall, the userscript provides a convenient way to extract and share TikTok video metadata without needing to manually copy and format the information.


PB8fw90.png


example output:
Code:
[b]sing along while we play a game[/b]

[url=https://www.tiktok.com/@squidgamenetflix/video/7454352415546952990]https://www.tiktok.com/@squidgamenetflix/video/7454352415546952990[/url]

[b]Creator Info[/b]
[u][url=https://www.tiktok.com/@squidgamenetflix]squidgamenetflix[/url][/u]

[b]Engagement[/b]
Likes: 16.2M
Comments: 7.4M
Shares: 467.5K

Bookmarklet:

pastebin.com/pq4vq2fb


userscript:

pastebin.com/UK5n1dRC

2/22/2025


2/23/2025
bookmarklet before they changed the site layout
This updated version will now properly maintain your custom "Copy Metadata" button even when navigating between videos through TikTok's dynamic page updates.


userscript before they changed the site layout





code below doesn'y how button for some reason
 
Last edited:
Top