Виджеты Экспресс-панели
-
Github: https://github.com/aminought/vivaldi-widgets
Не видел на форуме, чтобы кто-то делал подобное, но на этот раз я пришел с виджетами Экспресс-панели. Возможно, это не то, что вы себе представляете. Я называю виджетом некоторый кусочек сайта, который можно встроить в Экспресс-панель, и данный мод представляю себе как некоторую приборную панель, на которой можно посмотреть разом всю интересующую вас и меняющуюся информацию: погода, балансы, котировки, статистика и прочее.
Принцип работы
Обычно код веб-страниц имеет четкую структуру, информация расположена в блоках, которые можно получить с помощью
document.querySelector()
. Узнавselector
нужного блока, можно убрать все соседние элементы и элементы, соседние родительским, вплоть до<body>
, оставляя при этом теги<script>
и<style>
, чтобы ничего не поломать. Остается только встроить в Экспресс-панель<webview>
, в котором нужно открыть конкретную страницу, выполнить вышеописанный скрипт, используя заданныйselector
, и настроить нужный размер. Остальное – просто обвязка над данным кодом, чтобы заставить его работать вовремя и в нужном месте.Установка
Нужно действовать как описано в посте про моддинг:
- Положить widgets.js в
<YOURVIVALDIDIRECTORY>\Application\<VERSION>\resources\vivaldi
. - Добавить в
<body>
window.html
строчку<script src="widgets.js"></script>
. - Перезапустить браузер.
- На каждой Экспресс-панели вы должны увидеть следующее:
Настройка
START_PAGE_BUTTON
. Если установить вnull
, виджеты будут отображаться во всех папках Экспресс-панели. Выглядит это, честно говоря, не очень, поэтому я добавил возможность для указания конкретной папки, в которой нужно отображать виджеты. Например, на скриншоте выше создал новую папку Экспресс-панели с названием "Widgets" и прописалSTART_PAGE_BUTTON = 'Widgets'
, поэтому виджеты отображаются только в этой папке.WIDGETS
. Это список ваших виджетов, в каждом из которых нужно указать следующее:id
: свой идентификатор, может быть любым, но уникальным. Что-то вродеVivaldiProfileWidget
.url
: адрес веб-страницы.selector
: уникальный адрес элемента, по которому можно его найти на странице с помощьюdocument.querySelector()
.zoomFactor
: масштаб страницы, открытой в `<webview>.width
: ширина виджета.height
: высота виджета.timeout
: задержка между загрузкой страницы в виджете и фильтрацией нужного элемента в миллисекундах. Если есть какие-то проблемы с отображением, вероятно, после загрузки страницы выполняется еще какой-тоjavascript
, поэтому нужно подождать какое-то время, например, одну секунду:1000
.
Например, для отображения статистики своего профиля на форуме я добавил такой виджет, результат можете видеть на скрине выше:
{ id: 'VivaldiProfileWidget', url: 'https://forum.vivaldi.net/user/aminought', selector: '.profile.row', zoomFactor: 0.8, width: '240px', height: '248px', timeout: 0 }
DELAY
. Пока не полностью завязался на события браузера, поэтому в некоторых местах есть задержки перед выполнением каких-либо действий. Если что-то не работает, попробуйте увеличить этот параметр.STYLE
. Здесь хранится весь CSS для этого мода.
Будем считать, что альфа-версия, которую я только-только заставил работать, поэтому что-то явно может пойти не так. Делитесь мнениями, багами, советами, идеями для улучшения и вашими примерами виджетов, спасибо.
UPD 2024-02-25:
- Добавил применение стиля
overflow: hidden
к<body>
внутри<webview>
, теперь проблемы с полосами прокрутки нет. - Добавил опцию
START_PAGE_TITLE
для определия того, открыта ли Экспресс-панель. - Добавил в виджет параметр
timeout
на случай, если отображается только часть виджета или вообще ничего. - Добавил пресеты для изменения внешнего вида.
- Убрал опцию
START_PAGE_TITLE
, теперь получаю его автоматически. - Обновил скриншот и описание.
UPD 2024-02-26:
- Добавил обработку события нажатия на кнопку обновления страницы, теперь виджеты обновляются.
- Теперь виджеты можно перетаскивать! При этом порядок виджетов сохраняется после перезапуска браузера. Если в
WIDGETS
меняется набор виджетов, порядок сбрасывается, и виджеты располагаются так, как указано в этой опции. Тянуть можно заpadding
виджета. - Убрал пресеты внешнего вида, по умолчанию оставил второй вариант. Просто чтобы избавить себя от лишней головной боли.
- Добавил
cursor: move
дляpadding
виджета, чтобы было понятно, что за него можно тянуть. - Добавил увеличение
paddingTop
виджета при наведении на виджет, чтобы за него можно было удобно перетаскивать и не целиться в небольшой padding, который установлен по умолчанию. - Добавил
window.scrollTo(0, 0)
в скрипт фильтрации, так как иногда виджет пропадал из поля зрения. - Попытался уменьшить порог вхождения, установив дефолтные параметры таким образом, чтобы все работало из коробки.
UPD 2024-02-29:
- Подготовил почву для планирующихся в дальнейшем улучшений: вынес весь CSS в константу
STYLE
, для заголовка теперь используется свой контейнер вместоpadding
. - Добавил в заголовок кнопку для обновления отдельного виджета.
- Обновил описание.
UPD 2024-03-09:
- Виджеты теперь можно добавлять, изменять и удалять прямо в браузере.
- Размер виджетов теперь можно менять мышкой.
- Положить widgets.js в
-
я люблю выдирать чужие коды из чужих страниц. Хотя единственное что поддается, это только очень редкие графики курсов валют и виджеты погоды ( которые на <iframe> или на запросах в ихний скрипт, т.е. до 10 строк : ) )
Вот чувствую , что с погодой в Екатеринбурге вы меня опередили
Так там все готовое. И мои находки ограничиваются чистым HTML.А где вы такую красоту нашли ?
Ведь тема "о виджетах", должна быть доступна любому. У вас все заточено под JS ?
Если скрипт расписан прямо на странице сайта, его длина изменяется в сотнях строк.
Область специалистов резко сужается.Придется вам везде всунуть
overflow: hidden как борьбу с прокруткой. -
This post is deleted! -
UPD 2024-02-25:
- Добавил применение стиля
overflow: hidden
к<body>
внутри<webview>
, теперь проблемы с полосами прокрутки нет. - Обновил скриншот и описание.
- Добавил применение стиля
-
@sphera Если честно, не очень понял комментарий. Такую "красоту" я сам придумал, ковыряя внутренности Vivaldi. Далеко копать не пришлось, всё на поверности. За
overflow: hidden
спасибо. Я про него знал, просто только сейчас догадался, что этот стиль можно применить к<body>
страницы, открытой в<webview>
. -
This post is deleted! -
@sphera А что с кавычками? Что именно не работает?
-
This post is deleted! -
@sphera Сорри, непонятно объяснил.
id
- это внутренний индентификатор виджета, к элементу он отношения не имеет. Тебе нужно самому его придумать, типаWeatherWidget
. -
This post is deleted! -
This post is deleted! -
@aminought said in Виджеты Экспресс-панели:
За overflow: hidden
есть еще более экстремальные методы борьбы с прокруткой, что-то с -fix , сам не помню, есть и многострочные методы, более жестокие.
-
@aminought said in Виджеты Экспресс-панели:
А что с кавычками? Что именно не работает?
я чего-то полез сразу ковырять
const START_PAGE_BUTTON = 'Widgets';
надо намекнуть, или выделить комментами -- где можно править.- Можно еще добавить версию в сам файл сверху
-
This post is deleted! -
@sphera Посмотри внимательнее на скриншот, пожалуйста, там есть вся информация. Нужно создать папку с галкой "Экспресс-панель", чтобы она отобразилась сверху.
-
@sphera Тут советую обратиться к документации JS. Это обычный список, объекты перечисляются через запятую. Это если ты о синтаксисе. Если про визуальное разделение, то ничего дополнительно делать не нужно, там
flex
-компоновка. -
This post is deleted! -
This post is deleted! -
Если браузер на русском, то в 205 строке надо
return this.#title.innerText === 'Экспресс-панель';
-
@sedative29rus
да точно, это работает.