Пользовательский JavaScript и CSS на мобильных устройствах

в 19:50, , рубрики: css, greasemonkey, javascript, userscript, userstyle, Веб-разработка, метки: , , ,

Пользовательский JavaScript и CSS на мобильных устройствах

Хочется странного

Если вы регулярно посещаете с мобильного устройства (телефона, планшета) какие-нибудь сайты, и если у вас регулярно возникает желание изменить на них JS/CSS (но разработчикам сайтов вы по какой-то причине не сообщаете об этих желаниях), то статья вам может быть интересна.

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

Давай покрасим холодильник…

В целом, спектр возможностей видится широкий: изменение «темы» сайты, размеров отдельных элементов, исправление ошибок JS/CSS, включение спрятанных возможностей (к примеру, на VK есть HTML5 плеер, который не активен), или отключение имеющихся, вроде заботливо расставленных на сайте «ховеров», из-за которых на мобильных устройствах по ссылкам приходится тыкать два раза, и т.д. Но увы, в стандартных браузерах большей части устройств нет механизмов для реализации UserCSS или UserScript. Где-то работают букмарклеты (и я даже написал для себя около десятка), но процесс их «приготовления» нельзя назвать быстрым. В случае, если количество правок растёт (или уменьшается), постоянно править «закладурки» :) становится неудобно.

В общем, как это можно решить:

  • находим хостинг с Apache или nginx
  • включаем там 2 расширения: прокси и что-то, что позволит менять проходящие через прокси файлы
  • настраиваем заменялку так, чтобы она подключала к страницам нужные вам JS/CSS
  • прописываем прокси на устройстве
  • профит

У меня «хостинг» нашелся с Apache, на стоящем на подоконнике NAS, который, кстати, мне достался от QNAP (тайваньского!) по программе бета-тестирования. Его я и мучил.

Injection

Включить прокси на Apache несложно, сложнее оказалось с подменой контента на лету. Расширений «на рынке» несколько: mod_substitute, mod_filter, mod_sar. mod_sar я тупо не смог собрать, у mod_substitute были проблемы сначала со сжатыми страницами (пришлось собирать цепочку из фильтров распаковки-замены-упаковки, чтобы работало), потом обнаружилось что некоторые страницы он портил, причину «быстро» установить не удалось. Обновить Apache и все фильтры до последних версий (нового mod_sed, к примеру) мне не светило (ядро и либы старые на NAS-е). В общем, остался я с mod_filter, в конфиг виртуального хоста вставил что-то вроде

ExtFilterDefine fixtext mode=output intype=text/html 
    cmd="/opt/bin/sed 's|</body>|<script src="/injector.js" type="text/javascript"></script></body>|i'"

ProxyRequests On
ProxyVia On

<Proxy *>
SetOutputFilter fixtext
</Proxy>

и пользовался. Файлы правил «как обычно», через SSH/mc, или в Textastic через SFTP (у меня iPad).

Вместе веселее

А потом одному стало скучно. Предлагаю желающим присоединиться к тестированию и использованию. :)

Это всё еще NAS, на нем сделана страница регистрации, где вы вводите свой email. От него откусывается часть до @, с этим именем создается пользователь для openssh, домашняя папка под chroot, и UserDir для Apache. На почту высылается сгенерированный пароль (который нигде в явном виде не хранится, как и адрес почты, поэтому функции восстановления/сброса пароля нет, пока?). В выданный shell можной зайти через SSH или по SFTP, в папке htdocs лежит пример «инжектора» на JS, доступен редактор vim. Хост для SSH/SFTP и прокси один и тот-же, разница только в портах (для прокси — 8282). Прокси требует авторизацию, учётные данные те-же.

Адрес страницы регистрации: http://www.slcontent.ru:8282/reg/ (логин: habr, пароль: habr).

P.S.: Дисклеймер. Если вы настроили прокси на мобильном девайсе, то все ваши программы будут пытаться ходить в инет через него. К чему я это… почти все они пользуются HTTPS, так что чего они там шлют, я в любом случае не увижу. :)

[27/Jan/2013:22:35:50 +0400] "CONNECT m.google.com:443 HTTP/1.1" 200 - "-" "Apple-iPad3C3/1001.523"
[27/Jan/2013:22:35:50 +0400] "CONNECT m.google.com:443 HTTP/1.1" 200 - "-" "Apple-iPad3C3/1001.523"
[27/Jan/2013:22:35:50 +0400] "CONNECT m.google.com:443 HTTP/1.1" 200 - "-" "Apple-iPad3C3/1001.523"

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

Автор: SOb_S

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js