Bookmarklets

Creating a bookmarklet

- In Google Chrome:
  1. 1. Click on the three-dot menu icon in the top-right corner.
  1. 1. Hover over “Bookmarks” and select “Bookmark manager.”
  1. 1. Right-click on a folder (or the bookmarks bar) where you want to save the bookmarklet.
  1. 1. Choose “Add bookmark.”
  1. 1. In the “Name” field, give your bookmarklet a descriptive name.
  1. 1. In the “URL” or “Address” field, paste the JavaScript code for your bookmarklet. Make sure it starts with `javascript:`.
  1. 1. Click “Save.”

- In Mozilla Firefox:
  1. 1. Click on the three-line menu icon in the top-right corner.
  1. 1. Choose “Bookmarks” and then “Show All Bookmarks” to open the Library.
  1. 1. Right-click on a folder (or the bookmarks toolbar) where you want to save the bookmarklet.
  1. 1. Select “New Bookmark.”
  1. 1. Give your bookmarklet a name in the “Name” field.
  1. 1. In the “Location” field, paste the JavaScript code for your bookmarklet, starting with `javascript:`.
  1. 1. Click “Add.”

- In Microsoft Edge (Chromium-based):
  1. 1. Click on the three-dot menu icon in the top-right corner.
  1. 1. Choose “Favorites” and then “Manage favorites.”
  1. 1. Right-click on a folder (or the favorites bar) where you want to save the bookmarklet.
  1. 1. Select “Add a favorite.”
  1. 1. Give your bookmarklet a name.
  1. 1. In the “URL” field, paste the JavaScript code for your bookmarklet, starting with `javascript:`.
  1. 1. Click “Save.”

VSTS/TFS Helpers

TFS Popout Editor (older version of Visual Studio Online)

javascript:(function(){if($===window.jQuery){var mainCon = $('div[rawtitle=\'Acceptance Criteria\']');mainCon.css({ position:'fixed', 'z-index':30000, top: '40px', left: '50px', height: '800px', 'background-color': '#ccc', width: '1500px'});mainCon.find('.richeditor-container').css({height: '750px'});}})()

TFS Done Editing (older version of Visual Studio Online)

javascript:(function(){if($===window.jQuery){var mainCon = $('div[rawtitle=\'Acceptance Criteria\']');mainCon.css({ position:'inherit', 'z-index':0, top: '', left: '', height: '', 'background-color': '', width: ''});mainCon.find('.richeditor-container').css({height: '250px'});}})()

Find My Items (old azure portal)

(update the href in the bookmark and replace XXX with your search filter)

javascript:(function(){$('.fx-grid-searchbox > input').val('XXX').blur();})()

Other Helpers

Add Skips to Rumble

This is still my favorite even though Rumble added skips

javascript: (function() {    function skip(value) {        var videos = document.getElementsByTagName("video");        for (var i = 0; i < videos.length; i++) {            var video = videos[i];            video.currentTime += value;        }    }    function clean(className) {        var elementToDelete = document.getElementsByClassName(className);        for (var i = 0; i < elementToDelete.length; i++) {            var overlay = elementToDelete[i];            overlay.parentNode.removeChild(overlay);        }    }    function addOverlay(videoObj, skipAmount, align) {        var thisClass = "videoSkip_" + align;        var parentDiv = videoObj.parentNode;        if (!parentDiv) {            return;        }        var overlayDiv = document.createElement("div");        overlayDiv.classList.add(thisClass);        overlayDiv.style.position = "absolute";        overlayDiv.style.width = "80px";        overlayDiv.style.height = "100%";        overlayDiv.style.zIndex = "9999";        overlayDiv.style.backgroundColor = "rgba(0, 0, 0, 0.1)";        overlayDiv.style[align] = 0;        overlayDiv.style.bottom = "50px";        overlayDiv.title = "Skip " + skipAmount + " seconds";        parentDiv.appendChild(overlayDiv);        overlayDiv.onmouseover = function() {            overlayDiv.style.cursor = "pointer";        };        overlayDiv.addEventListener("click", function() {            skip(skipAmount);        });        parentDiv.insertBefore(overlayDiv, parentDiv.firstChild);    }    function addClickSkip(skipAmount, align) {        var videos = document.getElementsByTagName("video");        for (var i = 0; i < videos.length; i++) {            var video = videos[i];            addOverlay(video, skipAmount, align);        }    }    clean("videoSkip_left");    clean("videoSkip_right");    addClickSkip(-10, "left");    addClickSkip(10, "right");})();

