Что будет если открыть 1000000 вкладок в браузере

Обновлено: 07.07.2024

Чтобы выделить несколько вкладок, нажимайте на них по очереди, удерживая клавишу 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 и кнопку мыши. ","lang":>,"extra_meta":[>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>],"title":"Вкладки - Яндекс.Браузер. Справка","canonical":"https://browser.yandex.ru/help/search-and-browse/tabs.html","productName":"Яндекс.Браузер","extra_js":[[,"mods":,"__func137":true,"tag":"script","bem":false,"attrs":,"__func67":true>],[,"mods":,"__func137":true,"tag":"script","bem":false,"attrs":,"__func67":true>],[,"mods":,"__func137":true,"tag":"script","bem":false,"attrs":,"__func67":true>]],"extra_css":[[],[,"mods":,"__func69":true,"__func68":true,"bem":false,"tag":"link","attrs":>],[,"mods":,"__func69":true,"__func68":true,"bem":false,"tag":"link","attrs":>]],"csp":<"script-src":[]>,"lang":"ru">>>'>

Действия с вкладками


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


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


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


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


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


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


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

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

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

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

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

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

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

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

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


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


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


Мы попробуем разобраться — как можно снизить нагрузку на серверное железо, обеспечив при этом максимальную производительность Web-приложения.

В разработке больших высоконагруженных проектов с огромным онлайном часто приходится думать, как снизить нагрузку на сервера, особенно при работе в webSocket'ами и динамически изменяемыми интерфейсами. К нам приходит 100500 пользователей и мы имеем 100500 открытых соединений по сокетам. А если каждый из них откроет по 2 вкладки — это уже *201000 соединений. А если пять?

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

Логическое поведение вкладок в браузере

  1. Открываем первую вкладку, помечаем ее, как Primary
  2. Запускаем проверку — если вкладка is_primary, то поднимаем WS-соединение
  3. Работаем.
  4. Открываем вторую вкладку (дублируем окно, вводим адрес вручную, открываем в новой вкладке, неважно)
  5. Из новой вкладки смотрим есть ли где-то Primary-вкладка. Если "да", то текущую помечаем Secondary и ждем, что будет происходить.
  6. Открываем еще 10 вкладок. И все ждут.
  7. В какой-то момент закрывается Primary-вкладка. Перед своей смертью она кричит всем о своей погибели. Все в шоке.
  8. И тут все вкладки пытаются мигом стать Primary. Реакция у всех разная (рандомная) и кто успел, того и тапки. Как только одна из вкладок сумела стать is_primary, она всем кричит о том, что место занято. После этого у себя поднимает заново WS-соединение. Работаем. Остальные ждут.
  9. И т.д. Падальщики ждут смерти Primary-вкладки, чтобы встать на ее место.

Техническая сторона вопроса

Для общения между вкладками мы будем использовать то, что связывает их в рамках одного домена — localStorage. Обращения к нему не затратны по ресурсам железа пользователя и отклик от них весьма быстр. Вокруг него и строится вся задумка.

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

Суть библиотеки в том, что она позволяет общаться евентами emit/on между вкладками используя для этого localStorage.

После этого нам нужен инструмент, позволяющий "лочить" (блокировать изменения) некий ключ в localStorage, не позволяя его никому изменять без необходимых прав. Для этого была написана маленькая библиотека "locableStorage", суть которой заключена в функции trySyncLock()

Теперь необходимо объединить все в единый механизм, который и позволит реализовать задуманное.

Теперь на пальцах объясню, что здесь происходит.

Шаг 1. Открытие первой вкладки

Данный пример реализует таймер, работающий в нескольких вкладах, но вычисления которого происходит лишь в одной. Код таймера можно заменить на что угодно, например, на инициализацию WS-соединения. при запуске сразу выполняется webSocketInit(), что в первой вкладке приведет нас к запуску счетчика (открытию сокета), а так же к запуску таймера startHeartBitInterval() обновления значения ключа "wsLU" в localStorage. Данный ключ отвечает за время создания и поддержания активности Primary-вкладки. Это ключевой элемент всей конструкции. Одновременно создается ключ "wsOpen", который отвечает за статус работы счетчика (или открытие WS-соединения) и переменная "primaryStatus", делающая текущую вкладку главной, становится истиной. Получение любого события из счетчика (WS-соединения) будет эмитится в Intercom, конструкцией:

Шаг 2. Открытие второй вкладки

Открытие второй, третьей и любой другой вкладки вызовет webSocketInit(), после чего в бой вступает ключ "wsLU" и "forceOpen". Если код:

