Как изменить разрешение браузера в bas

Обновлено: 07.07.2024

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

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

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

👉 Что такое расширение

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

Примеры того, что может сделать расширение:

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

В этой статье

Мы сделаем самое простое расширение для браузера Chrome, которое позволит запускать скрипт со снежинками на любом сайте, независимо от настроенной политики безопасности. Для этого воспользуемся официальным руководством Google по созданию расширений.

Манифест

В каждом расширении для браузера должен быть манифест — документ, в котором написано:

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

Манифест задаёт общие правила для всего расширения, поэтому манифест — единственный обязательный компонент. Можно обойтись без иконок и скриптов, но манифест обязательно должен быть.Каждый манифест хранится в файле manifest.json — создадим пустой файл с таким именем и напишем внутри такое:

«name»: «Запускаем снежинки на любом сайте»,
«description»: «Проект журнала Код»,
«version»: «1.0»,
«manifest_version»: 3
>

Первые две строчки — это название и подробное описание расширения. Третья отвечает за номер версии расширения, а последняя говорит браузеру, какая версия манифеста используется в описании. На момент выхода статьи в феврале 2021 года используется третья версия.

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

Мы попадаем на страницу, которая нам покажет все установленные расширения:

Чтобы добавить своё расширение, в правом верхнем углу включаем режим разработчика, а затем нажимаем «Загрузить распакованное расширение»:

Теперь выбираем папку, в которой лежит наш манифест:

Отлично, мы только что добавили в браузер новое расширение:

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

Чтобы было проще работать и тестировать расширение, закрепим его на панели браузера:

Иконки

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

Картинка в карточке расширения на странице настроек.
Иконка на панели браузера.

Чтобы не рисовать всё с нуля, скачаем папку с иконками из того же руководства Google и положим её в ту же папку, что и манифест:

Теперь добавим иконки в манифест. За картинку в карточке отвечает блок icon, а за иконку на панели — блок action. Разные размеры картинки нужны для того, чтобы на разных мониторах с любой плотностью пикселей иконки выглядели хорошо:

Сохраняем манифест, обновляем расширение на странице настроек и смотрим результат:

Настраиваем разрешения

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

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

Чтобы получить доступ к активной вкладке и к запуску скриптов, добавим в манифест такую строку:

"permissions": ["activeTab", "scripting"],

Показываем меню

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

Чтобы сделать всплывающее меню, добавим в манифест в раздел action такую строку:

Она означает, что при нажатии на иконку мы увидим рядом с ней мини-страничку, на которой что-то будет.Создадим в той же папке расширения файл popup.html и добавим в него такой код:

Чтобы браузер не ругался, что у нас нет файла popup.js , создадим пустой файл с таким названием и положим его в ту же папку:

Сохраняем манифест, обновляем его на странице настроек и видим, что у нашего расширения появилось меню с кнопкой:

Запускаем снежинки

Вся магия будет происходить в файле popup.js — откроем его и добавим такой код:

Последнее, что нам осталось сделать, — положить в функцию snowFall() полный код скрипта из проекта со снежинками и сохранить файл.

Проверка

В прошлый раз мы не смогли запустить скрипт на любой странице Яндекса — мешала политика безопасности. Теперь всё работает:

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

Разрешение экрана

Для определения ширины и высоты экрана пользователя используются свойства width и height объекта window.screen . Эти свойства доступны во всех браузерах.

Положение окна браузера

Мнения разработчиков в вопросе какое же свойство должно хранить положение окна относительно верхней левой точки экрана, видимо, разошлись.

В итоге мы получили две пары свойств: window.screenY , window.screenX и window.screenTop , window.screenLeft .

Первые два работают в браузерах Mozilla (например Firefox), вторая пара работает в Internet Explorer и Opera. В браузерах, основанных на движке WebKit (например Safari, Chrome), обе пары работают и их значения равны друг другу соответственно.

Но невозможно абсолютно кросс-браузерно определить положение окна, поскольку в разных браузерах отсчет идет до разных точек. Дело в том, что браузеры Internet Explorer и Opera в значениях screenTop и screenLeft хранят координаты левого верхнего угла документа, а не всего окна, поэтому даже при развертывании на весь экран их значения будут не нулевые.

