Фишки LS или как сделать себе удобно?
Оптимальная настройка рабочей среды — один из важнейших шагов к эффективной работе, imho. Здесь на http://livestreet.ru, после первой своей публикации я стал следить за своими статьями, но скажу честно — мне был не удобен список публикаций в LS, содержащий превью моих топиков. Этот список мне нужен для удобной навигации по моим публикациям и я хочу лишь видеть их, моих публикаций, заголовки. В отличие от списка топиков других участников — там меня все устраивает. Я могу изменить вариант отображения списка топиков на своем сайте, как сказал в комментариях DayZ , но здесь, на livestreet.ru, увы, не могу могу даже здесь — на ЭТОМ сайте, для себя лично, с помощью только CSS. Делается это так:
Так выглядит мой список моих публикаций здесь на livestreet.ru
На диске создадим папку с двумя файлами — такую:
Первый файл: manifest.json описывает само расширение, второй же содержит перечень стилей, которые и будут применяться к необходимым страницам сайта. Рассмотрим подробнее manifest.json
Файл CSS сделать по своему усмотрению, у меня так:
Сохраняем файлы, заходим в настройки Chrome и загружаем «Распакованное расширение», а затем переходим на свою страницу и видим полученный результат.
ЗЫ
Для экспериментов над стилями можно использовать режим разработчика Chrome, а потом полученное скопировать в расширение.
Так выглядит мой список моих публикаций здесь на 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 комментариев