Фишки LS или как сделать себе удобно?

Оптимальная настройка рабочей среды — один из важнейших шагов к эффективной работе, imho. Здесь на http://livestreet.ru, после первой своей публикации я стал следить за своими статьями, но скажу честно — мне был не удобен список публикаций в LS, содержащий превью моих топиков. Этот список мне нужен для удобной навигации по моим публикациям и я хочу лишь видеть их, моих публикаций, заголовки. В отличие от списка топиков других участников — там меня все устраивает. Я могу изменить вариант отображения списка топиков на своем сайте, как сказал в комментариях DayZ , но здесь, на livestreet.ru, увы, не могу могу даже здесь — на ЭТОМ сайте, для себя лично, с помощью только CSS. Делается это так:

Так выглядит мой список моих публикаций здесь на livestreet.ru

На диске создадим папку с двумя файлами — такую:
Первый файл: manifest.json описывает само расширение, второй же содержит перечень стилей, которые и будут применяться к необходимым страницам сайта. Рассмотрим подробнее manifest.json
{
    "manifest_version": 2,
    "name"           : "LS: Оглавление моих публикаций",
    "version"        : "1.0",
    "description"    : "Преобразует список Моих публикаций в оглавление без текста их содержимого.",
    "content_scripts": [
        {
            "matches": ["http://livestreet.ru/profile/andreyv/created/topics/*"],
            "css"    : ["style.css"]
        }
    ]
}


  • «manifest_version» — версия манифеста. Chrome скоро перейдет на 2 — его и укажем;
  • «name» — имя расширения как оно отображается в списке расширений браузера;
  • «version» — версия расширения (в общем любая, поскольку версионность расширения блюсти, я думаю, не будем);
  • «description» — описание;
  • «content_scripts» — уже интереснее — содержимое и поведение расширения;
  • «matches» — условия срабатывания расширения, то есть, в нашем случае файл скрипта будет подгружен к странице с указанным в значении данного атрибута. Подробнее здесь. Я указал адрес своей страницы, а Вы указываете адрес своей)
  • «css» — файл CSS, который будет подгружаться к указанной странице.

Файл CSS сделать по своему усмотрению, у меня так:
.topic-content.text, .topic-footer .topic-tags { display: none; }
.topic-header h1 { line-height: 16px; }
.topic-header h1 a {
    font-size: 16px;
    line-height: 16px;
}
.topic-header .topic-info a { font-size: 11px; }
.topic-header .topic-info { margin-bottom: 4px; }
.topic-actions { 
    float: left;
    margin-right: 14px;
}
article.topic {
    margin-bottom: 6px;
    border: 1px solid lightgray;
    padding: 6px;
    border-radius: 6px;
}


Сохраняем файлы, заходим в настройки Chrome и загружаем «Распакованное расширение», а затем переходим на свою страницу и видим полученный результат.


ЗЫ
Для экспериментов над стилями можно использовать режим разработчика Chrome, а потом полученное скопировать в расширение.

6 комментариев

avatar
проще было бы сделать все изменение (убрать что не нужно) в шаблоне, и будет на всех браузерах а не только в хроме как у вас.
  • DayZ
  • 0
avatar
Расширение я сделал для удобства работы на этом сайте, а у себя, конечно, через шаблон правильней.
avatar
тогда вам нужно было пошагово и с картинками прописать как вы делал расширение, думаю не все поймут данный топик.
avatar
Согласен, +1
avatar
Я даже не знаю, что здесь пошагово еще прописать — 30 строчек кода на два файла, большая часть которых — CSS. Единственное, что я сделал — конкретизировал назначение топика. Спасибо за подсказку.
avatar
Спасибо, не юзал. Понравилось.
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.