Не SL

UserScripts и UserStyles для iPad (и не только)

| | Comments

iPad для меня сейчас — основное устройство чтения «сети». Из-за него несколько раз подступался к вопросу userscripts и userstyles для Mobile Safari — то звук на устаревшем сайте с нужными мне статьями не играется, то на другом сайте кнопки мелкие, то ссылки битые. Чем писать разработчикам — проще «залечить» проблемы двумя строчками JavaScript или CSS. Любимый «патч» — окрашивание посещённых ссылок и отключение ховеров, из-за которых на iPad приходится по два раза на ссылки нажимать. Самый «крутой» патч — адаптация в 2006 году скриптов WebMoney под Firefox, хотя это уже не про iPad, но характеризует границы возможностей для переписывания (как отсутствующие).

Длительное время для внесения изменений пользовался скриптами, упакованными как букмарклеты. Да и сейчас около десятка лежит в закладках на разные случаи (пример). Но если нужно что-то дописать к уже работающему скрипту, делать это на iPad не очень удобно. Решил попробовать метод с прокси-сервером, который будет прикреплять к страницам нужный код. Работает. После загрузки страницы ничего не нужно нажимать. Прокси позволяет использовать в CSS картинки (например, для кнопок) не преобразовывая их в base64, быстро и удобно менять JavaScript, например, через Textastic.

Расширение (mod_filter) к Apache, который и есть прокси, подменяет закрывающий тег body, дописывая перед ним скрипт-инжектор.

1
's|</body>|<script src=\"/injector.js\" type=\"text/javascript\"></script></body>|i'

Содержание injector.js, пример:

1
2
3
4
5
6
7
8
9
10
11
function injectJS(file) {
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.src = 'file';
    script.type = 'text/javascript';
    head.appendChild(script);
}

if (window.location.hostname == 'ya.ru') {
    injectJS('mod.ya.ru.js');
}

Аналогичный кусок кода и для CSS.

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

Была сделана страница регистрации, где нужно ввести свой email. От него откусывается часть до @ и приводится к виду, совместимому с моей версией Linux: точки заменяются на подчёркивания; если первый символ — цифра, подчёркивание ставится перед цифрой; регистр приводится к нижнему. C этим именем создается пользователь. Логин и пароль высылаются по указанному email.

Прокси подключает ко всем страницам (к которым сможет) ваш собственный injector.js из htdocs, в чём собственно и смысл создания учёток.

Второй вариант настройки — использование скрипта автонастройки. В настройках прокси большинства устройств это пункт Auto c полем для URL. В поле нужно вписать https://www.slcontent.ru:8282/wpad.dat? со знаком вопроса в конце. Вот как это выглядит на iPad:

Принцип тут такой же, как с injector.js — после авторизации выполняется редирект на wpad.dat в папке пользователя.

Пример wpad.dat:

1
2
3
4
5
6
7
8
9
10
11
12
function FindProxyForURL(url, host) {
    var proxy = "PROXY www.slcontent.ru:8282";
    var viaproxy = new Array(
                /\.ya\.ru$/,
                /\.yandex\.ru$/);
    for (i = 0; i < viaproxy.length; i++) {
    if (viaproxy[i].test(host)) {
        return proxy;
        }
    }
    return "DIRECT";
}

т.е. это JavaScript с зарезервированным именем функции FindProxyForURL, который может, в зависимости от условий, либо сообщать адрес прокси, либо, что прокси пользоваться не нужно (DIRECT). Т.к. wpad.dat, в отличие от обычных прокси, у нас персональный, всеми правилами использовать/не использовать прокси рулит сам пользователь. Может даже получится использовать как блокер нежелательного контента (баннеров?), если сделать список с нужными хостами и указывать для них несуществующий прокси, 127.0.0.1, как часто в hosts прописывают.

Залогинится на прокси можно через HTTP https://www.slcontent.ru:8282/~username/ — для проверки, и через SSH, в том числе по открытым ключам или SFTP — для заливки и редактирования файлов, при логине через SSH доступен vim.

Адрес страницы регистрации: https://www.slcontent.ru:8282/reg/.

Хотелось бы услышать мнения относящиеся к идее как таковой, советы, отзывы по использованию.

Примечение: внутри injector.js есть обращение к скрипту getlink.php. У него есть параметр ts. Если ts=1, к имени файла добавляется таймштамп, что поможет избежать «залипания», к примеру, файлов стилей в кеше при частых правках.

P.P.S.: Запись на ту же тему на Хабре.

Comments