Как выделить вкладки в браузере

Обновлено: 07.07.2024

Большую часть времени в браузере мы открываем вкладки и окна, переключаемся между ними, ходим по ссылкам. Всё это легко и привычно делать с помощью мыши, но гораздо удобнее использовать горячие клавиши Chrome. Смотрите, как всё просто.

Для Windows

Ctrl + N — новое окно.
Ctrl + T — новая вкладка.
Ctrl + Shift + N — новое окно в режиме инкогнито.
Ctrl + клик — открытие ссылки в новой фоновой вкладке.
Ctrl + Shift + клик — открытие ссылки в новой вкладке с переключением на неё.
Shift + клик — открытие ссылки в новом окне.
Ctrl + Shift + T — восстановление последней закрытой вкладки (до 10 вкладок).
Ctrl + W — закрытие активной вкладки или всплывающего окна.
Ctrl + Tab — переключение между вкладками.

Для Mac

⌘ + N — новое окно.
⌘ + T — новая вкладка.
⌘ + Shift + N — новое окно в режиме инкогнито.
⌘ + клик — открытие ссылки в новой фоновой вкладке.
⌘ + Shift + клик — открытие ссылки в новой вкладке с переключением на неё.
Shift + клик — открытие ссылки в новом окне.
⌘ + Shift + T — восстановление последней закрытой вкладки (до 10 вкладок).
Option + ⌘ + ⇨ и Option + ⌘ + ⇦ — переключение между вкладками.
⌘ + W — закрытие активной вкладки или всплывающего окна.
⌘ + Shift + W — закрытие активного окна.
⌘ + M — сворачивание окна.

Взаимодействие с контентом на странице

Осуществлять навигацию по страницам и взаимодействовать с контентом можно разными способами, но поверьте: самый быстрый — это шорткаты.

Для Windows

Ctrl + S — сохранение страницы.
Ctrl + P — печать страницы.
F5 или Ctrl + R — обновление страницы.
Ctrl + F5 или Shift + F5 — принудительное обновление (без учёта кеша).
Esc — отмена загрузки страницы.
Ctrl + F — поиск.
Ctrl + U — исходный код страницы.
Ctrl + D — закладка для текущей страницы.
Ctrl + Shift + D — закладки для всех открытых страниц.
F11 — полноэкранный режим.
Ctrl + плюс и Ctrl + минус — изменение масштаба страницы.
Ctrl + 0 — стандартный масштаб страницы.
Пробел — поэкранная прокрутка страницы.
Home — переход в начало страницы.
End — переход в конец страницы.
Shift + колёсико мыши — прокрутка страницы вправо или влево.

Для Mac

⌘ + S — сохранение страницы.
⌘ + P — печать страницы.
⌘ + R — обновление страницы.
⌘ + F — поиск.
⌘ + Option + U — исходный код страницы.
⌘ + D — закладка для текущей страницы.
⌘ + Shift + D — закладки для всех открытых страниц.
⌘ + Shift + F — полноэкранный режим.
⌘ + плюс и ⌘ + минус — изменение масштаба страницы.
⌘ + 0 — стандартный масштаб страницы.
Пробел — поэкранная прокрутка страницы.
Fn + ⇦ — переход в начало страницы.
Fn + ⇨ — переход в конец страницы.

Взаимодействие с адресной строкой

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

Для Windows

Ctrl + L — выделение URL или текста в адресной строке.
Alt + Enter — открытие URL в новой вкладке.

Для Mac

⌘ + L — выделение URL или текста в адресной строке.
⌘ + Enter — открытие URL в новой вкладке.

Настройки и функции

Все функции Chrome и его настройки доступны из меню, но зачем тратить время, блуждая по его закоулкам? Запомните шорткаты для часто используемых функций, и вы станете продуктивнее!

Чтобы выделить несколько вкладок, нажимайте на них по очереди, удерживая клавишу Ctrl (в Windows) или ⌘ (в macOS). Нажмите на любую из выделенных вкладок правой кнопкой мыши и выберите нужную команду (например, вы можете открыть несколько вкладок в новом окне или закрыть их).

Если вкладки расположены рядом, используйте клавишу Shift для быстрого выделения группы:

Удерживая Shift , нажмите на первую, а затем на последнюю вкладку группы, которую хотите выделить. Нажмите на любую из выделенных вкладок правой кнопкой мыши и выберите нужную команду.

Чтобы снять выделение, нажмите на любую другую вкладку.

Управление вкладками

Примечание. Управление вкладками доступно только в Windows.

Когда открыто много вкладок, в них трудно ориентироваться. Яндекс.Браузер предлагает работать с большим количеством вкладок в специальной панели, где вкладки отображаются в виде вертикального списка и группируются по окнам.

Чтобы открыть панель управления вкладками, на боковой панели нажмите значок  или клавиши Ctrl  +  Shift  +  E в Windows.

Примечание. Значок появляется, если вы включили боковую панель и открываете более десяти вкладок. Чтобы добавить значок вручную, нажмите на боковую панель правой кнопкой мыши и выберите опцию Управление вкладками . Чтобы убрать значок, снимите отметку с опции Управление вкладками .

Вы можете управлять вкладками через:

Значки на панели управления
Контекстное меню

Нажмите на любую из выделенных вкладок правой кнопкой мыши.

Форма и расположение вкладок

Вкладки можно переместить в нижнюю часть окна браузера:

В блоке Вкладки нажмите Настройки внешнего вида вкладок .

После этого вкладки переедут вниз. Чтобы переместить вкладки наверх, включите в настройках в разделе Настройки внешнего вида вкладок опцию Сверху .

Чтобы изменить форму вкладок:

В блоке Вкладки нажмите Настройки внешнего вида вкладок .

Количество и размер вкладок

Количество вкладок в Яндекс.Браузере не ограничивается, хотя большое количество вкладок может перегрузить процессор и память компьютера.

Примечание. У пользователя может быть открыто одновременно несколько десятков вкладок. Чтобы не перегружать память и ресурсы компьютера, Браузер при запуске загружает не более десяти вкладок. Причем делает это последовательно, а не одновременно. Видео начинает воспроизводиться только на активной вкладке.

Если у вас открыто более 50 вкладок в браузере, справа от них появляется значок горизонтальной прокрутки . Чтобы при большом количестве вкладок их размер не слишком уменьшался:

В блоке Вкладки включите опцию Ограничить минимальную ширину вкладки .

В большом количестве вкладок трудно ориентироваться. Поэтому при наведении указателя мыши на заголовок вкладки Браузер показывает уменьшенный скриншот страницы. Если вы хотите отключить предпросмотр вкладок:

В блоке Вкладки отключите опцию Показывать миниатюры вкладок при наведении . Если вы случайно перейдете по одной и той же ссылке из внешнего приложения несколько раз, в Яндекс.Браузере откроется несколько одинаковых вкладок. Чтобы избежать этого, нажмите   → Настройки  → Интерфейс и включите опцию Не дублировать вкладки при переходе из внешних приложений .

Синхронизация вкладок

После синхронизации устройств с вашим Яндекс ID вы сможете просматривать вкладки, которые открыты на другом компьютере, планшете или смартфоне. Эта возможность полезна в следующих ситуациях:

Если у вас есть два компьютера: домашний и рабочий. На рабочем компьютере вы просматривали сайт и не закрыли вкладку. Дома вам нужно открыть его и продолжить работу. Если у вас есть мобильное устройство и компьютер. На смартфоне или планшете вы нашли интересный сайт и хотите посмотреть его на большом экране. На всех устройствах (компьютер, смартфон, планшет) должен быть установлен Яндекс.Браузер. На всех устройствах должна быть включена синхронизация. При синхронизации на устройствах должен использоваться один и тот же Яндекс ID. В верхней части страницы перейдите на вкладку  Другие устройства . Нажмите значок с количеством вкладок (, если открыто 3 вкладrb).

Восстановить вкладки после переустановки

Если вы хотите после переустановки браузера сохранить вкладки на своих местах:

