Как сделать портативный браузер
Решил написать небольшой мануал о том, как своими силами и буквально за 5 минут собрать простейшую портативную версию браузера Google Chrome. Портативные версии нужны очень часто, к примеру, ее очень удобно таскать с собой на флешке, где будут храниться и все ваши закладки, пароли, история и т.п. Замечу, что какие либо знания в области скриптов, языков программирования вам тут не понадобится, равно как и наличие какого либо специального программного обеспечения.
2. Создаем на рабочем столе папку "Portable Google Chrome". Вот в ней и будет жить наша/ваша портативная версия.
3. Теперь перемещаемся в папку "C:\Documents and Settings\[имя пользователя]\Local Settings\Application Data\Google\Chrome\Application\" (это для XP) или в "C:\Users\[имя пользователя]\AppData\Local\Google\Chrome\Application\" (это если у вас Vista).
4. Выделяем и копируем здесь все файлы и папки кроме папок с номерами версий браузера Chrome. А копируем мы все это в нашу папку "Portable Google Chrome" на рабочем столе. Скопировали? Идем дальше.
5. Помните выше я просил не копировать папки с номерами версий? Вот теперь заходим в папку под названием "1.0.154.48" и копируем все ее содержимое (кроме папки "Installer", т.к. установщик нам не нужен) в ту же папку "Portable Google Chrome". Сделали? Смотрим дальше.
6. Ищем в нашей папке "Portable Google Chrome" файл под названием chrome.exe. Нашли? Создаем для этого файла ярлык. Ярлык желательно назвать примерно так: "Запускай меня. ". Именно через этот ярлык вы будете запускать свою портативную версию.
7. Заходим в свойства этого ярлыка. В строке "Объект" через пробел дописываем следующую команду: --user-data-dir=Profil. ( Важно! Перед словом user ДВА дефиса. Текстовые редакторы калечат их поэтому вбивайте вручную ) Сохраняем и выходим.
8. А все =) наша портативка готова! Запускаем через ярлык и любуемся браузером Хром. Закрываем его и смотрим в нашу папку. там появилась папка "Profil". Именно в ней теперь будут хранится все ваши закладки и т.п.
Вроде все просто =) Текста много, но делается это все куда проще чем читается вся эта писанина. Если вам нет острой необходимости создавать именно свою портативку то качайте уже готовый Portable Google Chrome с нашего сайта. Его мы создаем немного посложнее. там нет ярлыка зато есть парочка красивых *.exe файла. =))
Задать свои вопросы можно на форуме.
Делаем наши браузеры портативными, на примере Mozilla Firefox, Opera и SRWare Iron (и Google Chrome)
В сегодняшнем материале я хотел бы затронуть важную тему портативных приложений, причём не абы каких, а одних из самых важных на практически любом ПК. Речь пойдёт о браузерах.
Если кто не знает, чем отличаются портативные версии программ от обычных, я постараюсь объяснить. С чего пользователь начинает работу с программой? Обычно - с её установки, в процессе инсталляции программа копирует свои файлы на жёсткий диск/SSD, прописывает себя в реестр, извлекает необходимые для своего функционирования DLL файлы на системный диск и так далее. Когда устанавливаешь сотни программ, реестр разрастается до неприличных размеров, ровно как и папка Windows, нам ведь это ни к чему, правда?
Поэтому разумнее пользоваться портативным софтом, который не требует установки. Ставится он просто - из архива распаковываются файлы в указанное пользователем место. Ещё один немаловажный плюс портативного софта - он может запускаться из любого места на ПК, с любого локального или сетевого диска или даже с мобильного/внешнего винчестера или же USB флешки.
Зачем делать портативными браузеры? Помимо причин, описанных выше, есть ещё одна - обычно браузеры хранят свои настройки на системном диске. Так как именно этот диск чаще всего страдает от неполадок/атак вирусов/перезаливки образа накопителя, то все настройки пользователя, закладки, сохранённые пароли и кукисы, если они не были вовремя забэкаплены (если не была создана их резервная копия), пропадут. Определённо, если человек работал с браузером несколько лет, а потом потерял накопленное богатство, он не обрадуется. Когда браузер портативный, все его "причиндалы" хранятся в его же папке, т.е. при переустановке Windows или раскатке образа диска посредством Acronis True Image или иной схожей программы, закладки и прочие настройки не потеряются. Как же сделать наши браузеры независимыми ни от чего, кроме собственной папки? Как перенести туда свои профили (закладки, пароли и прочее)? Я постараюсь дать ответы на эти вопросы на примере четырёх популярных браузеров: Mozilla Firefox, Opera и SRWare Iron на пару с Google Chrome.
Делаем наши браузеры портативными, на примере Mozilla Firefox, Opera и SRWare Iron (и Google Chrome)
Выводы
Преимущества портативных версий браузеров очевидны, но я на всякий случай напомню их ещё раз:
- профили пользователя (закладки, расширения, настройки, сохранённые пароли, кукисы и многое другое) хранятся в папке с браузером, а не на системном диске
- портативный браузер можно брать с собой на USB флешке или ином накопителе и использовать на любом ПК с Windows, браузер не оставит ни единого следа в системе, будь то локальные/сетевые диски или же реестр
- риск потери профиля пользователя при переустановке системы отсутствует (при условии что пользователь не хранит портативную версию браузера на системном диске)
- нет надобности в установке браузера, поэтому нет лишних записей в реестре и DLL файлов на системном диске
К слову, есть и минусы - портативные версии браузеров работают неспешно, если грузятся с медленных носителей, поэтому я рекомендую использовать их с USB 3.0 устройствами. При работе с обычных HDD/SSD этот минус нивелируется по понятным причинам.
Второй минус - обновление портативных программ. С этой процедурой могут возникнуть трудности, например не всем удобно при каждом обновлении браузера скачивать архив с новым вариантом обновившейся портативной программы и заменять старые файлы новыми. Не уверен, но возможно автоматическое обновление, свойственное тому же Firefox, не будет функционировать в портативной его версии.
Надеюсь, что данный материал помог Вам, камрады. Если я когда-нибудь решусь на переустановку Windows (моя ОС работает с 2009 года ), то я постараюсь использовать только портативный софт (конечно, это возможно не всегда, но когда такая возможность есть, нелогично ей не воспользоваться), ибо плюсы очевидны и перечисленные выше минусы для меня несущественны.
p.s. С 8 марта, дорогие девочки, девушки и женщины! Надеюсь, что этот материал будет полезен и вам.
Мобильность сегодня является неотъемлемой частью жизни современного человека. Вечное движение, быстрый сбор информации, работа на грани нервного срыва. И вот в какой-то момент вы остались совсем без нужных вам данных браузера, а под рукой только чужой персональный компьютер.
Портативный браузер
Это программа для просмотра веб-страниц с любого носителя когда угодно. С ее помощью вы сможете всегда иметь быстрый доступ ко всем нужным сайтам на всех устройствах, находящихся под рукой.
Интерфейс программы полностью идентичен окну устанавливаемого софта, функционал также прежний, не мусорят в системе, все настройки легко сохраняются и изменяются в случае необходимости. Это действительно полезная вещь при дальних поездках, срочных мероприятиях и во многих подобных случаях.
Создание портативной версии браузера
Это довольно актуальная тема. Раньше компьютеры были не везде. И особо никто не беспокоился по поводу портативных программ. Но сегодня в каждом доме и организации есть персональный компьютер и офисный компьютер, соответственно. В качестве носителя можно взять флешку или диск, что актуально во время презентаций, когда версия программы на местном ПК не поддерживает ваш документ, который был создан на новейшей версии.
При помощи специальных программ можно открыть необходимые файлы:
- VMware ThinApp;
- Cameyo;
- Spoon Studio;
- WinRar.
Описание создания портативного браузера на примере программы Cameyo:
- При запуске выбрать пункт Cameyo.
- Кликнуть по кнопке с иконкой фотоаппарата - Capture app locally. Возможно, что в новых версиях произошли изменения в интерфейсе. Имейте это в виду.
- После сканирования системы, выбрать установщик программы, совершить установку и пройти по пути: C:/Users/Serhiy/Documents/Cameyo apps. Там будет портативная версия программы.
Допустим, мы хотим создать портативный «Яндекс. Браузер», тогда спокойно берете любую из этих инструкций и пользуйтесь на здоровье.
Создание через WinRar. Обычно он есть у всех, только не забудьте купить лицензию:
- Выделить нужные файлы, опять же нужна установка, и кликнуть на команду «Добавить в архив».
- «Общие». Выберите метод сжатия файлов, чем больше сжатие, тем дольше будет открываться программа. Галочки - напротив параметров «Создать SFX-архив» и «Создать непрерывный архив». Не забудьте ввести другое название, если оно совпадет с оригинальным.
- Во вкладке «Дополнительно» выбрать «Параметры SFX». Укажите путь для распаковки - «Создать в текущей папке». В поле «Выполнить поле распаковки» введите имя основного файла с типом *.exe. «Режимы» - установить галочку около «Распаковать во временную папку». Режим вывода информации - «Скрыть все».
- Нажмите ОК и ждите завершения процесса.
Чтобы не создавать самому программу из-за отсутствия времени или незнания, что нужно делать, можно воспользоваться сайтами, где уже сразу выложены портативные версии, например легкий портативный браузер Opera.
Сайты для простого скачивания:
Преимущества и недостатки
Портативные версии имеют свои специфические стороны:
- Из-за особенности портативных версий, а если точнее, то вследствие сохранения не только настроек, но и паролей и логинов, может возникнуть неприятная ситуация, когда вы потеряете флешку или ее у вас украдут. Все данные на ней могут быть использованы против вас. Однако если зашифровать данные или взять на вооружение флеш-драйвера с биометрической защитой, то это может спасти вашу информацию, но только сами не забудьте данные для входа.
- При удалении программы с USB-носителя отсутствует возможность восстановления данных софта, так как файловая система на флешках очень специфична для программ восстановления удаленных файлов.
- В какой-то момент может слететь лицензия, а доступа к Интернету или софта для продления лицензии не окажется, то придется сносить файлы программы, а если пароли и логины (если речь о портативном браузере) находятся в закрытом состоянии, то есть когда эти данные не скопировать, то придется все снова устанавливать.
- Не стоит забывать, что количество циклов перезаписи у твердотельного носителя ограничено, а это значит, что носитель информации быстрее изнашивается. Приводит это к появлению исчерпавших резерв ячеек памяти и сокращению срока работы портативного накопителя. Что опять же приведет к потере данных с флешки и другого твердотельного накопителя.
Заключение
Как бы то ни было, но портативные версии программного обеспечения могут выручить в трудную минуту, как и портативный текстовый редактор, фоторедактор, видеоредактор, даже операционная система на основе ядра Linux, типа Ubuntu, Lubuntu или Kubuntu, так что не только портативная версия «Яндекс. Браузера» может использоваться в совершенно разных местах.
За последние несколько месяцев мы внесли множество улучшений в движок рендеринга Microsoft Edge (EdgeHTML), делая особый акцент на совместимости с современными браузерами и соответствии новым и грядущим стандартам. Помимо того, что EdgeHTML лежит в основе браузера Microsoft Edge, он также доступен для приложений на Universal Windows Platform (UWP) через элемент управления WebView. Сегодня мы хотим рассказать, как можно использовать WebView для создания своего браузера в Windows 10.
Используя стандартные веб-технологии, включая JavaScript, HTML и CSS, мы создали простое UWP-приложение, которое содержит внутри WebView и реализует базовую функциональность: навигацию и работу с избранным. Подобные приемы могут быть использованы в любом UWP-приложении для прозрачной интеграции веб-контента.
В основе нашего примера лежит мощный элемент управления WebView. Помимо комплексного набора API, данный элемент также позволяет преодолеть некоторые ограничения, присущие iframe, например, отслеживание фреймов (когда некоторый сайт меняет свое поведение в случае выполнения внутри iframe) и сложность определения загрузки документа. В дополнение x-ms-webview, — так WebView задается в HTML, — дает доступ к функциональности, не доступной в iframe, в частности, улучшенный доступ к локальному контенту и возможности делать снимки содержимого. Когда вы используете элемент управления WebView, вы получаете тот же самый движок, что и в Microsoft Edge.
Создаем браузер
Как было написано выше, браузер базируется на элементе управления WebView для HTML, а для создания и оживления пользовательского интерфейса в основном используется JavaScript. Проект создан в Visual Studio 2015 и представляет собой универсальное Windows-приложение на JavaScript.
Помимо JavaScript, мы также использовали немного HTML и CSS, а также некоторое количество строк кода на C++ для поддержки комбинаций клавиш, но это не требуется в простом случае.
Также мы пользуемся новыми возможностями нового ECMAScript 2015 (ES2015), поддерживаемыми в Chakra, JavaScript-движке, работающем в Microsoft Edge и элементе управления WebView. ES2015 позволил нам сократить количество генерируемого и шаблонного кода, тем самым существенно упростив реализацию идеи. Мы использовали следующие возможности ES2015 при создании приложения: Array.from(), Array.prototype.find(), arrow functions, method properties, const, for-of, let, Map, Object.assign(), Promises, property shorthands, Proxies, spread operator, String.prototype.includes(), String.prototype.startsWith(), Symbols, template strings и Unicode code point escapes.
Интерфейс пользователя
Пользовательский интерфейс включает следующие десять компонентов:
Дополнительная функциональность
Мы также реализовали несколько дополнительных возможностей, чтобы сделать работу с браузером еще более приятной:
Использование WebView
Введенный для JavaScript-приложений в Windows 8.1 элемент управления WebView, иногда также упоминаемый по имени тега x-ms-webview, позволяет хостить веб-контент внутри вашего Windows-приложения. Он доступен как для HTML, так и для XAML.Для начала работы достаточно разместить соответствующий элемент в коде страницы.
Разработка браузера
Мы будем использовать 15 различных API x-ms-webview. Все кроме двух из них управляют навигацией между страницами с некотором смысле. Давайте посмотрим, как можно использовать данные интерфейсы для создания различных элементов UI.
Управление кнопками назад и вперед
Когда вы нажимаете кнопку назад, браузер возвращает предыдущую страницу из истории браузера, если она доступна. Аналогично, когда вы нажимаете кнопку вперед, браузер возвращает последующую страницу из истории, если она также доступна. Для реализации подобной логики мы используем методы goBack() и goForward(), соответственно. Данные функции автоматически осуществят навигацию на корректную страницу из стека навигации.
После перехода на некоторую страницу, мы также обновляем текущее состояние кнопок, чтобы предотвратить «возможность» навигации, когда мы достигаем одного из концов стека навигации. Другими словами, мы отключаем кнопки навигации вперед или назад, проверяя свойства canGoBack или canGoForward на равенство false.
Управление кнопками обновления и остановки
Кнопки обновления и остановки слегка отличаются от остальных компонент панели навигации тем, что они используют одно и то же место в UI. Когда страница загружается, нажатие на кнопку остановит загрузку, спрячет «кольцо прогресса» и отобразит иконку обновления. И наоборот, когда страница загружена, нажатие на кнопку запустит обновление страницы и (в другой части кода) отобразит иконку остановки. Мы используем методы refresh() или stop() в зависимости от текущих условий.
Управление адресной строкой
В целом, реализация адресной строки может быть очень простой. Когда адрес URL введен в текстовое поле, нажатие Enter вызовет метод navigate(), используя содержимое input-элемента адресной строки в качестве параметра.
Однако современные браузеры пошли сильно дальше и внедряют дополнительную функциональность для удобства пользователей. Это добавляет некоторую сложность в реализации – и тут все зависит от сценариев, которые вы хотите поддержать.
Отображение favicon
Мы используем метод invokeScriptAsync(), чтобы вставить внутрь элемента управления WebView скрипт, который вернет строку в случае успеха. Наш скрипт ищет внутри страницы все элементы с link-теком, проверяет, если rel-атрибут содержит слово “icon”, и в случае совпадения возвращает значение “href”-атрибута назад в приложение.
Как упомянуто выше, мы используем в нашем коде возможности из новой спецификации ES2015. Вы могли заметить использование стрелочной нотации во многих примерах выше, а также ряд других возможностей. Вставляемый скрипт – это отличный пример улучшения кода, достигаемого за счет поддержки ES2015.
Поддержка комбинаций клавиш
Чтобы определить нажатие горячих клавиш для выполнения тех или иных действий, например, чтобы при нажатии комбинации Ctrl+L выделять адресную строку или по F11 переключаться в полноэкранный режим, нам нужно вставить еще один скрипт в WebView. Для этого мы используем метод invokeScriptAsync(), который мы уже упоминали выше. Однако, нам нужно как-то сообщать назад в слой приложения, когда те или иные клавиши нажаты.
С помощью метода addWebAllowedObject(), мы можем выставить для инжектируемого кода метод, через который можно будет передавать нажимаемые клавиши в слой приложения на JavaScript. Также важно понимать, что в Windows 10, элемент управления WebView выполняется в отдельном потоке. Нам нужно создать диспетчер, который будет передавать события в поток UI, чтобы слой приложения мог их обрабатывать.
Внешний вид браузера
Теперь, когда мы разобрались с ключевыми API WebView, давайте немного улучшим внешний вид нашего браузера.
Брендирование заголовка
Используя API Windows Runtime, мы можем поменять свойство ApplicationView.TitleBar, чтобы настроить цветовую палитру все компонентов заголовка приложения. В нашем браузере при загрузке приложения мы меняем цвета так, чтобы они соответствовали панели навигации. Мы также обновляем цвета при открытии меню, чтобы соответствовать фону меню. Каждый цвет нужно задавать как объект с RGBA свойствами. Для удобства мы создали вспомогательную функцию, генерирующую нужный формат из шестнадцатеричной строковой записи.
Прочие возможности
Индикация прогресса, а также меню настроек и избранного используют CSS transitions для анимации. Из меню настроек временные веб-данные можно очистить, используя метод clearTemporaryWebDataAsync(). А в меню избранного отображаемый список хранится в JSON-файле в корневой папке перемещаемого хранилища данных приложения.
Исходный код
Полный пример кода доступен в нашем репозитарии на GitHub. Вы можете также попробовать демонстрационный браузер, установив соответствующее приложение из Windows Store, или развернув приложение из проекта для Visual Studio.
Создайте свое приложение для Windows 10
С помощью WebView мы смогли создать простой браузер, используя веб-стандарты, буквально за день. Интересно, что вы сможете создать для Windows 10?
Читайте также: