Как установить stylish для opera gx
Обновлено: 07.07.2024
Всем доброго времени суток и всяческих прочих разностей. Сегодня мы про Stylish , да. Скрасим, так сказать, предновогодние и новогодние праздники (кстати у нас начался сезон скидок, да).
Пока мы готовим, по Вашим просьбам, небольшой такой материал по поводу работы с новым Firefox в плане расширений, носкриптов и иного функционала, - хочется поделится небольшой заметкой, которая существенно может скрасить Вашу жизнь при посещении абсолютно любых сайтов.
Сегодня мы посмотрим, как целиком устанавливать свои "темы" дизайна на любой сайт в браузере, будь то какая-нибудь социальная сеть, поисковик, почта или "Заметки Сис.Админа" (на которых, надеемся, Вы сейчас и находитесь.
Вводная
Ну, своими словами я уже сказал, а как разработчики описывают это так:
Стильный интернет со Stylish , пользовательским менеджером стилей.Устанавливайте темы и скины для многих сайтов и создавайте свои.
- Попробуйте Reddit в темном стиле, используйте минималистский Facebook , меняйте внешний вид Google , Twitter и других ваших любимых сайтов;
- Кастомизируйте фон, цветовую схему, шрифты и даже анимацию;
- С легкостью отключайте, включайте, редактируйте и удаляйте любую из установленных вами тем;
- Создавайте ваши собственные пользовательские стили (темы) с помощью редактора SCC от Stylish и делитесь ими с миллионами пользователей Stylish .
- Поисковые машины – Yandex, Google, Baidu, Yahoo ;
- Социальные сети - ВКонтакте, Facebook, Twitter, Reddit, Whatsapp, Instagram, WeChat ;
- Сайты для разработчиков – Stackoverflow, Github, JIRA, Thunderbird ;
- Браузеры – Chrome, Firefox, Opera, Safari .
В общем это такое себе расширение Stylish , подменяющее или добавляющее файлы стилей (если почти у всех сайтов) с удаленных (хотя по факту они все равно лежат у Вас в кеше на компьютере) на локальные и переписывают их в браузере на свои. Ну как-то вот так, если говорить просто и криво.
На сим давайте перейдем к использованию, но сначала посмотрим как оно выглядит.
Как Stylish выглядит и примерно работает
Вообще чем-то всё это похоже на Personas (помните, у Firefox такой был когда-то) только для сайтов. Устанавливаем расширение в браузер, переходим в каталог тем, ищем нужную нам тему для нужно сайта, применяем и задаем настройки (если они есть) и вуаля, - всё готово.
Например вот ВКонтактик в тёмном цвете (скриншоты не кликабельны):
Гугл в серо-буромалиновом (в смысле в странном, так сказать):
Несколько очеловеченный и тёмный фейсбук , хотя мне кажется, что с ним вообще сложно сделать что-то внятное даже сторонними силами (хотя народ таки умудряется делать хорошие стили). Но, тем не менее, вполне, вполне:
Красота же? Карасота. А вообще там этих красот хватает на вкус и цвет, как говорится.
Да еще и для всяческих сайтов, популярных и не очень.
Как установить и использовать
Берем совместимый браузер, например Google Chrome (или браузер на его основе), идем на страницу с расширением и тыркаем в кнопку " Установить" и " Добавить расширение " (или Add extension в моём случае):
Собственно, ничего не обычного. В результате, во-первых, у Вас появляется значок расширения. Во-вторых, есть каталог тем, который открывается после установки (если не открылся, то какое-то время он жил вот по этому пути):
По клику на значок Stylish Вы можете включить или выключить работу расширения в текущий момент, а так же выбрать (активировать, деактивировать, настроить и тп) какую-то из тем, если Вы установили их несколько.
Дальше идем в каталог тем и ищем нужный сайт (слева есть список популярных):
Выбираем стиль (или несколько), который нам нравится и жмём в кнопку установки. Вылезет запрос, собственно, с ним соглашаемся и радуемся жизни.
Что таки не сложно.
Ну и совсем немного про настройки и свои стили
По правой кнопки мышки на значке Stylish можно открыть опции, быстро отключить все стили и многое другое. В общем и целом всё на английском, но и сложного тоже особо ничего:
В самих опциях можно делать бекапы, создавать свой стиль для любого сайта ( Write new style ), смотреть какие стили у Вас установлены и их версии, массово обновлять их всем и многое такое-полезное:
Описывать все пункты не буду, кнопки Stylish знакомы многим, кто хоть какое-то провел за компьютером, ну, а всем остальным в помощь интуитивный метод тыка или великолепный гугл переводчик.
Мы же перейдем к послесловию.
Послесловие
Это расширение для браузера, - отличный повод обновить дизайн сайтов, который Вам уже приелся, добавить на них функционал, убрать визуальный мусор или рекламу, да и многое многое другое.
Про написание стилей и дизайнов, - если Вы знаете CSS , то за пять минут сможете подстроить почти любой дизайн почти любого сайта под свои нужды. Если нет, то есть сайт htmlbook или наши курсы обучения, на которые, кстати, сейчас идут страшные скидки.
Как и всегда, на сим всё. Спасибо за уделенное время, внимание и что Вы с нами.
Ну и, на данный момент (написания), - поздравляем Вас с наступающими праздниками.
Как раз скоро будем Вас поздравлять. А пока все бегом за скидками ;)
Stylus (Стилус) стартовал с исходного кода Stylish версии 1.5.2, последней версии от его основного и первоначального разработчика перед тем, как проект перешел в другие руки. Целью создания было сохранение и улучшение удобства использования, а также оптимизация быстродействия, ради чего большая часть кода была переписана.
Стилус разрабатывается пользователями исходного расширения для таких же пользователей. Это наш ответ перешедшему в новые руки Stylish, в котором веб-аналитика и слежение за посещенными страницами включено по-умолчанию, а интерфейс настолько упрощен в угоду популяризации, что крайне осложняет доступность функционала для опытных пользователей и разработчиков стилей.
Стилус главным образом создан для того, чтобы полностью убрать веб-аналитику и прочее слежение третьими лицами за посещением страниц, а также возврат к удобному интерфейсу. Из добавленных важных функций можно отметить импорт/экспорт и настраиваемое авто-обновление стилей.
****** Политика конфиденциальности ******
Нам и нашему браузерному расширению, в отличие от некоторых схожих, не интересно кто вы и чем вы занимаетесь. Пусть сомнительные сайты останутся между вами и провайдером. Стилус не «стучит».
- У этого расширения есть доступ к вашим данным на всех сайтах.
- У этого расширения есть доступ к вашим данным на некоторых сайтах.
- У этого расширения есть доступ к вашим вкладкам и действиям в интернете.
- This extension can store an unlimited amount of client-side data.
Снимки
О расширении
Похожие
GitHub Privacy
GitHub Timestamp Privacy redacts timestamps such as commit dates on GitHub. The precision of timestamps is reduced according to your preference. Click on individual timestamps to reveal more precision if needed.
Оценка: Всего оценок: 1
Web Developer
Adds a toolbar button with various web developer tools. The official port of the Web Developer extension for Firefox.
Оценка: Всего оценок: 134
AddCSS
This extension allows you to add your own custom website specific CSS style sheets.
Оценка: Всего оценок: 13
Sitemap Explorer: Check and View XML Sitemaps
Это расширение помогает найти, проверить, экспортировать и отобразить файлы XML Sitemaps любого сайта, который вы посещаете в браузере.
Оценка: Всего оценок: 4
Responsive Web Design Tester
Responsive Web Design Tester is a quick and easy way to test your responsive website.
Not "ish", but "us", as in "us" the actual users. Stylus is a fork of Stylish that is loosely based on the source code of version 1.5.2, which was the most up-to-date version before the original developer stopped working on the project. The majority of code has been rewritten to optimize performance.
Stylus was created by users, for users, in response to Stylish being taken over by a new development team. Stylish-for-Chrome now has extensive analytics enabled by default, and the UI has been over-simplified for casual users, thus becoming far less user-friendly for power-users who actually create and edit styles.
The main objectives in creating Stylus were to remove any and all analytics, and return to a more user-friendly UI. Other important new features have also been added, most notably a backup feature, and an intuitive and customizable automatic update function for styles.
- This extension can access your data on all websites.
- This extension can access your data on some websites.
- This extension can access your tabs and browsing activity.
- This extension can store an unlimited amount of client-side data.
Screenshots
About the extension
Related
GitHub Privacy
GitHub Timestamp Privacy redacts timestamps such as commit dates on GitHub. The precision of timestamps is reduced according to your preference. Click on individual timestamps to reveal more precision if needed.
Rating: Total number of ratings: 1
Web Developer
Adds a toolbar button with various web developer tools. The official port of the Web Developer extension for Firefox.
Rating: Total number of ratings: 134
AddCSS
This extension allows you to add your own custom website specific CSS style sheets.
Rating: Total number of ratings: 13
Sitemap Explorer: Check and View XML Sitemaps
This extension helps you find, inspect, export, and view XML Sitemap files for any site you navigate in a browser.
Rating: Total number of ratings: 4
Responsive Web Design Tester
Responsive Web Design Tester is a quick and easy way to test your responsive website.
C чего начнём?
- Создадим новую директорию для файлов расширения
- В ней создадим файл config.xml
- <name>Название нашего расширения</name>. Не стоит делать слишком длинным
- <description>Краткое описание</description>. Хватит и пары строчек
- <icon />. Иконки используются на странице расширений, на сайте-репозитории (если ваше расширение там примут), и в кнопке, которой в данном расширении не будет. Желательно вынести в отдельную директорию, дабы не создавать беспорядок
В качестве последнего штриха нужно создать index.html. Он нужен для функционирования «закадрового» скрипта, который будет запущен вместе со стартом браузера, и не будет привязан ни к одной из вкладок. Нам он не нужен, но без него Opera не даст нам «подебажить». Файл можно оставить пустым. Теперь при помощи drag-n-drop перетаскиваем наш config.xml в браузер. Если всё прошло хорошо, откроется страница со списком установленных расширений, и наше там будет сверху, в разделе «режим разработчика».
UserJS
- дожидаться окончания загрузки страницы и появления искомого блока (далее я буду называть его slider).
- разместить в нём наши кнопки-стрелки.
- разместить необходимый CSS-код для стрелок и выделения текущего комментария.
- оживить стрелки — они должны перемещать скролл страницы по новым комментариям.
JavaScript
Помимо этого файла мы могли бы внедрить ещё и какую-либо библиотеку вроде jQuery или Prototype. Но я строго не рекомендую так поступать. Такого рода библиотеки весьма весомые, а т.к. они будут загружаться не только для каждой вкладки, а ещё и для каждого iframe, которых на странице бывает много, 5-10 таких расширений могут вызвать тормоза. Учитывая что наши задачи весьма скромны, мы не сильно много теряем.
UPD 2. Спасибо, kns. Если же на странице уже используется 1 из популярных библиотек, то мы можем воспользоваться ею. Подробнее об этом можно прочесть здесь. В случае Opera это будет выглядеть примерно так:
Начнём писать код. Для начала, для удобства, поместим всё в анон.функцию. Т.к. наше javascript-окружение изолировано от javascript-окружения сайта, этого делать не обязательно, но на мой взгляд, подобное уже давно стало правилом хорошего тона:
Не знаю как вы, но я привык работать в пределах конкретного объекта, а посему определим его:
Теперь необходимо оформить условия его создания:
Проверка на адрес страницы вызвана не логическими доводами, а паранойей. Дело в том, что я пару раз натыкался в сети на сведения о том, что Opera иногда не справляется с правилами для UserJS. Наш объект будет запущен после того, как всё DOM-древо страницы будет построено + 1.5 сек. Почему 1.5 сек.? Дело в том, что slider появляется не сразу, поэтому мы его подождём. Сие можно реализовать более изящно, но пока сойдёт и это.
Работа расширения
Сейчас Opera не самый высоко-технологичный браузер, но всё же его возможности намного опередили IE6,7,8. Следовательно мы можем воспользоваться такими вещами, которые не стали бы применять в обычном web-программировании. Немного упростим себе работу:
Методы querySelector и querySelectorAll позволяют находить DOM-объекты по CSS-селекторам. Такой подход вам наверняка знаком по опыту использования jQuery. В нашем случае функция $ будет искать один элемент, удовлетворяющий запросу, а $$ список.
Что там у нас по списку? Да не важно, давайте внедрим на страницу нужный нам CSS:
Здесь мы создаём новый DOM-объект <style /> и в качестве содержимого задаём необходимый CSS-код. Т.к. страница уже готова нам доступен document.head, куда мы и поместим наш тег. Теперь о функции _createElem:
Организовать работу с настройками можно как угодно, например так:
Перейдём к основной логике. Нам нужно найти slider и добавить к нему две кнопки:
Стрелки можно задать текстом. Теперь нам нужно эти кнопки оживить:
И наконец, долгожданная листалка:
Её логика проста. Ищем все новые комментарии по CSS-селектору, заданному в this.s.info_panel ( ".comment_item > .info.is_new" ). Он находит нам все блоки-заголовки новых комментариев. Затем, в зависимости от того, на какую кнопку мы нажали, перемещаем скролл страницы к нужному комментарию, используя scrollIntoView. Чтобы сие событие было более наглядным, добавляем к нему класс, для которого выше определили CSS с тёмной рамкой (outline).
Учитывая, что доступна кнопка обновить, и наш список новых комментариев может устареть, расширение каждый раз сверяет старый список с текущим, и если они различны обнуляет счётчик позиции.
Отдельно я хотел бы остановится на функциях работы с классом DOM-объекта. Нет нужны вручную парсить строчку item.className, т.к. доступны следующие методы:
Немного о «дебаге»
Начнём с того, что у нас есть такой инструмент как Dragonfly(стрекоза), который вызывается через ctrl+shift+i (либо правая кнопка мыши — «проинспектировать объект»). В нём на вкладке «Скрипты» мы можем отыскать в выпадающем списке наш habr_comment_switcher.js. Теперь нам доступны точки останова и «трейсинг» (F8, F10, F11). Также нам доступна консоль, но чтобы она работала в том же js-окружении, что и наш скрипт, нам нужно предварительно посмотреть его номер в выпад.списке скриптов.
Посмотреть ошибки можно путём нажатия кнопки «открыть консоль ошибок» на странице установленных расширений. Объект console для расширений не работает. Чтобы обновить расширение, нам нужно закрыть стрекозу, на странице расширений нажать «обновить», открыть стрекозу на нужной вкладке и нажать в браузере «обновить». В целом, впечатления от работы с расширением в стрекозе самые ужасные. Особенно после опыта разработки расширения для Chrome.
Финальный штрих
Вроде всё работает, так что самое время упаковать расширение. Для этого сожмём содержимое папки расширения в zip-архив, и сменим расширение файла на oex. Всё, расширение готово. Можно пользоваться. Если Opera ругается на то, что расширение повреждено, проверьте — возможно вы сжали не содержимое папки, а её саму. Так же проверьте наличие файлов config.xml и index.html.
Эпилог
УРА! Наше расширение готово, в стадии альфа-версии. Его можно улучшить, добавить поддержку Chrome и Greasemonkey (хотя я не уверен, что не взлетит так), добавить страницу настроек (к примеру, чтобы задавать цвета или изменять CSS-селекторы).
Посмотреть уже готовое расширение можно здесь. Первый раз пользуюсь git-ом, извиняйте, если что не так.
Читайте также: