Bookmarklets

0) Bookmarklets.md

Bookmarklets

List of links for: https://gist.github.com/jaandrle/031198ab5130deb903065138532cc066

External

• Jesse's Bookmarklets Site
• Jak v Chrome otevírám weby jedním písmenem – Jan Tichý

Local

• a11y.js: // https://ffoodd.github.io/a11y.css
• bing_chat_scroll_bug.js: // temporal? fix for Bing Chat & scrolling
• Castbox: Play utils.js: // castbox.fm play/pause with "p", speed with 0-9
• Centrum Mail (menu utils).js: // mail.centrum.cz F4 to toggle menu
• color-picker.txt: // pick color
• General page Information.js: // new tab with page info (ttile, no. images/links, stylesheets, …)
• gist content.js: // for this page, generates content from Bookmarklet files (name + first file line)
• GitHub: Self–Review.js: // github.com unlock self review on pr files view
• List IDs.js: // list all page ids
• List Links.js: // list all page links
• Netflix.js: // netflix.com F4 to open/close focused box, 0-9 to trigger button when box open
• o2_custom_played.js: // o2.cz fix for not remembering watched episodes
• outlines.js: // highlite elements
• White imputs in darkmode.js: // bug fix for some page without proper styling
• youtube_miniplayer_leftORright.js: // youtube.com toggle left/right fronta square window
• youtube_toggle_later.js: // youtube.com add/remove current video to See Later (searches for cz labels, such as “Přehrád později” → need adjustments)
• YTDEL.js: // youtube.com for See Later (delete watched, see 8line), F4 loop, Del to delete curr selected, Q exit delete mode
• YTFronta.js: // youtube.com for See Later to choose selecetd to play, F4 loop, Insert add to fronta, Q exit delete mode

a11y.js

// https://ffoodd.github.io/a11y.css
javascript:(function(){
  const p={rel:"stylesheet",media:"all"},
        root_url= "https://ffoodd.github.io/a11y.css/static/css/";
  ["advices","obsoletes","warnings","errors"]
    .map(f=> `${root_url}/a11y-en_${f}-only.css`)
    .map(href=> Object.assign(document.createElement("link"),p,{href}))
    .forEach(el=> document.body.appendChild(el));})();

bing_chat_scroll_bug.js

// temporal? fix for Bing Chat & scrolling
javascript : void((() =>
	document.querySelector("cib-serp").shadowRoot.
		querySelector("cib-conversation").shadowRoot.
			appendChild(Object.assign(document.createElement("style"), {
				innerHTML: ".scroller-enabled{ overflow: scroll !important; }"
			}))
)());

Castbox: Play utils.js

// castbox.fm play/pause with "p", speed with 0-9
javascript:void((function(){
const speed= document.getElementsByClassName("playbackRate-list-item");
const playPauseBtn= document.getElementsByClassName("playBtn")[0];
if(!speed.length||!playPauseBtn) return alert("Check bookmarklets, page has probably changed!");
const eventFire= function(el, etype){ if (el.fireEvent) { el.fireEvent('on' + etype); } else { var evObj = document.createEvent('Events'); evObj.initEvent(etype, true, false); el.dispatchEvent(evObj); } }
document.addEventListener("keyup", ({ key })=> key==="p"&&eventFire(playPauseBtn, "click"));
document.addEventListener("keyup", ({ key })=> /[0-9]/.test(key)&&eventFire(speed[Number(key)], "click"));
})());

Centrum Mail (menu utils).js

// mail.centrum.cz F4 to toggle menu
javascript:void((function(){
const eventFire= function(el, etype){ if (el.fireEvent) { el.fireEvent('on' + etype); } else { var evObj = document.createEvent('Events'); evObj.initEvent(etype, true, false); el.dispatchEvent(evObj); } }
let is_open= false, menu_el, menu_btns;
document.addEventListener("keyup", function({ key }){
    if(key!=="F4") return false;
    const btn= document.getElementById("page").getElementsByClassName("js-button-id-80")[0]||document.getElementById("page").getElementsByClassName("js-button-id-66")[0];
    if(!btn) return alert("Menu not found!");
    menu_el= btn.nextSibling;
    is_open= menu_el.style.display !== "none";
    eventFire(btn, "click");
    if(is_open) return void(is_open= false);
    requestAnimationFrame(function(){
        menu_btns= menu_el.getElementsByTagName("a");
        if(!menu_btns.length) return true;
        Array.prototype.forEach.call(menu_btns, (el, i)=> void(el.textContent= i+") "+el.textContent));
        is_open= true;
    });
});
document.addEventListener("keyup", function({ key }){
    if(!is_open||!menu_btns||!/[0-9]/.test(key)) return false;
    const button_el= menu_btns[Number(key)];
    if(!button_el) return false;
    eventFire(button_el, !button_el.onclick ? "mouseover" : "click");
    is_open= false;
});
})());

