bnew

Veteran
Joined
Nov 1, 2015
Messages
51,004
Reputation
7,865
Daps
147,240

Reddit thread embeds not working correctly?​



protip, when posting a reddit url with profanity in the subreddit name, just replace the subreddit name with a subreddit that exists.

a$$holedesign -> design

the subreddit name isn't important for the embed functionality to work, it's the thread ID that is "14s19fw"



xtq1io98paab1.jpg


edit:

natureisfukkinglit -> nature

nextfukkinglevel -> video
 

bnew

Veteran
Joined
Nov 1, 2015
Messages
51,004
Reputation
7,865
Daps
147,240

website links/urls aren't underlined so users are unaware they can be clicked on?​



ever since thecoli upgraded, hyperlinks are no longer underlined, even in old threads. I used ChatGPT to create a bookmarklet to underline hyperlinks in posts in edit mode. for it to work the bbcode editor must be enabled instead of the default html editor.

this is the bookmarklet code.
Code:
javascript:(function() {  var textarea = document.querySelector('textarea.input[name="message"]');  var text = textarea.value;  var pattern = /\[URL=(.*?)\[\/URL\]/g;  var replacedText = text.replace(pattern, %27[U][URL=$1[/URL][/U]%27);  textarea.value = replacedText;})();

** you can follow the instructions below or just highlight the code(doubleclick) and drag and drop it to the bookmark bar, then right-click edit it.

To use this bookmarklet:

  1. Create a new bookmark in your Chromium browser.
  2. Right-click on the bookmarks bar and choose "Add Page" or "Add Bookmark" (the option may vary depending on your browser version).
  3. Enter a name for the bookmarklet (e.g., "Format Text").
  4. In the "URL" or "Address" field, paste the above JavaScript code.
  5. Save the bookmark.
  6. Navigate to the page with the <textarea> element you want to edit.
  7. Click on the bookmarklet you created.
  8. The desired find and replace action will be applied to the content of the specified <textarea> element.

copy paste the text into the "html editor" , switch to "bb code", click bookmarklet and switch back to the html editor.


Toggle the "BB code" button and then the buttons to the left should turn grey.
1gNRnIE.png


click the newly created bb code underline bookmarklet, I named mines "bb_" but you can name it anyway you want.
emegGtt.png


example:
Xz639g3.png
 

bnew

Veteran
Joined
Nov 1, 2015
Messages
51,004
Reputation
7,865
Daps
147,240
Tired of seeing this error message popup when you're trying to post a thread or comment?

9FTqf90.png

"Oops! We ran into some problems.​

Oops! We ran into some problems. Please try again later. More error details may be in the browser console."​


A.K.A the

500 Internal Server Error​

nginx/1.20.1​


I think it appears because of badly formatted html that was pasted into post editor or the post exceeds the character limit set my the site admins or just the server refusing POST traffic for whatever reason.

my method of minimizing my encounter with this error requires posting a thread solely in BBcode( BBcode is enabled when the editor functions are greyed out).

BBcode enabled
WBA64OG.png


BBcode disabled(HTML editor enabled)
vGtBktD.png



posting in BBcode is more complex than using the HTML editor so the 2nd part to my solution is using another xenforo forum to properly format my post then copy/paste it to the coli.

go to : https://xenforo.com/community/forums/xenforo-suggestions.18/post-thread



1. copy and paste whatever you want into the xenforo thread editor with HTML editor enabled,

2. on xenforo site, toggle to BBcode and copy the post body of your bbcode

3. on the coli the bbcode bmust be enabled, paste the bbcode from the xenforo site.

4. click post thread, if clicking post thread doesn't work the first time just press an 1-3 more times

5. if you see this loading indicator(upper right corner) that lasts for more than 5 seconds, then the post won't go thru and you must refresh the page and paste the text again.
VJwvbfT.gif



protip:
you can use a browser like Vivaldi to and add the xenforo site to the web-panel with 'show desktop version' switched on to access bbcode toggle button and post more easily.

9MqUj57.png







 
Last edited:

bnew

Veteran
Joined
Nov 1, 2015
Messages
51,004
Reputation
7,865
Daps
147,240
went back to the drawing board and got Bing chat(Precise) to write a bookmarklet that fix most of the formatting issues when copying an article to the coli to post.

remember this will only work when BBcode is enabled, so paste the article in html code mode then switch to BBCode and click the bookmarklet.

Code:
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)/g;
        var replacedText = text.replace(pattern1, '[U][URL=$1[/URL][/U]');
        replacedText = replacedText.replace(pattern2, '$1\n$2');
        replacedText = replacedText.replace(/\n{4,}/g, '\n\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]');
        textarea.value = replacedText;
    });
})();