To use this on a mobile device follow this guide

Add Skips to Youtube

javascript: (function() {    function skip(value) {        var videos = document.getElementsByTagName("video");        for (var i = 0; i < videos.length; i++) {            var video = videos[i];            video.currentTime += value;        }    }    function clean(className) {        var elementToDelete = document.getElementsByClassName(className);        for (var i = 0; i < elementToDelete.length; i++) {            var overlay = elementToDelete[i];            overlay.parentNode.removeChild(overlay);        }    }    function addOverlay(videoObj, skipAmount, align) {        var thisClass = "videoSkip_" + align;        var parentDiv = videoObj.parentNode;        if (!parentDiv) {            return;        }        var overlayDiv = document.createElement("div");        overlayDiv.classList.add(thisClass);        overlayDiv.style.position = "absolute";        overlayDiv.style.width = "80px";        overlayDiv.style.height = "100vh";        overlayDiv.style.zIndex = "9999";        overlayDiv.style.backgroundColor = "rgba(0, 0, 0, 0.1)";        overlayDiv.style[align] = 0;               overlayDiv.title = "Skip " + skipAmount + " seconds";        parentDiv.appendChild(overlayDiv);        overlayDiv.onmouseover = function() {            overlayDiv.style.cursor = "pointer";        };        overlayDiv.addEventListener("click", function(e) {   e.stopPropagation();        skip(skipAmount);        });        parentDiv.insertBefore(overlayDiv, parentDiv.firstChild);    }    function addClickSkip(skipAmount, align) {        var videos = document.getElementsByTagName("video");        for (var i = 0; i < videos.length; i++) {            var video = videos[i];            addOverlay(video, skipAmount, align);        }    }    clean("videoSkip_left");    clean("videoSkip_right");    addClickSkip(-10, "left");    addClickSkip(10, "right");})();

To use this on a mobile device follow this guide

Dark Mode

javascript: function addcss(css){ var head = document.getElementsByTagName('head')[0]; var s = document.createElement('style');      s.setAttribute('type', 'text/css'); s.appendChild(document.createTextNode(css));      head.appendChild(s);  }  addcss('html{filter: invert(1) hue-rotate(180deg)}');  addcss('img{filter: invert(1) hue-rotate(180deg)}');  addcss('video{filter: invert(1) hue-rotate(180deg)}')

Thanks to Sahil Malik

Expand GIT Code Viewer

javascript:(function(){ document.querySelector('.blob-wrapper').style.width = 'max-content'; })()

Expand AWS S3 Column

javascript:(function(){ Object.values(document.getElementsByClassName('truncate')).forEach(function(e){ e.classList.remove('truncate');}) })()

Display Local Storage Size (in console)

javascript:var total = 0;for(var x in localStorage) { var amount = (localStorage[x].length * 2) / 1024 / 1024; total += amount; console.log( x + '=' + amount.toFixed(2) + ' MB');}console.log( 'Total: ' + total.toFixed(2) + ' MB');

Display Window Size

javascript:(function(){var f=document,a=window,b=f.createElement('div'),c='position:fixed;top:0;left:0;color:#fff;background:#222;padding:5px 1em;font:14px sans-serif;z-index:999999',e=function(){if(a.innerWidth===undefined){b.innerText=f.documentElement.clientWidth+'x'+f.documentElement.clientHeight;}else if(f.all){b.innerText=a.innerWidth+'x'+a.innerHeight;}else{b.textContent=window.innerWidth+'x'+window.innerHeight;}};f.body.appendChild(b);if(typeof b.style.cssText!=='undefined'){b.style.cssText=c;}else{b.setAttribute('style',c);}e();if(a.addEventListener){a.addEventListener('resize',e,false);}else{if(a.attachEvent){a.attachEvent('onresize',e);}else{a.onresize=e;}}})();

