четверг, 31 июля 2014 г.

UserScript в Google Chrome. Что и как?

UserScript (User - пользователь, Script - скрипт = Пользовательский скрипт) это файл с расширением user.js(следовательно, сам User Script пишется на JavaScript). US(UserScript) позволяет создавать свои скрипты для определённых сайтов. Добавлять US в Chrome очень просто, достаточно иметь включенный режим разработчика и перетянуть US в вкладку с расширениями!

Цель статьи: написать простой US, который будет добавлять картинку в определенное место на форуме продуктов Google. Разумеется её(картинку) никто, кроме вас не увидит :)

Я не знаю JavaScript. Где мне научиться? 

Я думаю достаточно загуглить и всё найдется :)

Средства для разработки скриптов
  • Блокнот
  • Notepad++
  • Chrome dev editor(советую использовать его)
  • Dreamviewer
Начинаем:
Создаем проект в Chrome dev editor. Название не должно содержать пробелы!
Готовимся кодить :)
Нажмите на три точки и выберите Blank project. Назовите его так, как вам нравится

Теперь создаем файл нашего скрипта:
Го кодить. Я создал
Кликните правой кнопкой мыши про проекту и назовите как нибудь ваш скрипт(например: script.user.js)
Вставляем шаблон нашего скрипта в скрипт:

// ==UserScript==
// @name Имя скрипта
// @description Описание
// @author Имя автора или ник
// @license MIT
// @version 1.0
// @include сайт(пример: https://productforums.google.com/*)
// ==/UserScript==
(opera, ie)
(function (window, undefined) {  
    var w;
    if (typeof unsafeWindow != undefined) {
        w = unsafeWindow
    } else {
        w = window;
    }
   
    (function(a,b){function ci(a) ... a.jQuery=a.$=d})(w);

   
    if (w.self != w.top) {
        return;
    }
  
  //Вот тут мы будем писать код
})(window);

Пишем код:
// ==UserScript==
// @name GPF
// @description Pony GPF
// @author Nikshin Rostislaw
// @license MIT
// @version 1.0
// @include https://productforums.google.com/*
// ==/UserScript==
(opera, ie)
(function (window, undefined) { 
    var w;
    if (typeof unsafeWindow != undefined) {
        w = unsafeWindow
    } else {
        w = window;
    }
    if (w.self != w.top) {
        return;
    }
//Курсивом обозначен код, который мы добавили
   var iDiv = document.createElement('div');
//Создаем элемент 
iDiv.style.position ='absolute';
iDiv.style.left='900px';
iDiv.style.top='-147px';
iDiv.name='Twillight';
//Кординаты подогнаны для разрешения 1366x768
function getRandom(min, max) {
    return min + Math.floor(Math.random() * (max - min + 1));
}//Функция рандома
document.getElementsByClassName('GJPIG31I0B')[0].appendChild(iDiv);
var arraylinks=['http://i.imgur.com/IoFPG1k.png', 'https://www.openmerchantaccount.com/img/twi1.png', 'http://i.imgur.com/ZIoPL5n.png','http://i.imgur.com/jPxHlRq.png']; //Тут мы запилили массив с ссылками на картинками
var imagediv = document.createElement('img');
imagediv.src=arraylinks[getRandom(0, arraylinks.length-1)];
//устанавливаем источник картинки
iDiv.appendChild(imagediv);
//Profit!
})(window);

Сохраняемся(Нажимаем Ctrl + S). И устанавливаем US на свой Chrome
Установка...
Результат:
Ведь все любят пони?
Получается магия :)
Есть вопросы? Или я допустил ошибки? Пишите все в комментарии!