An Interest In:
Web News this Week
- April 15, 2024
- April 14, 2024
- April 13, 2024
- April 12, 2024
- April 11, 2024
- April 10, 2024
- April 9, 2024
April 28, 2022 11:04 am GMT
Original Link: https://dev.to/amirhe/unleash-the-power-of-bookmarklets-4397
Unleash the power of bookmarklets
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) );})();
Original Link: https://dev.to/amirhe/unleash-the-power-of-bookmarklets-4397
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To