… приведет к тому, что "forceOpen" станет true, то счетчик остановится и начнется заново, но этого не произойдет, т.к. diff не будет больше заданного значения, ибо ключ wsLU поддерживается актуальным Primary-вкладкой. Все Secondary-вкладки будут слушать события, которые им отдает Primary-вкладка через Intercom, конструкцией:

Шаг 3. Закрытие вкладки

Закрытие вкладок вызывает в современных браузерах событие onbeforeunload. Мы обрабатываем его следующим образом:

Нужно обратить внимание, что вызов всех методов произойдет лишь в Primary-вкладке. При закрытии любой Secondary-вкладки ничего со счетчиком происходить не будет. Нужно лишь убрать прослушку событий, чтобы освободить память. Но если мы закрыли Primary-вкладку, то мы поставим wsOpen в значение false и отпавим событие TAB_CLOSED. Все открытые табы тут же отреагируют на него:

Вот здесь и начинается магия. Функция.

… позволяет вызывать инициализацию сокета (в нашем случае счетчика) через разные промежутки времени, что дает возможность какой-то из Secondary-вкладок успеть стать Primary и записать инфу об этом в localStorage. Пошаманив в цифрами (1, 1000) можно добиться максимально быстрого отклика вкладок. Остальные Secondary-вкладки остаются слушать события и реагировать на них, ожидая смерти Primary.

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


Мы попробуем разобраться — как можно снизить нагрузку на серверное железо, обеспечив при этом максимальную производительность Web-приложения.

В разработке больших высоконагруженных проектов с огромным онлайном часто приходится думать, как снизить нагрузку на сервера, особенно при работе в webSocket'ами и динамически изменяемыми интерфейсами. К нам приходит 100500 пользователей и мы имеем 100500 открытых соединений по сокетам. А если каждый из них откроет по 2 вкладки — это уже *201000 соединений. А если пять?

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

Логическое поведение вкладок в браузере

  1. Открываем первую вкладку, помечаем ее, как Primary
  2. Запускаем проверку — если вкладка is_primary, то поднимаем WS-соединение
  3. Работаем.
  4. Открываем вторую вкладку (дублируем окно, вводим адрес вручную, открываем в новой вкладке, неважно)
  5. Из новой вкладки смотрим есть ли где-то Primary-вкладка. Если "да", то текущую помечаем Secondary и ждем, что будет происходить.
  6. Открываем еще 10 вкладок. И все ждут.
  7. В какой-то момент закрывается Primary-вкладка. Перед своей смертью она кричит всем о своей погибели. Все в шоке.
  8. И тут все вкладки пытаются мигом стать Primary. Реакция у всех разная (рандомная) и кто успел, того и тапки. Как только одна из вкладок сумела стать is_primary, она всем кричит о том, что место занято. После этого у себя поднимает заново WS-соединение. Работаем. Остальные ждут.
  9. И т.д. Падальщики ждут смерти Primary-вкладки, чтобы встать на ее место.

Техническая сторона вопроса

Для общения между вкладками мы будем использовать то, что связывает их в рамках одного домена — localStorage. Обращения к нему не затратны по ресурсам железа пользователя и отклик от них весьма быстр. Вокруг него и строится вся задумка.

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

Суть библиотеки в том, что она позволяет общаться евентами emit/on между вкладками используя для этого localStorage.

После этого нам нужен инструмент, позволяющий "лочить" (блокировать изменения) некий ключ в localStorage, не позволяя его никому изменять без необходимых прав. Для этого была написана маленькая библиотека "locableStorage", суть которой заключена в функции trySyncLock()

Теперь необходимо объединить все в единый механизм, который и позволит реализовать задуманное.

Теперь на пальцах объясню, что здесь происходит.

Шаг 1. Открытие первой вкладки

Данный пример реализует таймер, работающий в нескольких вкладах, но вычисления которого происходит лишь в одной. Код таймера можно заменить на что угодно, например, на инициализацию WS-соединения. при запуске сразу выполняется webSocketInit(), что в первой вкладке приведет нас к запуску счетчика (открытию сокета), а так же к запуску таймера startHeartBitInterval() обновления значения ключа "wsLU" в localStorage. Данный ключ отвечает за время создания и поддержания активности Primary-вкладки. Это ключевой элемент всей конструкции. Одновременно создается ключ "wsOpen", который отвечает за статус работы счетчика (или открытие WS-соединения) и переменная "primaryStatus", делающая текущую вкладку главной, становится истиной. Получение любого события из счетчика (WS-соединения) будет эмитится в Intercom, конструкцией:

