Как изменить скрипт на чужом сайте

Свой скрипт для чужого сайта

Даже для многих опытных пользователей интернета сайт представляется чем-то статичным, неизменяемым. Здесь имеется в виду чужой сайт – на который вы заходите с помощью своего браузера. Вы действительно не можете напрямую, к примеру, влиять на внешний вид ресурса, но вот опосредованные варианты присутствуют. Рассмотрим способы решения задачи.

Вот, к примеру, вам не нравится, что в блоке «Мои услуги» на моем блоге читающего программиста цвет заголовка не зеленый. Как можно его изменить?

Самый простой способ – это посмотреть исходный код страницы, скопировать его к себе на диск, изменить код (добавить style=»color: green;” к элементу zaglav) и затем открыть файл в браузере. Или можно в контекстном меню правой клавиши мыши выбрать пункт «Посмотреть код» (или «Посмотреть код элемента» – в зависимости от браузера) и задать стиль выбранного элемента: color: green;.

Эти способы очень просты, но по большому счету проблему они не решают: как только вы в следующий раз зайдете на мой блог upread.ru, цвет заголовка «Мои услуги» будет все также серо-фиолетовым, а не зеленым. Раз и навсегда заставить менять его цвет, а также самостоятельно менять внешний вид чужих сайтов можно с помощью другого способа. Итак, план действий:

1. Ставим в свой браузер расширение под названием Tampermonkey.
2. Добавляем новый скрипт:
3. Заменяем код в нем на свой

   // ==UserScript==
   // @name         upread
   // @namespace    http://tampermonkey.net/
   // @version      1.0
   // @description  
   // @author       upread.ru
   // @match        http://upread.ru/*
   // @grant        none
   // ==/UserScript==
   'use strict';
   
   document.getElementById('myservices').style.color="green";
   

4. Сохраняем и запускаем его.

Теперь, когда мы перейдем на любую страницу сайта upread.ru, заголовок «Мои услуги» будет окрашиваться в зеленый цвет. Этим занимается строка номер 12 — как можно заметить, это обычная строка с синтаксисом javascript. Именно ниже её (или вместо) уже надо писать свой код — то, чтобы исполнялось в вашем браузере на чужом сайте. Сайт, на котором будет работать скрипт задается в строке номер 7.

Возможности пользовательских скриптов от Tampermonkey на самом деле не ограничиваются изменениями внешнего вида сайта. С помощью них, в частности, можно создавать «роботов», делающих на сайтах онлайн игр рутинную работу, создавать онлайн переводчики и многое другое. Напоследок стоит отметить тот факт, что чужой сайт мы своим скриптом все же не меняем — все изменения происходят только в браузере с уже загруженным сайтом.

Автор этого материала — я — Пахолков Юрий. Я оказываю услуги по написанию программ на языках Java, C++, C# (а также консультирую по ним) и созданию сайтов. Работаю с сайтами на CMS OpenCart, WordPress, ModX и самописными. Кроме этого, работаю напрямую с JavaScript, PHP, CSS, HTML — то есть могу доработать ваш сайт или помочь с веб-программированием. Пишите сюда.

заметки, javascript, tampermonkey, скрипты, браузер

Предисловие

Плагин Tampermonkey я обнаружил недавно и, боже, как же он хорош. А хорош он тем, что позволяет любой сайт подстроить под себя.

Tampermonkey — это плагин, позволящий писать пользовательские JS скрипты для вебсайтов.

С помощью него вы сможете:

• Изменять содержимое сайта.
• Посылать запросы на другие сайты.
• Скачивать файлы.

А также, все то что возможно в Javascript, доступно и здесь. Хорошо, приступим к первому скрипту.

Пишем Hello World.

Сперва установите Tampermonkey.

• Скачать для Firefox
• Скачать для Google Chrome

Зайдите на сайт, к которому хотите прицепить скрипт. И нажмите «Создать новый скрипт»

У вас отроется редактор кода, с созданной основой скрипта.

Вставьте функцию

alert("Hello World");

После этого комментария

// Your code here...

И нажмите Ctrl+S, чтобы сохранить скрипт.

Теперь, перезагрузите страницу, к которой привязан скрипт.

Скрипт работает. Теперь разберем код.

Разбор простейшего скрипта

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://under-prog.ru/
// @icon         https://www.google.com/s2/favicons?domain=under-prog.ru
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Your code here...
    alert("Hello World");
})();

Комментарии находящийся в этом промежутке, называются заголовками пользовательского скрипта (Userscript header)

// ==UserScript==
   ...
// ==/UserScript==