Bing summary of what it does

When run on a XenForo forum, this bookmarklet performs the following actions on all textareas with the class `input`:
1. It finds all occurrences of URLs enclosed in [URL='http://']...[/URL] tags and replaces them with [U][URL='http://']...[/URL][/U], effectively underlining all URLs.
2. It finds all occurrences of a newline character followed by an uppercase letter, a double quote, or a digit that is not immediately preceded by [/HEADING] or [/IMG], and inserts an additional newline character before it.
3. It replaces any occurrence of four or more consecutive newline characters with two newline characters.
4. It finds all occurrences of [U][U][URL='http://']...[/URL][/U][/U] and replaces them with [U][URL='http://']...[/URL][/U], effectively removing the extra underline.

5. It will also remove any extra newlines (more than two consecutive newlines) and remove any newlines following [/HEADING] or [/IMG] tags. This will help to format the content of the textareas in a more readable and organized way. Is there anything else you would like to know? 😊

After these replacements are made, the value of the textarea is updated with the modified text. This bookmarklet can be useful for formatting text in a XenForo forum post or message.

9yooKqU.png

TLDR; this bookmarklet will underline hyperlinks and put spaces between paragraphs for improved readability.
 
Last edited:

bnew

Veteran
Joined
Nov 1, 2015
Messages
51,004
Reputation
7,865
Daps
147,240

updated the bookmarklet


Code:
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 replacedText = text.replace(pattern1, '[U][URL=$1[/URL][/U]');
        replacedText = replacedText.replace(pattern2, '$1\n$2');
        replacedText = replacedText.replace(/\n{4,}/g, '\n\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]');
        textarea.value = replacedText;
    });
})();


This bookmarklet was updated to add a newline before any line that starts with [B], [I], or [IMG]. For example, if you have a block of text that contains the following lines:

Code:
This is some text.
[B]This text will be bold[/B].
[I]This text will be italicized[/I].
[IMG]http://example.com/image.jpg[/IMG]

And here is some more text.
After running the bookmarklet on this block of text, it will look like this:


This is some text.

[B]This text will be bold[/B].

[I]This text will be italicized[/I].

[IMG]http://example.com/image.jpg[/IMG]

And here is some more text.
 

bnew

Veteran
Joined
Nov 1, 2015
Messages
51,004
Reputation
7,865
Daps
147,240
originally posted here: Mods I know yall are “busy” but Twitter ➡️ “X” embeds gotta start working

[replace X.com with twitter.com ]​


used bing chat to create a userscript that replaces and occurrence of https://x.com or https://www.x.com with https://twitter.com.
it'll only replace the text in the input field on thecoli when bbcode is enabled.

0WhpwKl.gif

i was doing ctrl-v https://x.com/PBS/status/1642240482813042688 and as you can see it automatically changed to twitter.com.
if you have a x.com link in html mode editor and switch to bbcode editor, the url won't change immediately, you'll have to press space, type something or hit ENTER inside the field for it to change. theres a small annoying cursor position issue i couldn't get rid of without causing other bugs.

edit:
Toggle the "BB code" button and then the buttons to the left should turn grey.
1gNRnIE.png

Code:
// ==UserScript==
// @name Replace X.com URLs with Twitter.com URLs
// @namespace    http://tampermonkey.net/
// @description Replaces URLs containing "https://twitter.com" or "https://twitter.com" with "https://twitter.com".
// @author Author Name
// @version 1.0
// @match        https://www.thecoli.com/threads/*
// @match        https://thecoli.com/threads/*
// @match        https://xenforo.com/community/forums/*
// @grant        none
// ==/UserScript==

