V-Link Color : Что "под капотом"
Опубликовано: Бармалей · 30.04.2015 · 00:02 ••• Обновление: 18.12.2020 · 14:40 0

…Как понимаю, вы уже прочитали общий обзор и хотите поглубже разобраться что и как в этом аддоне…)

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

В этой статье:


Отличия от оригинала и аналогов

По отношению к исходному аддону и его функциональным аналогам в V-Link Color имеются следующие отличия:

  • Глобальная замена цвета посещённых ссылок независимо от URL, цвет жёстко задан в CSS-файле.
    Принципиально – всё работает аналогично методу с файлом Custom.css в "раритетных" версиях.
  • Для индикации всех посещённых ссылок-изображений к ним добавляется цветной бордюр шириной 1рх.
    Это сделано для повышения удобства и исключительно "по просьбам трудящихся".)
  • В отличие от оригинала – иной метод установки стиля – вместо инжекции JS применяется инжекция CSS.
    Полный отказ от применения скриптов существенно (почти в 200 раз!) уменьшил размер аддона.
  • Аддон не использует никакие сторонние библиотеки и не требует дополнительной памяти при работе.
    Связано с изменением принципа установки стилей, является ключевым отличием от многих аналогов.
  • В отличие от оригинала форк не требует для решения основной задачи каких-либо особых разрешений.
    В манифесте оригинала запрашивается "лишнее" разрешение на работу со вкладками.
  • Форк оптимизирован для работы на любых версиях хром-браузеров, код проверен на версиях 29-78.
    В аддоне "осовременены" применяемые API с учётом полной обратной совместимости функций.
  • Аддон можно вызвать на любых страницах, в том числе – на локальных и в режиме "оффлайн".
    Аддон не имеет никаких настроек, работает только локально, функции синхронизации отсутствуют.
  • Возможно применение аддона для самостоятельного изменения любых глобальных свойств CSS.
    Цвет и/или другие параметры стиля ссылок можно изменить по желанию (только вручную).

Технические детали разработки

Ниже приведены некоторые технические подробности по исходному коду и эксплуатации расширения.

Исходный код, интерфейс и API

V-Link Color не использует для работы никакие сторонние библиотеки (привет любителям JQuery)).

Более того, в этом расширении вообще не применяются никакие скрипты, рабочий комплект состоит из манифеста и инжектируемого файла стилей. Ну да, иконка там тоже есть, но, в принципе, она нужна только для наглядности представления в списке установленных расширений…)

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

По этой же причине, в отличие от более "навороченных" функциональных аналогов – в форке полностью отсутствует какой-либо интерфейс, требующий дополнительного html-кода, всё работает "на полном автомате" только за счёт чистого инжектора CSS, всё содержимое которого хранится в единственном файле.

В общем, всё максимально компактно и "заточено" на простое и быстрое решение основной задачи.)

Для нормальной работы инжектора в манифесте запрашивается разрешение [ "activeTab" ].

Для запуска CSS-инжектора применяется стандартный API контент-скриптов.

Для работы с локальными страницами в манифесте указывается разрешение [ "<all_urls>" ]

Ручная замена и создание собственных стилей

Как уже сказано, при желании можно вручную изменить цвет по умолчанию для посещённых ссылок.

Для этого необходимо отредактировать* содержимое файла vlink.css, входящего в комплект расширения.

Для замены только цвета достаточно указать для выделенных параметров любое другое подходящее значение:

a:visited {color: #808 !important}
a:visited img {border: 1px solid #808 !important}

Для лучшего понимания этих действий смотрим ссылки на "матчасть" по подбору цвета в конце этой статьи.

После редактирования аддон следует перезапустить для вступления в силу сделанных изменений.

Кроме того, в этом же файле можно задать и любые другие параметры CSS по своему желанию. Например, вы можете задать для всех сайтов предпочитаемый фон или стиль любых других элементов.

В общем, всё ограничивается только вашей фантазией. Ну и соответствующими знаниями, естественно…)

И, наконец, изменяя в файле манифеста разрешения на доступ инжектора к конкретным сайтам (параметр "matches" в директиве "content_scripts"), можно ограничивать применение ваших стилей только отдельными сайтами, задавая для них достаточно сложные CSS.

Частным примером реализации такого решения может служить аддон Рамка цитат Ru-Board, позволяющий изменять стили для страниц форума Ru-Board.

Если же вы планируете использовать достаточно простые стили, работающие только на некоторых сайтах, существует альтернативный способ, позволяющий полностью обойтись без установки множества дополнительных аддонов. Этот способ заключается в указании требуемых стилей в настройках пользовательских правил вашего блокировщика рекламы. Например, для uBlock подобное правило может быть задано примерно так:

ru-board.com##.lgf:style(border-width:2px;border-color:navy;)

Действие такого правила будет визуально эквивалентно работе базовой версии Рамки цитат Ru-Board.

Возможные ограничения и условия применения

При эксплуатации расширения нужно помнить о том, что:

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

* В таких случаях можно попытаться добавить в общий шаблон свой собственный стиль, учитывающий конкретные URL сайтов, либо использовать для этих целей более "продвинутые" CSS-менеджеры.

2. Подсветка посещённых ссылок производится на основании данных истории посещения, хранящейся в вашем профиле браузера. Поэтому должно быть очевидно, что при очистке* истории такой подсветки уже не будет.

* Сделанной вами вручную, в настройках браузера, либо при автоматической очистке, по истечению "срока давности" (при прочих равных, стандартная "история" в хром-браузерах хранится порядка 3 месяцев).

3. Расширение работает глобально, замена стилей производится на всех* сайтах. Если это неприемлемо – лучше использовать другие "стилизаторы", позволяющие более гибко управлять дизайном конкретных сайтов.

* При желании можно вручную указать соответствующие маски в манифесте расширения и задать собственный список исключений.

4. При внесении любых самостоятельных изменений в исходный код расширения все подобные действия лучше (и проще)) производить* при установке аддона в режиме разработчика.

* Это, как минимум, позволит избежать выдачи сообщений о нарушении целостности расширения.

Дополнительные примечания по коду

Практических ограничений по версии браузера не имеется, используемые API работают в версиях 22+.

В силу того, что расширение не имеет никакого интерфейса взаимодействия с пользователем, особой потребности в его локализации нет, в качестве языка описания используется только* английский. Это связано с серьёзным упрощением кода и повышением скорости его работы.

* Впрочем, если "народ потребует", прикрутить "великий и могучий" не составит никакого труда…)



Технические детали Бармалей
Бармалей 30.04.2015 18.12.2020 303 0.0

Общие технические сведения о разработке
Статус разработки:Активная, поддерживается автором
Язык интерфейса:Русский
Версия браузера:22+
Протестировано в:SRWare Iron 29/31/36/49 + 360 Extreme Explorer 9/11/12 (CR-63/69/78)
Технологии и API:Чистый CSS (без применения скриптов), API: content-script (CSS injection)

Поделиться

Всего комментариев: 0
close