Нажмите Программы  → Программы и компоненты  → Удаление программы . В окне Удаление или изменение программы выберите программу Yandex. Включите синхронизацию, чтобы передать историю с сервера на компьютер. Нажмите на Умную строку и перейдите на появившуюся под ней вкладку  Недавно закрытые .

Если у вас была включена синхронизация, то после переустановки системы вы сможете получить доступ ко вкладкам, которые ранее были открыты на этом компьютере. Синхронизация привязана к имени устройства, которое, как правило, меняется во время переустановки ОС. Когда вы синхронизируете компьютер под новым именем, Браузер считает, что это новое устройство. Поэтому на вкладке  Другие устройства появляется папка со старым названием компьютера. В ней вы можете посмотреть вкладки, которые были открыты в браузере до переустановки ОС. Для этого:

Откройте папку со старым названием компьютера. В блоке Открытые сайты вы увидите список вкладок, которые были открыты в Браузере до переустановки. Совет. Чтобы открыть все вкладки списка одновременно, нажмите заголовок блока Открытые сайты .

Если после переустановки ОС имя компьютера осталось прежним, то папка не появится, так как браузер не будет считать компьютер новым устройством. Чтобы папка появилась:

Переименуйте компьютер: Панель управления  → Система и безопасность  → Система  → Дополнительные параметры системы  → Имя компьютера . Подождите, чтобы данные синхронизировались с сервером. Перейдите на вкладку  Другие устройства и откройте папку со старым названием компьютера.

Проблемы с вкладками

В блоке Синхронизация нажмите  Настройки синхронизации . Убедитесь, что в блоке  Что синхронизировать включена опция  Открытые вкладки .

Закрыть некорректно работающие вкладки или посмотреть статистику работы Браузера можно с помощью диспетчера задач. Чтобы открыть диспетчер задач, нажмите   → Дополнительно  → Дополнительные инструменты  → Диспетчер задач или клавиши  Shift + Esc .

Закройте браузер, нажав клавиши  Ctrl + Shift + Q .

В блоке Производительность отключите опцию Использовать аппаратное ускорение, если возможно . Закройте браузер, нажав клавиши Ctrl  +  Shift  +  Q . Снова запустите браузер, чтобы изменения вступили в силу.

Это могло произойти в одном из случаев:

Отключена опция При запуске браузера открывать ранее открытые вкладки в блоке  → Настройки  → Интерфейс  → Вкладки . Вы закрыли браузер с несколькими окнами. После перезапуска браузер восстанавливает окно, которое было закрыто последним. Вкладки из другого окна не открываются.

Чтобы получить доступ к пропавшим вкладкам:

С помощью горячих клавиш
Из Табло
Из истории

Если вкладки пропали и вы не закрыли пустое окно браузера:

Нажмите  Ctrl + Shift + T . Появится новое окно с пропавшими вкладками. Нажмите  Ctrl + Shift + Q , чтобы закрыть висящие процессы браузера. Примечание. Вы можете восстановить вкладки только при первом перезапуске браузера после их исчезновения. При последующих перезапусках вкладки будут утеряны.

Если вы закрыли браузер после исчезновения вкладок:

Вкладки недавно закрытых окон браузера объединены в группу Другое окно с указанием количества вкладок. Выберите нужное окно, и все сгруппированные вкладки откроются в новом окне браузера.

Чтобы перейти к полному списку открытых ранее вкладок, нажмите Показать всю историю .

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

Если вы закрыли браузер после исчезновения вкладок:

Нажмите строку с количеством вкладок из предыдущей сессии.

Для перетаскивания окна браузера используется область Умной строки вне текстового поля. Указатель мыши должен иметь вид . Если при наведении указателя мыши на Умную строку вы видите курсор , сдвиньте указатель мыши правее.

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

Горячие клавиши и жесты мыши для работы с вкладками

Горячие клавиши

Ctrl + Shift + Tab

Ctrl + нажать ссылку

Ctrl + Shift + нажать ссылку

Ctrl + Shift + Tab

Ctrl + нажать ссылку

Ctrl + Shift + нажать ссылку

Жесты мыши