Они содержат информацию о скрипте, а также, о специальных разрешениях. Имеют следующий вид.

// @name         имя_скрипта
// @namespace    пространство_имен_скрипта
// @version      вверсия
// @description  описание
// @author       имя_автора
// @match        url_сайта_на_котором_будет_воспроизводится_скрипт
// @icon         ссылка_на_иконку_скрипта
// @grant        дополнительные_разрешения

Также, стоит отметить, что иконку можно будет достать из base64 кода, например вот так.

// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

Данный способ хорош тем, что не нужно заливать изображение на хостинг.

Если вы хотите, применять скрипт для всех страниц данного сайта, а не только к одной. То, просто поставьте * в конце ссылки, в поле match.

// @match        https://under-prog.ru/*

Подробнее про userscript header, вы можете почитать в документации.

Далее идет функция.

(function() {
    'use strict';

    // Your code here...
    alert("Hello World");
})();

Фунуции подобного типа

(function() { ... })();

Вызываются в момент, загрузки скрипта на сайт.

'use strict';

Включаем строгий режим.

alert("Hello World");

При помощи функции alert, выводим сообщение на экран.

С основой разобрались, перейдем к чему-нибудь, более интересному.

Способы получения элементов в JS.

В JS есть 2 основных способа получения элемента:

• Классический — через document.querySelector()
• Библиотека JQuery — существовала до появления document.querySelector() в JS, за что заслужила популярность. Имеет более короткий синтаксис.

В данном гайде, я буду использовать классический метод.

Еще, для получения элемента используются 2 функции:

• querySelector — принимает css-селектор в качестве аргумента. Возвращает, первый попавшийся элемент.
• querySelectorAll — то же самое что и querySelector, но возвращает все найденные элементы в виде массива.

Css-селекторы я разбирал первом уроке этого курса.

Меняем содержимое сайта.

Получив элемент, с помощью querySelector, можно производить всевозможные манипуляции. Такие как:

• Добавление elem2 в внутри element, в конце — element.append(elem2) или element.appendChild(elem2)
• Добавление elem2 в внутри element, в началае — element.prepend(elem2)
• Вставка elem2 перед element — element.before(elem2)
• Вставка elem2 после element — element.after(elem2)

Также, можно создать новый элемент с помощью document.createElement(). Вот пример создания div‘а.

document.createElement('div');

Остальные типы элементов создаются по аналогии.

Что-бы получить доступ к html-коду элемента, используйте element.innerHTML.

let html_text = element.innerHTML //Получили код элемента
element.innerHTML = "<div>Новый код элемента</div>" //Изменили код элемента

Краткий курс по добавлению элементов закончен, двигаемся дальше.

Отправляем запрос на сайт.

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

Встраивание будете делать через appendChild. А вот информацию с сайта, будете получать путем отправки запроса на сайт.

Ниже, я привел пример подобного запроса.

let req = new XMLHttpRequest(); //Создаем обьект запроса
req.open('GET', link, true); //Настраиваем запрос
req.send(); //Отправляем запрос на сайт
req.onreadystatechange = function() { //Ответ получен
  if(req.readyState == 4 && req.status == 200) { //Если статус ответа, удовлетворительный
    let tmp = document.createElement('div'); //То создаем div элемент
    tmp.innerHTML = req.responseText; //Запоняем его внутренности полученными данными (html код сайта)
    //И дальше, парсим что нужно. 
    let cur_price = tmp.querySelector("div.current_price");
    console.log(cur_price);
  }
}

Все обьяснение в комментариях.

req.open имеет следующий синтаксис:

req.open('тип запроса', ссылка, ассинхронность);

• Тип запроса — может быть GET или POST (в редких случаях DELETE, PUT, ).
• Ссылка — задает ссылку на сайт.
• Ассинхронность — если false, то запрос делается синхронно (последовательно), в противном — ассинхронно (парралельно).

Теперь вы знаете как посылать запросы. Двигаемся дальше.

Скачиваем файлы по ссылке.

Сперва, получим доступ к функции GM_download:

// @grant        GM_download

И используем её внутри функции.

GM_download({
         url:fileLink,
         name:fileName,
         saveAs:false
       });

Разберем аргументы этой функции.

• url — ссылка на файл
• name — имя файла, с расширением
• saveAs — задает, нужно ли открывать окно, при скачивании файла.

Таким образом и скачиваются файлы.

Я прочитал статью, что дальше?

Дальше идите на сайт greasyfork.org. На данном сайте, обычные люди делятся своими скриптами, которые вы можете установить и, при желании, изучить.

Итоговый результат.