This little script gives you the tool to block out all that steals your focus while reading on the web. It works by giving you a little box that you can draw over the column or block of text you're reading and covers the rest of the page, and when you don't need it any more, just double click to toggle it. Simply click and drag the icon to your bookmark bar and click the bookmark to activate on the page of your choice.
!function (a, t, b) {
'use strict';
var d = !0,
e = !1,
x = !1,
h = {
x: 0,
y: 0
},
i = t.createElement('div'),
m = (a, b) => 100 * a / b + '%',
n = b => ({
x: m(b.pageX - a.pageXOffset, a.innerWidth),
y: m(b.pageY - a.pageYOffset, a.innerHeight),
d: '100%',
z: '0%'
}),
o = a => i.style.webkitClipPath = i.style.clipPath = 'polygon(' +
[
h.z, h.z, h.d, a.x, h.d,
a.x, a.y, h.x, a.y, h.x,
h.y, a.x, h.y, a.x, h.d,
h.d, h.d, h.d, h.z
].reduce( (p, c, i) => i % 2 === 0 ? p + ' ' + c : p + ',' + c, h.z) +
')',
w = v => b||v!=='rgba(0, 0, 0, 0)'?v:'#FFF';
i.setAttribute(
'style',
'width:100vw;height:100vh;position:fixed;top:0;left:0;z-index:2147483640;' +
`background-color:${w(a.getComputedStyle(t.body).backgroundColor)};`
),
t.querySelector('html').appendChild(i),
t.oncontextmenu = u => x = !0,
a.onmouseup = u => (i.style.opacity=1, !x && d && (e = !1), !0),
a.onmousedown = u => (i.style.opacity=.8, x ? (x = !1, !0) : d ? (h = n(u), e = !0, !1) : void 0),
a.onmousemove = u => (!x && d && e && o(n(u)), !0),
a.ondblclick = u => (d = !d, i.style.display = d ?
'initial' : 'none', a.getSelection().removeAllRanges());
}(window, document);