Напротив, остальные браузеры начинают отсчет от верхней левой точки самого окна, как и ожидается для этих свойств. Стоит отметить, что в Firefox, при развертывании окна на весь экран, значения screenY и screenX могут быть отрицательными.

Странно, но в Opera значения screenY и screenX не undefined , однако я не могу понять, что они значат. При любых перемещениях окна эти значения не меняются и все время отрицательны. Если это не очередной глюк Opera, и я что-то упустил, отпишите, пожалуйста, в комментариях.

Положение окна браузера можно изменить двумя методами:

Размеры окна браузера

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

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

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

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

Во всех браузерах, кроме Internet Explorer, вы можете получить размер вьюпорта с помощью свойств window.innerWidth и window.innerHeight . Эти свойства всегда будут включать ширину, или высоту скроллбара, что в некоторых задачах неуместно.

Другим способом определения размеров вьюпорта могут служить свойства clientWidth и clientHeight объекта document.documentElement , или, другими словами, элемента html текущего документа.

Но это справедливо только для режима следования стандартам (CSS1Compat mode), поэтому приведенный выше код работает верно в этом документе.

Но если у страницы не будет указан doctype, то в некоторых браузерах свойства clientWidth и clientHeight объекта document.documentElement будут иметь значения ширины и высоты всего документа целиком, а не только видимой его части, в то время как document.body.clientWidth и document.body.clientHeight наоборот будут иметь значения размеров вьюпорта.

И учитывая то, что нет возможности узнать, что является размерами вьюпорта - свойства document.documentElement или document.body (поскольку они оба существуют, но смысл значений может быть разный), то получается, что кросс-браузерное определение размеров вьюпорта этим способом - невозможно, если документ отображается не в режиме следования стандартам.

Размеры окна браузера можно изменить двумя методами:

Скролл окна браузера

Сколлбар имеет несколько параметров: ширина, высота, значение прокрутки сверху, значение прокрутки слева.

Первые два параметра определяются свойствами scrollWidth и scrollHeight объекта document.documentElement . Это, опять же, справедливо только для режима следования стандартам.

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

Примечание на счет элементов я сделал не просто так: если какой-нибудь абсолютно позиционированный элемент будет "вылезать" за пределы body , то он "растянет" ширину/высоту скролла, но размеры document.body останутся прежними. Напротив, если размеры документа меньше, чем размеры вьюпорта - то значения scrollWidth и scrollHeight будут равны размерам документа, а не всего окна.

Стоит отметить, что как и в случае с размерами вьюпорта, в режиме "quirks mode" не всегда понятно, свойства какого элемента ( documentElement или body ) будут иметь нужные нам значения скролла.

Для того, чтобы определить на сколько пикселей прокручен документ, нужно обратиться к свойствам scrollTop и scrollLeft объекта document.documentElement , если браузер в режиме следования стандартам, или document.body , если браузер в режиме "quirks mode".

В браузерах на движке Mozilla (Firefox) или WebKit (chrome, safari) вы можете воспользоваться свойствами window.scrollY и window.scrollX для определения этих значений. Они будут равны scrollTop и scrollLeft соответственно.

Из скрипта вы можете управлять прокруткой страницы, пользуясь следующими методами (обратите внимание на очередность параметров):

Размеры документа и элементов

Одна из самых часто встречаемых задач - определение размера элемента.

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

Во всех браузерах, независимо от режима, вы можете получить размер элемента с помощью свойств offsetWidth и offsetHeight .

Для демонстрации, небольшой пример:

Точно так же можно определить размер всего документа, точнее размеры элемента body :

Положение элемента на странице

Одна из самых распространенных задач - определение абсолютной позиции элемента относительно левого верхнего угла документа.

Для определения позиции используются следующие свойства элемента:
offsetTop - отступ сверху, измеряется в пикселах относительно родительского элемента.

offsetLeft - отступ слева, измеряется в пикселах относительно родительского элемента.

offsetParent - ближайший родитель, относительно которого делается отсчет. Его значение будет null если текущий элемент невидим ( display: none ) или это корневой элемент документа.

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

Обычно, функция по определению абсолютной позиции выглядит следующим образом:

Таким способом можно считать позицию как статичных элементов ( position: static ), так и элементов с абсолютной позицией ( position: absolute ).