color-picker.txt

// pick color
data:text/html;charset=utf-8,%3Chtml%3E%3Ctitle%3EColor Picker%3C%2Ftitle%3E%3Cinput%20type%3D%22color%22%20class%3D%22%22%20onchange%3D%22this.insertAdjacentElement%28%27afterend%27%2C%20Object.assign%28document.createElement%28%27p%27%29%2C%20%7B%20textContent%3A%20this.value%20%7D%29%29%22%3E%3C%2Fhtml%3E

General page Information.js

// new tab with page info (ttile, no. images/links, stylesheets, …)
javascript:void((function(title){
var s = '<h1>'+title+'</h1>';
s = s + '<table border=1 cellpadding=4 cellspacing=0>';
const addTR= (title, content= "?")=> void(
    s+= `<tr valign=top><td>${title}:%C2%A0</td><td>${content}%C2%A0</td></tr>`
);
const reduceMap= (els, mapFun, init= '')=>
    Array.prototype.reduce.call(els, (acc, curr)=> (acc+= mapFun(curr)), init);
addTR('Page <b>title</b>', document.title);
addTR('<b>Created</b> on', document.fileCreatedDate);
addTR('File <b>last modified</b>', document.lastModified);
addTR('File <b>size</b>', !document.fileSize ? undefined : ((parseInt(document.fileSize)) / 1000)+'KB');
addTR('Number of <b>images</b>', document.images.length);
addTR('Number of <b>links</b>', document.links.length);
addTR('<b>styleSheets</b>', 
    reduceMap(document.styleSheets, ({href})=> '<li>'+(href||"local"))
);
addTR('<b>Domain</b>', document.domain);
addTR('<b>Character</b>', document.charset);
addTR('<b>Scripts</b>', 
    reduceMap(document.scripts, ({src})=> '<li>'+(src||"local"))
);
addTR('<b>Forms</b> ('+document.forms.length+')',
    reduceMap(document.forms, ({name,action})=> '<li>'+JSON.stringify({name,action}))
);
addTR('<b>Meta</b> Data',
    reduceMap(document.getElementsByTagName('meta'),
        i_meta=> '<li><b>' + (i_meta.name||i_meta.httpEquiv) + '</b>: ' + i_meta.content)
);
s = s + '</table>';
var statswin = window.open('', 'statswin', 'menubar,scrollbars,resizable,height=600,width=790');
statswin
    .document
    .open();
statswin
    .document
    .write('<html><head><title>' + title + '</title><style>*{font-family:verdana;font-size:x-small;}</style></head><body>' + s + '</body></html>');
statswin
    .document
    .close();
})('Page statistics for: ' + location.href));

gist content.js

// for this page, generates content from Bookmarklet files (name + first file line)
javascript : void((function () {
    const md_content= Array.prototype.map.call(document.getElementsByClassName("file-info"), function(el){
        const [ name_el, link_el ]= [ "strong", "a" ].map(t=> el.getElementsByTagName(t)[0]);
        const link= link_el.href;
        const desctription_el= document.getElementById(link.slice(link.indexOf("#")+1)+"-LC1");
        const destrription= desctription_el ? `\`${desctription_el.textContent}\`` : "";
        return `- [${name_el.textContent.trim()}](${link}): ${destrription}`;
    }).join("\n");
    const newWindow=
      (d=> (title, content)=> (d.write('<html><head><title>' + title + '</title><style>*{font-family:verdana;font-size:x-small;}</style></head><body><h1>'+title+'</h1>' + content + '</body></html>'),d.close()))(open().document);
    newWindow("List of links for: "+location.href, `<pre>${md_content}</pre>`);
})());

