Ask your LLM about bookmarklets and to make one or two for you
You might have heard about bookmarklets. In short, they’re little bits of JavaScript that you can run from a browser bookmark on a page you’re looking at.
Large language models like ChatGPT and Claude are great at writing little bits of JavaScript.
Here’s one that I got ChatGPT to whip up for me so I could more easily take notes on a series of pages I was reading:
javascript: (() => {
const h1 = document.querySelector("h1");
const text =
h1 instanceof HTMLHeadingElement ? h1.textContent.trim() : document.title;
const url = window.location.href;
const mdLink = `## [${text}](${url})`;
navigator.clipboard.writeText(mdLink).then(
() => {},
(err) => alert("Failed to copy: " + err)
);
})();
This gets the contents of the first first-level heading (and failing that, the page title) and sticks it in a Markdown link that’s a second-level Markdown heading. That one-line Markdown snippet gets put on the clipboard.
When I’m taking notes (in Markdown, of course) this saves me loads of time collecting the title and a URL and typing out pound signs and parentheses and brackets. I just click a button on my toolbar labeled [h1 as ## […](…)]
(I like putting bookmarklets’ names in brackets) and press ⌘V in my notes to paste a properly linked header.
Here’s another one:
javascript: (function () {
const activeEl = document.activeElement;
let selectedText = "";
if (
activeEl &&
(activeEl.tagName === "TEXTAREA" ||
(activeEl.tagName === "INPUT" && activeEl.type === "text"))
) {
selectedText = activeEl.value.substring(
activeEl.selectionStart,
activeEl.selectionEnd
);
} else {
selectedText = window.getSelection().toString();
}
if (!selectedText) {
return;
}
const title = document.title;
const url = window.location.href;
const mdLink = `[${title}](${url})`;
const quotedText = selectedText
.split("\n")
.map((line) => "> " + line)
.join("\n");
const result = `${mdLink}\n\n${quotedText}`;
navigator.clipboard.writeText(result).then(
() => {},
(err) => {
console.error("Clipboard copy failed:", err);
alert("Failed to copy: " + err);
}
);
})();
This one takes the selected text, prefixes each line with >
, and also puts the document title in a link beforehand.
If your interest is piqued, you ought to ask your LLM about bookmarklets and maybe to whip up one or two for you.