Шаг 2. Открытие второй вкладки

Открытие второй, третьей и любой другой вкладки вызовет webSocketInit(), после чего в бой вступает ключ "wsLU" и "forceOpen". Если код:

… приведет к тому, что "forceOpen" станет true, то счетчик остановится и начнется заново, но этого не произойдет, т.к. diff не будет больше заданного значения, ибо ключ wsLU поддерживается актуальным Primary-вкладкой. Все Secondary-вкладки будут слушать события, которые им отдает Primary-вкладка через Intercom, конструкцией:

Шаг 3. Закрытие вкладки

Закрытие вкладок вызывает в современных браузерах событие onbeforeunload. Мы обрабатываем его следующим образом:

Нужно обратить внимание, что вызов всех методов произойдет лишь в Primary-вкладке. При закрытии любой Secondary-вкладки ничего со счетчиком происходить не будет. Нужно лишь убрать прослушку событий, чтобы освободить память. Но если мы закрыли Primary-вкладку, то мы поставим wsOpen в значение false и отпавим событие TAB_CLOSED. Все открытые табы тут же отреагируют на него:

Вот здесь и начинается магия. Функция.

… позволяет вызывать инициализацию сокета (в нашем случае счетчика) через разные промежутки времени, что дает возможность какой-то из Secondary-вкладок успеть стать Primary и записать инфу об этом в localStorage. Пошаманив в цифрами (1, 1000) можно добиться максимально быстрого отклика вкладок. Остальные Secondary-вкладки остаются слушать события и реагировать на них, ожидая смерти Primary.

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

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

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

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

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

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

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

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

Фундамент

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

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

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

Случай простого перехода (ответ 200)

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

Случай сложного перехода (3xx + клиентские перенаправления)

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

В Хроме есть два 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, позволяющий воспользоваться всеми его возможностями.

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

-Добавляет иконку в панель Хрома и при нажатии на нее выводит список всех окон с которых исходит звук.

-При нажатии на один или несколько пунктов из списка включает/выключает звук на вкладке.

Для любителей открыть 100500 вкладок в браузере. Расширение для хрома, Google Chrome, Звук, Утилиты

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

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

Для любителей открыть 100500 вкладок в браузере. Расширение для хрома, Google Chrome, Звук, Утилиты

Иллюстрация к комментарию

А не открывать х*йллиард вкладок не судьба? Или закрывать ненужные?

Какой хороший способ разрешить стороннему приложению доступ к микрофону

Какой хороший способ разрешить стороннему приложению доступ к микрофону Lays, Google Chrome, Кот, Толстые котики, Чипсы, YouTube, Микрофон, Расширение для хрома, Расширение, Субтитры, Картинка с текстом

Разделение звука в браузере

Возможно кому-то будет интересно.

Столкнулся с тем, что сын смотрит на ютубе мультики с hdmi,а я в это время хочу посмотреть какой нибудь видос в наушниках.

Нашёл решение для хрома.

Разделение звука в браузере Браузер, Звук, Расширение для хрома, Расширение, Полезное

Качаем, ставим, звук делится на каналы, у меня выглядит так:

Разделение звука в браузере Браузер, Звук, Расширение для хрома, Расширение, Полезное

Для тех, у кого звук не разделяется, просто разрешите ютубу доступ к микрофону в настройках сайта.


Ctrl+Z для YouTube в Chrome - отмена случайной перемотки

Добрый вечер, пикабушный люд!

Мне тут надоело случайно нажимать лишние кнопки во время просмотра видео на YouTube и долго искать момент, с которого я перескочил. Я решил набросать расширение для Google Chrome, которое бы позволяло отменять это вот всё.

Как это работает: вы перематываете видео более, чем на 10 секунд - момент времени до перемотки сохраняется в историю. В плеере появляется кнопка отмены. Отменили перемотку случайно? У меня для вас есть отмена отмены (redo)! История перемоток не ограничена. Также, есть клавиатурные сокращения:

Ctrl+Z - отменить перемотку.

Ctrl+Y - отменить отмену (вперёд по истории).

Расширение можно найти в Chrome Web Store.

А кривенький исходный ход есть у меня на GitHub.

Надеюсь, это сохранит нервы при просмотре длинных видео кому-то кроме меня.

Буду рад услышать пожелания и критику.


Несколько полезный расширений для Chrome

Mercury reader

