User JS скрипты

[dsalin]

В теме про расширения я затронул тему пользовательских скриптов, исполняемых расширениями вроде Tampermonkey в браузере на конкретной странице. Сейчас я поделюсь некоторыми из них:
Голосовой перевод видео от Яндекса, взятый энтузиастами из Яндекс Браузера и засунутый в пользовательский JS:
https://github.com/ilyhalight/voice-ove ... o482998847
Скрипт, который доделывает работу адблокера на некоторых сайтах с очень ушлыми владельцами:
https://greasyfork.org/ru/scripts/19993 ... t-js-fixes
Дополняйте список своими находками!

[mak]

Редирект

Чтобы выполнить переадресацию, можно использовать на странице между тегов head следующий код:

Код: Выделить всё

<meta http-equiv="refresh" content="3; url=http://website.com/page.html">

3 - это количество секунд до переадресации, 0 это мгновенно переадресовать.

или же то же самое, но с использованием JavaScript, но с определённым приколом, например если к вам пришли с определённого сайта:

Код: Выделить всё

if ( (document.referrer == "http://badsite.com/obosrat_site.html")|(document.referrer == "http://badsite2.net/obosrat_site.html") )
{
  document.write("Идите на три буквы");
  window.location.href = "http://microsoft.com";
}
else
{
  window.location.href = "http://mysupersite.com";
}

Этот JS код можно совместить с вараинтом редиректа через метатеги, без опознования откуда пришёл посетитель, используя его между тегами head таким образом:

Код: Выделить всё

<script language="JavaScript" type="text/javascript" src="redirect.js"></script>
<noscript>
<meta http-equiv="refresh" content="3; url=http://website.com/page.html">
</noscript>

В этом случае, если JS отключен или не поддерживается, сработает метатег.






Изменение текущего URL в адресной строке браузера

Этот простой JavaScript-код используется для изменения текущего URL в адресной строке браузера на корневой URL (в данном случае "/").

Код: Выделить всё

<script>
window.history.replaceState({}, null, '/');
</script>

Проще говоря, если у вас адрес sitemane.com и вы добавили этот скрипт в свой index.html перед </head> то при переходе на sitename.com/что-то-там у вас всегда будет показываться адрес sitename.com





Как сделать строку, которая будет показывать на какой странице находится пользователь:

Код: Выделить всё

.blinking-cursor {
font-weight: bold;
font-size: 1em;
color: #ffffff; //цвет курсора
background-color: #693AEA; // цвет заднего фона для курсора
font-family: 'Courier New', Courier, monospace;
animation: blink 1s step-end infinite;
}

@keyframes blink {
from, to {
visibility: hidden;
}
50% {
visibility: visible;
}
}

JS

Код: Выделить всё

<script>
(function() {
function updateCurrentPage() {
var currentPage = window.location.pathname;
var lastSegment = currentPage.substring(currentPage.lastIndexOf('/') + 1);
var lastSegmentWithoutExtension = lastSegment.split('.')[0];
var decodedSegment;

if (window.decodeURIComponent) {
decodedSegment = decodeURIComponent(lastSegmentWithoutExtension);
} else {
decodedSegment = unescape(lastSegmentWithoutExtension);
}

var upperCaseSegment = decodedSegment.toUpperCase();
var formattedSegment = 'C:\\>' + upperCaseSegment;
document.getElementById('current-page').innerHTML = formattedSegment + '<span class="blinking-cursor">_</span>';
}

if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', updateCurrentPage);
} else if (document.attachEvent) {
document.attachEvent('onreadystatechange', function() {
if (document.readyState === 'complete') {
updateCurrentPage();
}
});
} else {
window.onload = updateCurrentPage;
}
})();
</script>

Этот код перед названием страницы отображает C:\> и на странице это будет выглядеть
как C:\\>НАЗВАНИЕ_

HTML

Код: Выделить всё

<div id="current-page"></div>

Установка кнопки "вверх"

Добавьте этот JS код перед закрывающим </head>

Код: Выделить всё

<script type="text/javascript">$(document).ready(function(){
$(window).scroll(function () {if ($(this).scrollTop() > 0) {$('#scroller').fadeIn();} else {$('#scroller').fadeOut();}});
$('#scroller').click(function () {$('body,html').animate({scrollTop: 0}, 400); return false;});
});</script>