GitHub: Self–Review.js

// github.com unlock self review on pr files view
javascript:void((function(){
    document.querySelectorAll("[type='radio'][name='pull_request_review[event]']") 
        .forEach(el=> el.disabled= false) 
})());

List IDs.js

// list all page ids
javascript : void((function () {
    const styles = document.createTextNode((`
        input:not([type="submit"]):not([type="reset"]), textarea, select, .type-email-js .content { background: whitesmoke !important; }
        .type-email-js .label-inactive { color: black; background: none; border: 1px solid black; }
    `).split(/\n\r?/).map(l=> l.trim()).filter(Boolean).join(" "));
    const style = document.createElement('style');
    style.appendChild(styles);
    document
        .head
        .appendChild(style)
})());javascript : void((function () {
const reduce=
  Function.prototype.call.bind(Array.prototype.reduce);
const reduceMap= (els, mapFun, init= '')=>
  Array.prototype.reduce.call(els, (acc, curr)=> (acc+= mapFun(curr)), init);
const newWindow=
  (d=> (title, content)=> (d.write('<html><head><title>' + title + '</title><style>*{font-family:verdana;font-size:x-small;}</style></head><body><h1>'+title+'</h1>' + content + '</body></html>'),d.close()))(open().document);
newWindow(
  "List of IDs for: "+location.href,
  "<ul>"+
    reduceMap(
      Object.entries(reduce(document.querySelectorAll('[id]')||[], (o, el)=> increaseValueInObject(o, el.id), {})),
      ([key, val])=> `<li><b>${key}:</b> ${val}`)+
  "</ul>"
);
function increaseValueInObject(o, key){
  const curr_value= o[key]||0;
  o[key]= curr_value+1;
  return o;
}
})());

List Links.js

// list all page links
javascript : void((function (D) {
const reduceMap= (els, mapFun, init= '')=>
  Array.prototype.reduce.call(els, (acc, curr, i)=> (acc+= mapFun(curr)), init);
const newWindow=
  (d=> (title, content)=> (d.write('<html><head><title>' + title + '</title><style>*{font-family:verdana;font-size:x-small;}</style></head><body><h1>'+title+'</h1>' + content + '</body></html>'),d.close()))(open().document);
const mapLink = ({title, href, textContent, innerHTML}) => `<a href="${href}" title="${title}" ${textContent
    ? ''
    : 'style="max-height:2em;max-width:4em;"'}>${textContent
        ? textContent
        : innerHTML}</a> (${title}|${href})`;
newWindow("List of links for: "+location.href,
  "<ol>"+reduceMap(D.links, (el, i) => "<li> " + mapLink(el))+"</ol>");
})(document));

Netflix.js

// netflix.com F4 to open/close focused box, 0-9 to trigger button when box open
javascript : void((function () {
    const styles = document.createTextNode((`
        input:not([type="submit"]):not([type="reset"]), textarea, select, .type-email-js .content { background: whitesmoke !important; }
        .type-email-js .label-inactive { color: black; background: none; border: 1px solid black; }
    `).split(/\n\r?/).map(l=> l.trim()).filter(Boolean).join(" "));
    const style = document.createElement('style');
    style.appendChild(styles);
    document
        .head
        .appendChild(style)
})());javascript:void((function(){
const eventFire= function(el, etype){ if (el.fireEvent) { el.fireEvent('on' + etype); } else { var evObj = document.createEvent('Events'); evObj.initEvent(etype, true, false); el.dispatchEvent(evObj); } }
document.addEventListener("keyup", function({ key }){
  if(key!=="F4"&&!/[0-9]/.test(key)) return false;
  const [ modal_el ]= document.getElementsByClassName("previewModal--container");
  if(key!=="F4") return modal_el&&eventFire(modal_el.getElementsByTagName("button")[Number(key)], "pointerdown");
  if(!modal_el) return eventFire(document.activeElement, "mouseover");
  modal_el.style= "";
});
})());

o2_custom_played.js