Это расширение очень полезно для чтения объемных статей: оно отрезает всю рекламу и компонует страницу в удобный для чтения формат.

Несколько полезный расширений для Chrome Chrome extension, Google Chrome, Расширение для хрома, Браузер, Видео, Длиннопост

DuckDuckGo Privacy Essentials

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

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

Несколько полезный расширений для Chrome Chrome extension, Google Chrome, Расширение для хрома, Браузер, Видео, Длиннопост

Midnight lizard

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

В настройках можно отдельно выбрать цвет для каждого элемента страницы: фон, кнопки, текст, ссылки. Кроме того, можно настроить яркость и контрастность изображений на странице.

Несколько полезный расширений для Chrome Chrome extension, Google Chrome, Расширение для хрома, Браузер, Видео, Длиннопост

Full Page Screen Capture

В Mozilla Firefox есть предустановленная функция скриншота всей страницы, в Хроме такого решения пока нет. Зато есть расширение Full Page Screen Capture, которое исправляет этот недостаток.

Достаточно нажать на пиктограмму, и черный пакман начнет есть точки, автоматически прокручивая страницу. По завершении, можно сохранить в pdf или png.

Несколько полезный расширений для Chrome Chrome extension, Google Chrome, Расширение для хрома, Браузер, Видео, Длиннопост

uBlock Origin

Это один из лучших блокировщиков рекламы. И вот почему: у него открытый исходный код, он не потребляет много ресурсов, отлично блокирует рекламу, метрики и вредоносные сайты. В отличие от Adblock Plus, uBlock не поддерживает манифест о допустимой рекламе.

Несколько полезный расширений для Chrome Chrome extension, Google Chrome, Расширение для хрома, Браузер, Видео, Длиннопост

The great suspender

Про любовь хрома к поглощению оперативной памяти не шутил только ленивый. The Great Suspender решил разрушить этот стереотип. Расширение приостанавливает работу вкладок, которые вы не используете. Чтобы в пару кликов остановить все лишние вкладки - нажмите на пиктограмму расширения - приостановить все другие вкладки. Чтобы разбудить спящую страницу - просто нажмите на картинку в нужной вкладке.

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

Несколько полезный расширений для Chrome Chrome extension, Google Chrome, Расширение для хрома, Браузер, Видео, Длиннопост

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

Несколько полезный расширений для Chrome Chrome extension, Google Chrome, Расширение для хрома, Браузер, Видео, Длиннопост

Если после последнего обновления Chrome у вас начали глючить сайты.

. например не грузится видео YouTube, странные шрифты на Пикабу и тому подобное - это вызвано какими то изменениями безопасности Chrome 76 и проблемами в работе плагина FriGate.

Пока не вышло обновление для плагина, можно поступить так:

2) Ставите "Out of blink CORS" значение DISABLED

3) Кликаете "Relaunch now" и перезапускаете хром.

Вдруг кому будет полезно.

Мое расширение для Google Chrome - ClockTab (Обновление)

Привет Пикабу, выкладывал пост о расширении разрабатываемым мной: предыдущий пост. Прошло уже более 200 дней, и я выпустил много обновлений. Хочу поделиться, может теперь еще кому то понравиться)

Мое расширение для Google Chrome - ClockTab (Обновление) Google Chrome, Расширение для хрома, Веб-Разработка, Web, Разработка, Длиннопост

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

Мое расширение для Google Chrome - ClockTab (Обновление) Google Chrome, Расширение для хрома, Веб-Разработка, Web, Разработка, Длиннопост

Это самое главное изменение, остальные думаю не стоит описывать так детально. Ну и для новеньких напоследок, на вопрос, зачем я начал делать очередную новую вкладку. Самая главная причина корректное отображение без размытия "пиксельартных" гифок, ну и чисты интерфейс.

Мое расширение для Google Chrome - ClockTab (Обновление) Google Chrome, Расширение для хрома, Веб-Разработка, Web, Разработка, Длиннопост

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

Жду критики и предложении. Спасибо за внимание)

Мое расширение для Google Chrome - ClockTab

Мне никогда не нравилась новая вкладка в хроме. Решил поискать в магазине расширения позволяющие ее заменить, но они мне не понравились, поэтому решил сделать свое решение. Вот что у меня получилось.

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

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

Сразу говорю, что это не реклама, я никакого профита с него не получаю, только если опыт полученный во время разработки)

Мое расширение для Google Chrome - ClockTab Google Chrome, Расширение для хрома, Расширение, Веб-Разработка, Разработка, Web, Длиннопост

