Good web script tampermonkey

Text Helper — Профессиональный ассистент для работы с контентом
Автор: the rxm | Версия: 1.1
Представляю Text Helper — минималистичный и мощный инструмент для тех, кто проводит демонстрации, пишет гайды или анализирует контент прямо в браузере. Скрипт создан для серьезных задач: никакой лишней визуальной мишуры, только функционал.

Что умеет Text Helper:

• Умные стрелки: Рисуйте четкие указатели через меню или быстрым сочетанием Shift + Мышь.
• Режим маркера: Выделяйте важные строки текста полупрозрачным цветом.
• Лазерная указка: Акцентируйте внимание при демонстрации экрана (Zoom/Discord/Telegram).
• Рисование (Pen): Делайте быстрые пометки. Линии автоматически стираются через 10 секунд, сохраняя чистоту страницы.
• Фокус курсора: Подсвечивает положение мыши для лучшей видимости.

СКОПИРОВАТЬ КОД (TAMPERMONKEY)

// ==UserScript==
// @name Text Helper
// @namespace http://tampermonkey.net
// @version 1.1
// @description Инструмент для серьезной работы с контентом
// @author the rxm
// @match :///*
// @grant GM_setValue
// @grant GM_getValue
// @run-at document-end
// ==/UserScript==
(function() {
'use strict';
const config = {
color: GM_getValue('mag_color', 'gold'),
cursor: GM_getValue('mag_cursor', false),
menuVisible: false
};
let state = { mode: 'none', isMouseDown: false, lastX: 0, lastY: 0, startX: 0, startY: 0 };
const style = document.createElement('style');
style.innerHTML = .no-select { user-select: none !important; -webkit-user-select: none !important; } #mag-panel { position:fixed; top:10px; right:10px; background:rgba(10,10,10,0.98); color:gold; border:2px solid gold; padding:12px; border-radius:12px; z-index:2147483647; width:220px; font-family: sans-serif; box-shadow: 0 0 25px #000; display: none; } #mag-panel button { background:#222; color:gold; border:1px solid gold; padding:8px; width:100%; margin-bottom:5px; cursor:pointer; border-radius:6px; font-size:11px; font-weight:bold; transition: 0.2s; } #mag-panel button.active { background:gold; color:black; box-shadow: 0 0 10px gold; } #mag-cur { position:fixed; width:20px; height:20px; border-radius:50%; pointer-events:none; z-index:2147483646; border:2px solid #fff; display: ${config.cursor ? 'block' : 'none'}; box-shadow: 0 0 15px white; } .mag-canvas { position:fixed; top:0; left:0; pointer-events:none; z-index:2147483645; } .hide-cursor { cursor: none !important; } .laser-dot { position:fixed; width:8px; height:8px; border-radius:50%; z-index:2147483647; pointer-events:none; animation: fade 0.5s forwards; } @keyframes fade { to { opacity: 0; transform: scale(0.5); } };
document.head.appendChild(style);
const cur = document.createElement('div'); cur.id = "mag-cur"; document.body.appendChild(cur);
const panel = document.createElement('div'); panel.id = "mag-panel";
panel.innerHTML = <h3 style="text-align:center; margin:0 0 10px 0;"> TEXT HELPER</h3> <button id="b-draw"> Рисование</button> <button id="b-mark"> Выделение</button> <button id="b-arrow"> Рисовать стрелку</button> <button id="b-laser"> Указка</button> <button id="b-cur"> Фокус курсора</button> <div style="display:flex; gap:5px; margin-bottom:10px;"> <button id="c-gold" style="background:gold; color:black; border:none; flex:1;">Gold</button> <button id="c-pink" style="background:#ff00ff; color:white; border:none; flex:1;">Pink</button> </div> <button id="btn-clear" style="background:#500; color:white; border-color:red;"> ОЧИСТИТЬ ВСЁ</button> <p style="font-size:9px; color:#888; text-align:center;">Меню: <b>Numpad 5</b></p>;
document.body.appendChild(panel);
const canvas = document.createElement('canvas'); canvas.className = "mag-canvas"; document.documentElement.appendChild(canvas);
const ctx = canvas.getContext('2d');
const res = () => { canvas.width = window.innerWidth; canvas.height = window.innerHeight; };
window.addEventListener('resize', res); res();
const updateUI = () => {
document.getElementById('b-draw').classList.toggle('active', state.mode === 'draw');
document.getElementById('b-mark').classList.toggle('active', state.mode === 'mark');
document.getElementById('b-arrow').classList.toggle('active', state.mode === 'arrow');
document.getElementById('b-laser').classList.toggle('active', state.mode === 'laser');
document.getElementById('b-cur').classList.toggle('active', config.cursor);
cur.style.display = config.cursor ? 'block' : 'none';
document.body.classList.toggle('hide-cursor', config.cursor);
document.body.classList.toggle('no-select', state.mode !== 'none');
GM_setValue('mag_color', config.color);
GM_setValue('mag_cursor', config.cursor);
};
document.getElementById('b-draw').onclick = () => { state.mode = (state.mode === 'draw' ? 'none' : 'draw'); updateUI(); };
document.getElementById('b-mark').onclick = () => { state.mode = (state.mode === 'mark' ? 'none' : 'mark'); updateUI(); };
document.getElementById('b-arrow').onclick = () => { state.mode = (state.mode === 'arrow' ? 'none' : 'arrow'); updateUI(); };
document.getElementById('b-laser').onclick = () => { state.mode = (state.mode === 'laser' ? 'none' : 'laser'); updateUI(); };
document.getElementById('b-cur').onclick = () => { config.cursor = !config.cursor; updateUI(); };
document.getElementById('btn-clear').onclick = () => ctx.clearRect(0, 0, canvas.width, canvas.height);
document.getElementById('c-gold').onclick = () => { config.color = 'gold'; updateUI(); };
document.getElementById('c-pink').onclick = () => { config.color = '#ff00ff'; updateUI(); };
window.addEventListener('keydown', (e) => {
if (e.code === 'Numpad5') {
config.menuVisible = !config.menuVisible;
panel.style.display = config.menuVisible ? 'block' : 'none';
}
});
window.addEventListener('mousedown', (e) => {
if (e.target.closest('#mag-panel')) return;
state.isMouseDown = true;
state.startX = e.clientX; state.startY = e.clientY;
state.lastX = e.clientX; state.lastY = e.clientY;
});
window.addEventListener('mouseup', (e) => {
if (!state.isMouseDown) return;
if (state.mode === 'arrow' || e.shiftKey) {
const h = 25, a = Math.atan2(e.clientY - state.startY, e.clientX - state.startX);
ctx.strokeStyle = config.color; ctx.lineWidth = 6; ctx.shadowBlur = 15; ctx.shadowColor = config.color;
ctx.lineCap = 'round';
ctx.beginPath();
ctx.moveTo(state.startX, state.startY);
ctx.lineTo(e.clientX, e.clientY);
ctx.lineTo(e.clientX - h * Math.cos(a - Math.PI/6), e.clientY - h * Math.sin(a - Math.PI/6));
ctx.moveTo(e.clientX, e.clientY);
ctx.lineTo(e.clientX - h * Math.cos(a + Math.PI/6), e.clientY - h * Math.sin(a + Math.PI/6));
ctx.stroke();
setTimeout(() => ctx.clearRect(0,0,canvas.width,canvas.height), 15000);
}
state.isMouseDown = false;
});
window.addEventListener('mousemove', (e) => {
cur.style.left = (e.clientX - 10) + 'px'; cur.style.top = (e.clientY - 10) + 'px';
cur.style.background = hsl(${(Date.now() / 20) % 360}, 100%, 50%);
if (state.mode === 'laser') {
const dot = document.createElement('div');
dot.className = 'laser-dot'; dot.style.left = e.clientX+'px'; dot.style.top = e.clientY+'px';
dot.style.background = config.color; dot.style.boxShadow = 0 0 10px ${config.color};
document.body.appendChild(dot); setTimeout(() => dot.remove(), 500);
}
if (state.isMouseDown && !e.shiftKey && state.mode !== 'arrow' && (state.mode === 'draw' || state.mode === 'mark')) {
ctx.strokeStyle = state.mode === 'mark' ? (config.color === 'gold' ? 'rgba(255,215,0,0.3)' : 'rgba(255,0,255,0.3)') : config.color;
ctx.lineWidth = state.mode === 'mark' ? 24 : 7;
ctx.lineCap = 'round'; ctx.shadowBlur = 0;
ctx.beginPath(); ctx.moveTo(state.lastX, state.lastY); ctx.lineTo(e.clientX, e.clientY); ctx.stroke();
state.lastX = e.clientX; state.lastY = e.clientY;
if(state.mode === 'draw') setTimeout(() => ctx.clearRect(e.clientX-12, e.clientY-12, 24, 24), 10000);
}
});
updateUI();
})();