(function() {
'use strict';

// Function to get the current cursor position in a text input field
function getCursorPosition(input) {
let position = 0;
if ('selectionStart' in input) {
position = input.selectionStart;
} else if (document.selection) {
input.focus();
let selection = document.selection.createRange();
selection.moveStart('character', -input.value.length);
position = selection.text.length;
}
return position;
}

// Function to set the cursor position in a text input field
function setCursorPosition(input, position) {
if (input.setSelectionRange) {
input.focus();
input.setSelectionRange(position, position);
} else if (input.createTextRange) {
let range = input.createTextRange();
range.collapse(true);
range.moveEnd('character', position);
range.moveStart('character', position);
range.select();
}
}

// Function to replace URLs in text input fields
function replaceURLs(event) {
// Get all editable fields on the page
let editableFields = document.querySelectorAll('[contenteditable="true"], .fr-element.fr-view.fr-element-scroll-visible');

// Get the target element of the event
let target = event.target;

// Check if the target is a text input field or an editable field
if (target.matches('textarea.input') || editableFields.includes(target)) {
// Save the current cursor position
let cursorPosition = getCursorPosition(target);

// Replace URLs in the value or innerHTML of the target element
let lines = target.value ? target.value.split('\n') : target.innerHTML.split('\n');
for (let i = 0; i < lines.length; i++) {
lines[i] = lines[i].replace(/https:\/\/(www\.)?x\.com/g, 'https://twitter.com');
if (i === cursorPosition.line) {
cursorPosition.column = lines[i].length;
}
}
target.value ? target.value = lines.join('\n') : target.innerHTML = lines.join('\n');

// Restore the cursor position
setCursorPosition(target, cursorPosition);
}
}

// Function to prevent cursor movement by arrow keys
//    function preventCursorMovement(event) {
// Check if the key pressed is left or right arrow
//        if (event.keyCode == 37 || event.keyCode == 39) {
// Prevent the default behavior of the key
event.preventDefault();
//        }
//    }

// Add event listeners for input and keydown events on the document
document.addEventListener('input', replaceURLs);
//    document.addEventListener('keydown', preventCursorMovement);
})();
Code:





A,I generated instructions:
Here are the step-by-step instructions to add the userscript to Chrome or Firefox:
For Chrome:

  1. Install the Tampermonkey extension from the Chrome Web Store.
  2. Once Tampermonkey is installed, click on the Tampermonkey icon in the toolbar and select “Create a new script…”
  3. Paste your userscript into the editor and save it.
  4. The userscript should now be installed and will run whenever you visit a page that matches its @match or @include rules.
For Firefox:

  1. Install the Greasemonkey or Tampermonkey extension from the Firefox Add-ons site.
  2. Once Greasemonkey or Tampermonkey is installed, click on the Greasemonkey or Tampermonkey icon in the toolbar and select “Add a new script…”
  3. Paste your userscript into the editor and save it.
  4. The userscript should now be installed and will run whenever you visit a page that matches its @match or @include rules.
you can also use the userscript on android with firefox or kiwi browser.
 
Last edited:

bnew

Veteran
Joined
Nov 1, 2015
Messages
51,004
Reputation
7,865
Daps
147,240
MASTODON/THREADS/X.COM EMBED support.

I updated the userscript, it now supports embedding threads.net posts similar to twitter embeds and supports embedding x.com posts.
if the x.com url is marked NSFW by twitter than the embed won't load just like regular twitter embeds currently don't.
Code:
// ==UserScript==
// @name         Mastodon Embed Links
// @version      1.1.3
// @description  Embed Mastodon posts in Xenforo-compatible forums
// @match        https://www.thecoli.com/threads/*
// @match        https://thecoli.com/threads/*
// ==/UserScript==

