A collection of JavaScript bookmarklets I wrote.
Contents
Copy and paste the minified script (linked in the titles) into your bookmarks and open the bookmark to activate it.
Note:
- The full script may not work in bookmarklet format due to comments (
//) or certain characters (%). Use the minified script. - You can alternatively use the following script, replacing
[SCRIPT_NAME]withtriorpianoorlupireetc.javascript:void(document.head.appendChild(document.createElement("script")).src="https://cdn.jsdelivr.net/gh/Krazete/bookmarklets/[SCRIPT_NAME].js")- This type of bookmarklet retrieves the script from this repository every time. This has pros and cons.
- It is always up-to-date.
- It may take longer to load depending on your internet and the servers of GitHub and jsDelivr.
- It may not work on some websites due to CORB or other security measures.
- Bookmarklets must have
javascript:at the beginning to work. Some browsers automatically delete this label when pasting, so make sure it's there. - If pasted into the developer console or used within a userscript, the minified script may not work. This is because I replaced all
%s with%25in the minified scripts to make them bookmarklet-compatible. Use the full script for userscript purposes.
These bookmarklets are toys or games. I spent the most time crafting these.
View a webpage in 3D layers. Includes a settings menu in the top left corner to control various dimensional aspects.
Add a piano to any webpage.
If you want shorter code for some reason, replace the big disc:[[],[{ ... timeout:null}]] block with disc:[[]]. This deletes the sample tracks.
Left Menu:
- Wave: waveform type
- Pitch: octave level
- can also use left and right keyboard arrows
- Tilt: piano angle
- can also use up and down keyboard arrows
Right Menu:
↻ ▶/↻ ◼: play/stop recording- recording starts automatically from the first note you play
⬇: save recording as a track✖: toggle deletion mode- after entering deletion mode, click
↻ ✖orn ✖to reset recording or delete track #n - can also reset recording with spacebar
- after entering deletion mode, click
n ▶/n ◼: play/stop track #n⬆︎: export all tracks- search console output for the track (disc) you want to save and paste it at the end of
piano.disclist in the script - only useful with a local copy of the source code (e.g. me and pull requesters)
- search console output for the track (disc) you want to save and paste it at the end of
Simulate a flashlight. Works best on websites with deeply nested HTML elements.
A game of ultimate tic-tac-toe. The rules are explained here.
TicMobile.js is optimized for mobile devices.
A replicated memory game. See Lumosity's pinball recall.
LupireMobile.js is optimized for mobile devices.
Pixelates all visible img and video elements. Uncensors on hover.
Very buggy. Issues include:
- most lazy-loaded images won't load at all
- may not update to style changes of img or video
- doesn't work for iframes
- GIFs only show the first frame
- layout shifts
- will shrink or stretch if img or video doesn't fill its space
- hovering doesn't always uncensor
Instead of fixing these, I made the bookmarklet togglable. Click twice to reset the censors. (This fixes the first two issues only).
These bookmarklets are specifically for YouTube. They're written for desktop, but they should work on the mobile website too.
Many of these are more useful with a userscript manager like TamperMonkey. Use the full script in these cases.
Preview the likes-to-views ratio of YouTube videos. For easier visibility, the ratio bar is displayed as log(likes + 1) / log(views + 1). [full script]
Keep the video in view while scrolling down the comment section. [full script]
Record timestamps for a video even during a livestream. [full script]
Panel Parts:
- Stamplist
- the minus and plus buttons increment the timestamp accordingly
- timestamps are clickable and have copyable urls
- text input is for notes and comments
- "End of Video" Timestamp
- always at the bottom of the stamplist
- it's there so you can return to real time after checking a past timestamp
- usually useless since most live streams don't allow backtracking in the first place
- "Import List" Button
- overwrites current stamplist with textbox contents
- useful if you need to refresh the page or delete individual timestamps
- "Add Timestamp" Button
- adds current time (minus 5 seconds) to stamplist
- "Copy List" Button
- writes stamplist to textbox and copies textbox to clipboard
- double-click to copy stamplist as list of urls instead (cannot be imported)
Note that YouTube will hide a comment if it has an unusually large amount of timestamps relative to normal text.
Having a note for every timestamp will help ensure your comment remains visible to others.
Speed up the video even more. Also has a slider to dim the video because why not? [full script]
Note: At x10 speed, the video usually plays faster than it can load.
This bookmarklet works for videos on other websites too.
Get the maximum resolution thumbnail of the current video.
An alternative to YouTube's ambient mode. [full script]
| Ambient Mode | YTGlow.js |
|---|---|
| Works by slowly radiating the video's colors outward. | Works by adding a simple blur effect behind the video. |
| If the video suddenly turns dark, the glow will linger for a while. | If the video suddenly turns dark, the glow will disappear instantly. |
| Not available for live or unprocessed videos. | Works on all videos. |
It also kinda works with the light theme if you remove the canvas.style.mixBlendMode = "lighten" line. Darkness isn't supposed to glow though, so it'll looks strange.
It's a little buggy, especially if using the miniplayer. This bookmarklet is togglable, so you can turn it off easily if it suddenly blurs the entire screen or something.
These bookmarklets are simple tools and have no UI. Click the bookmarklet to turn it on or off.
Toggle picture-in-picture mode for the first video on the page.
Make the entire webpage editable.
Invert the webpage. Useful with InvertMedia.js to create a dark mode for bright websites.
Invert image and video elements.
Select an area of the page to invert. This works by sampling 100 points within your selection and inverting the topmost common element.
This bookmarklet doesn't really qualify as a Toggle, but the other inverters are here so ¯\_(ツ)_/¯.