// o2.cz fix for not remembering watched episodes
javascript : void((()=> {
	const { pathname }= document.location;
	const key= "jaandrle_store", id= "jaandrle_style";
	const ls= new Set(JSON.parse(localStorage.getItem(key) || "[]"));
	if(pathname.startsWith("/program/")){
		ls.add(pathname);
		localStorage.setItem(key, JSON.stringify([...ls]));
		return;
	}
	const style= document.getElementById(id);
	if(style) return;
	const el_list= document.querySelector('[class^="EpisodesList"]');
	el_list.appendChild(Object.assign(document.createElement("style"), {
		id,
		innerHTML: "."+key+"{ opacity: 1 !important; }"
	}));
	const lse= [...ls].map(s=> document.querySelector(`[href="${s}"]`));
	const els= el_list.querySelectorAll('[href^="/program"]');
	const inputs= [...els].map(el=> el.parentElement.insertBefore(Object.assign(document.createElement("input"), { type: "checkbox", value: el.href.replace(location.origin, ""), checked: lse.includes(el), onchange, className: key }), el));
	console.log(inputs, inputs.map(el=> el.checked));
	function onchange(){ ls[this.checked ? "add" : "delete" ](this.value); localStorage.setItem(key, JSON.stringify([...ls])); }
})());

outlines.js

// highlite elements
javascript:void((function(a){for(a.__CSSDebug__=!a.__CSSDebug__,i=0;A=document.all[i++];)A.style.outline=a.__CSSDebug__?%22solid%20hsl(%22+9*(A+A).length+%22,99%,50%)1px%22:null})(window))

White imputs in darkmode.js

// bug fix for some page without proper styling
javascript : void((function () {
    const styles = document.createTextNode((`
        input:not([type="submit"]):not([type="reset"]), textarea, select, .type-email-js .content { background: whitesmoke !important; }
        .type-email-js .label-inactive { color: black; background: none; border: 1px solid black; }
    `).split(/\n\r?/).map(l=> l.trim()).filter(Boolean).join(" "));
    const style = document.createElement('style');
    style.appendChild(styles);
    document
        .head
        .appendChild(style)
})());

youtube_miniplayer_leftORright.js

// youtube.com toggle left/right fronta square window
javascript : void((function () {
    const toggle= "left:0;right:unset;";
    const ytdMiniplayer_el= document.getElementsByTagName("ytd-miniplayer")[0];
    if(!ytdMiniplayer_el) return false;
    const styles_old= ytdMiniplayer_el.getAttribute("style")||"";
    ytdMiniplayer_el.setAttribute("style",
        styles_old.indexOf(toggle)!==-1 ? styles_old.replace(toggle, "") : (styles_old+toggle));
})());

youtube_toggle_later.js

// youtube.com add/remove current video to See Later (searches for cz labels, such as “Přehrád později” → need adjustments)
javascript : void((function () {
  const el_a= Array.from(document.body.getElementsByClassName("yt-spec-button-shape-next")).find(el=> el.getAttribute("aria-label")==="Další akce");
  el_a.dispatchEvent(new CustomEvent("click"));
  requestAnimationFrame(setTimeout.bind(null, ()=> {
    el_a.dispatchEvent(new CustomEvent("click"));
    const el_u= Array.from(document.body.getElementsByClassName("ytd-menu-popup-renderer")).find(el=> el.textContent.trim()==="Uložit") ?? Array.from(document.getElementsByClassName("yt-spec-button-shape-next")).find(el=> el.getAttribute("aria-label")?.startsWith("Uložit"));
    el_u.dispatchEvent(new CustomEvent("click"));
    requestAnimationFrame(setTimeout.bind(null, ()=> {
      el_u.dispatchEvent(new CustomEvent("click"));
      Array.from(document.body.getElementsByClassName("ytd-add-to-playlist-renderer"))
        .filter(el=> el.tagName==="YTD-PLAYLIST-ADD-TO-OPTION-RENDERER")
        .find(el=> el.textContent.trim()==="Přehrát později")
        .querySelector("#checkbox")
        .dispatchEvent(new CustomEvent("click"));
      }, 750)); 
  }, 750));
})());

YTDEL.js