Заключение

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

Ожидал увидеть еще способ кросс-браузерного получения координат мыши

Взяв реализацию из jQuery и немного переделав её, получил:

Сам не разбирался еще, что происходит в этом большом выражении, возможно получится упростить

Много полезного, как раз то, что искал. Совсем не то, что ковыряться в Prototype, jQuery или Dojo. Спасибо!

Должен отметить, что функция получения координат элемента относительно верхнего левого угла документа даст неверный результат в IE6, если в цепочке offsetParent попадется элемент с position: relative.

Афтор зачод! Наитолковые статьи в рунете по ЯС! Сразу видно берется за дело с головой. Пишы исчо! Где я только не рылся за этим материалом а оно вот он чо! всё тут и на блюдечге!!
// З.Ы. Илья - ф основную книгу эту статью ИМХО этот каждому пригодится, а в этих блогах фиг нашол, ещё повезло что наткнулся =)

автор пишы исчо это точно:) спс за размеры окна браузера

На основе некоторых идей этой статьи создан основной материал сайта.

Спасибо за статью, Андрей!

Спасибо, всегда путаю, что x (икс) это "left" в переносе на слова.

Классная статья, спасибо!

Но подскажите, как эти полезные свойства применить собственно к элементам страницы: к примеру чтоб таблица, структурирующая GUI, масштабировалась относительно размеров видимой обл-ти? К ее атрибутам не применимы свойства :

Как узнать ширину и высоту элемента div до его отображения, это реально? Заранее спасибо

Для body везде получились различные значения высоты.

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

А что вы думаете по поводу такого кроссбраузерного определения размера вьюпорта:

в IE7 не сработал, выдал 0

Я понял. Для IE надо math.max получать. Спасибо

Работает корректно во всех браузерах!
Определяет размер рабочей области окна!
+ размер области документа (с учетом дивов с абсолютным позициониррованием)
+ работает и в ИЕ6 и в Сафари

Ой, чуть не забыл пояснить.
функция возвращает:
ww - window width
wh - window height
dw - document width
dh - document height
wsl - window scroll left
wst - window scroll top

Снова я, уж простите, доработанная функция:

Норм, хотя когда футер прижат надо под ie8 как минимум перерасчитывать все.

Надеюсь кому то помог! Потому как сам перерыл огромную кучу информации пока соорудил это.

Спасибо, но для тех, кто не подключал jQuery эту часть кода

надо заменить на

Спасибо. Долго искал эту информацию и нашел.

А я уже давно забил на попытки сооружать мегауниверсальные функции. Я следую таким правилам:
- верстаю в xhtml со следующим шаблоном пустого дока:

- если страница верстается php, то конечно же в нем шлется заголовок

- если что-то пошло не так, значит накосячил в html-коде и он уже в квирк-моде, открываю в Опере, жму "Соблюдены ли web-стандарты" и добиваюсь успешной проверки на W3C-валидаторе. По-ходу, практически не встречаю в инете страниц, проходящих валидацию. Эта страничка например тоже не проходит - куча досадных ошибок типа не указан тип скрипта, блок стилей вставлен там где нельзя, спаны закрываются, но не открывались перед этим, id дублирующиеся и т.д. Очень распространен подход, когда в js пишут что-то типа

(На этой странице такое есть) Ну а слеш в закрывающем теге кто экранировать будет!? Зачем делить слово SCRIPT на две части, если тут же ошибка потяжелее?

проходит валидацию, ессесно работает и ничего не нужно делить. Нужно просто не забыть указать тип скрипта, вставить в нем коменты-ограничители для XML-парсера и экранировать символы / и ' в строках.

А когда половина страниц валидируются, другие в квирке рисуются, то конечно начинается каша, геморой, бессонные ночи и т.д.

Итак, начинать следует со стандартизации своих проектов и исправления в них ошибок перед каждым релизом (мы ж не роботы, конечно забываем временами и коменты вставлять и < br > вместо < br /> на скорую руку пишем) - отправка страницы прямо из браузера на W3C всегда под рукой.

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