Чтобы выполнять жесты, удерживайте правую кнопку мыши. Выполнив жест, отпустите кнопку.

Внимание. Если вы пользуетесь однокнопочной мышью в macOS, все жесты нужно выполнять, удерживая клавишу Ctrl и кнопку мыши. ">,"extra_meta":[>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>],"title":"Вкладки. Справка","canonical":"https://browser.yandex.ru/help/search-and-browse/tabs.html","productName":"Яндекс.Браузер","extra_js":[[],[,"mods":<>,"__func134":true,"tag":"script","bem":false,"attrs":,"__func61":true>],[,"mods":<>,"__func134":true,"tag":"script","bem":false,"attrs":,"__func61":true>]],"extra_css":[[],[,"mods":<>,"__func63":true,"__func62":true,"bem":false,"tag":"link","attrs":>],[,"mods":<>,"__func63":true,"__func62":true,"bem":false,"tag":"link","attrs":>]],"csp":<"script-src":[]>,"documentPath":"/help/search-and-browse/tabs.html","isBreadcrumbsEnabled":true,"lang":"ru","params":<>>>>'>Действия с вкладками

Создать вкладку — над Умной строкой нажмите значок .

Отключить звук на вкладке — справа от названия вкладки нажмите значок .

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

Открыть недавно закрытую вкладку — нажмите → История и выберите в открывшемся списке нужную вкладку. Или нажмите на заголовок вкладки правой кнопкой мыши и выберите Открыть только что закрытую вкладку . Перейти к началу страницы — чтобы быстро перейти к началу страницы, нажмите на вкладку; чтобы вернуться, нажмите на вкладку повторно.

Обновить вкладку — нажмите значок слева от Умной строки. Переместить вкладку — нажмите на вкладку и удерживайте левую кнопку мыши. Затем переместите вкладку влево или вправо. Закрепить вкладку — нажмите на вкладку правой кнопкой мыши и выберите Закрепить вкладку . Дублировать вкладку — нажмите на вкладку правой кнопкой мыши и выберите Дублировать . Распечатать содержимое вкладки — в пустой части страницы нажмите на странице правую кнопку мыши и выберите Печать .

Закрыть вкладку — наведите указатель мыши на заголовок вкладки и нажмите появившийся значок .

Примечание. По умолчанию после закрытия вкладки вы перейдете на вкладку справа от закрытой. Чтобы переходить к ранее активной вкладке, в блоке → Настройки → Интерфейс включите опцию При закрытии вкладки переходить к предыдущей активной вкладке . Закрыть все вкладки, кроме выбранной — нажмите на вкладку правой кнопкой мыши и выберите Закрыть другие вкладки .

Действия с группой вкладок

Если вкладки расположены рядом, используйте клавишу Shift для быстрого выделения группы:

Чтобы снять выделение, нажмите на любую другую вкладку.

Управление вкладками

Примечание. Управление вкладками доступно только в Windows.

Чтобы открыть панель управления вкладками, на боковой панели нажмите значок или клавиши Ctrl + Shift + E в Windows.

Для большинства из нас браузер — это самая популярная и чаще всего запускаемая программа на компьютере. Мы используем его для прослушивания музыки, просмотра фильмов, проверки почты и так далее. И хотя браузеры обновляются чуть ли не каждую неделю, проблем у них хватает. Одна из них — это не самая удобная работа с большим количеством вкладок.

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

Клавиатурные сокращения (хоткеи)

Горячие клавиши — очень удобный способ управления вкладками. Особенно когда вкладки становятся такими крошечными, что по ним даже неудобно кликать.

Ctrl + Tab — переключение между вкладками в правую сторону.
Ctrl + Shift + Tab — переключение между вкладками в левую сторону.
Ctrl + W / Cmd + W на Mac — закрыть активную вкладку.

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

Запоминание открытых вкладок

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

Включите эту функцию и тем самым освободите себя от лишней работы в будущем:

Google Chrome: Настройки → Начальная группа → Продолжать работу с того же места.
Firefox: Настройки → Основные → При запуске Firefox → Показать окна и вкладки, открытые в прошлый раз.
Apple Safari: Настройки → Основные → Safari открывается при старте → Всех окон из последнего сеанса.