(function() {
    'use strict';

    // Regex pattern to match Mastodon and x.com links
    const mastodonRegex = /^https?:\/\/([a-z\d-_]+\.)*([a-z\d-_]+)\.([a-z]{2,})(\/@[a-zA-Z0-9-_]+(@[a-zA-Z0-9-_]+)?\/\d+|\/@[a-zA-Z0-9-_]+\/post\/\w+|\/t\/\w+)/;
    const xcomRegex = /^https?:\/\/(www\.)?x\.com\/.*\/status\/(\d+)/;

    // Find all links on the page
    const links = document.getElementsByTagName("a");
    for (let i = 0; i < links.length; i++) {
        const link = links[i];
        let href = link.getAttribute("href");

        // Check if the link matches the Mastodon regex pattern
        if (mastodonRegex.test(href)) {
            const match = href.match(mastodonRegex);
            const username = match[4].split("/")[1];
            let domain = match[2];
            const postID = match[4].split("/")[2];

            // Check if there are two "@" symbols in the URL
            if ((username.match(/@/g) || []).length === 2) {
                // Rewrite the URL
                domain = username.split("@")[2];
                href = `https://${domain}/@${username.split("@")[1]}/${postID}`;
            }

            // Create the iframe embed code
            const embedUrl = `${href}/embed`;
            const scriptSrc = `https://${domain}/embed.js`;
            const iframe = document.createElement("iframe");
            iframe.src = embedUrl;
            iframe.classList.add("mastodon-embed", "gh-fit");
            iframe.style.maxWidth = '550px';
            iframe.style.border = "0";
            iframe.style.width = '100%';
            iframe.style.height = '620px';
            iframe.style.maxHeight = '650px';
            iframe.style.overflow = 'hidden';
            iframe.setAttribute("allowfullscreen", "allowfullscreen");
            const script = document.createElement("script");
            script.src = scriptSrc;
            script.async = true;
            iframe.appendChild(script);

            // Replace the link with the embedded post
            link.parentNode.replaceChild(iframe, link);
        }
        // Check if the link matches the x.com regex pattern
        else if (xcomRegex.test(href)) {
            const match = href.match(xcomRegex);
            const postID = match[2];

            // Create the iframe embed code
            const embedUrl = `https://s9e.github.io/iframe/2/twitter.min.html#${postID}`;
            const iframe = document.createElement("iframe");
            iframe.setAttribute("data-s9e-mediaembed", "twitter");
            iframe.setAttribute("allow", "autoplay *");
            iframe.setAttribute("allowfullscreen", "");
            iframe.setAttribute("scrolling", "no");
            iframe.style.height = '1210px';
            iframe.style.width = '550px';
            iframe.src = embedUrl;
            iframe.setAttribute("loading", "eager");

           // Replace the link with the embedded post
           link.parentNode.replaceChild(iframe, link);
        }
    }

    function fit() {
        var iframes = document.querySelectorAll("iframe.gh-fit")

        for(var id = 0; id < iframes.length; id++) {
           var win = iframes[id].contentWindow
           var doc = win.document
           var html = doc.documentElement
           var body = doc.body

           if(body) {
               body.style.overflowX = "scroll"; // scrollbar-jitter fix
               body.style.overflowY = "hidden";
           }

           if(html) {
               html.style.overflowX = "scroll"; // scrollbar-jitter fix
               html.style.overflowY = "hidden";
               var style = win.getComputedStyle(html);
               iframes[id].width = parseInt(style.getPropertyValue("width")); // round value
               iframes[id].height = parseInt(style.getPropertyValue("height"));
           }
       }

       requestAnimationFrame(fit);
   }

   addEventListener("load", requestAnimationFrame.bind(this, fit));
})();


one particular issue with the userscript is that it doesn't embed a mastodon url like this https://mstdn.social/@theseeduneed@mastodon.social/111259225096817564
it needs to be like https://mastodon.social/@theseeduneed/111259225096817564 instead.

The userscript you provided is designed to replace certain types of links on a webpage with embedded posts. Here’s what it does when it encounters each of the URLs you provided:

  1. https://twitter.com/BaldyNFL/status/1709212004026548631: This URL matches the x.com regex pattern in the userscript. The script will replace this link with an embedded post from x.com. The embedded post will be displayed in an iframe with a height of 693px and a width of 550px.
  2. https://mstdn.social/@noelreports/111275312521478534: This URL matches the Mastodon regex pattern in the userscript. The script will replace this link with an embedded post from Mastodon. The embedded post will be displayed in an iframe with a height of 620px and a width of 100% (up to a maximum width of 550px).
Please note that the userscript only modifies links that are present on the page at the time the script runs (i.e., when the page loads). If new links are added to the page after it loads, those links will not be modified by the script.