А так, провел небольшой тест на Опера 10.60 (пачка пердыдущих версий скорей всего то же выдаст), IE8 и FF 3.6.6. Создал корректную страницу с длинной таблицей на 100 строк, каждая строка имеет паддинг, прописанный в CSS, что в IE и в Фоксе приводит к увеличению высоты html (т.е. html становится длиннее body), аналогично и при div-верстке, т.е. лично таблицы тут ни при чем. Такая же фича наблюдается и в Опере ИНОГДА. Возможно в квирке - не проследил. В тестовом примере в Опере html не удлинился и не испортил страницу лишним белым куском на 700+ точек.

Результаты таковы (html - это document.documentElement):

1. Виевпорт во всех трех записан и в body, и в html корректно и с вычетом скролбара.

2. Во всех браузерах body.scrollTop равен 0 не зависимо от того, где мы находимся - вверху или внизу. В принципе, логично, у нас же html скролится, а не body.

2. Во всех браузерах offsetWidth и offsetHeight что у body, что у html равны размеру виевпорта.

3. Исходя из вышесказанного и увиденного полная высота именно body записана только в IE, в котором мы можем видеть, что body - 2471 px, а html - 3178 px; в Опере мы можем понадеяться, что лишней простыни после body не добавлено и следовательно его высота равна высоте html, а вот в Фоксе мы понятия не имеем, что body короче html и вообще короче ли или одинаковы.

Если нужно знать высоту именно body, то в ряде случаев можно попробовать запретить скрол html-у и выдать скролл body. Но в ряде случаев такой финт ушами не получится (если получится вообще, т.к. не пробовал еще). Например если у нас дизайн на 100% высоты видимого окна, тогда чтобы размер документа был на всю видимую высоту даже если контент коротковат для этого, нам придется в css выставить высоту 100% для html, body и контейнера, который содержит контент и например футер или бекграунд внизу. А в таком случае когда контента будет больше чем на высоту виевпорта указанные нами 100% для html будут делать его всегда не меньше чем body в нем,который тоже не меньше чем контент в нем. Т.е. фишка с коротким html и скролящимся в нем body - не возможна.

Вот так. Придется обходится высотой html или решать, как обойти проблему его удлинения.

Стоит отметить, что в IE8 (может и других версий) screen.width и window.screen.width возвращают не реальное разрешение экрана, а виртуальное (т.е. при изменении масштаба отображения меняется и разрешение, возвращаемое функциями, например, при помощи Ctrl+колесо мыши).

Доходчиво про ClientX/Y и почему Опера их нормально обрабатывает.

Говорю Спасибо за сайт.
Мне очень помог.

Спасибо за статью! Но нигде не могу найти, как можно (и можно ли вообще) определить расстояние нижней границы элемента до нижней границы окна браузера. Может, кто-нибудь подскажет. Заранее спасибо!

Всем привет, Великолепная фраза

Интересно конечно, но есть много вопросов по теме ИМХО. Давайте обсудим (мыло в подписи) или тут, если не затруднит

"Буду раЗ услышать замечания . "

помог scrollHeight снять с дива высоту динамически

var nextdata = 10; var controlXP = null;

Modalheightobj = (Winmedia.WindowData.scrollHeight - 450);

if ((EvenTop >= Modalheightobj) && (EvenTop > controlXP) && (controlXP < Modalheightobj))

case '415' : case '425' :

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

вот такой вариант покачто получился, но приходится обновлять страницу =( что не есть хорошо.

offetLeft - отступ слева, измеряется в пикселах относительно родительского элемента.

подскажите как можно проверить, до конца ли прокручена страница скроллом?

есть вопрос к хорошей статье, у меня не работает функция offsetHeight в chrome, показывает 0, если принудительно не определен размер diva, что делать? заранее благодарен
пс: хром с 15ой версии, привиос версии не проверял

я конечно догадывался, что проще пролезть в форточку, чем пройти через дверь, но все же вот самый простой способ узнать высоту вьюпорта в любом браузере!=)

абсолютно аналогично для ширины. что проще чем убрать скролы, обрубив все лишнее, что вылезает за окно браузера; измерить высоту и вернуть обратно?=)

коечто подправил. для динамической работы)

Вопрос исключительно для профессионалов. Я хочу узнать реальную ширину текста. Есть стиль для некоего div'а:

Соответственно забиваю текст в нужный div и использую свойство scrollWidth. Получаю реальную ширину, однако это свойство не дает дробной части, которая есть в firefox. отсюда вопрос, как найти эту потерянную дробную часть.

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

