Highlighter effect. Based on my Codepen but compacted into an injectable script so you can paste in the address bar or hit on it as a bookmark in chrome or firefox. And if all goes well, your cursor becomes a marker and you can highlight what you need.
Made in under 5 minutes as I was needing to screenshot something and thought i really need to highlight a line in the picture but debault browser select looks wonky. This is sexier. Anyway I've tested on 2 sites just now, worked so I'm goin with it. Use if you like.
Just copy this as one big line and execute as bookmark, in URL bar, or dev console.
BTW this is also how the effect is acheived on my Newspaper app @ raykooyenga.com/apps/news-app
javascript:!(function() {
/* by ray kooyenga based on his codepen https://codepen.io/deadflowers/pen/emOGgxR */
const css = `
::selection {
background: linear-gradient(to bottom, rgba(255, 215, 0, 0) 0%, rgba(255, 215, 0, 1) 50%, rgba(255, 215, 0, 0) 100%), #ffd700;
}
.highlighter {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 30%, rgba(255, 215, 0, 1) 40%, rgba(255, 215, 0, 1) 60%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0) 100%);
position: relative;
}
body,html,div,p,span,table,article,* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
cursor: url('https://raykooyenga.com/img/highlight.svg') 0 30, progress;
}
`;
const style = document.createElement('style');
style.textContent = css;
document.head.appendChild(style);
document.addEventListener('mouseup', () => {
const selection = window.getSelection();
if (!selection.isCollapsed) {
const range = selection.getRangeAt(0);
const span = document.createElement('span');
span.className = 'highlighter';
range.surroundContents(span);
selection.removeAllRanges();
}
});
})();