Добавление вкладок в избранное

Ещё один быстрый способ сохранить открытые вкладки, чтобы поработать с ними потом, — это добавить их в отдельную папку в закладках. Для этого кликните на вкладке правой клавишей мыши и выберите пункт «Добавить вкладки в избранное». Название пункта может различаться в разных браузерах, но легко понять, что это именно тот пункт, который вам нужен. В результате у вас в закладках появится папка с нужными вам адресами сайтов. Далее сделайте правый клик на этой папке, выберите пункт «Открыть все закладки» — все вкладки снова перед нами.

Сортировка вкладок по отдельным окнам браузера

Кто сказал, что все вкладки должны быть в одном окне браузера? Вы можете отсортировать ваши вкладки по разным окнам. Например, все вкладки, которые касаются одного проекта, вы можете перенести в одно окно браузера, а всё, что касается развлечений, в другое и так далее. Просто потяните вкладку на пустое место рабочего стола, и у вас откроется новое окно. Ещё один способ — сделать правый клик по ссылке или закладке и выбрать из списка «Открыть в новом окне».

Выбор сразу нескольких вкладок

Вы можете совершать различные действия не с одной вкладкой, а сразу с несколькими. Но для этого сначала нужно выбрать эти самые вкладки. Зажмите клавишу Ctrl (или Cmd на Mac) и выберите необходимые вам в данный момент вкладки. Всё, теперь можете их закрывать, перезагружать, добавлять в закладки и так далее.

Закрепление вкладок

В современных браузерах от хороших разработчиков есть замечательная функция «Закрепить вкладку». Это очень удобно, если вы держите постоянно открытой ту или иную вкладку. Например, это может быть вкладка с Gmail или музыкальным сервисом. После того как вы закрепите вкладку, её будет сложнее закрыть и она будет занимать меньше места на панели вкладок. Просто кликните на вкладке правой клавишей и выберите нужный пункт в списке.

Восстановление закрытой вкладки

Иногда получается так, что случайно закрываешь вкладку, которую вовсе не хотел закрывать. Рука дёрнулась или передумал в момент закрытия — всякое бывает. Чтобы открыть эту вкладку заново, можно, конечно же, зайти в историю браузера и найти этот сайт. А можно использовать клавиатурное сокращение Ctrl + Shift + T (или Cmd + Shift + T на Mac в Chrome и Firefox и Cmd + Z в Safari), чтобы вернуть эту вкладку. Также вам может помочь правый клик мышью на любой вкладке вашего браузера.

Группы вкладок в Firefox

Почти пять лет назад разработчики добавили в браузер Firefox очень крутую функцию, которая называется «Группы вкладок», или «Панорама». Она практически выполняет трюк, который описан выше. Речь идёт об использовании разных окон браузера для вкладок. Только здесь всё это выполнено более красиво, и вам не нужно плодить множество окон. Пара кликов, и вы уже переключились на работу с другим проектом или, наоборот, развлекаетесь после работы. Чтобы запустить группы вкладок, воспользуйтесь клавиатурным сокращением Ctrl + Shift + E или Cmd + Shift + E на Mac.

Надеюсь, что теперь ваша работа с большим количеством вкладок браузера станет немного проще.

… и опоздал на 3 года. В идеале должно быть так: пользователь запускает браузер, и браузер показывает то, что нужно пользователю. Но пока такого не реализовали приходится пользоваться поисковыми системами. В идеале должно быть так: пользователь открывает поисковую систему, вводит поисковый запрос, и она показывает то, что нужно пользователю. Но пока кнопка «I feel lucky» не так хорошо работает (хотя в последнее время ощутимо движение в этом направлении), приходится иногда переходить по нескольким адресам со страницы поисковой выдачи.

