Простейшее расширение для Google Chrome: content script

Меня, почему-то, очень воодушевляет возможность писать расширения для хрома. Это не значит, что я этим воодушевлением как-то пользуюсь, но тем не менее. Задачи я получаю через Chrome, в нем же их потом тестирую, в нем же читаю (не)довольные письма от заказчиков после коммита, и на каждой стадии хватает мелочей, которые можно улучшить.

А расширение — оно простое. Манифест + какой-нибудь js файл с логикой — и всё.

Самое простое расширение, которое я когда-либо делал для себя — content script. Это обычный JavaScript файл,  который подгружается для страниц, которые требуется надругать. У него полный доступ к DOM, что можно очень эффектно эксплуатировать. С моём случае скрипт подгружался для баг трэкера, пробегался по содержимому баг репорта и подсвечивал потенциально проблемные места красным, затенял менее приоритетные, форматировал историю навигации, stack trace, и т. п.. Читать такие кейсы было намного проще, да и времени экономилась уйма.

Hello world мира контентных скриптов обычно состоит из двух файлов: manifest.json и, например, helloWorld.js.

Поля вполне понятны, кроме, возможно, версий. Их две — одна на экстеншн, одна для манифеста (всегда двойка). В секцию content_scripts я иногда добавлял «css».

helloWorld.js вообще эстетически прекрасен:

Если добавить этот экстеншн в хром, то при заходе на хабру он будет писать вселенское приветствие прямо в консоль.

Добавить расширение в хром тоже элементарно:

  • открываем хром
  • заходим на chrome://extensions
  • убеждаемся, что чекбокс Developer mode включен
  • жмем кнопку Load unpacked extension
  • натравливаем диалог на папку с манифестом.

Screen Shot 2015-04-24 at 11.16.02 PM

Всё. Хром настолько вежлив, что если в манифесте были какие-то ошибки (например, JSON ключи не в кавычках), то он выскажет недоумение сразу же.

Однако во всех hello world приложениях есть один существенный недостаток — их вопиющая бесполезность. Посмотрим, можно ли сделать мир действительно немного лучше.

В одной из стран-членов ООН есть портал onliner.by, который во время сеанса прокрастинации сильно выручает новостями о мире, технике и дорожно-транспортных происшествиях. Есть только одна проблема — любое упоминание Apple, android или продукции, которая  с ними связана, открывает портал в филиал ада сразу за первым комментариям.

Особенно плохо то, что моя ранимая психика подвисает на этих комментариях, и пока я на каждый коммент мысленно не отвечу автору, в чем именно он неправ, нормально работать не получится.

Можно сделать экстеншн, который детектит в заголовке статьи ключевые слова, и в случае чего заменяет комменты на котиков, плейсхолдеры — на что угодно. За базу легко сойдет предыдущий hello world.

Итак, манифест. Тут всё гуд, только поменяем html5rocks на онлайнер:

Как определить, что заголовок грозит бедой? Легко. Судя по всему, заголовки к статьям всегда лежат в h3 где-то внутри тэга article. Искать заголовок по имени класса рисково, так как он выглядит неочевидным.

В код пустим это так:

Комментарии делятся на 2 группы: лучший и все остальные. Судя по именам классов, это всегда b-best-comment либо commentListItem:

На что менять? Хватает сервисов, которые по урлу дают картинку-плейсхолдер заданного размера. Есть просто прямоугольники, есть с котятами, есть с сиськами. В общем, на любой вкус. На случай, если пост будут читать дети, остановимся на серых прямоугольниках:

Всё! Берем заголовок, ищем ключевые слова, если находим — берем всё комменто-образное и превращаем в тлен. Вот так выглядит весь код:

Просто же!

Со включенным расширением комментарии выглядят теперь так:

С котами будет симпатичнее.

Дебагить такие экстеншены очень просто: ставим  debugger;  и он подхватится дев тулами. Для не content script расширений в общем случае это не так.

Во время разработки экстеншена, чтобы увидеть сделанные в нем изменения на странице, нужно проделать дополнительную манипуляцию: прежде чем перегружать саму страницу, на которой загружен экстеншн, нужно зайти на chrome://extensions и перегрузить её через ctrl+R либо cmd+R(либо кнопка update extensions now).

Все.

P.S.: Когда-то я давал презентацию по расширениям, в которой упоминался пример с content script и препроцессингом баг репортов. Посмотреть её можно тут:

Само выступление тут:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *