[Showcase] In-forum instant link button [v1.1.1]

[Hares]

Hi there.
There's ancient (somebody also says forbidden) technique of injecting JS-code to a page via bookmarks link, so I am sharing my instant-pretty-link-button for this forum. This works in desktop versions of Chrome, Firefox, and partially Safari. Copy-to-clipboard feature may not work on all OSes.

Source Code

Minified code:

Code: Select all

javascript:var%20copyToClipboard%20%3D%20s%20%3D%3E%20%7B%0A%20%20%20%20const%20el%20%3D%20document.createElement%28%27textarea%27%29%3B%0A%20%20%20%20el.value%20%3D%20s%3B%0A%20%20%20%20document.body.appendChild%28el%29%3B%0A%20%20%20%20el.select%28%29%3B%0A%20%20%20%20document.execCommand%28%27copy%27%29%3B%0A%20%20%20%20document.body.removeChild%28el%29%3B%0A%7D%3B%0Avar%20nonBlockingAlert%20%3D%20%28s%2C%20t%29%20%3D%3E%20setTimeout%28function%28%29%20%7B%20alert%28s%29%3B%20%7D%2C%20t%20%7C%7C%201%29%3B%0A%0Avar%20url%20%3D%20new%20URL%28document.location.toString%28%29%29%3B%0Avar%20topicEl%20%3D%20document.querySelector%28%27h2%20%3E%20a%27%29%3B%0Avar%20topicUrl%20%3D%20new%20URL%28topicEl.href%29%3B%0Avar%20topicId%20%3D%20%28%28topicUrl.pathname%20%3D%3D%20%27/viewtopic.php%27%29%20%26%26%20%28topicUrl.searchParams%29.get%28%27t%27%29%20%7C%7C%20%27/%27%29.replace%28/%5E%5C/%2B/%2C%20%27%27%29%3B%0Avar%20summary%20%3D%20topicEl.innerText%3B%0A%0Avar%20postEl%20%3D%20document.querySelector%28%27h3%20%3E%20a%27%29%0Avar%20postUrl%20%3D%20new%20URL%28postEl.href%29%3B%0Avar%20postId%20%3D%20%28%28postUrl.pathname%20%3D%3D%20%27/viewtopic.php%27%29%20%26%26%20%28postUrl.searchParams%29.get%28%27p%27%29%20%7C%7C%20%27/%27%29.replace%28/%5E%5C/%2B/%2C%20%27%27%29%3B%0A%0Aif%20%28topicId%20%26%26%20postId%29%0A%7B%0A%20%20%20%20url.pathname%20%3D%20%27/viewtopic.php%27%0A%20%20%20%20url.search%20%3D%20new%20URLSearchParams%28%29%3B%0A%20%20%20%20url.searchParams.set%28%27t%27%2C%20topicId%29%3B%0A%20%20%20%20url.searchParams.set%28%27p%27%2C%20postId%29%3B%0A%20%20%20%20url.hash%20%3D%20%60%23p%24%7BpostId%7D%60%3B%0A%7D%0Aelse%0A%20%20%20%20url%20%3D%20topicUrl%3B%0A%0Avar%20encodedLink%20%3D%20%60%5Burl%3D%24%7Burl%7D%5D%24%7BtopicId%7D%3A%20%24%7Bsummary%7D%5B/url%5D%60%3B%0A%0AcopyToClipboard%28encodedLink%29%3B%0AnonBlockingAlert%28%60Link%20copied%3A%5Cn%24%7BencodedLink%7D%60%29%3B%0A

Click to expand the full code

Code: Select all

var copyToClipboard = s => {
    const el = document.createElement('textarea');
    el.value = s;
    document.body.appendChild(el);
    el.select();
    document.execCommand('copy');
    document.body.removeChild(el);
};
var nonBlockingAlert = (s, t) => setTimeout(function() { alert(s); }, t || 1);

var url = new URL(document.location.toString());
var topicEl = document.querySelector('h2 > a');
var topicUrl = new URL(topicEl.href);
var topicId = ((topicUrl.pathname == '/viewtopic.php') && (topicUrl.searchParams).get('t') || '/').replace(/^\/+/, '');
var summary = topicEl.innerText;

var postEl = document.querySelector('h3 > a')
var postUrl = new URL(postEl.href);
var postId = ((postUrl.pathname == '/viewtopic.php') && (postUrl.searchParams).get('p') || '/').replace(/^\/+/, '');

if (topicId && postId)
{
    url.pathname = '/viewtopic.php'
    url.search = new URLSearchParams();
    url.searchParams.set('t', topicId);
    url.searchParams.set('p', postId);
    url.hash = `#p${postId}`;
}
else
    url = topicUrl;

var encodedLink = `[url=${url}]${topicId}: ${summary}[/url]`;

copyToClipboard(encodedLink);
nonBlockingAlert(`Link copied:\n${encodedLink}`);

Usage

Step 1. Create a bookmark
Create a new bookmark and, instead of entering a normal URL, enter the script above.

12-08-2024, 02-21-31.png (8.92 KiB) Viewed 294 times

Step 2. Press the button
Just press it.
The link will be displayed in the pop-up message and, if possible, copied to clipboard.

12-08-2024, 02-23-06.png (44.82 KiB) Viewed 294 times

Step 3. Use that link
Tadaaa! 116183: Factorio: Space Age is here!

Code: Select all

Tadaaa! [url=https://forums.factorio.com/viewtopic.php?t=116183&p=621172#p621172]116183: Factorio: Space Age is here![/url]

P.S.
Self-check passed: 123987: [Showcase] In-forum instant link button

Licensing

This piece of code is licensed under WTFPL. Do whatever you want with it.

Changelog

Version 1.1.1
Released 2024-12-26.
Fixed anchor/ref pointer on the resulting url from `#654321` to `#p654321`.

Version 1.1
Released 2024-12-11.
Instead of short links to the topic, generates full links to the topic+post pair, so the links are ensured to survive topic merging.
See details: 124123: Question: Link to a topic/post that is topic-merge-safe

Version 1.0
Released 2024-12-08.
Initial version.

[Hares]

Version 1.1

2024-12-11
Version 1.1 released

Changes

• Instead of short links to the topic, generates full links to the topic+post pair, so the links are ensured to survive topic merging.
• See details: 124123: Question: Link to a topic/post that is topic-merge-safe

[Hares]

Version 1.1.1

2024-12-26
Version 1.1.1 released

Changes

• Fixed anchor/ref pointer on the resulting url from `#654321` to `#p654321`.