Практическое занятие№4 Подключение различных расширений к современным браузерам

Цель работы: приобрести практический навык написания userscript и их подключения к браузеру.

1. Теоретическая часть

Юзерскрипт — это программа, написанная на языке JavaScript, хранящаяся на компьютере пользователя и подключаемая браузером на определенных страницах. Юзерскрипт представляет собой файл с расширением .user.js (именно по расширению браузеры понимают, что файл является юзерскриптом), содержащий метаданные и непосредственно javascript-код.

При подключении к странице юзерскрипт выполняется так же, как и обычные javascript-сценарии.

У юзерскрипта есть доступ к DOM-дереву страницы, в контексте которой он выполняется. В современных браузерах у юзерскрипта есть доступ к localStorage и прочим HTML5 API. Юзерскрипты поддерживаются всеми основными современными браузерами (и даже кое-как поддерживаются IE7 и выше).

Самыми распространенными являются скрипты под расширение GreaseMonkey для браузера Firefox.

Подробную информацию по GreaseMonkey и написанию юзерскриптов под GreaseMonkey можно узнать на.

Так сложилось исторически, что данный браузер был (и остаётся по сей день) первым, в котором поддержка юзерскриптов была выполнена на высоком уровне.

Не все скрипты, написанные для GreaseMonkey, могут запускаться в других браузерах. Причина в том, что во многих скриптах используется GM API — набор javascript-функций, специфичных для GreaseMonkey.

Однако, проще всего писать юзерскрипты под браузер Google Chrome.

На это есть ряд причин:

Простым скриптам не нужна поддержка GM API (библиотека, доступная в GreaseMonkey)

Google Chrome, в отличие от Firefox+GreaseMonkey, имеет отличнейший дебаггер.

Сообщения об ошибках юзерскрипта в Firefox ужасны! Если вы не обладаете даром телепати и твердыми знаниями GreaseMonkey и javascript, написание юзерскрипта может превратится в муки!

Google Chrome не требует расширений для поддержки юзерскриптов. Интерфейс для удаления/отключения юзерскриптов доступен «из коробки».

Очевидные минусы Google Chrome:

Нет доступа к «родному» window.

Не поддерживается директива @include метаданных. Директива @ match глючит, можно сказать, что она тоже не поддерживается.

Код юзерскриптов может посмотреть любой желающий, вооруженный блокнотом.

Базовые знания javascript позволяют отсечь угрозу установки шпионских и вредоносных скриптов простым анализом кода скрипта (придётся задействовать мозг).

Важно:Если вы не доверяете автору скрипта, главное удостовериться, что скрипт не отсылает пользовательские данные (куки, вводимый текст) на сторонние сервисы!

Все юзерскрипты запускаются после того, как загрузились все основные элементы страницы, но ещё не загрузились картинки. Можно сказать, что юзерскрипты грузятся по событию DOMContentLoaded.

В любом случае, проверки на window.onload не нужны.

2. Методические указания

Юзерскрипт — это текстовый файл с расширением user.js. В начале файла располагается блок метаданных — описание самого скрипта. После блока метаданных следует javascript-код, который и будет исполняться браузером.

Рассмотрим тестовый скрипт, который показывает alert с текстом на определенной странице.

код

// ==UserScript==

// @name myUserJS

// @description Мой самый первый юзерскрипт

// @author Vasya Pupkin

// @license MIT

// @version 1.0

// @include http://userscripts.org/*

// ==/UserScript==

// [1] Оборачиваем скрипт в замыкание, для кроссбраузерности (opera, ie)

(function (window, undefined) { // [2] нормализуем window

var w;

if (typeof unsafeWindow != undefined) {

w = unsafeWindow

} else {

w = window;

}

// В юзерскрипты можно вставлять практически любые javascript-библиотеки.

// Код библиотеки копируется прямо в юзерскрипт.

// При подключении библиотеки нужно передать w в качестве параметра окна window

// Пример: подключение jquery.min.js

// (function(a,b){function ci(a) ... a.jQuery=a.$=d})(w);

// [3] не запускаем скрипт во фреймах

// без этого условия скрипт будет запускаться несколько раз на странице с фреймами

if (w.self != w.top) {

return;

}

// [4] дополнительная проверка наряду с @include

if (/http:\/\/userscripts.org/.test(w.location.href)) {

//Ниже идёт непосредственно код скрипта

alert("Userscripts приветствует вас навязчивым окном.");

}

})(window);

код

В самом начале располагается блок метаданных (в виде комментария).

код

// ==UserScript==

// ...

// ==/UserScript==

код

Этот блок состоит из директив описания юзерскрипта. Ниже в таблице представлены основные директивы и их назначение.

При отсутствии директив @ include или @ match, юзерскрипты будут запускаться на всех страницах.

Вы можете скопировать код юзерскрипта в файл, назвать его my.user.js, и закинуть полученный файл в браузер (используйте Chrome или Firefox с установленным GreaseMonkey).

Рецепт для написания ~70% скриптов:

1. Придумываем, что будет делать наш юзерскрипт (перекрашивать ссылки, например)

2. Берём шаблон из теоретической части

3. Сохраняем в файл my.user.js

4. Удаляем строку с alert(...).

5. Идём на форум (userscripts.org или любой форум по javascript).

6. Изменяем метаданные и проверку url страницы на нужные нам.

7. Вставляем полученный код в юзерскрипт.

8. Сохраняем файл.

...

Готово!

3. Задания для самостоятельного выполнения

1. Написать юзерскрипт, окрашивающий ссылки в зоне .ru в синий цвет

2. Написать юзерскрипт, выводящий сообщение «Google следит за вами!!!» при входе браузера на сервисы Google

4. Содержание отчёта

1. Название и цели работы

2. Порядок выполнения практической части

3. Выполненные задания 1-2

4. Вывод о проделанной работе

5. Контрольные вопросы

1. Что такое JavaScript?

2. Что такое userscript?

3. Что такое alert?

4. Как называется встроенный обработчик скриптов?

5. В файлах с каким расширением хранятся userscript-ы?