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

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

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

Самый простой способ – это посмотреть исходный код страницы, скопировать его к себе на диск, изменить код (добавить 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 на самом деле не ограничиваются изменениями внешнего вида сайта. С помощью них, в частности, можно создавать "роботов", делающих на сайтах онлайн игр рутинную работу, создавать онлайн переводчики и многое другое. Напоследок стоит отметить тот факт, что чужой сайт мы своим скриптом все же не меняем - все изменения происходят только в браузере с уже загруженным сайтом.