All Projects → Krazete → bookmarklets

Krazete / bookmarklets

Licence: other
My JavaScript bookmarklets.

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to bookmarklets

Game Of Github
Play Game of Life in your GitHub contributions
Stars: ✭ 74 (-40.8%)
Mutual labels:  bookmarklet
Andi
A tool to test web content for accessibility and 508 compliance.
Stars: ✭ 140 (+12%)
Mutual labels:  bookmarklet
Bootlint
HTML linter for Bootstrap projects
Stars: ✭ 2,405 (+1824%)
Mutual labels:  bookmarklet
Faux Pas
A script to highlight elements that are mismatched incorrectly to @​font-face blocks, which may result in shoddy faux bold or faux italic rendering.
Stars: ✭ 93 (-25.6%)
Mutual labels:  bookmarklet
Lips
Scheme based powerful lisp interpreter written in JavaScript
Stars: ✭ 120 (-4%)
Mutual labels:  bookmarklet
Alfred Safari Assistant
Alfred 3+ workflow to search and use Safari bookmarks, history, reading list and tabs.
Stars: ✭ 169 (+35.2%)
Mutual labels:  bookmarklet
Performance Bookmarklet
Performance-Bookmarklet helps to analyze the current page through the Resource Timing API, Navigation Timing API and User-Timing - requests by type, domain, load times, marks and more. Sort of a light live WebPageTest.
Stars: ✭ 997 (+697.6%)
Mutual labels:  bookmarklet
sb2md
Scrapbox contents -> Markdown
Stars: ✭ 72 (-42.4%)
Mutual labels:  bookmarklet
Dragon
dragon.js is a bookmarklet that lets you drag any element on a website using a mouse or touchscreen. The goal is to speed up in-browser design critiques and brainstorming new layout ideas.
Stars: ✭ 131 (+4.8%)
Mutual labels:  bookmarklet
Init
❗️ Go to the first (initial) commit of any GitHub repo
Stars: ✭ 207 (+65.6%)
Mutual labels:  bookmarklet
Sillynium
Automate the creation of Python Selenium Scripts by drawing coloured boxes on webpage elements
Stars: ✭ 100 (-20%)
Mutual labels:  bookmarklet
Colordrop
Interactive Drag & Drop Coloring with Material Design Color palette
Stars: ✭ 120 (-4%)
Mutual labels:  bookmarklet
Viewimage
Google removed the "View Image" button. This is a bookmarklet that downloads the full-size photo.
Stars: ✭ 174 (+39.2%)
Mutual labels:  bookmarklet
A11y.css
This CSS file intends to warn developers about possible risks and mistakes that exist in HTML code. It can also be used to roughly evaluate a site's quality by simply including it as an external stylesheet.
Stars: ✭ 1,277 (+921.6%)
Mutual labels:  bookmarklet
Bookmarks.dev
Bookmarks and Code Snippets Manager for Developers & Co
Stars: ✭ 218 (+74.4%)
Mutual labels:  bookmarklet
Bookmarklet Maker
Tool to create bookmarklet/ javascript apps to automate the web browser.
Stars: ✭ 52 (-58.4%)
Mutual labels:  bookmarklet
Boomlet
💥 Bookmarklet compiler encloses, encodes, minifies your Javascript file and opens an HTML page with your new bookmarklet for immediate use.
Stars: ✭ 167 (+33.6%)
Mutual labels:  bookmarklet
PlayPiano
Implement and simulate piano on web page.
Stars: ✭ 16 (-87.2%)
Mutual labels:  piano
PianoView
A custom view of piano on Android
Stars: ✭ 54 (-56.8%)
Mutual labels:  piano
Emoji Helper
A small cross-browser emoji cheatsheet extension 👍
Stars: ✭ 194 (+55.2%)
Mutual labels:  bookmarklet

Bookmarklets

A collection of JavaScript bookmarklets I wrote.

Contents

Usage

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] with tri or piano or lupire etc.
    • 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 %25 in the minified scripts to make them bookmarklet-compatible. Use the full script for userscript purposes.

Novelties

These bookmarklets are toys or games. I spent the most time crafting these.

Tri.js

View a webpage in 3D layers. Includes a settings menu in the top left corner to control various dimensional aspects.

tri

Piano.js

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 ↻ ✖ or n ✖ to reset recording or delete track #n
    • can also reset recording with spacebar
  • 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.disc list in the script
    • only useful with a local copy of the source code (e.g. me and pull requesters)

piano

Mouselight.js

Simulate a flashlight. Works best on websites with deeply nested HTML elements.

mouselight

Tic.js

A game of ultimate tic-tac-toe. The rules are explained here.

TicMobile.js is optimized for mobile devices.

tic

Lupire.js

A replicated memory game. See Lumosity's pinball recall.

LupireMobile.js is optimized for mobile devices.

lupire

YouTube Tools

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.

YTEngagement.js

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]

ytengagement

YTScroller.js

Keep the video in view while scrolling down the comment section. [full script]

ytscroller

YTLiveStamper.js

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.

YTSpeed.js

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.

YTThumb.js

Get the maximum resolution thumbnail of the current video.

YTGlow.js

An alternative to YouTube's ambient mode.

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.

Toggles

These bookmarklets are simple tools and have no UI. Click the bookmarklet to turn it on or off.

Pop.js

Toggle picture-in-picture mode for the first video on the page.

Edit.js

Make the entire webpage editable.

Invert.js

Invert the webpage. Useful with InvertMedia.js to create a dark mode for bright websites.

InvertMedia.js

Invert image and video elements.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].