Не паримся, определяем размер страницы так используя jquery - $(document).height() - коротко, правильно, кросбраузерно.

Огромное спасибо!
Отличная и полезная статья.
Также - спасибо комментаторам, многие дельные.

не лучше ли сейчас вместо offsetWidth и offsetHeight. всегда использовать getBoundingClientRect?

Когда начал изучать программирование на Hexlet, сразу же переехал на Linux, без возможности возврата. Снёс Windows, поставил Ubuntu.

Само собой сразу возникло много вопросов, как всё это работает и куда тыкать. Точно помню, что в курсе «Основы командной строки. Операционные системы", было знакомство с Linux и дополнительные материалы по установке Ubuntu и операционным системам.

Курс мотивировал изучать и исследовать Linux дальше.

В общем и целом мне очень понравилась операционная система — она плавная и аккуратная. И в последствии конечно же захотелось попробовать как можно больше, найти свой дистрибутив и окружение рабочего стола. Чтобы испытать разные дистрибутивы с понравившимся мне DE, плюс для работы на удалёнке, мне нужен был Windows, поэтому я решил использовать VirtualBox.

Так вот, когда меняю разрешение экрана в настройках гостевой системы, нажимаю «Принять», но разрешение не меняется. А иногда необходимых параметров просто нет. Как-будто не установлены драйвера.

Решение

В общем вычитал, что необходимо поставить VBoxGuestAdditions - Гостевые дополнения. Это образ, который необходимо установить в привод виртуальной машины и запустить в гостевой системе. Данное дополнение предоставляет следующие возможности:

Интеграция указателя мыши (полезно, единый курсор для хоста и гостя)
Общие папки
Лучшая поддержка видео (как следствие произвольное изменение сторон экрана)
Бесшовные окна
Общие каналы связи основная/гостевая ОС
Синхронизация времени
Общий буфер обмена
Автоматические логины

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

Меня интересует конкретно ресайз окна. Сам образ VBoxGuestAdditions можно найти и скачать в сети, но, к сожалению, все источники не официальны. Но этого как оказалось и не требуется, опять же обратимся к докам, тут всё чётко сказано, что при установке лицензионного софта Oracle VirtualBox, VBoxGuestAdditions поставляется с установочным файлом.

Образ можно найти в основной системе:

Для Windows
- C:\Program files\Oracle\VirtualBox.
Для Mac OS X
- Файл находится в пакете приложений Oracle VM VirtualBox в папке Contents/MacOS.
Для Linux
- Обычно /opt/VirtualBox/

В моём случае образ находился по адресу /usr/share/virtualbox/VBoxGuestAdditions.iso
Чтобы проще было его использовать в будущем и каждый раз не вспоминать, где он находится, скопировал образ в домашний каталог.

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

Ставим на Windows

При монтировании CD система автозапуска предложит выбрать действие для обнаруженного диска
Выбираем «Запустить»
Если не предложит, нужно будет зайти в Проводник/Мой компьютер, открыть папку и запустить файл VBoxWindowsAdditions.exe
Согласиться с установкой, подружить с антивирусом (Поставить галочку «Доверять»).
Перезагрузить

Ставим на Linux

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

Из опробованных дистров, почему-то не сработало на Ubuntu 18.04 LXQT и Debian или OPENSuse XFCE, точно уже не помню.

Особенно полезно это для тех, кто любит верстать HTML-страницы и записывать разное видео с экрана.

Где может пригодиться быстрое изменение размеров окна браузера?

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

Вообще, для прочих браузеров похожие дополнения также существует (во всяком случае, для Firefox что-то подобное точно есть). Но я уже давно пользуюсь преимущественно Google Chrome, очень уж он шустрый и удобный. Всё-таки в Гугл знают, что делают.

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

Использование плагина Window Resizer в браузере Google Chrome

Установка обыкновенная, как и для всех подобных расширений (например, как для RDS bar). Сразу после его установки в правом верхнем углу появится такая иконка:

Window Resizer в Хроме

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

Переход к настройкам

Достаточно уже написал всего, пора смотреть видео (больше месяца назад записывал, хорошо, что вспомнил о нём :)).

Видеоурок по использованию этого дополнения:

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