The userscript you provided is designed to embed Mastodon posts and x.com links in Xenforo-compatible forums.

When the userscript encounters the URL `https://twitter.com/SamAdlerBell/status/1715800138273226959`, it will match the URL with the `xcomRegex` regular expression pattern. This pattern is designed to match URLs from x.com that contain a status ID.

Once a match is found, the script extracts the status ID from the URL (in this case, `1715800138273226959`). It then creates an iframe element and sets its source (`src`) to an embed URL that includes this status ID. The iframe is then used to replace the original link on the page.

This means that instead of seeing a simple link to the x.com post, viewers of the page will see the embedded post directly on the page. This makes it easier for users to view the content without having to navigate away from the page.

Please note that this userscript is set to run on pages that match `https://www.thecoli.com/threads/*` and `https://thecoli.com/threads/*` as specified in the `@match` metadata. If you want this script to run on different pages, you would need to modify these match patterns accordingly.

edit:
test with urls in these threads

https://www.thecoli.com/search/search/?keywords=https://x.com/&users=&date=
https://www.thecoli.com/search/search/?keywords=https://www.threads.net/&users=&date=
https://www.thecoli.com/search/search/?keywords=https://mastodon.social/&users=&date=
 
Last edited:

bnew

Veteran
Joined
Nov 1, 2015
Messages
51,004
Reputation
7,865
Daps
147,240
I updated the bookmarklet to fix some formatting issues.

```
Code:
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 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(/\n{4,}/g, '\n\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]');
     textarea.value = replacedText;
 });
})();
```

The modified bookmarklet you provided is a JavaScript code that manipulates the text content of all textarea elements with the class "input". It applies several changes to the text content of these textareas, which is stored in thetextarea.valuevariable.

Here's a breakdown of the changes you made:

1. **Pattern 3**: You've changed the pattern from/\*)"/g to/\[IMG alt="([^"]*)"/g. This pattern matches any text that starts with[IMG alt=" and ends with"]. The([^"]*) part is a capturing group that matches any character except a double quote (`"`), repeated any number of times. Theg at the end of the pattern indicates that this pattern should be applied globally, i.e., it should match all occurrences in the string, not just the first one.