Open Selected Text In Google Maps

javascript:(function(){var selectedText=window.getSelection().toString().trim();if(selectedText){var mapsUrl='https://www.google.com/maps/search/'+encodeURIComponent(selectedText);window.open(mapsUrl,'_blank');}else{alert('Please select some text first!');}})();

Expand dev.azure.com Pipelines Release Names

javascript:(function(){ Object.values(document.getElementsByClassName('overflow-ellipsis')).forEach(function(e){ $(e).css('white-space', 'break-spaces'); }) })();

Auto Close Zoom On Participant Count

Ever been on a zoom call and didnt want to be? This lets you join the meeting and auto close once people start leaving the meeting so you dont have to sit there

javascript:(function(){var retVal = prompt('Enter the number of participants to leave meeting on: ', '10'); var ivl = setInterval(function(){ var currentAmount = document.getElementsByClassName('footer-button__number-counter')[0]; var btn = document.getElementsByClassName('footer__leave-btn')[0]; if(!btn || !currentAmount){ alert('Page has changed plugin not available'); return; } console.log('Checking participant count', currentAmount.innerText); if(retVal === currentAmount.innerText){ clearInterval(ivl); console.log('Leaving meeting'); btn.click(); setTimeout(function(){ var confirmLeave = document.getElementsByClassName('leave-meeting-options__btn')[0]; if(!confirmLeave){ window.close(); } confirmLeave.click(); }, 2000); } }, 15000);})();

Fix SonarLint Display to show Rule ID

javascript:(function(){document.querySelectorAll('.coding-rule').forEach((ruleTitle)=>{const rule=ruleTitle.getAttribute('data-rule');if(rule){const code=rule.split(":")[1];const anchor=ruleTitle.querySelector('a');if(anchor){const hrefValue=anchor.getAttribute('href');const text=anchor.textContent;var ruleString="Rule: "+code+" ";var b=document.createElement('b');b.innerText=ruleString;var span=document.createElement('span');span.innerText=text.replace(ruleString,"");anchor.innerText="";anchor.innerHtml="";anchor.appendChild(b);anchor.appendChild(span);}}});})();

Mark all comments resolved in Azure Dev Ops Code Review

javascript:(function(){const e=document.getElementsByTagName("button");for(let n=0;n<e.length;n++){const o=e[n];o.textContent.includes("Resolve")&&o.click()}})();

Open link in Archive.Today