// youtube.com for See Later (delete watched, see 8line), F4 loop, Del to delete curr selected, Q exit delete mode
javascript : void((function () {
    const els= ()=> Array.from(document.getElementsByTagName("ytd-playlist-video-renderer"))
        .map(el=> [el, el.getElementsByTagName("ytd-thumbnail-overlay-resume-playback-renderer")[0]]);
    const elMenuDelete= ()=> Array.from(document.getElementsByTagName("tp-yt-iron-dropdown"))
        .filter(el=> el.getAttribute("aria-hidden")!=="true")[0].getElementsByTagName("ytd-menu-service-item-renderer")[2]
        .dispatchEvent(new Event("click"));
    const nonWatched= el=> !el||el.data.percentDurationWatched<15;
    const openMenu= el=> el.getElementsByTagName("ytd-menu-renderer")[0].getElementsByTagName("yt-icon-button")[0].dispatchEvent(new Event("click"));
    const className= "YTDEL--hide";
    const el_style= Object.assign(document.createElement("style"), { innerHTML: `.${className}{ max-height: 0 !important; overflow: hidden; }` });
    document.head.appendChild(el_style);
    let init= false, el_prev, els_menus, i= 0;
    document.addEventListener("keyup", function main({ key, shiftKey }){
        if(key==="Q"&&shiftKey) return onRemove();
        if(key!=="F4"&&key!=="Delete") return false;
        if(!init){
            els().filter(([,el])=>nonWatched(el)).forEach(([el])=> el.classList.add(className));
            init= true;
            return;
        }
        if(key==="Delete"){
            elMenuDelete();
            els_menus= false;
            i-= 1;
        }
        if(!els_menus){
            els_menus= els().filter(([,el])=> !nonWatched(el)).map(([el])=> el);
            if(!els_menus.length){
                onRemove();
                alert("Nothing to do");
            }
        }
        if(shiftKey) i-= 2;
        if(i===els_menus.length) i=0;
        if(i<0) i=els_menus.length-1;
        el_prev= els_menus[i++];
        (el_prev.previousElementSibling || el_prev).scrollIntoView();
        openMenu(el_prev);
        
        function onRemove(){
            els().filter(([,el])=>nonWatched(el)).forEach(([el])=> el.classList.remove(className));
            document.removeEventListener("keyup", main);
        }
    });
})());

YTFronta.js

// youtube.com for See Later to choose selecetd to play, F4 loop, Insert add to fronta, Q exit delete mode
javascript: void((function () {
    const els= ()=> Array.from(document.getElementsByTagName("ytd-playlist-video-renderer"))
        .map(el=> [el, el.getElementsByTagName("ytd-thumbnail-overlay-resume-playback-renderer")[0]]);
    const elMenuToFronta= ()=> Array.from(document.getElementsByTagName("tp-yt-iron-dropdown"))
        .filter(el=> el.getAttribute("aria-hidden")!=="true")[0].getElementsByTagName("ytd-menu-service-item-renderer")[0]
        .dispatchEvent(new Event("click"));
    const viewed= el=> !el ? 0 : el.__data.data.percentDurationWatched;
    const openMenu= el=> el.getElementsByTagName("ytd-menu-renderer")[0].getElementsByTagName("yt-icon-button")[0].dispatchEvent(new Event("click"));
    let els_menus, el_prev, i= 0;
    document.addEventListener("keyup", function main({ key, shiftKey }){
        if(key==="Q"&&shiftKey) return document.removeEventListener("keyup", main);
        if(key!=="F4"&&key!=="Insert") return false;
        if(key==="Insert"){
            elMenuToFronta();
            els_menus= false;
        }
        if(!els_menus){
            els_menus= els().reverse().sort(([,a], [,b])=> viewed(a)-viewed(b)).map(([el])=> el);
            if(!els_menus.length){
                document.removeEventListener("keyup", main);
                alert("Nothing to do");
            }
        }
        if(shiftKey) i-= 2;
        if(i===els_menus.length) i=0;
        if(i<0) i=els_menus.length-1;
        el_prev= els_menus[i++];
        (el_prev.previousElementSibling || el_prev).scrollIntoView();
        openMenu(el_prev);
    });
})());

• YouTube miniplayer toggle

ytd-miniplayer {
    left: 0;
    right: unset;
}