1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
|
let loliLasso = document.createElement('div');
loliLasso.setAttribute('id', 'loli-lasso');
document.body.appendChild(loliLasso);
let firstPos;
let secondPos;
const captureFunctions = {
mousedown: (event) => {
if (event.buttons !== 1) return;
setStyles('#loli-lasso', {
display: 'block',
top: event.clientY + 'px',
left: event.clientX + 'px'
});
firstPos = { x: event.clientX, y: event.clientY };
},
mousemove: (event) => {
if (event.buttons !== 1) return
const originalTop = $('#loli-lasso').style.top;
const originalLeft = $('#loli-lasso').style.left;
const height = event.clientY - firstPos.y;
const width = event.clientX - firstPos.x;
setStyles('#loli-lasso', {
top: (height > 0)
? originalTop
: event.clientY + 'px',
height: (height > 0)
? height + 'px'
: (firstPos.y - event.clientY) + 'px',
left: (width > 0)
? originalLeft
: event.clientX + 'px',
width: (width > 0)
? width + 'px'
: (firstPos.x - event.clientX) + 'px'
});
},
mouseup: (event) => {
if (event.which !== 1) return;
document.body.classList.remove('loli-filter');
setStyles('body', {
cursor: 'initial',
userSelect: 'initial'
});
setStyles('#loli-lasso', {
display: 'none',
top: 0, left: 0,
height: 0, width: 0
});
secondPos = {
x: (event.clientX < window.innerWidth)
? event.clientX
: window.innerWidth,
y: (event.clientY < window.innerHeight)
? event.clientY
: window.innerHeight
};
document.removeEventListener('mousedown', captureFunctions.mousedown);
document.removeEventListener('mousemove', captureFunctions.mousemove);
document.removeEventListener('mouseup', captureFunctions.mouseup);
setTimeout(() => chrome.runtime.sendMessage({ coordinates: [firstPos, secondPos] }), 100);
}
};
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
if (request === 'select') {
setStyles('body', {
cursor: 'crosshair',
userSelect: 'none'
});
document.body.classList.add('loli-filter');
document.addEventListener('mousedown', captureFunctions.mousedown);
document.addEventListener('mousemove', captureFunctions.mousemove);
document.addEventListener('mouseup', captureFunctions.mouseup);
} else if (request === 'check') {
sendResponse(true);
}
});
const $ = (el) => document.querySelector(el);
function setStyles(element, styles) {
let el = document.querySelector(element);
for (let style in styles)
el.style[style] = styles[style];
}
|