{"id":13681703,"url":"https://github.com/Krazete/bookmarklets","last_synced_at":"2025-04-30T06:32:13.274Z","repository":{"id":23353043,"uuid":"88836763","full_name":"Krazete/bookmarklets","owner":"Krazete","description":"My JavaScript bookmarklets.","archived":false,"fork":false,"pushed_at":"2024-08-12T20:11:59.000Z","size":18351,"stargazers_count":181,"open_issues_count":3,"forks_count":54,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-08-12T23:07:30.143Z","etag":null,"topics":["bookmarklet","javascript","piano","youtube"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Krazete.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-04-20T07:53:49.000Z","updated_at":"2024-08-12T20:12:02.000Z","dependencies_parsed_at":"2024-05-12T20:32:59.888Z","dependency_job_id":"5a931c50-90f6-4c69-ba3b-049b0b1d8748","html_url":"https://github.com/Krazete/bookmarklets","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Krazete%2Fbookmarklets","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Krazete%2Fbookmarklets/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Krazete%2Fbookmarklets/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Krazete%2Fbookmarklets/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Krazete","download_url":"https://codeload.github.com/Krazete/bookmarklets/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224201720,"owners_count":17272626,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bookmarklet","javascript","piano","youtube"],"created_at":"2024-08-02T13:01:34.627Z","updated_at":"2024-11-12T01:30:32.949Z","avatar_url":"https://github.com/Krazete.png","language":"JavaScript","readme":"# Bookmarklets\n\nA collection of JavaScript bookmarklets I wrote.\n\n\u003cdetails\u003e\n\u003csummary\u003eContents\u003c/summary\u003e\n\n- [Usage](#usage)\n- [Novelties](#novelties)\n  - [Tri.js](#trijs)\n  - [Piano.js](#pianojs)\n  - [Mouselight.js](#mouselightjs)\n  - [Tic.js](#ticjs)\n  - [Lupire.js](#lupirejs)\n- [YouTube Tools](#youtube-tools)\n  - [YTEngagement.js](#ytengagementjs)\n  - [YTScroller.js](#ytscrollerjs)\n  - [YTLiveStamper.js](#ytlivestamperjs)\n  - [YTSpeed.js](#ytspeedjs)\n  - [YTThumb.js](#ytthumbjs)\n  - [YTGlow.js](#ytglowjs)\n- [Toggles](#toggles)\n  - [Pop.js](#popjs)\n  - [Edit.js](#editjs)\n  - [Invert.js](#invertjs)\n  - [InvertMedia.js](#invertmediajs)\n  - [Censor.js](#censorjs)\n- [Selections](#selections)\n  - [InvertSelection.js](#invertselectionjs)\n  - [DeleteSelection.js](#deleteselectionjs)\n\n\u003c/details\u003e\n\n# Usage\n\nCopy and paste the **minified** script (linked in the titles) into your bookmarks and open the bookmark to activate it.\n\nNote:\n\n- The **full** script may not work in bookmarklet format due to comments (`//`) or certain unencoded characters (`%`). Use the **minified** script.\n- Likewise, the **minified** script may not work if pasted into the developer console or used within a userscript. 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.\n- Bookmarklets must have `javascript:` at the beginning to work.  Some browsers automatically delete this label when pasting, so make sure it's there.\n- Instead of the minified script, you can alternatively use the following script (replacing `[SCRIPT_NAME]` with `tri` or `piano` or `lupire` etc.)\n  - `javascript:void(document.head.appendChild(document.createElement(\"script\")).src=\"https://cdn.jsdelivr.net/gh/Krazete/bookmarklets/[SCRIPT_NAME].js\")`\n  - This type of bookmarklet retrieves the script from this repository every time. This has pros and cons.\n    - It is always up-to-date.\n    - It may take longer to load depending on your internet and the servers of GitHub and jsDelivr.\n    - It may not work on some websites due to CORS, CORB, TrustedTypePolicy, or other security measures.\n\n# Novelties\n\nThese bookmarklets are toys or games. I spent the most time crafting these.\n\n## [Tri.js](min/tri.min.js)\n\nView a webpage in 3D layers. Includes a settings menu in the top left corner to control various dimensional aspects.\n\n![tri](gif/tri.gif)\n\n## [Piano.js](min/piano.min.js)\n\nAdd a piano to any webpage.\n\nIf you want shorter code for some reason, replace the big `disc:[[],[{ ... timeout:null}]]` block with `disc:[[]]`. This deletes the sample tracks.\n\n![piano](gif/piano.gif)\n\nLeft Menu:\n\n- Wave: waveform type\n- Pitch: octave level\n  - can also use left and right keyboard arrows\n- Tilt: piano angle\n  - can also use up and down keyboard arrows\n\nRight Menu:\n\n- `↻ ▶`/`↻ ◼`: play/stop recording\n  - recording starts automatically from the first note you play\n- `⬇`: save recording as a track\n- `✖`: toggle deletion mode\n  - after entering deletion mode, click `↻ ✖` or `n ✖` to reset recording or delete track #n\n  - can also reset recording with spacebar\n- `n ▶`/`n ◼`: play/stop track #n\n- `⬆︎`: export all tracks\n  - search console output for the track (disc) you want to save and paste it at the end of `piano.disc` list in the script\n  - only useful with a local copy of the source code (e.g. me and pull requesters)\n\n## [Mouselight.js](min/mouselight.min.js)\n\nSimulate a flashlight. Works best on websites with deeply nested HTML elements.\n\n![mouselight](gif/mouselight.gif)\n\n## [Tic.js](min/tic.min.js)\n\nA game of ultimate tic-tac-toe. The rules are explained [here](https://mathwithbaddrawings.com/2013/06/16/ultimate-tic-tac-toe/).\n\n[TicMobile.js](min/ticmobile.min.js) is optimized for mobile devices.\n\n![tic](gif/tic.gif)\n\n## [Lupire.js](min/lupire.min.js)\n\nA replicated memory game. See **Lu**mosity's [**pi**nball **re**call](https://lumosity.com/brain-games/pinball-recall).\n\n[LupireMobile.js](min/lupiremobile.min.js) is optimized for mobile devices.\n\n![lupire](gif/lupire.gif)\n\n# YouTube Tools\n\nThese bookmarklets are specifically for YouTube. They're written for desktop, but they should work on the mobile website too.\n\nMany of these are more useful with a userscript manager like TamperMonkey. Use the full script in these cases.\n\n## [YTEngagement.js](min/ytengagement.min.js)\n\nPreview 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.js)]\n\n![ytengagement](gif/ytsentiment.gif)\n\n## [YTScroller.js](min/ytscroller.min.js)\n\nKeep the video in view while scrolling down the comment section. [[full script](ytscroller.js)]\n\n![ytscroller](gif/ytscroller.gif)\n\n## [YTLiveStamper.js](min/ytlivestamper.min.js)\n\nRecord timestamps for a video even during a livestream. [[full script](ytlivestamper.js)]\n\nPanel Parts:\n\n- Stamplist\n  - the minus and plus buttons increment the timestamp accordingly\n  - timestamps are clickable and have copyable urls\n  - text input is for notes and comments\n- \"End of Video\" Timestamp\n  - always at the bottom of the stamplist\n  - it's there so you can return to real time after checking a past timestamp\n  - usually useless since most live streams don't allow backtracking in the first place\n- \"Import List\" Button\n  - overwrites current stamplist with textbox contents\n  - useful if you need to refresh the page or delete individual timestamps\n- \"Add Timestamp\" Button\n  - adds current time (minus 5 seconds) to stamplist\n- \"Copy List\" Button\n  - writes stamplist to textbox and copies textbox to clipboard\n  - double-click to copy stamplist as list of urls instead (cannot be imported)\n\nNote that YouTube will hide a comment if it has an unusually large amount of timestamps relative to normal text.\n\nHaving a note for every timestamp will help ensure your comment remains visible to others.\n\n## [YTSpeed.js](min/ytspeed.min.js)\n\nSpeed up the video even more. Also has a slider to dim the video because why not? [[full script](ytspeed.js)]\n\nNote: At x10 speed, the video usually plays faster than it can load.\n\nThis bookmarklet works for videos on other websites too.\n\n## [YTThumb.js](min/ytthumb.min.js)\n\nGet the maximum resolution thumbnail of the current video.\n\n## [YTGlow.js](min/ytglow.min.js)\n\nAn alternative to YouTube's ambient mode. [[full script](ytglow.js)]\n\n| Ambient Mode | YTGlow.js |\n|---|---|\n| Works by slowly radiating the video's colors outward. | Works by adding a simple blur effect behind the video. |\n| If the video suddenly turns dark, the glow will linger for a while. |  If the video suddenly turns dark, the glow will disappear instantly. |\n| Not available for live or unprocessed videos. | Works on all videos. |\n\nIt 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.\n\nIt'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.\n\n# Toggles\n\nThese bookmarklets are simple tools and have no UI. Click the bookmarklet to turn it on or off.\n\n## [Pop.js](min/pop.min.js)\n\nToggle picture-in-picture mode for the first video on the page.\n\n## [Edit.js](min/edit.min.js)\n\nMake the entire webpage editable.\n\n## [Invert.js](min/invert.min.js)\n\nInvert the webpage. Useful with InvertMedia.js to create a dark mode for bright websites.\n\n## [InvertMedia.js](min/invertmedia.min.js)\n\nInvert image and video elements.\n\n## [Censor.js](min/censor.min.js)\n\nPixelates all visible img and video elements. Uncensors on hover.\n\n![censor](gif/censor.gif)\n\nVery buggy. Issues include:\n\n- most lazy-loaded images won't load at all\n- may not update to style changes of img or video\n- doesn't work for iframes\n- GIFs only show the first frame\n- layout shifts\n- will shrink or stretch if img or video doesn't fill its space\n- hovering doesn't always uncensor\n\nToggle twice to reset the censors (this fixes the first two issues only).\n\n# Selections\n\nMore tools. Select an area of the page to choose which elements to affect.\n\n## [InvertSelection.js](min/invertselection.min.js)\n\nInverts selected elements. This works by sampling 100 points within your selection and inverting the topmost common element.\n\n## [DeleteSelection.js](min/deleteselection.min.js)\n\nDeleted selected elements. Useful for some ads and paywalls.\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FKrazete%2Fbookmarklets","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FKrazete%2Fbookmarklets","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FKrazete%2Fbookmarklets/lists"}