search and highlight tool
As of
// ==UserScript==
// @name Custom search and highlighting aka (Ctrl+F)
// @namespace http://tampermonkey.net/
// @version 2025-10-31.1.33
// @description search and highlight tool
// @author kr6r5kugkkgk
// @match *://*/*
// @license MIT
// @run-at document-idle
// @icon https://i.pinimg.com/originals/79/09/89/7909897ceea2691e5a4942766c678ff3.png
// ==/UserScript==
(function() {
'use strict';
// Переменные для функционала
let matches = [];
let currentIndex = -1;
// Переменные для настроек подсветки (по умолчанию)
let settings = {
highlightDefaultBg: 'rgb(52, 22, 86)',
highlightCurrentBg: 'rgb(179, 117, 238)',
highlightTextColor: 'rgb(232, 248, 101)',
highlightBorderColor: 'rgb(139, 248, 194)',
highlightBorderRadius: 12,
highlightBorderThickness: 2,
highlightDefaultOpacity: 0.8, // Новое: прозрачность для обычного фона (0-1)
highlightCurrentOpacity: 1.0, // Новое: прозрачность для текущего фона (0-1)
highlightPadding: 5 ,
lang: 'ru'
// Новое: padding в px для mark
};
const translations = {
ru: {
toggleTooltip: 'Свернуть/развернуть поисковую панель',
searchPlaceholder: 'Поиск по странице...',
settingsTitle: 'Настройки подсветки',
defaultBg: 'Цвет фона (обычный):',
defaultOpacity: 'Прозрачность обычного фона (0-1):',
currentBg: 'Цвет фона (текущий):',
currentOpacity: 'Прозрачность текущего фона (0-1):',
textColor: 'Цвет текста:',
borderColor: 'Цвет бордера:',
borderRadius: 'Скругление (px):',
borderThickness: 'Толщина бордера (px):',
padding: 'Padding (px):',
save: 'Сохранить',
cancel: 'Отмена',
lang: 'Язык интерфейса:'
},
en: {
toggleTooltip: 'Toggle search-wrapper-panel' ,
searchPlaceholder: 'Search page...',
settingsTitle: 'Highlight settings',
defaultBg: 'Default background:',
defaultOpacity: 'Default opacity (0-1):',
currentBg: 'Current background:',
currentOpacity: 'Current opacity (0-1):',
textColor: 'Text color:',
borderColor: 'Border color:',
borderRadius: 'Border radius (px):',
borderThickness: 'Border thickness (px):',
padding: 'Padding (px):',
save: 'Save',
cancel: 'Cancel',
lang: 'Interface language:'
}
};
// Загрузка настроек из localStorage, если есть
const savedSettings = localStorage.getItem('pageSearcherSettings');
if (savedSettings) {
const parsed = JSON.parse(savedSettings);
settings = { ...settings, ...parsed };
}
// Функция для конвертации rgb в rgba с opacity
function rgbToRgba(rgb, opacity) {
if (rgb.startsWith('rgb(')) {
const [r, g, b] = rgb.match(/\d+/g).map(Number);
return `rgba(${r}, ${g}, ${b}, ${opacity})`;
}
return rgb;
}
// Функция применения настроек к существующим подсветкам
function applySettings() {
// Применяем к существующим matches
matches.forEach((mark, i) => {
if (!mark) return;
const isCurrent = i === currentIndex;
mark.style.color = settings.highlightTextColor;
mark.style.border = `${settings.highlightBorderThickness}px solid ${settings.highlightBorderColor}`;
mark.style.borderRadius = `${settings.highlightBorderRadius}px`;
mark.style.padding = `${settings.highlightPadding}px`;
mark.style.backgroundColor = rgbToRgba(
isCurrent ? settings.highlightCurrentBg : settings.highlightDefaultBg,
isCurrent ? settings.highlightCurrentOpacity : settings.highlightDefaultOpacity
);
});
// Сохранение в localStorage
localStorage.setItem('pageSearcherSettings', JSON.stringify(settings));
}
//===== Создание wrapper
const wrapper = document.createElement('div');
wrapper.id = 'modifiedcstm-page-searcher-wrapper-r6ujr5jre5';
wrapper.style.cssText = `
position: fixed;
top: 10px;
right: 10px;
z-index: 999999 !important;
display: flex;
flex-direction: column;
gap: 2px;
`;
//===== Кнопка сворачивания (всегда видна)
const btnToggle = document.createElement('button');
btnToggle.id = 'searche4nmx7hjn-toggle8nme5h-btnjre6';
btnToggle.style.cssText = `
width: 30px;
height: 30px;
background: rgb(13, 61, 63);
border: 1px solid rgb(139, 248, 194);
border-radius: 5px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 10px;
transition: background 0.3s;
position: fixed;
top: 1%;
left: 58%;
z-index: 999999 !important;
`;
// Обработчики для tooltip и клика
btnToggle.addEventListener('mouseenter', () => {
tooltip.classList.add('show');
});
btnToggle.addEventListener('mouseleave', () => {
tooltip.classList.remove('show');
});
btnToggle.addEventListener('click', () => {
wrapper.classList.toggle('collapsed');
});
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('viewBox', '0 0 24 24');
svg.setAttribute('width', '16');
svg.setAttribute('height', '16');
svg.style.transition = 'transform 0.3s ease';
const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
path.setAttribute('d', 'M7 10l5 5 5-5z');
path.setAttribute('fill', 'rgb(139, 248, 194)');
svg.appendChild(path);
btnToggle.appendChild(svg);
// Создание кастомного tooltip
const tooltip = document.createElement('div');
tooltip.id = 'customherjr6-tooltip-toggle';
tooltip.textContent = translations[settings.lang].toggleTooltip || 'Свернуть/развернуть поиск'; // Текст из translations (добавьте ключ, если ещё не)
tooltip.style.cssText = `
position: absolute;
bottom: -35px; /* Позиция относительно кнопки: снизу */
left: 50%;
transform: translateX(-50%);
`;
btnToggle.appendChild(tooltip); // Вставляем tooltip как дочерний элемент кнопки
// Стили для анимации и скрытия (убрали стили для mark, так как теперь inline)
const style = document.createElement('style');
style.textContent = `
/* Кастомный tooltip для кнопки сворачивания */
#customherjr6-tooltip-toggle {
position: absolute;
background: rgb(13, 61, 63);
color: rgb(139, 248, 194);
padding: 3px 7px;
border-radius: 5px;
border: 1px solid rgb(139, 248, 194);
font-size: 12px;
font-family: Arial, sans-serif;
white-space: nowrap;
z-index: 999999 !important
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
pointer-events: none;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.43);
}
#customherjr6-tooltip-toggle.show {
opacity: 1;
visibility: visible;
z-index: 999999 !important
}
#searche4nmx7hjn-toggle8nme5h-btnjre6:hover #customherjr6-tooltip-toggle {
display: block;
}
#modifiedcstm-page-searcher-wrapper-r6ujr5jre5.collapsed #modifiedcstm-page-search-container-r6ujr5jre5 {
display: none !important;
}
#searche4nmx7hjn-toggle8nme5h-btnjre6:hover {
background: rgb(20, 80, 82);
}
#modifiedcstm-page-searcher-wrapper-r6ujr5jre5.collapsed #searche4nmx7hjn-toggle8nme5h-btnjre6 svg {
transform: rotate(180deg);
}
input#input-searcj-on-paggeweb-text {
background: #1f2a2f !important;
border: 2px solid #46968d !important;
color: antiquewhite !important;
}
#modifiedcstm-page-search-container-r6ujr5jre5 {
display: flex !important;
}
#searcherUp-btnUp-5en8h4w5en8m {
padding: 5px !important;
background: rgb(20 29 43) !important;
color: rgb(139, 248, 194) !important;
border: 1px solid rgb(139, 248, 194) !important;
border-radius: 3px !important;
cursor: pointer !important;
width: 28px !important;
height: 28px !important;
}
#searcherDown-btnDown-5en8h4w5en8m {
padding: 5px !important;
background: rgb(20 29 43) !important;
color: rgb(139, 248, 194) !important;
border: 1px solid rgb(139, 248, 194) !important;
border-radius: 3px !important;
cursor: pointer !important;
width: 28px !important;
height: 28px !important;
}
#searche4nmx7hjn-toggle8nme5h-btnjre6:hover,
#searcherUp-btnUp-5en8h4w5en8m:hover,
#closeSsearchWrapper-8n5e85egh8n-he5hedhe5d:hover,
#searcherDown-btnDown-5en8h4w5en8m:hover,
#settings-btnCstm-page-searcher:hover {
background-color: rgb(39 118 117 / 96%) !important;
transform: scale(1.3) !important;
transition: all 0.3s ease !important;
fill: #70f4a4 !important;
}
#settingsuje-modalhjer5mr6f-for-webSeracherfor {
background: rgb(13, 61, 63) !important;
border: 1px solid rgb(139, 248, 194) !important;
border-radius: 5px !important;
padding: 20px !important;
width: 300px !important;
color:rgb(255, 254, 221) !important;
font-family: Arial, sans-serif !important;
position: absolute !important;
top: 105px !important;
}
button#save-settings ,
button#cancel-settings,
input#current-opacity,
input#default-opacity,
input#padding,
input#border-thickness,
input#border-radius,
input#border-color,
input#text-color,
input#current-bg,
select#lang-select,
input#default-bg {
appearance: none !important;
padding: 3px !important;
background: rgb(20 29 43) !important;
color: rgb(190 255 246) !important;
border: 1px solid rgb(139, 248, 194) !important;
border-radius: 5px !important;
}
button#save-settings:hover,
button#cancel-settings:hover,
input#current-opacity:hover,
input#default-opacity:hover,
input#padding:hover,
input#border-thickness:hover,
input#border-radius:hover,
input#border-color:hover,
input#text-color:hover,
input#current-bg:hover,
input#default-bg:hover {
appearance: none !important;
background: rgb(52, 77, 85) !important;
color: rgb(139, 248, 194) !important;
border: 1px solid rgb(139, 248, 194) !important;
border-radius: 5px !important;
scale: 1.5 !important;
}
select#lang-select:hover {
appearance: none !important;
background: rgb(52, 77, 85) !important;
color: rgb(139, 248, 194) !important;
border: 1px solid rgb(139, 248, 194) !important;
border-radius: 3px !important;
}
`;
document.head.appendChild(style);
// Создание контейнера (внутри wrapper)
const container = document.createElement('div');
container.id = 'modifiedcstm-page-search-container-r6ujr5jre5';
container.style.cssText = `
background: rgb(13, 61, 63);
border: 1px solid rgb(139, 248, 194);
border-radius: 5px;
padding: 5px;
display: flex;
align-items: center;
gap: 5px;
font-family: Arial, sans-serif;
font-size: 14px;
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
position: relative;
top: 45px;
left: -150px;
`;
// Поле поиска
const input = document.createElement('input');
input.id = 'input-searcj-on-paggeweb-text';
input.type = 'text';
input.placeholder = translations[settings.lang].searchPlaceholder;
input.style.cssText = 'padding: 5px; border: 1px solid #ccc; border-radius: 3px; width: 150px;';
// Кнопки
const btnNext = document.createElement('button');
btnNext.id = 'searcherDown-btnDown-5en8h4w5en8m';
btnNext.innerHTML = '↓';
btnNext.style.cssText = 'padding: 5px; background: rgb(20 29 43); color: rgb(139, 248, 194); border: 1px solid rgb(139, 248, 194); border-radius: 3px; cursor: pointer; width: 28px; height: 28px;';
const btnPrev = document.createElement('button');
btnPrev.id = 'searcherUp-btnUp-5en8h4w5en8m';
btnPrev.innerHTML = '↑';
btnPrev.style.cssText = 'padding: 5px; background: rgb(20 29 43); color: rgb(139, 248, 194); border: 1px solid rgb(139, 248, 194); border-radius: 3px; cursor: pointer; width: 28px; height: 28px;';
const btnClose = document.createElement('button');
btnClose.id = 'closeSsearchWrapper-8n5e85egh8n-he5hedhe5d';
btnClose.innerHTML = '×';
btnClose.style.cssText = 'padding: 5px 8px; background: rgb(20 29 43); color: rgb(139, 248, 194); border: 1px solid rgb(139, 248, 194); border-radius: 3px; cursor: pointer; font-size: 16px; width: 28px; height: 28px;';
// Кнопка настроек с SVG-иконкой шестеренки
const btnSettings = document.createElement('button');
btnSettings.id = 'settings-btnCstm-page-searcher';
btnSettings.style.cssText = 'padding: 5px; background: rgb(20 29 43); color: rgb(139, 248, 194); border: 1px solid rgb(139, 248, 194); border-radius: 3px; cursor: pointer; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;';
const svgSettings = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svgSettings.setAttribute('viewBox', '0 0 24 24');
svgSettings.setAttribute('width', '16');
svgSettings.setAttribute('height', '16');
const pathSettings = document.createElementNS('http://www.w3.org/2000/svg', 'path');
pathSettings.setAttribute('d', 'M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.37-.29-.59-.22l-2.49.87c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-.87c-.23-.07-.47 0-.59.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.37.29.59.22l2.49-.87c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49.87c.23.07.47 0 .59-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z');
pathSettings.setAttribute('fill', 'rgb(139, 248, 194)');
svgSettings.appendChild(pathSettings);
btnSettings.appendChild(svgSettings);
// Обработчик для кнопки настроек
btnSettings.addEventListener('click', () => {
// Создание модального окна настроек
const modal = document.createElement('div');
modal.id = 'settings-modal-page-searcher';
modal.style.cssText = `
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 999999;
`;
const modalContent = document.createElement('div');
modalContent.id = 'settingsuje-modalhjer5mr6f-for-webSeracherfor';
modalContent.style.cssText = `
background: rgb(13, 61, 63);
border: 1px solid rgb(139, 248, 194);
border-radius: 5px;
padding: 20px;
width: 300px;
color: antiquewhite;
font-family: Arial, sans-serif;
`;
modalContent.innerHTML = `
<h3>${translations[settings.lang].settingsTitle}</h3>
<label>${translations[settings.lang].defaultBg}
<input type="color" id="default-bg" value="${rgbToHex(settings.highlightDefaultBg)}">
</label><br><br>
<label>${translations[settings.lang].defaultOpacity}
<input type="number" id="default-opacity" value="${settings.highlightDefaultOpacity}" min="0" max="1" step="0.1">
</label><br><br>
<label>${translations[settings.lang].currentBg}
<input type="color" id="current-bg" value="${rgbToHex(settings.highlightCurrentBg)}">
</label><br><br>
<label>${translations[settings.lang].currentOpacity}
<input type="number" id="current-opacity" value="${settings.highlightCurrentOpacity}" min="0" max="1" step="0.1">
</label><br><br>
<label>${translations[settings.lang].textColor}
<input type="color" id="text-color" value="${rgbToHex(settings.highlightTextColor)}">
</label><br><br>
<label>${translations[settings.lang].borderColor}
<input type="color" id="border-color" value="${rgbToHex(settings.highlightBorderColor)}">
</label><br><br>
<label>${translations[settings.lang].borderRadius}
<input type="number" id="border-radius" value="${settings.highlightBorderRadius}" min="0" max="50">
</label><br><br>
<label>${translations[settings.lang].borderThickness}
<input type="number" id="border-thickness" value="${settings.highlightBorderThickness}" min="1" max="10">
</label><br><br>
<label>${translations[settings.lang].padding}
<input type="number" id="padding" value="${settings.highlightPadding}" min="0" max="20">
</label><br><br>
<label>${translations[settings.lang].lang}
<select id="lang-select">
<option value="ru" ${settings.lang==='ru'?'selected':''}>Русский</option>
<option value="en" ${settings.lang==='en'?'selected':''}>English</option>
</select>
</label><br><br>
<button id="save-settings">${translations[settings.lang].save}</button>
<button id="cancel-settings">${translations[settings.lang].cancel}</button>
`;
modal.appendChild(modalContent);
document.body.appendChild(modal);
// Обработчики в модальном окне
document.getElementById('save-settings').addEventListener('click', () => {
const defaultBgInput = document.getElementById('default-bg').value;
const currentBgInput = document.getElementById('current-bg').value;
const textColorInput = document.getElementById('text-color').value;
const borderColorInput = document.getElementById('border-color').value;
const defaultOpacityInput = document.getElementById('default-opacity').value;
const currentOpacityInput = document.getElementById('current-opacity').value;
settings.highlightDefaultBg = defaultBgInput ? hexToRgb(defaultBgInput) : settings.highlightDefaultBg;
settings.highlightCurrentBg = currentBgInput ? hexToRgb(currentBgInput) : settings.highlightCurrentBg;
settings.highlightTextColor = textColorInput ? hexToRgb(textColorInput) : settings.highlightTextColor;
settings.highlightBorderColor = borderColorInput ? hexToRgb(borderColorInput) : settings.highlightBorderColor;
settings.highlightBorderRadius = parseInt(document.getElementById('border-radius').value) || settings.highlightBorderRadius;
settings.highlightBorderThickness = parseInt(document.getElementById('border-thickness').value) || settings.highlightBorderThickness;
settings.highlightPadding = parseInt(document.getElementById('padding').value) || settings.highlightPadding;
settings.lang = document.getElementById('lang-select').value;
settings.highlightDefaultOpacity = parseFloat(defaultOpacityInput) || settings.highlightDefaultOpacity;
settings.highlightCurrentOpacity = parseFloat(currentOpacityInput) || settings.highlightCurrentOpacity;
applySettings();
// Пересоздаем подсветку, если нужно (или обновляем существующие)
if (input.value.trim()) {
searchAndHighlight(input.value);
}
input.placeholder = translations[settings.lang].searchPlaceholder;
document.body.removeChild(modal);
});
document.getElementById('cancel-settings').addEventListener('click', () => {
document.body.removeChild(modal);
});
// Закрытие по клику вне модала
modal.addEventListener('click', (e) => {
if (e.target === modal) document.body.removeChild(modal);
});
});
container.appendChild(input);
container.appendChild(btnPrev);
container.appendChild(btnNext);
container.appendChild(btnClose);
container.appendChild(btnSettings); // Добавляем кнопку настроек рядом с контейнером
wrapper.appendChild(btnToggle);
wrapper.appendChild(container);
wrapper.classList.add('collapsed');
document.body.appendChild(wrapper);
// Функция очистки подсветки
function clearHighlights() {
matches.forEach(mark => {
const parent = mark.parentNode;
if (!parent) return;
parent.replaceChild(document.createTextNode(mark.textContent), mark);
parent.normalize();
});
matches = [];
currentIndex = -1;
}
// Функция поиска и подсветки
function searchAndHighlight(query) {
clearHighlights();
if (!query.trim()) return;
const regex = new RegExp(`(${query})`, 'gi');
function walk(node) {
if (node.nodeType === Node.TEXT_NODE && node.parentNode.tagName !== 'SCRIPT' && node.parentNode.tagName !== 'STYLE') {
const text = node.textContent;
const frag = document.createDocumentFragment();
let lastIndex = 0;
let match;
while ((match = regex.exec(text)) !== null) {
if (match.index > lastIndex) {
frag.appendChild(document.createTextNode(text.slice(lastIndex, match.index)));
}
// Mark для совпадения
const mark = document.createElement('mark');
mark.id = 'markSearch-he5ngw4n-webpagebody';
mark.textContent = match[1];
mark.style.fontWeight = 'bold';
// Применяем стили подсветки
mark.style.color = settings.highlightTextColor;
mark.style.border = `${settings.highlightBorderThickness}px solid ${settings.highlightBorderColor}`;
mark.style.borderRadius = `${settings.highlightBorderRadius}px`;
mark.style.padding = `${settings.highlightPadding}px`;
mark.style.backgroundColor = rgbToRgba(settings.highlightDefaultBg, settings.highlightDefaultOpacity);
frag.appendChild(mark);
matches.push(mark);
lastIndex = match.index + match[1].length;
}
// Остаток текста
if (lastIndex < text.length) {
frag.appendChild(document.createTextNode(text.slice(lastIndex)));
}
if (matches.length) node.parentNode.replaceChild(frag, node);
} else if (node.nodeType === Node.ELEMENT_NODE) {
Array.from(node.childNodes).forEach(child => walk(child));
}
}
walk(document.body);
}
// Функция навигации
function navigate(direction) {
if (!matches.length) return;
currentIndex += direction;
if (currentIndex >= matches.length) currentIndex = 0;
if (currentIndex < 0) currentIndex = matches.length - 1;
matches.forEach((m, i) => {
if (m) {
const isCurrent = i === currentIndex;
m.style.backgroundColor = rgbToRgba(
isCurrent ? settings.highlightCurrentBg : settings.highlightDefaultBg,
isCurrent ? settings.highlightCurrentOpacity : settings.highlightDefaultOpacity
);
}
});
matches[currentIndex].scrollIntoView({ behavior: 'smooth', block: 'center' });
}
// Обработчики событий
input.addEventListener('input', e => searchAndHighlight(e.target.value));
btnNext.addEventListener('click', () => navigate(1));
btnPrev.addEventListener('click', () => navigate(-1));
btnClose.addEventListener('click', () => {
clearHighlights();
wrapper.classList.add('collapsed');
container.style.display = 'none';
});
// Горячие клавиши
document.addEventListener('keydown', e => {
if (e.ctrlKey && e.key === 'f') {
e.preventDefault();
wrapper.classList.remove('collapsed');
input.focus();
}
if (!wrapper.classList.contains('collapsed') && container.style.display !== 'none' && input === document.activeElement) {
if (e.key === 'Enter') navigate(e.shiftKey ? -1 : 1);
if (e.key === 'Escape') btnClose.click();
}
});
// Вспомогательные функции для цветов
function rgbToHex(rgb) {
if (rgb.startsWith('rgb(')) {
const [r, g, b] = rgb.match(/\d+/g);
return '#' + ((1 << 24) + (parseInt(r) << 16) + (parseInt(g) << 8) + parseInt(b)).toString(16).slice(1);
}
return rgb;
}
function hexToRgb(hex) {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? `rgb(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)})` : hex;
}
})();