Bookmarklet 📜
Although the title is not exactly what I intend, it is what it is.
So, what exactly is a bookmarklet? You can learn more about it here.
In a nutshell, it is the javascript snippet that is saved in the url. Sorry if it's not entirely correct; it doesn't really matter what it is 🥸.
How to Use a Bookmarklet Professionally
- Include images that are mostly connected to the functionality.
- Add an alt property to the picture > Keep in mind that this will be the name for the browser bookmark in the end.
- Place your code in the code structure shown below.
- Ensure that the user can easily copy the code.
- Ask that the user drag the picture to the bookmark section and edit the bookmark URL to the copied snippet.
- Now, when user clicks on the bookmark, they'll get the functionality you're looking for.
javascript: (() => { 'use strict'; (function () { // Your code })(); })(); Real usage
Pintrest
Remove redundant sections of the Pinterest page.
javascript: (() => { 'use strict'; (function () { const css = ` a { display:none; } button, [data-test-id="pointer-events-wrapper"] { display:none !important; } [role="banner"] { margin-bottom: -140px; visibility: hidden; } `; const head = document.head || document.getElementsByTagName('head')[0]; const style = document.createElement('style'); head.appendChild(style); style.appendChild(document.createTextNode(css)); [...document.querySelectorAll('body *')].forEach(item => { if (item.getAttribute('id') === '__PWS_DATA__') return; if (item.innerHTML === item.innerText && item.innerText.length !== 0) item.parentNode.removeChild(item); }); })(); })(); Gitpod
Creating a workspace is as easy as prefixing any GitHub URL with
gitpod.io/#
javascript: (() => { "use strict"; (function () { for ( var t = document.getElementsByTagName("meta"), n = 0; n < t.length; n++ ) { var o = t[n]; if (o.content.toLowerCase().includes("gitlab")) return !0; if ("hostname" === o.name && o.content.includes("github")) return !0; if ( "application-name" === o.name && o.content.toLowerCase().includes("bitbucket") ) return !0; } return !1; })() && window.open( ("https://gitpod.io", "https://gitpod.io/#" + (window.location.protocol + "//" + window.location.host) + window.location.pathname) ); })(); 
Top comments (0)