Вообще все закрутилось после вот этого поста. Решил сделать себе так же в визуальных закладках от яндекса, но разочаровало, что качество гифок довольно таки плохое, да и размер большой получается, что сильно тормозит работу браузера. Стал искать другие расширения заменяющие новую вкладку. Нашел несколько вариантов где можно поставить видео на фон, но все они были сильно перегружены (никому не нужные to do листы, которые никак нельзя убрать и все в таком духе). После этого решил сделать свой вариант с блэкджеком и плюхами возможностью установки как видео на фон, так и гифок(их можно установить без сглаживания, чтобы остались пиксельными).

Мое расширение для Google Chrome - ClockTab Google Chrome, Расширение для хрома, Расширение, Веб-Разработка, Разработка, Web, Длиннопост

Мое расширение для Google Chrome - ClockTab Google Chrome, Расширение для хрома, Расширение, Веб-Разработка, Разработка, Web, Длиннопост

Так же решил добавить несколько часов.

Мое расширение для Google Chrome - ClockTab Google Chrome, Расширение для хрома, Расширение, Веб-Разработка, Разработка, Web, Длиннопост

Мое расширение для Google Chrome - ClockTab Google Chrome, Расширение для хрома, Расширение, Веб-Разработка, Разработка, Web, Длиннопост

Если заинтересовало, вот ссылка на магазин.

Жду критики и предложении. Спасибо за внимание)

P.S. Извините за грамматику, по русскому в школе была тройка(

Майнинг в браузерах набирает обороты: в популярное расширение SafeBrowse добавили скрытый майнер

Начиная с прошлых выходных весь интернет активно обсуждает такое явление, как майнинг через браузеры. Хотя сам принцип вовсе не нов, до недавнего времени никто не пытался массово внедрять скрытые скрипты для майнинга прямо в код сайтов, а теперь исследователи ESET сообщили, что такую технику взяли на вооружение сразу несколько преступных групп. Но куда больше внимания к этой проблеме привлек торрент-трекер The Pirate Bay, который провел испытания и тоже встроил криптовалютный майнер на некоторые страницы сайта. Операторы трекера объяснили, что майнер может помочь ресурсу в будущем полностью избавиться от рекламы.

Многих ИБ-специалистов и пользователей уже обеспокоило происходящее, так как, похоже, мы наблюдаем зарождение нового тренда. К примеру, операторы The Pirate Bay воспользовались услугами сервиса Coinhive, который предлагает владельцам сайтов конвертировать мощности CPU посетителей в криптовалюту Monero. Дело в том, что Coinhive не первый и определенно не последний сервис такого рода, и теперь, когда о данном явлении заговорили массово, клиенты у таких ресурсов найдутся.

Майнинг в браузерах набирает обороты: в популярное расширение SafeBrowse добавили скрытый майнер Google Chrome, Расширение для хрома, Взлом, Криптовалюта, Длиннопост

Майнинг в браузерах набирает обороты: в популярное расширение SafeBrowse добавили скрытый майнер Google Chrome, Расширение для хрома, Взлом, Криптовалюта, Длиннопост

Майнинг в браузерах набирает обороты: в популярное расширение SafeBrowse добавили скрытый майнер Google Chrome, Расширение для хрома, Взлом, Криптовалюта, Длиннопост

В итоге страницу расширения в Web Store наводнили негативные отзывы.

Как оказалось, разработчики SafeBrowse вообще не внедряли майнер в код своего продукта. Представители команды разработки сообщили журналистам Bleeping Computer, что уже занимаются расследованием происшедшего и их, по всей видимости, взломали. Дело в том, что официально расширение не обновлялось несколько месяцев, поэтому откуда взялось вредоносное обновление, содержащее майнер, авторы SafeBrowse сейчас выясняют вместе со специалистами Google.

В целом блокировать браузерные майнеры не так трудно, для этого достаточно озаботиться отключением Javascript, установкой соответственных расширений для браузера (к примеру, NoScript и ScriptBlock), или воспользоваться блокировщиком рекламы, добавив URL майнера в черный список (не самый надежный вариант, ведь адрес может меняться).

Невзирая на существование вышеперечисленных методов, шотландский разработчик Рафаэль Керамидас (Rafael Keramidas) решил, что отдельное и простое расширение для браузера тоже не помешает и создал No Coin – блокировщик, который блокирует не рекламу, а именно майнинг через браузеры. Пока поддерживается только блокировка Coinhive, но Керамидас обещает следить за развитием событий и обновлять свой инструмент.

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