javascript:void(open('https://archive.today/?run=1&url=%27+encodeURIComponent(document.location)))

AI Helpers

ChatGTP Widen Results Area

javascript:(function(){function insertCustomStyle(cssText){var style=document.createElement('style');style.textContent=cssText;document.head.appendChild(style);}var customCss='.flex .flex-1 .text-base { margin: 5px !important; max-width: 100%; }';insertCustomStyle(customCss);})();

Bard Widen Results Area

javascript:(function(){function insertCustomStyle(cssText){var style=document.createElement('style');style.textContent=cssText;document.head.appendChild(style);}var customCss='.conversation-container { max-width: 100%; }';insertCustomStyle(customCss);})();

Insert AI Prompt (Works with ChatGTP and Bard websites)

Based on This One Prompt Will 10X Your Chat GPT Results (This is outdated refer to ChatGTP 3.5 Instructions for a better example prompt)

To use place cursor in input box for website. Click bookmarklet to insert prompt. Press enter.

For a list of commands after prompt is executed type /help

javascript: (function() {  document.trusted=true;  var textToCopy = `Upon starting our interaction, auto run these Default Commands throughout our entire conversation. Refer to Appendix for command library and instructions: /role_play "Expert ChatGPT Prompt Engineer" /role_play "infinite subject matter expert" /auto_continue "♻%EF%B8%8F": ChatGPT, when the output exceeds character limits, automatically continue writing and inform the user by placing the ♻%EF%B8%8F emoji at the beginning of each new part. This way, the user knows the output is continuing without having to type "continue". /periodic_review "🧐" (use as an indicator that ChatGPT has conducted a periodic review of the entire conversation. Only show 🧐 in a response or a question you are asking, not on its own.) /contextual_indicator "🧠" /expert_address "🔍" (Use the emoji associated with a specific expert to indicate you are asking a question directly to that expert) /chain_of_thought/custom_steps /auto_suggest "💡": ChatGPT, during our interaction, you will automatically suggest helpful commands when appropriate, using the 💡 emoji as an indicator. Priming Prompt:You are an Expert level ChatGPT Prompt Engineer with expertise in all subject matters. Throughout our interaction, you will refer to me as "Obi-Wan". 🧠 Let's collaborate to create the best possible ChatGPT response to a prompt I provide, with the following steps:1. I will inform you how you can assist me.2. You will /suggest_roles based on my requirements.3. You will /adopt_roles if I agree or /modify_roles if I disagree.4. You will confirm your active expert roles and outline the skills under each role. /modify_roles if needed. Randomly assign emojis to the involved expert roles.5. You will ask, "How can I help with {my answer to step 1}?" (💬)6. I will provide my answer. (💬)7. You will ask me for /reference_sources {Number}, if needed and how I would like the reference to be used to accomplish my desired output.8. I will provide reference sources if needed9. You will request more details about my desired output based on my answers in step 1, 2 and 8, in a list format to fully understand my expectations.10. I will provide answers to your questions. (💬)11. You will then /generate_prompt based on confirmed expert roles, my answers to step 1, 2, 8, and additional details.12. You will present the new prompt and ask for my feedback, including the emojis of the contributing expert roles.13. You will /revise_prompt if needed or /execute_prompt if I am satisfied (you can also run a sandbox simulation of the prompt with /execute_new_prompt command to test and debug), including the emojis of the contributing expert roles.14. Upon completing the response, ask if I require any changes, including the emojis of the contributing expert roles. Repeat steps 10-14 until I am content with the prompt.If you fully understand your assignment, respond with, "How may I help you today, {Name}? (🧠)"Appendix: Commands, Examples, and References1. /adopt_roles: Adopt suggested roles if the user agrees.2. /auto_continue: Automatically continues the response when the output limit is reached. Example: /auto_continue3. /chain_of_thought: Guides the AI to break down complex queries into a series of interconnected prompts. Example: /chain_of_thought4. /contextual_indicator: Provides a visual indicator (e.g., brain emoji) to signal that ChatGPT is aware of the conversation\%27s context. Example: /contextual_indicator 🧠5. /creative N: Specifies the level of creativity (1-10) to be added to the prompt. Example: /creative 86. /custom_steps: Use a custom set of steps for the interaction, as outlined in the prompt.7. /detailed N: Specifies the level of detail (1-10) to be added to the prompt. Example: /detailed 78. /do_not_execute: Instructs ChatGPT not to execute the reference source as if it is a prompt. Example: /do_not_execute9. /example: Provides an example that will be used to inspire a rewrite of the prompt. Example: /example "Imagine a calm and peaceful mountain landscape"10. /excise "text_to_remove" "replacement_text": Replaces a specific text with another idea. Example: /excise "raining cats and dogs" "heavy rain"11. /execute_new_prompt: Runs a sandbox test to simulate the execution of the new prompt, providing a step-by-step example through completion.12. /execute_prompt: Execute the provided prompt as all confirmed expert roles and produce the output.13. /expert_address "🔍": Use the emoji associated with a specific expert to indicate you are asking a question directly to that expert. Example: /expert_address "🔍"14. /factual: Indicates that ChatGPT should only optimize the descriptive words, formatting, sequencing, and logic of the reference source when rewriting. Example: /factual15. /feedback: Provides feedback that will be used to rewrite the prompt. Example: /feedback "Please use more vivid descriptions"16. /few_shot N: Provides guidance on few-shot prompting with a specified number of examples. Example: /few_shot 317. /formalize N: Specifies the level of formality (1-10) to be added to the prompt. Example: /formalize 618. /generalize: Broadens the prompt\%27s applicability to a wider range of situations. Example: /generalize19. /generate_prompt: Generate a new ChatGPT prompt based on user input and confirmed expert roles.20. /help: Shows a list of available commands, including this statement before the list of commands, “To toggle any command during our interaction, simply use the following syntax: /toggle_command "command_name": Toggle the specified command on or off during the interaction. Example: /toggle_command "auto_suggest"”.21. /interdisciplinary "field": Integrates subject matter expertise from specified fields like psychology, sociology, or linguistics. Example: /interdisciplinary "psychology"22. /modify_roles: Modify roles based on user feedback.23. /periodic_review: Instructs ChatGPT to periodically revisit the conversation for context preservation every two responses it gives. You can set the frequency higher or lower by calling the command and changing the frequency, for example: /periodic_review every 5 responses24. /perspective "reader\%27s view": Specifies in what perspective the output should be written. Example: /perspective "first person"25. /possibilities N: Generates N distinct rewrites of the prompt. Example: /possibilities 326. /reference_source N: Indicates the source that ChatGPT should use as reference only, where N = the reference source number. Example: /reference_source 2: {text}27. /revise_prompt: Revise the generated prompt based on user feedback.28. /role_play "role": Instructs the AI to adopt a specific role, such as consultant, historian, or scientist. Example: /role_play "historian" 29. /show_expert_roles: Displays the current expert roles that are active in the conversation, along with their respective emoji indicators.Example usage: Obi-Wan: "/show_expert_roles" Assistant: "The currently active expert roles are:1. Expert ChatGPT Prompt Engineer 🧠2. Math Expert 📐"30. /suggest_roles: Suggest additional expert roles based on user requirements.31. /auto_suggest "💡": ChatGPT, during our interaction, you will automatically suggest helpful commands or user options when appropriate, using the 💡 emoji as an indicator. 31. /topic_pool: Suggests associated pools of knowledge or topics that can be incorporated in crafting prompts. Example: /topic_pool32. /unknown_data: Indicates that the reference source contains data that ChatGPT doesn\%27t know and it must be preserved and rewritten in its entirety. Example: /unknown_data33. /version "ChatGPT-N front-end or ChatGPT API": Indicates what ChatGPT model the rewritten prompt should be optimized for, including formatting and structure most suitable for the requested model. Example: /version "ChatGPT-4 front-end"Testing Commands:/simulate "item_to_simulate": This command allows users to prompt ChatGPT to run a simulation of a prompt, command, code, etc. ChatGPT will take on the role of the user to simulate a user interaction, enabling a sandbox test of the outcome or output before committing to any changes. This helps users ensure the desired result is achieved before ChatGPT provides the final, complete output. Example: /simulate "prompt: \%27Describe the benefits of exercise.\%27"/report: This command generates a detailed report of the simulation, including the following information:• Commands active during the simulation• User and expert contribution statistics• Auto-suggested commands that were used• Duration of the simulation• Number of revisions made• Key insights or takeawaysThe report provides users with valuable data to analyze the simulation process and optimize future interactions. Example: /reportHow to turn commands on and off:To toggle any command during our interaction, simply use the following syntax: /toggle_command "command_name": Toggle the specified command on or off during the interaction. Example: /toggle_command "auto_suggest"`;    console.log(textToCopy);    var activeElement = document.activeElement;    if (activeElement && activeElement.tagName.toLowerCase() === "input" || activeElement.tagName.toLowerCase() === "textarea") {        activeElement.value = textToCopy;  return;   }    if (activeElement && activeElement.tagName.toLowerCase() === "div" || activeElement.tagName.toLowerCase() === "p") {    activeElement.innerText = textToCopy; return;   }  })();

Thanks to codewithbernard