2. **Replacement for Pattern 3**: You've changed the replacement string from'\n[IMG alt="$1"' to'\n[IMG alt="$1"'. This means that for each match of the pattern in the text, it will be replaced with a newline character followed by[IMG alt=", followed by the captured group (represented by$1), and ending with"].

Now, let's discuss what the bookmarklet does:

1. **Pattern 1**: This pattern matches any text that starts with[URL= and ends with[/URL]. The([^"]*) part is a capturing group that matches any character except a double quote (`"`), repeated any number of times. Theg at the end of the pattern indicates that this pattern should be applied globally.

2. **Replacement for Pattern 1**: For each match of the pattern in the text, it is replaced with[U][URL=$1[/URL][/U]. Here, $1 represents the captured group in the pattern, which is the URL inside the[URL= and[/URL] tags.

3. **Pattern 2**: This pattern matches any newline character followed by a space, a capital letter, a double quote, or a digit, or any of the specified special tags.

4. **Replacement for Pattern 2**: For each match of the pattern in the text, it is replaced with a newline character followed by the captured group (represented by$1), followed by another newline character.

5. **Pattern 4**: This pattern matches any newline character.

6. **Replacement for Pattern 4**: For each match of the pattern in the text, it is replaced with two newline characters.

7. **Pattern 5**: This pattern matches any of the specified special tags.

8. **Replacement for Pattern 5**: For each match of the pattern in the text, it is replaced with a newline character followed by the captured group (represented by$1).

9. **Final Replacement**: The text is then further processed to remove any occurrence of four or more consecutive newline characters, and to remove any occurrence of[U][U][URL= and[/URL][/U][/U] tags.

Finally, the modified text is set as the value of the textarea. This means that the changes will be reflected in the textarea when you run the bookmarklet.

this is what it does with bbcode enabled

uisEYwe.gif


edit:

updated it again to fix posts with poor html formatting

This modified bookmarklet will now remove any matches for the FONT and COLOR tags in addition to the existing operations. The g flag at the end of each regular expression ensures that the replace operation is performed globally, i.e., all occurrences of the pattern in the string are replaced, not just the first one

Code:
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 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(/\n{4,}/g, '\n\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]');
     textarea.value = replacedText;
 });
})();
 
Last edited:

bnew

Veteran
Joined
Nov 1, 2015
Messages
51,004
Reputation
7,865
Daps
147,240
back again with another AI generated bookmarklet. i originally just wanted to be able to extract multiple youtube video links at once but i requested additional functionality.

this is intended primarily for the coli but i assume it should work on other xenforo forums.

heres an AI generated description of what it does.

This bookmarklet is designed to extract URLs from web pages. It does this by searching for elements that might contain URLs, such as iframe sources, data attributes, and hyperlink href attributes. It then decodes these URLs, checks if they start with certain patterns, and if so, modifies them.

The bookmarklet then sorts the URLs by domain name, prioritizing URLs from 'uni-sonia.com'. It opens a new window (popup) with two textareas, one for a space-separated list of URLs and one for a newline-separated list.

The bookmarklet is designed to handle a variety of URL formats and transforms, such as:

  • It transforms a URL from the s9e.github.io/iframe/2/twitter.min.html format to a URL from Twitter's nitter instance.
  • It adds 'https:' to URLs that start with '//streamable.com/e/'.
  • It transforms a URL from the sendvid.com/embed/ format to the direct sendvid.com URL.
  • It transforms a URL from the s9e.github.io/iframe/2/reddit.min.html format to a URL from Reddit.
The bookmarklet also filters out URLs that start with '/', are data images, or are '#top'. It also filters out URLs that start with 'https://www.thecoli.com', 'https://www.googletagmanager.com', 'https://www.thecoli.com', 'javascript:', 'url=', or 'https://ajax.googleapis.com'.

In summary, this bookmarklet is designed to extract and organize URLs from web pages, prioritizing URLs from 'uni-sonia.com', and then displaying the URLs in a new window.

popup output from the bookmarklet on this webpage:


wiWA9xO.png


Here's how to add it to your browser's bookmarks toolbar:

  1. Copy the JavaScript code provided.
  2. Open your browser's bookmarks toolbar. You can usually find this by clicking on the star icon in the top-right corner of your browser window.
  3. Right-click on the bookmarks toolbar and select "Add Page" or "Add Bookmark".
  4. In the "URL" field, input javascript: followed by the JavaScript code you copied.
  5. Give your bookmark a name, such as "Collect URLs".
  6. Click "Add".
Now, you should have a bookmark in your bookmarks toolbar that, when clicked, will run the JavaScript code and open a popup with the collected URLs.

Code:
javascript:(function() {
 var urls = new Set();
 var urlElements = document.querySelectorAll('iframe[src], [data-s9e-mediaembed-iframe], [data-src], [src], a[href]');
 urlElements.forEach(function(element) {
 var url = element.getAttribute('src') || (element.getAttribute('data-s9e-mediaembed-iframe') && JSON.parse(element.getAttribute('data-s9e-mediaembed-iframe'))[7]) || element.getAttribute('data-src') || element.getAttribute('href');
 if (url) {
 var decodedUrl = decodeURIComponent(url);
 if (decodedUrl.startsWith('https://s9e.github.io/iframe/2/twitter.min.html')) {
     decodedUrl = 'https://twitter.com/anyuser/status/' + decodedUrl.split('#')[1];
 } else if (decodedUrl.startsWith('//streamable.com/e/')) {
     decodedUrl = 'https:' + decodedUrl;
 } else if (decodedUrl.startsWith('//sendvid.com/embed/')) {
     decodedUrl = 'https://sendvid.com/' + decodedUrl.split('/embed/')[1];
 } else if (decodedUrl.startsWith('https://s9e.github.io/iframe/2/reddit.min.html')) {
     var redditUrl = decodedUrl.split('#')[1].split('#theme')[0];
     decodedUrl = 'https://reddit.com/' + redditUrl;
 } else if (decodedUrl.startsWith('/') || decodedUrl.startsWith('data:image') || decodedUrl.startsWith('#top') || decodedUrl.startsWith('https://www.thecoli.com') || decodedUrl.startsWith('http://www.thecoli.com') || decodedUrl.startsWith('https://thecoli.com') || decodedUrl.startsWith('http://thecoli.com') || decodedUrl.startsWith('#post-') || decodedUrl.startsWith('no') || decodedUrl.startsWith('mailto:') || decodedUrl.startsWith('https://www.googletagmanager.com/')) {
     return;
 }
 if (!decodedUrl.startsWith('javascript:') && !decodedUrl.startsWith('https://ajax.googleapis.com')) {
     if (decodedUrl.startsWith('https://www.youtube.com/embed/')) {
         var videoId = decodedUrl.split('/embed/')[1];
         decodedUrl = 'https://www.youtube.com/watch?v=' + videoId;
     }
     if (decodedUrl.startsWith('url=http')) {
         decodedUrl = decodedUrl.replace('url=', '');
     }
     urls.add(decodedUrl);
     if (decodedUrl.startsWith('https://twitter.com')) {
         var nitterUrl = decodedUrl.replace('https://twitter.com', 'https://nitter.uni-sonia.com');
         urls.add(nitterUrl);
     }
 }
 }
 });
 var sortedUrls = Array.from(urls).sort(function(a, b) {
 var domainA = a.split('/');
 var domainB = b.split('/');
 if (domainA.length >= 3 && domainB.length >= 3) {
 var domainA = domainA[2];
 var domainB = domainB[2];
 if (domainA.includes('uni-sonia.com') && !domainB.includes('uni-sonia.com')) {
     return 1;
 } else if (!domainA.includes('uni-sonia.com') && domainB.includes('uni-sonia.com')) {
     return -1;
 } else {
     return domainA.localeCompare(domainB);
 }
 }
 });
 var popup = window.open('', 'popup', 'width=800,height=600');
 var urlText = sortedUrls.join(' ');
 var urlTextWithLinks = sortedUrls.map(function(url) {
 return '<a href="' + url + '">' + url + '</a>';
 }).join('<br>');
 var urlTextWithNewLine = sortedUrls.join('\n');
 popup.document.write('<textarea style="width: 100%; height: 50%">' + urlText + '</textarea><br><textarea style="width: 100%; height: 50%">' + urlTextWithNewLine + '</textarea><br><div style="width: 100%; height: 50%">' + urlTextWithLinks + '</div>');
})();
 
Last edited:

bnew

Veteran
Joined
Nov 1, 2015
Messages
51,004
Reputation
7,865
Daps
147,240
made two alternative versions of the bookmarklet above

This script will not parse [src] and a[href] links and will prepend "https:" to any URL that begins with "//", it also has a find form with regex support.



This code adds a text input field at the top of the popup window. As you type a regular expression into this field, the list of URLs will be filtered in real time to only include those that match the regular expression.

 

bnew

Veteran
Joined
Nov 1, 2015
Messages
51,004
Reputation
7,865
Daps
147,240
@bnew do you know a workaround to the error when changing avi? Can’t upload a new one.
I don't use avatars but I have run in issues trying to upload media files to the site gallery which i was never able to resolve.

Just tried it out since the QR code I had now redirects somewhere else :stopitslime:

It looks like it doesn't accept files above a certain file size (possibly 9KB? A file at 8.94KB was rejected but ones at slightly over 8KB were fine.)

It accepts .gifs but makes them static, though they work correctly on the avatar page and when viewed in Imagus.


try using this site to see if the above workaround helps.



 

dtownreppin214

l'immortale
Supporter
Joined
Apr 30, 2012
Messages
55,187
Reputation
10,496
Daps
190,382
Reppin
Shags & Leathers
try using this site to see if the above workaround helps.



Thx but it's still not working. Tried to isolate it by browser/device, but it seems to be an issue on the server end.
 

bnew

Veteran
Joined
Nov 1, 2015
Messages
51,004
Reputation
7,865
Daps
147,240
Thx but it's still not working. Tried to isolate it by browser/device, but it seems to be an issue on the server end.

I just took a look at the avatars of 3 different posters in the 'avatar change issues thread' and all 3 avatars had dimensions of 96x96 and the filesize ranged from 3.4KB to 4.8KB.

try using

uncheck "lock aspect ratio"

enter 96x96 px
 
Top