Сценарий использования поисковых систем у меня, видимо, закреплен исторически (когда интернет был медленный): попадая на страницу поисковой выдачи, я открывал несколько вкладок в фоновом режиме, и пока остальные загружались, вполне можно было уже прочитать первую вкладку. В случае, когда находил нужную информацию на одной из вкладок, остальные приходилось закрывать вручную. Если не закрыл сразу, вкладки оставались висеть, раздувая количество открытых вкладок в браузере, которые, как правило, редко после этого закрывались.

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

Мне всегда нужна была кнопка «Нашел», которая бы подчищала за мной последствия поиска (назовём её «I was lucky»). После того, как окунулся в мир расширений для браузеров, я подумал, что это то, что может помочь в данном случае. Так смутно начало появляться желание написать расширение, которое бы решало мои задачи.

Расскажу вам свою историю, рассказ буду вести в хронологическом порядке, выводы могут оказаться неожиданные.

Первый шаг на пути

Первым делом взялся за настройку инфраструктуры: webpack + babel. И сразу же мне не понравилось, что babel дублировал в каждом модуле код для своих хелперов. Можно было настроить, чтобы он использовал объект babelHelper , но тогда файл с кодом babelHelper нужно было подключать в конфигурации webpack. Хранить такой файл в проекте и указывать его в entry было некрасиво, я сделал плагин для вебпака, который выполнял это за меня автоматически. Потратив много сил на первый шаг и написав ещё немного кода для самого расширения, я немного притормозил.

Фундамент

Время шло, а в наличии был только плагин для вебпака, который никак не решал моих задач. И каждый раз, когда я что-то искал и не закрывал вкладки, была мысль: «Хорошо бы доделать то расширение. » Желание росло и росло, и вот, в один прекрасный день, количество переросло в качество.

При переходе на страницу могут быть различные варианты. Самый простой: один запрос — один ответ от сервера (200). Самый сложный: один запрос — несколько серверных перенаправлений (3xx), после чего клиентское перенаправление (с помощью <meta/> или javascript), сверху ещё и history API. И комбинации между ними, как правило, большинство сайтов попадает в эту категорию.

Простой случай перехода:

Сложный случай перехода:

То есть сохранить адрес страницы и при переходе проверять только его не всегда достаточно. Поэтому нужно создать логический Переход, куда записывать все адреса, встретившиеся на пути, а потом проверять, что логический Переход содержит в себе сохраненный адрес. Задача понятна, но не все так прямолинейно в исполнении.

В Хроме есть два API, связанных с навигацией: webNavigation и webRequest — каждый со своими событиями. Первый — связывает переходы и UI браузера, последний — нижележащие сетевые запросы. Поэтому, если изменение адреса на странице произошло за счет history API, не будет никаких событий у последнего, а если во время сетевого запроса происходят перенаправления, то первый об этом никак не сообщает. Следовательно, нужно использовать оба АПИ, собирая по щепотке от каждого события каждого АПИ, формировать один логический Переход.

Как указано в документации, события для webNavigation (wN) выполняются в следующем порядке:

Интересующие события webRequest (wR):

Но между собой события wR и wN не имеют определенного порядка (на аналогичных стадиях запроса), т.е. в каких-то случаях wN.onBeforeNavigate может выполниться раньше wR.onBeforeRequest , в каких-то наоборот. Что немного усложняет логику работы.

Для этих АПИ нужно указывать соответствующие разрешения в манифесте расширения, а посему при установке расширения, пользователю будет выдаваться пугающий текст о возможностях расширения.

Развитие

… Вернемся к моменту, когда количество переросло в качество. С начала разработки до этого момента прошло существенное количество времени: браузеры стали поддерживать es6 модули, shadow DOM и другие современные фичи. Для сборки проект переехал на Rollup, плагин в этот раз писать не пришлось. После постройки фундамента — возможности получения информации о любом переходе в любой вкладке, осталось реализовать логику парсинга поддерживаемых СЕРПов и показа уведомлений на связанных страницах.

Первая задача достаточно примитивная: знаем адрес СЕРПа, лезем в содержимое страницы с помощью контент скрипта, получаем интересующие нас данные, сохраняем, ждем, когда пользователь перейдет на одну из страниц, чтобы показать ему уведомление с остальными страницами.

