Подтасовка шаблонов: новый способ расширения веб-приложений

April 22, 2012 GreaseMonkey JavaScript userscripts

На днях мне захотелось всунуть в задачи Pivotal Tracker’а кнопочку, которая перекидывала бы задачи в OmniFocus. Кнопочку я таки всунул, а теперь расскажу, как.

Налицо классически сложная ситуация: нужно подменять контент в блоках, которые создаются динамически. Я знаю два подхода к этой задаче. Первый – грубый – заключается в периодической, раз эдак 10 в секуду, проверке на появление новых блоков, и внедрению кнопки туда, где её ещё нет. Второй подход – если блок создается по нажатию ссылки – это повесить дополнительный обработчик на клик этой ссылки. Этот подход не работал, а грубый использовать не хотелось.

И тут, исследуя код Pivotal Tracker’а (распакованный, кстати, этим замечательным Javascript Beautifier’ом), я заметил, что для генерации блоков используются Javascript-шаблоны. Ага!

Соль подхода

Раз уж блоки создаются по шаблону, то достаточно этот шаблон дополнить или заменить. Лучше, конечно, дополнить, поскольку так меньше шансов, что расширение сломается в будущем.

В лучшем случае, шаблоны хранятся в теле страницы – с Pivotal Tracker’ом оказалось именно так.

В худшем случае, шаблоны загружаются в виде скрипта. Однако даже при этом их можно переопределить, поскольку обычно каждый шаблон представляет собой Javascript-функцию или даже переменную.

Итак: обнаруживаем шаблон, вставляем в него наш код, после чего перезагружаем шаблонизатор.

Получилось кратко и, не побоюсь этого слова, элегантно.

Buy Me a Coffee at ko-fi.com