Добавьте этот код перед закрывающим </body>

Код: Выделить всё

<div id="scroller" class="b-top" style="display: none;"><span class="b-top-but">наверх</span></div>

Добавьте блок стилей CSS и кнопку вверх в файл style.css
(имя файла style.css у вас может быть и то, и другое, но это не имеет значения, добавьте
код в любой файл стилей, который подключается к сайту).

Код: Выделить всё

.b-top {z-index:2600;position:fixed;left:0;bottom:90px;width:34%;margin-left:50%;opacity: 0.5;filter:alpha(opacity=50);}
.b-top:hover {opacity:1;filter:alpha(opacity=100);cursor:pointer;}
.b-top-but {z-index:2600;position:absolute;display:block;left:56px;bottom:0;margin:0 0 0 100%;padding:32px 12px 4px;
color:white;background:#D8D5C2 url(http://yourpageadress/up.png) no-repeat 50% 11px;border-radius:7px;}

Измените путь к изображению http://yourpageadress/up.png на ваш.




Перетаскиваемый блок

Для того что бы сделать блок перетаскиваемым на странице, надо добавить следующий код

Добавим стили:

Код: Выделить всё

<style>
.draggable {
width: 200px;
position: absolute;
cursor: move;
padding: 10px;
user-select: none; /* Отключение выделение текста */
border: none; /* Убирание рамки */
background-color: transparent; /* Прозрачный фон */
}
</style>

Вставим js скрипт:

Код: Выделить всё

<script>
document.addEventListener('DOMContentLoaded', () => {
const dragElement = document.getElementById('draggable');

dragElement.addEventListener('mousedown', (e) => {
e.preventDefault(); // Отключаем выделение текста

let shiftX = e.clientX - dragElement.getBoundingClientRect().left;
let shiftY = e.clientY - dragElement.getBoundingClientRect().top;

function moveAt(pageX, pageY) {
dragElement.style.left = pageX - shiftX + 'px';
dragElement.style.top = pageY - shiftY + 'px';
}

function onMouseMove(e) {
moveAt(e.pageX, e.pageY);
}

document.addEventListener('mousemove', onMouseMove);

document.addEventListener('mouseup', () => {
document.removeEventListener('mousemove', onMouseMove);
}, { once: true });
});

dragElement.ondragstart = () => false;
});
</script>

И теперь упакуем наш контент в div блок:

Код: Выделить всё

<div id="draggable" class="draggable">
контент
</div>

(by @Ftod )



Показ случайных изображений на сайте

Вставляем этот js код:

Код: Выделить всё

<script>
document.addEventListener('DOMContentLoaded', function() {
// Генерация случайного числа
var randomNumber = Math.floor(Math.random() * 50) + 1;
// Формирование пути к файлу
var imagePath = 'ВАША ПАПКА/' + randomNumber + '.png';
// Получение элемента img по его id
var imgElement = document.getElementById('randomImage');
// Установка пути к файлу в атрибут src элемента img
imgElement.src = imagePath;
});
</script>

Там где генерация случайного числа, надо поставить число ваших картинок в папке, в моем случае их было 50, вы ставите свое число

В форматировании пути указывайте свою папку, вместо ВАША ПАПКА

Что бы картинки отображались, вставьте этот код:

Код: Выделить всё

<img id="randomImage" src="" width="600" height="200" alt="Случайная фотография">

(by @Ftod )





Собственные HTML тэги

Если вы видите нестандартные теги в каком-то HTML-документе, это может означать, что они используются для специальных целей разработчиками, которые создавали этот документ.

Этот прием покажет как сделать свои собственные, и зачем.
Способ предполагает, что вы используете нестандартные HTML теги (<m> и </m>), что работает в большинстве современных браузеров, но не является стандартной практикой.

пример скрипта:

CSS

Код: Выделить всё

m {
font-style: italic;
}

JavaScript

document.addEventListener("DOMContentLoaded", function() {
const mTags = document.querySelectorAll("m");
mTags.forEach(tag => {
tag.classList.add("m");
});
});


HTML

Код: Выделить всё

Пример текста <m>который должен стать курсивным</m> внутри фразы.

Как вы понимаете - в стили можно вставить любое условие, которое вам нравится.
например: сделать градиент цветов для текста, или изменить шрифт, добавить фон картинкой, да что угодно можно сделать