Code

// ==UserScript==

// @name Text Helper

// @namespace http://tampermonkey.net

// @version 1.1

// @description Инструмент для серьезной работы с контентом

// @author the rxm

// @match :///*

// @grant GM_setValue

// @grant GM_getValue

// @run-at document-end

// ==/UserScript==

(function() {

'use strict';

const config = {

color: GM_getValue('mag_color', 'gold'),

cursor: GM_getValue('mag_cursor', false),

menuVisible: false

};

let state = { mode: 'none', isMouseDown: false, lastX: 0, lastY: 0, startX: 0, startY: 0 };

const style = document.createElement('style');

style.innerHTML = .no-select { user-select: none !important; -webkit-user-select: none !important; } #mag-panel { position:fixed; top:10px; right:10px; background:rgba(10,10,10,0.98); color:gold; border:2px solid gold; padding:12px; border-radius:12px; z-index:2147483647; width:220px; font-family: sans-serif; box-shadow: 0 0 25px #000; display: none; } #mag-panel button { background:#222; color:gold; border:1px solid gold; padding:8px; width:100%; margin-bottom:5px; cursor:pointer; border-radius:6px; font-size:11px; font-weight:bold; transition: 0.2s; } #mag-panel button.active { background:gold; color:black; box-shadow: 0 0 10px gold; } #mag-cur { position:fixed; width:20px; height:20px; border-radius:50%; pointer-events:none; z-index:2147483646; border:2px solid #fff; display: ${config.cursor ? 'block' : 'none'}; box-shadow: 0 0 15px white; } .mag-canvas { position:fixed; top:0; left:0; pointer-events:none; z-index:2147483645; } .hide-cursor { cursor: none !important; } .laser-dot { position:fixed; width:8px; height:8px; border-radius:50%; z-index:2147483647; pointer-events:none; animation: fade 0.5s forwards; } @keyframes fade { to { opacity: 0; transform: scale(0.5); } };

document.head.appendChild(style);

const cur = document.createElement('div'); cur.id = "mag-cur"; document.body.appendChild(cur);

const panel = document.createElement('div'); panel.id = "mag-panel";

panel.innerHTML = <h3 style="text-align:center; margin:0 0 10px 0;"> TEXT HELPER</h3> <button id="b-draw"> Рисование</button> <button id="b-mark"> Выделение</button> <button id="b-arrow"> Рисовать стрелку</button> <button id="b-laser"> Указка</button> <button id="b-cur"> Фокус курсора</button> <div style="display:flex; gap:5px; margin-bottom:10px;"> <button id="c-gold" style="background:gold; color:black; border:none; flex:1;">Gold</button> <button id="c-pink" style="background:#ff00ff; color:white; border:none; flex:1;">Pink</button> </div> <button id="btn-clear" style="background:#500; color:white; border-color:red;"> ОЧИСТИТЬ ВСЁ</button> <p style="font-size:9px; color:#888; text-align:center;">Меню: <b>Numpad 5</b></p>;

document.body.appendChild(panel);

const canvas = document.createElement('canvas'); canvas.className = "mag-canvas"; document.documentElement.appendChild(canvas);

const ctx = canvas.getContext('2d');

const res = () => { canvas.width = window.innerWidth; canvas.height = window.innerHeight; };

window.addEventListener('resize', res); res();

const updateUI = () => {

document.getElementById('b-draw').classList.toggle('active', state.mode === 'draw');

document.getElementById('b-mark').classList.toggle('active', state.mode === 'mark');

document.getElementById('b-arrow').classList.toggle('active', state.mode === 'arrow');

document.getElementById('b-laser').classList.toggle('active', state.mode === 'laser');

document.getElementById('b-cur').classList.toggle('active', config.cursor);

cur.style.display = config.cursor ? 'block' : 'none';

document.body.classList.toggle('hide-cursor', config.cursor);

document.body.classList.toggle('no-select', state.mode !== 'none');

GM_setValue('mag_color', config.color);

GM_setValue('mag_cursor', config.cursor);

};

document.getElementById('b-draw').onclick = () => { state.mode = (state.mode === 'draw' ? 'none' : 'draw'); updateUI(); };

document.getElementById('b-mark').onclick = () => { state.mode = (state.mode === 'mark' ? 'none' : 'mark'); updateUI(); };

document.getElementById('b-arrow').onclick = () => { state.mode = (state.mode === 'arrow' ? 'none' : 'arrow'); updateUI(); };

document.getElementById('b-laser').onclick = () => { state.mode = (state.mode === 'laser' ? 'none' : 'laser'); updateUI(); };

document.getElementById('b-cur').onclick = () => { config.cursor = !config.cursor; updateUI(); };

document.getElementById('btn-clear').onclick = () => ctx.clearRect(0, 0, canvas.width, canvas.height);

document.getElementById('c-gold').onclick = () => { config.color = 'gold'; updateUI(); };

document.getElementById('c-pink').onclick = () => { config.color = '#ff00ff'; updateUI(); };

window.addEventListener('keydown', (e) => {

if (e.code === 'Numpad5') {

config.menuVisible = !config.menuVisible;

panel.style.display = config.menuVisible ? 'block' : 'none';

}

});

window.addEventListener('mousedown', (e) => {

if (e.target.closest('#mag-panel')) return;

state.isMouseDown = true;

state.startX = e.clientX; state.startY = e.clientY;

state.lastX = e.clientX; state.lastY = e.clientY;

});

window.addEventListener('mouseup', (e) => {

if (!state.isMouseDown) return;

if (state.mode === 'arrow' || e.shiftKey) {

const h = 25, a = Math.atan2(e.clientY - state.startY, e.clientX - state.startX);

ctx.strokeStyle = config.color; ctx.lineWidth = 6; ctx.shadowBlur = 15; ctx.shadowColor = config.color;

ctx.lineCap = 'round';

ctx.beginPath();

ctx.moveTo(state.startX, state.startY);

ctx.lineTo(e.clientX, e.clientY);

ctx.lineTo(e.clientX - h * Math.cos(a - Math.PI/6), e.clientY - h * Math.sin(a - Math.PI/6));

ctx.moveTo(e.clientX, e.clientY);

ctx.lineTo(e.clientX - h * Math.cos(a + Math.PI/6), e.clientY - h * Math.sin(a + Math.PI/6));

ctx.stroke();

setTimeout(() => ctx.clearRect(0,0,canvas.width,canvas.height), 15000);

}

state.isMouseDown = false;

});

window.addEventListener('mousemove', (e) => {

cur.style.left = (e.clientX - 10) + 'px'; cur.style.top = (e.clientY - 10) + 'px';

cur.style.background = hsl(${(Date.now() / 20) % 360}, 100%, 50%);

if (state.mode === 'laser') {

const dot = document.createElement('div');

dot.className = 'laser-dot'; dot.style.left = e.clientX+'px'; dot.style.top = e.clientY+'px';

dot.style.background = config.color; dot.style.boxShadow = 0 0 10px ${config.color};

document.body.appendChild(dot); setTimeout(() => dot.remove(), 500);

}

if (state.isMouseDown && !e.shiftKey && state.mode !== 'arrow' && (state.mode === 'draw' || state.mode === 'mark')) {

ctx.strokeStyle = state.mode === 'mark' ? (config.color === 'gold' ? 'rgba(255,215,0,0.3)' : 'rgba(255,0,255,0.3)') : config.color;

ctx.lineWidth = state.mode === 'mark' ? 24 : 7;

ctx.lineCap = 'round'; ctx.shadowBlur = 0;

ctx.beginPath(); ctx.moveTo(state.lastX, state.lastY); ctx.lineTo(e.clientX, e.clientY); ctx.stroke();

state.lastX = e.clientX; state.lastY = e.clientY;

if(state.mode === 'draw') setTimeout(() => ctx.clearRect(e.clientX-12, e.clientY-12, 24, 24), 10000);

}

});

updateUI();

})();

Инструмент предоставляется "как есть" для серьезных людей. Пользуйтесь на здоровье.