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)