Для второй задачи нужна реализация самого уведомления, то что показывать на странице пользователю. И здесь тоже без контент скриптов не обойтись.

Изначально был только один обработчик (он же контроллер), отвечающий за логику при взаимодействии пользователя с поисковыми системами. После чего возникла идея почему бы не показывать уведомления на связанных вкладках, когда пользователь просто переходит по ссылкам, открываемых в новых вкладках. Пришлось переделать логику, сделав ее более универсальной. По аналогии с middleware React/Redux, можно подключать несколько обработчиков Переходов, что в будущем позволит реализовать возможность отключения/включения различных обработчиков в настройках расширения.

Приватность

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

На помощь приходит технология под названием shadow DOM. В вебе не рекомендуется использовать closed mode при создании shadowRoot , потому что в этом нет большого смысла (все равно придется хранить ссылку на элемент shadowRoot где-нибудь, если хочется иметь к нему доступ программно; так же можно переопределить функцию attachShadow , чтобы она создавала shadowRoot в открытом режиме, и тогда скрипты подгруженные после переопределения уже будут пользоваться новой версией функции).

В случае же расширения это не так. Контент скрипты и скрипты страницы живут в параллельных мирах. Скрипты со страницы не имеют доступ к объектам, определенным в контент скриптах, контент скрипты же оперируют с нативной реализацией функций DOM объектов (переопределенная функция скриптом со страницы не имеет эффекта на функцию, с которой работает контент скрипт). Соединяя эти два условия, получаем, что можно создать элемент с закрытым shadowRoot , сохранив ссылку на него в переменной.

В этом случае скрипт со страницы сможет получить доступ только к элементу обертке, который для него будет пустой. Он не сможет получить текст запроса или предложенные страницы. Нужно внимательно следить, чтобы в сгенерированных событиях не отдать ссылку на какой-нибудь элемент внутри уведомления или открытый текст. Поэтому в расширении в событиях используются сгенерированные id, а уже background скрипт по этому id понимает что от него требуется. Для страницы же этот id достаточно бессмысленный.

Трудности перевода

Изначально расширение разрабатывалось только для Google Chrome, но так как WebExtensions API, где-то в голове держал возможность портирования в другие браузеры. А наличие webextension-polyfill вселяло уверенность. Но как бы не так. Полифил для этого расширения принес только возможность использования chrome API с промисами.

Firefox стал разочарованием года. Несоответствие chrome API в Фаерфоксе (Bug 1543647, Bug 1595621) оказалось критичным для работоспособности расширения, можно сказать оно в этом браузере не работает (как положено).

Vivaldi был наиболее близок, но также не обошлось. Событие wN.onCreatedNavigationTarget не возникает, когда пользователь открывает ссылку средней кнопкой мыши или через Shift|Ctrl + левая кнопка мыши, вместо этого в событии wN.onCommitted transitionType == 'start_page' , чего нет в chrome API, из-за этого не во всех случаях расширение работает правильно. Так же в Вивальди не работают горячие клавиши для расширений. Что является киллер-фичей в данном случае в Хроме, позволяет намного быстрее переходить по вкладкам и закрывать их, без необходимости использования для этого мышки.

Заключение

В ходе написания кода логика работы показа уведомлений менялась несколько раз, каждый раз упрощаясь. В итоге получилось так, что можно было не городить огород с логическими Переходами, а отлавливать «связанные переходы» пользователя (в событии wN.onCommitted есть флаг transitionType , который указывает из-за чего был переход, во многих случаях он равен «link», означающее что пользователь перешел по ссылке), что значительно бы упростило код и работало во многих случаях, но не во всех.

Так же, не находясь в теме, ожидал большей совместимости с точки зрения webExtensions API. Как всегда — хорошо жить в мире современных браузеров, когда не нужна поддержка старых версий. CSS анимации прекрасная вещь: то, для чего раньше нужно было использовать js библиотеку, теперь делается в несколько строк на css. В расширениях не работают Custom elements, зато работает shadow DOM, позволяющий воспользоваться всеми его возможностями.

Читайте также: