Какие типы файлов можно создавать в браузере
При загрузке файлов и просмотре веб-сайтов вы встретитесь со многими форматами файлов. Большинство из них распространены и встречаются часто, другие менее понятны и требуют открытия или использования специальных программ. Здесь у нас есть список типов файлов, а также приложения, которые вам понадобятся для их работы на вашем компьютере.
- .AVI — Аудио / видео с чередованием
- .CSS — Каскадная таблица стилей
- .DOC — Документ Microsoft Word
- .EXE — Исполняемый файл
- .GIF — Формат обмена графикой
- .HTML — Файл языка разметки гипертекста
- .JPG / .JPEG — Файл Объединенной группы экспертов по фотографии
- .MIDI / .MID — Цифровой интерфейс для музыкальных инструментов
- .MP3 — Звуковой файл MPEG Layer 3
- .MPEG / .MPG — Файл группы экспертов по кинематографии
- .MOV / .QT — QuickTime MOVie
- .PDF — Формат переносимого документа
- .PNG — Переносимая сетевая графика
- .RAR — Архив RAR
- .TIFF — Формат файла изображений с тегами
- .TXT — Текстовый файл
- .WAV — Звуковой файл WAVe
- .ZIP — ZIP-архив
- Потоковое медиа
.AVI — Аудио / видео с чередованием
Стандартный формат видео, поддерживаемый на платформе Windows. Однако они не транслируются, поэтому вам необходимо загрузить весь файл, прежде чем вы сможете его просмотреть.
Для просмотра используйте Windows Media Player, KMPlayer, WinAmp или QuickTime.
.CSS — Каскадная таблица стилей
Файлы CSS — это некий инструмент для веб-мастеров, который заботится о том, как выглядят их веб-сайты. Файлы CSS можно создавать или редактировать в любом текстовом редакторе, например в Блокноте. Попробуйте также TopStyle Lite, он включает множество селекторов для удобного редактирования.
.DOC — Документ Microsoft Word
Microsoft Word — самая популярная программа для обработки текстов в мире. Для открытия документа используйте платный Microsoft Word. Вы также можете воспользоваться «программой просмотра Word» от Microsoft, которая является бесплатной. Также вы можете использовать бесплатный пакет Open Office, который чертовски хорош.
.EXE — Исполняемый файл
Если вы загрузите программу, которую необходимо установить, скорее всего, она будет в виде exe-файла. Просто дважды щелкните его, чтобы установить на свой компьютер. Остерегайтесь вирусов!
.GIF — Формат обмена графикой
Самый распространенный формат изображений в Интернете. Подходит для простых изображений. Данный формат поддерживается браузерами, а открыть его вы сможете, используя любой редактор изображений .
.HTML — Файл языка разметки гипертекста
Большинство страниц, которые вы создаете для веб-сайта, будут HTML-файлами. Что такое HTML?
.JPG / .JPEG — Файл Объединенной группы экспертов по фотографии
Еще один очень распространенный формат файлов изображений, в основном используемый для фотографий. Их может показать ваш браузер или редактор изображений .
.MIDI / .MID — Цифровой интерфейс для музыкальных инструментов
Midis — это музыкальные файлы, записанные на клавиатуре. Обычно они очень маленькие и часто отлично звучат, хотя во многом это зависит от вашей звуковой карты. Коллекции Midi — одно из немногих мест в мире, где можно найти классическую музыку из игр и фильмов, и за это я их приветствую. Для открытия воспользуйтесь WinAmp.
.MP3 — Звуковой файл MPEG Layer 3
MP3 — это формат звукового файла с высокой степенью сжатия, который позволяет загружать файлы в отличном качестве. Вызвал много горя для музыкальной индустрии, поскольку песни теперь достаточно малы, чтобы их можно было продавать в Интернете.
для воспроизведения можно воспользоваться WinAmp.
.MPEG / .MPG — Файл группы экспертов по кинематографии
Один из стандартов потокового просмотра фильмов. Фильмы можно воспроизвести с помощью WinAmp. А также вы можете использовать Windows Media Player от Microsoft.
.MOV / .QT — QuickTime MOVie
Формат QuickTime был разработан Apple и зародился на Mac, но перешел на ПК и пользуется огромной популярностью. Загрузите QuickTime Player для всех ваших движущихся изображений.
.PDF — Формат переносимого документа
Файлы Adobe Acrobat были изобретены для того, чтобы документы можно было передавать между компьютерами и платформами, и при этом они выглядели одинаково, чего нельзя сказать о файлах HTML.
Загрузите Acrobat Reader, для того чтобы открыть данный документ.
.PNG — Переносимая сетевая графика
PNG — это формат файла, предназначенный для использования вместо GIF. Обычно они немного меньше и обладают расширенными функциями, такими как прозрачность и поддержка 24-битного цвета. Вы можете просматривать его с помощью браузера.
.RAR — Архив RAR
Это сжатый формат файла, аналогичный популярному формату .zip. Он обладает расширенными функциями, такими как специальное сжатие мультимедиа, и имеет много преимуществ по сравнению с zip-файлами. Установите себе WinRAR, который позаботится о ваших архивах RAR, и он также может обрабатывать другие типы архивов.
.TIFF — Формат файла изображений с тегами
Для изображений действительно высокого качества используются файлы TIFF, но их нельзя просматривать в браузере. Редакторы для изображений .
.TXT — Текстовый файл
Самый простой из файлов, это просто текст. Несомненно, у вас уже есть стандартный блокнот, с помощью которого вы сможете открыть данный файл.
.WAV — Звуковой файл WAVe
Базовый звуковой файл без сжатия, обычно используемый для коротких звуковых образцов. Ваш компьютер сможет воспроизводить его с помощью стандартного аудиоплеера. Вы можете использовать WinAmp.
.ZIP — ZIP-архив
Сжатые файлы на самом деле представляют собой группы файлов других типов, которые хранятся вместе и немного сжаты. Многие загрузки будут состоять из zip-архивов, поэтому убедитесь, что есть чем их открыть. WinZip — лучшая условно-бесплатная программа для распаковки файлов и создания собственных архивов.
Потоковое медиа
За последние несколько лет было введено много новых форматов файлов, чтобы разрешить потоковую передачу. То есть файл начинает воспроизводиться, как только он начинает загружаться, и продолжает воспроизведение в процессе загрузки файла на ваш компьютер. Чрезвычайно успешный mp3 быстро стал самым популярным из этих форматов. Запатентованные форматы RealAudio и RealVideo от Real популярны среди мультимедийных сайтов, но это ужасные форматы, для воспроизведения которых требуется действительно ужасное программное обеспечение. Видео Mpeg, AVI и MP4 также очень популярны и могут воспроизводиться во многих программах, таких как Quicktime Player, VLC и Windows Media Player. Эти типы файлов наиболее важны при встраивании мультимедиа.
Эдди Османи, в статье «Цена JavaScript в 2018 году», озвучил одну ценную мысль: время, необходимое на обработку скрипта размером 200 Кб, и на обработку изображения, имеющего такой же размер, серьёзно различается. Дело в том, что при обработке кода браузеру нужно проделать более масштабную работу, чем при подготовке к использованию изображений. Вот что об этом говорится в статье:
JPEG-изображение нужно декодировать, растеризовать и вывести на экран. А JS-бандл надо, если рассматривать это упрощённо, загрузить, распарсить, скомпилировать, выполнить. На самом же деле движку приходится решать и другие задачи в процессе обработки JS-кода. В целом, стоит учитывать, что на обработку JavaScript-кода, размеры которого, в байтах, сопоставимы с размерами других материалов, тратится гораздо больше системных ресурсов.
Эти слова были написаны в 2018 году, но они до сих пор более чем справедливы. Правда, учитывая текущую обстановку, высказанная здесь мысль сегодня воспринимается немного иначе.
Принимая во внимание то, что в мире сейчас разразилась пандемия, я заметил, что моё интернет-соединение стало работать нестабильно. К нашему счастью, благодаря тому, что на страже благополучия интернета стоят прекрасные специалисты, не знающие усталости, большая часть Всемирной сети до сих пор работает нормально. Но в интернете, определённо, что-то происходит. Я пользуюсь соединением на 100 Мбит/с, но у меня возникает такое ощущение, будто я сижу на 3G-модеме.
Это вносит некоторые изменения в вышеприведённые рассуждения. Дело в том, что наши устройства могут парсить и компилировать JavaScript с той же скоростью, с которой они могли это делать пару недель назад. Но данные теперь путешествуют по сетям медленнее. В результате в настоящий момент крайне важно то, какой именно объём данных, представляющих некий ресурс, передаётся по сети при загрузке этого ресурса.
Но, что очень хорошо, оптимизировать изображения, используемые на веб-страницах, не так уж и сложно. В этом материале мы поговорим о том, как пользоваться современными графическими форматами вроде WebP. Изображения, сохранённые в таких форматах, часто оказываются в 2-3 раза меньше, чем те, для хранения которых используются всем известные и всеми любимые старые форматы (вроде JPG и PNG). Применение новых форматов может серьёзно изменить ситуацию в лучшую сторону.
Общий обзор современных графических форматов
Для улучшения работы с веб-графикой мы можем воспользоваться следующими тремя форматами:
- JPEG 2000 — формат, представляющий собой улучшенный вариант обычного JPG. Этот формат был разработан в 1997 году, преимущественно для использования в кинематографе и в медицине. Он позволяет сжимать изображения сильнее, чем JPEG, но с меньшим количеством артефактов.
- JPEG XR — это формат, родственный JPEG 2000. Он разработан компанией Microsoft в 2009 году.
- WebP — формат, созданный Google в 2010 году для веб. Основная цель его разработки заключалась в использовании продвинутых способов оптимизации изображений ради уменьшения размеров файлов. WebP поддерживает прозрачность и даже анимацию.
Много ли можно выиграть, пользуясь альтернативными графическими форматами?
Несколько месяцев назад я использовал в одном материале следующее изображение.
Изображение, использованное в одном материале
Я провёл некоторые эксперименты, рассмотрев использование форматов JPG и PNG для хранения исходного изображения. Я оптимизировал варианты изображения с использованием imagemin для того чтобы узнать о том, что мне может дать применение WebP вместо этих «ретро»-форматов.
Результаты оказались прямо-таки невероятными.
Особенности изображения | Оригинал | WebP |
---|---|---|
Файл в формате .jpg (из Photoshop) | 742 Кб | 61 Кб! (на 92% меньше) |
Оптимизированный файл в формате .jpg (после Imagemin) | 178 Кб | 58 Кб! (на 67% меньше) |
Файл в формате .jpg (из Photoshop) | 242 Кб | 50 Кб! (на 79% меньше) |
Оптимизированный файл в формате .jpg (после imagemin) | 151 Кб | 50 Кб! (на 67% меньше) |
Я проводил подобные эксперименты с множеством изображений. Практически всегда оказывалось, что WebP-файлы были на 30-70% меньше чем даже оптимизированные версии графических файлов других форматов.
Тут может возникнуть вопрос о том, как преобразование в WebP может повлиять на SVG-изображения. Я подобных экспериментов с SVG не проводил. SVG — это векторный формат. Это значит, что изображения в нём строятся на основе математических инструкций, а не на основе сведений о цвете отдельных пикселей. Преобразовать SVG-изображение в WebP — значит отказаться от возможностей по масштабированию SVG-изображений, что, полагаю, недопустимо. К тому же, я подозреваю, что подобное преобразование, в большинстве случаев, приведёт к увеличению размеров файлов.
Браузерная совместимость
Формат WebP пользуется поддержкой большинства браузеров.
Поддержка формата WebP браузерами
Хоть уровень поддержки этого формата и весьма высок, очень плохо то, что его не поддерживают Safari и Internet Explorer.
А вот — сведения о поддержке JPEG 2000.
Поддержка формата JPEG 2000 браузерами
Так, теперь Safari на нашей стороне, а вот Internet Explorer опять остался не у дел.
А как насчёт JPEG XR?
Поддержка формата JPEG XR браузерами
А тут отличился именно Internet Explorer. В результате, пользуясь этими тремя форматами, мы перекрываем все существующие браузеры (KaiOS Browser не поддерживает ни один из этих форматов, и я приношу ему свои извинения за то, что обхожу его вниманием, но я даже не знаю о том, что это за браузер).
Поговорим теперь о том, как выбирать разные форматы изображений, предназначенные для разных браузеров.
Элемент picture спешит на помощь
В HTML есть два элемента, предназначенных для вывода изображений. Первый можно сравнить с международной поп-звездой вроде Мадонны. Это — img . А второй — это как новая группа, известная лишь в узких кругах любителей музыки. Это — элемент picture .
Элемент picture появился в HTML гораздо позже, чем img . Главная цель этого нового элемента заключается в том, чтобы позволить разработчикам загружать различные графические ресурсы в зависимости от разрешения экрана, или в зависимости от того, поддерживает ли браузер некий графический формат.
Вот как выглядит HTML-код, в котором применяется элемент picture :
Элемент picture может включать в себя множество дочерних элементов source и один элемент img . Браузер последовательно парсит эти элементы, подбирая, на основе атрибута type (и media ), тот из них, которым сможет воспользоваться. Когда такой элемент будет найден, браузер выясняет адрес изображения, пользуясь атрибутом srcset , после чего выводит это изображение с помощью элемента img .
Атрибут srcset обладает гораздо большими возможностями, чем обычный src , но мы, к счастью, можем рассматривать его как аналог src . В целом, элементы source представляют собой нечто вроде настроек, соответствующих различным изображениям. В img попадает то изображение, которое лучше всего соответствует среде, в которой просматривают страницу.
В Chrome, например, после обработки вышеприведённой разметки, браузер придёт к чему-то, более или менее эквивалентному следующему коду:
Использование набора следующих друг за другом элементов source означает, что в каждом браузере подходящим окажется хотя бы один из них. Так, большинство браузеров используют webp-изображение, Safari загрузит jp2-изображение, IE — jxr-изображение.
Тут уместно вспомнить о том, что Internet Explorer не поддерживает элемент picture . Этот элемент — слишком нов для данного браузера. Но, несмотря на это, вышеприведённый фрагмент разметки и в IE сработает так, как ожидается.
Дело в том, что когда браузер натыкается на неизвестный ему элемент, он рассматривает его как элемент div . В результате при разборе нашего кода IE видит множество элементов div , а также — один тег , который содержит путь к jxr-изображению. А это, как оказывается, тот самый формат, который поддерживает Internet Explorer.
Упрощённая альтернатива
Вышеприведённый фрагмент кода чрезвычайно хорош тем, что позволяет пользоваться современными графическими форматами во всех актуальных браузерах. Но применение подобного кода основывается на предположении о существовании тех изображений, на которые в нём есть ссылки.
Если создавать такие изображения самостоятельно — придётся вложить в это много ручного труда. Если же генерировать их автоматически — это может значительно увеличить время сборки проекта. Обработка графики, как известно, становится весьма медленным процессом в том случае, если речь идёт о множестве изображений.
Лишь очень немногие посетители моего блога пользуются Internet Explorer (за последние 7 дней его попытались посмотреть лишь 3 человека с IE, что составило 0.02% трафика). Поэтому я решил воспользоваться упрощённым вариантом вышеописанного решения:
Я отдаю компактное webp-изображение тем браузерам, которые поддерживают этот формат (Chrome, Firefox, Edge), а браузерам, которые этого формат не поддерживают (IE, Safari), предлагаю наследие прошлого — jpeg-картинку.
С моей точки зрения это — пример прогрессивного улучшения. Проект остаётся работоспособным на старых браузерах, хотя загрузка изображений и занимает больше времени. Это — компромисс, который меня устраивает. (Правда, я надеюсь, что поддержка WebP скоро появится и в браузерах от Apple).
Проверка работоспособности решения
Инструменты разработчика всегда будут полагать, что в изображении содержится то, что изначально было записано в атрибут src тега img . Если проверить элемент, воспользовавшись вкладкой Elements , то можно увидеть, что на странице используется jpg-изображение.
Для того, чтобы проверить работоспособность всего этого, лучше всего, как мне кажется, щёлкнуть правой кнопкой мыши по картинке и выбрать в появившемся меню пункт Сохранить изображение как… В Chrome при выполнении этой команды система должна предложить сохранить файл с расширением .webp . А вот в Safari это будет jpeg-файл.
Для того чтобы узнать о том, какой именно графический файл был получен с сервера при загрузке страницы, можно обратиться к вкладке инструментов разработчика Network .
Преобразование графических файлов в формат WebP
Компания Google создала набор инструментов, направленный на работу с webp-файлами. Один из таких инструментов называется cwebp. Он позволяет преобразовывать в WebP графические файлы других форматов.
Если вы пользуетесь MacOS, установить этот набор инструментов можно с помощью Homebrew:
На других платформах, полагаю, нужно будет загрузить подходящий libwebp-пакет из репозитория.
После установки инструментов пользоваться ими можно так:
Рассмотрим эту команду:
- Флаг -q 80 позволяет задать качество изображения. Его значение изменяется от 1 (наихудшее качество) до 100 (наилучшее). Можете поэкспериментировать с различными значениями. Я выяснил, что лучше всего задавать тут что-то в районе 70-80.
- Имя файла cereal.jpg — это исходное изображение, которое нужно преобразовать в webp.
- Конструкция -o cereal.webp задаёт путь к выходному файлу.
Использование современных графических форматов в React-приложениях
Компонент — это прекрасный способ абстрагироваться от некоторых странностей элемента . Я пользуюсь для этого React-компонентами. На мой взгляд, это очень удобно. Вот как это выглядит:
Использование компонента ImgWithFallback очень похоже на работу с обычным тегом img :
Применение современных графических форматов со стилизованными компонентами
Если вы пользуетесь библиотеками styled-components или emotion , то вы, возможно, привыкли к особому оформлению изображений:
Очень хорошо то, что это работает и с нашим компонентом ImgWithFallback . Заключить его в соответствующую обёртку можно так же, как любой другой компонент:
Причина работоспособности этой конструкции заключается в том, как именно работает вспомогательная конструкция styled . Она генерирует класс и внедряет его в таблицу стилей документа. Затем имя сгенерированного класса передаётся компоненту в виде свойства:
Мы делегируем все свойства дочернему тегу , в результате к изображению применяются, как это обычно происходит, правильные стили. Всё работает именно так, как можно ожидать.
Использование пакета gatsby-image
Если вы применяете Gatsby, то знайте, что пакет gatsby-image , при его обычном использовании, уже задействует множество оптимизаций изображений. Сюда входит и преобразование изображений в формат webp (хотя, для этого нужно включить соответствующий параметр).
Пакет gatsby-image не претендует на то, чтобы стать заменой img . Его использование может оказаться не таким уж и простым, его внутренние механизмы могут приводить к появлению неожиданностей, осложняющих разработчику жизнь.
Если этот пакет вам интересен — взгляните на его документацию.
Минусы WebP
Единственным реальным недостатком webp, который мне удалось обнаружить, заключается в том, что с файлами этого формата очень неудобно работать.
Большинство настольных пакетов для работы с изображениями пока его не поддерживают. Например, я не могу открывать webp-файлы в Preview на MacOS. Это значит, скажем, что если я сохраню webp-изображение с веб-страницы, я не смогу просмотреть его на компьютере!
Преобразование webp-файлов в jpeg-файлы — процесс достаточно простой. В интернете можно найти много бесплатных сервисов, выполняющих подобное преобразование. Но, это, опять же, не так удобно, как работа с традиционными графическими форматами. Если ваш сайт предлагает пользователям загружать с него графические файлы — вы, возможно, решите, что переход на webp вам не нужен.
Итоги
Мне очень нравится то, что благодаря использованию webp удалось сократить размер изображений в моём блоге примерно на 50%. Помимо того, что в наше непростое время это улучшает впечатления пользователей от работы с ним, я ещё надеюсь на то, что это позволит мне немного сэкономить на оплате трафика.
Конечно, идея ручного преобразования графических файлов в формат webp выглядит весьма непрактичной. Я уже занимаюсь изучением вопроса о том, как автоматически конвертировать в этот формат jpg- и png-файлы. В идеале этот процесс должен происходить совершенно незаметно для разработчика, во время сборки сайта.
Создатели веб-проектов обычно не особенно интересуются особенностями применения новых графических форматов. Но я полагаю, что разбираться в этом вопросе весьма полезно. Ведь использование WebP — это, вероятно, самый простой способ сократить размеры веб-проекта на сотни килобайт.
В отличие от распространенной "клиент-серверной" архитектуры, для децентрализованных приложений характерно:
- Отсутствие необходимости хранить базу данных с логинами и паролями пользователя. Информация для доступа хранится исключительно у самих пользователей, а подтверждение их достоверности происходит на уровне протокола.
- Отсутствие необходимости использовать сервер. Логика приложения может выполняться в блокчейн-сети, где возможно и хранение необходимого количества данных.
Существует 2 относительно безопасных хранилища для ключей пользователей — хардверные кошельки и браузерные расширения. Хардверные кошельки в большинстве своем максимально безопасны, однако сложны в использовании и далеко не бесплатны, а вот браузерные расширения являются идеальным сочетанием безопасности и простоты в использовании, а еще могут быть совершенно бесплатны для конечных пользователей.
Учитывая все это, мы захотели сделать максимально безопасное расширение, которое упрощает разработку децентрализованных приложений, предоставляя простой API для работы с транзакциями и подписями.
Об этом опыте мы вам и расскажем ниже.
В статье будет пошаговая инструкция как написать браузерное расширение, с примерами кода и скриншотами. Весь код вы можете найти в репозитории. Каждый коммит логически соответствует разделу данной статьи.
Краткая история браузерных расширений
Браузерные расширения существуют достаточно давно. В Internet Explorer они появились еще в 1999-м году, в Firefox — в 2004-м. Тем не менее, очень долго не было единого стандарта для расширений.
Можно сказать, что он появился вместе с расширениями в четвертой версии Google Chrome. Конечно, никакой спецификации тогда не было, но именно API Chrome стал ее основой: завоевав большую часть рынка браузеров и имея встроенный магазин приложений, Chrome фактически задал стандарт для браузерных расширений.
У Mozilla был свой стандарт, но, видя популярность расширений для Chrome, компания решила сделать совместимый API. В 2015 году по инициативе Mozilla в рамках World Wide Web Consortium (W3C) была создана специальная группа для работы над спецификациями кроссбраузерных расширений.
За основу был взят уже существующий API расширений для Сhrome. Работа велась при поддержке Microsoft (Google в разработке стандарта участвовать отказался), и в результате появился черновик спецификации.
Формально спецификацию поддерживают Edge, Firefox и Opera (заметьте, что в этом списке отсутствует Chrome). Но на самом деле стандарт во многом совместим и с Chrome, так как фактически написан на основе его расширений. Подробнее о WebExtensions API можно прочитать здесь.
Структура расширения
Единственный файл, который обязательно нужен для расширения — манифест (manifest.json). Он же является “точкой входа” в расширение.
Манифест
По спецификации файл манифеста является валидным JSON файлом. Полное описание ключей манифеста с информацией о том, какие ключи в поддерживается в каком браузере, можно посмотреть здесь.
Ключи, которых нет в спецификации, “могут” быть проигнорированы (и Chrome, и Firefox пишут об ошибках, но расширения продолжают работать).
А я бы хотел обратить внимание на некоторые моменты.
- background — объект, который включает в себя следующие поля:
- scripts — массив скриптов, которые будут выполнены в background-контексте (поговорим об этом чуть позже);
- page — вместо скриптов, которые будут выполнятся в пустой странице, можно задать html с контентом. В этом случае поле script будет проигнорировано, а скрипты нужно будет вставить в страницу с контентом;
- persistent — бинарный флаг, eсли не указан, то браузер будет "убивать" background-процесс, когда посчитает, что он ничего не делает, и перезапускать при необходимости. В противном случае страница будет выгружена только при закрытии браузера. Не поддерживается в Firefox.
- matches — паттерн url, по которому определяется, будет включаться конкретный content script или нет.
- js — список скриптов которые будут загружены в данный матч;
- exclude_matches — исключает из поля match URL, которые удовлетворяют этому полю.
- default_popup — путь до HTML файла с popup-интерфейсом, может содержать CSS и JS.
Контекст выполнения
У расширения есть три контекста исполнения кода, то есть, приложение состоит из трех частей с разным уровнем доступа к API браузера.
Extension context
Здесь доступна большая часть API. В этом контексте "живут":
- Background page — “backend” часть расширения. Файл указывается в манифесте по ключу “background”.
- Popup page — popup страница, которая появляется при нажатии на иконку расширения. В манифесте browser_action -> default_popup .
- Custom page — страница расширения, "живущая" в отдельной вкладке вида chrome-extension:///customPage.html .
Этот контекст существует независимо от окон и вкладок браузера. Background page существует в единственном экземпляре и работает всегда (исключение — event page, когда background-скрипт запускается по событию и "умирает" после его выполнения). Popup page существует, когда открыто окно popup, а Custom page — пока открыта вкладка с ней. Доступа к другим вкладкам и их содержимому из этого контекста нет.
Content script context
Файл контент-скрипта запускается вместе с каждой вкладкой браузера. У него есть доступ к части API расширения и к DOM-дереву веб-страницы. Именно контент-скрипты отвечают за взаимодействие со страницей. Расширения, манипулирующие DOM-деревом, делают это в контент-скриптах – например, блокировщики рекламы или переводчики. Также контент-скрипт может общаться со страницей через стандартный postMessage .
Web page context
Это собственно сама веб-страница. К расширению она не имеет никакого отношения и доступа туда не имеет, кроме случаев, когда в манифесте явно не указан домен этой страницы (об этом — ниже).
Сервер или background:
Также есть событие onDisconnect и метод disconnect .
Схема приложения
Давайте сделаем браузерное расширение, которое хранит приватные ключи, предоставляет доступ к публичной информации (адрес, публичный ключ общается со страницей и позволяет сторонним приложениям запросить подпись транзакций.
Разработка приложения
Наше приложение должно как взаимодействовать с пользователем, так и предоставлять странице API для вызова методов (например, для подписи транзакций). Обойтись одним лишь contentscript не получится, так как у него есть доступ только к DOM, но не к JS страницы. Подключаться через runtime.connect мы не можем, потому что API нужен на всех доменах, а в манифесте можно указывать только конкретные. В итоге схема будет выглядеть так:
Будет еще один скрипт — inpage , который мы будем инжектить в страницу. Он будет выполняться в ее контексте и предоставлять API для работы с расширением.
Начало
Весь код браузерного расширения доступен на GitHub. В процессе описания будут ссылки на коммиты.
Начнем с манифеста:
Создаем пустые background.js, popup.js, inpage.js и contentscript.js. Добавляем popup.html — и наше приложение уже можно загрузить в Google Chrome и убедиться, что оно работает.
Чтобы убедиться в этом, можно взять код отсюда. Кроме того, что мы сделали, по ссылке настроена сборка проекта с помощью webpack. Чтобы добавить приложение в браузер, в chrome://extensions нужно выбрать load unpacked и папку с соответствующим расширением — в нашем случае dist.
Теперь наше расширение установлено и работает. Запуститьинструменты для разработчиков для разных контекстов можно следующим образом:
Доступ к консоли контент-скрипта осуществляется через консоль самой страницы, на которой он запущен.
Это браузерное расширение для работы с сетью Ethereum. В нем разные части приложения общаются через RPC при помощи библиотеки dnode. Она позволяет достаточно быстро и удобно организовать обмен, если в качестве транспорта ей предоставить nodejs stream (имеется в виду объект, реализующий тот же интерфейс):
Теперь мы создадим класс приложения. Оно будет создавать объекты API для popup и веб-страницы, а также создавать dnode для них:
Создадим инстанс приложения в background скрипте:
Так как dnode работает со стримами, а мы получаем порт, то необходим класс-адаптер. Он сделан при помощи библиотеки readable-stream, которая реализует nodejs-стримы в браузере:
Теперь создаем подключение в UI:
Затем мы создаем подключение в content script:
Так как API нам нужен не в контент-скрипте, а непосредственно на странице, мы делаем две вещи:
- Создаем два стрима. Один — в сторону страницы, поверх postMessage. Для этого мы используем вот этот пакет от создателей metamask. Второй стрим — к background поверх порта, полученного от runtime.connect . Пайпим их. Теперь у страницы будет стрим до бэкграунда.
- Инжектим скрипт в DOM. Выкачиваем скрипт (доступ к нему был разрешен в манифесте) и создаем тег script с его содержимым внутри:
Теперь создаем объект api в inpage и заводим его global:
У нас готов Remote Procedure Call (RPC) с отдельным API для страницы и UI. При подключении новой страницы к background мы можем это увидеть:
Пустой API и origin. На стороне страницы мы можем вызвать функцию hello вот так:
Работать с callback-функциями в современном JS — моветон, поэтому напишем небольшой хелпер для создания dnode, который позволяет передавать в объект API в utils.
Объекты API теперь будут выглядеть вот так:
Получение объекта от remote следующим образом:
А вызов функций возвращает промис:
Версия с асинхронными функциями доступна здесь.
В целом, подход с RPC и стримами кажется достаточно гибким: мы можем использовать steam multiplexing и создавать несколько разных API для разных задач. В принципе, dnode можно использовать где угодно, главное — обернуть транспорт в виде nodejs стрима.
Внутренний стейт и localStorage
Нам понадобится хранить внутренний стейт приложения — как минимум, ключи для подписи. Мы можем достаточно легко добавить стейт приложению и методы для его изменения в popup API:
В background обернем все в функцию и запишем объект приложения в window, чтобы можно было с ним работать из консоли:
Добавим из консоли UI несколько ключей и посмотрим, что получилось со стейтом:
Стейт нужно сделать персистентным, чтобы при перезапуске ключи не терялись.
Хранить будем в localStorage, перезаписывая при каждом изменении. Впоследствии доступ к нему также будет необходим для UI, и хочется также подписываться на изменения. Исходя из этого удобно будет сделать наблюдаемое хранилище (observable storage) и подписываться на его изменения.
Добавим инициализацию начального стейта и сделаем store observable:
"Под капотом" mobx заменил все поля store на proxy и перехватывает все обращения к ним. На эти обращения можно будет подписываться.
Далее я буду часто использовать термин “при изменении”, хотя это не совсем корректно. Mobx отслеживает именно доступ к полям. Используются геттеры и сеттеры прокси-объектов, которые создает библиотека.
Декораторы action служат двум целям:
- В строгом режиме с флагом enforceActions mobx запрещает менять стейт напрямую. Хорошим тоном считается работа именно в строгом режиме.
- Даже если функция меняет стейт несколько раз – например, мы меняем несколько полей в несколько строк кода, — обсерверы оповещаются только по ее завершении. Это особенно важно для фронтенда, где лишние обновления стейта приводят к ненужному рендеру элементов. В нашем случае ни первое, ни второе особо не актуально, однако мы будем следовать лучшим практикам. Декораторы принято вешать на все функции, которые меняют стейт наблюдаемых полей.
В background добавим инициализацию и сохранение стейта в localStorage:
Интересна здесь функция reaction. У нее два аргумента:
- Селектор данных.
- Обработчик, который будет вызван с этими данными каждый раз, когда они изменяются.
В отличие от redux, где мы явно получаем стейт в качестве аргумента, mobx запоминает к каким именно observable мы обращаемся внутри селектора, и только при их изменении вызывает обработчик.
Важно понимать, как именно mobx решает, на какие observable мы подписываемся. Если бы в коде я написал селектор вот так () => app.store , то reaction не будет вызван никогда, так как сам по себе хранилище не является наблюдаемым, таковыми являются только его поля.
Если бы я написал вот так () => app.store.keys , то опять ничего не произошло бы, так как при добавлении/удалении элементов массива ссылка на него меняться не будет.
Mobx в первый раз выполняет функцию селектора и следит только за теми observable, к которым мы получали доступ. Сделано это через геттеры прокси. Поэтому здесь использована встроенная функция toJS . Она возвращает новый объект, в котором все прокси заменены на оригинальные поля. В процессе выполнения она читает все поля объекта – следовательно, срабатывают геттеры.
В консоли popup снова добавим несколько ключей. На этот раз они попали еще и в localStorage:
При перезагрузке background-страницы информация остается на месте.
Весь код приложения до этого момента можно посмотреть здесь.
Безопасное хранение приватных ключей
Хранить приватные ключи в открытом виде небезопасно: всегда есть вероятность того, что вас взломают, получат доступ к вашему компьютеру и так далее. Поэтому в localStorage мы будем хранить ключи в зашифрованном паролем виде.
Для большей безопасности добавим приложению стейт locked, в котором доступа к ключам не будет совсем. Мы будем автоматически переводить расширение в стейт locked по таймауту.
Mobx позволяет хранить только минимальный набор данных, а остальное автоматически рассчитывать на их основе. Это — так называемые computed properties. Их можно сравнить с view в базах данных:
Теперь мы храним только шифрованные ключи и пароль. Все остальное вычисляется. Перевод в стейт locked мы делаем с помощью удаления пароля из стейта. В публичном API появился метод для инициализации хранилища.
У браузера есть idle API, через который можно подписаться на событие — изменения стейта. Стейт, соответственно, может быть idle , active и locked . Для idle можно настроить таймаут, а locked устанавливается, когда блокируется сама ОС. Также мы поменяем селектор для сохранения в localStorage:
Код до этого шага находится здесь.
Транзакции
Итак, мы подошли к самому главному: созданию и подписи транзакций в блокчейне. Мы будем использовать блокчейн WAVES и библиотеку waves-transactions.
Если не сделать observable вручную, то mobx сделает это сам при добавлении в массив messages. Однако он создаст новый объект, на который у нас не будет ссылки, а она понадобится для следующего шага.
Approve и reject мы выносим в API UI, newMessage — в API страницы:
Теперь попробуем подписать транзакцию расширением:
В целом все готово, осталось добавить простой UI.
Интерфейсу нужен доступ к стейту приложения. На стороне UI мы сделаем observable стейт и добавим в API функцию, которая будет этот стейт менять. Добавим observable в объект API, полученный от background:
В конце мы запускаем рендер интерфейса приложения. Это react-приложение. Background-объект просто передается при помощи props. Правильно, конечно, сделать отдельный сервис для методов и store для стейта, но в рамках данной статьи этого достаточно:
С помощью mobx очень просто запускать рендер при изменении данных. Мы просто вешаем декоратор observer из пакета mobx-react на компонент, и рендер будет автоматически вызываться при изменении любых observable, на которые ссылается компонент. Не нужно никаких mapStateToProps или connect, как в redux. Все работает сразу "из коробки":
Остальные компоненты можно посмотреть в коде в папке UI.
Теперь в классе приложения необходимо сделать селектор стейта для UI и при его изменении оповещать UI. Для этого добавим метод getState и reaction , вызывающий remote.updateState :
При получении объекта remote создается reaction на изменение стейта, который вызывает функцию на стороне UI.
Итак, приложение готово. Веб-страницы могут запрашивать подпись транзакций:
Код доступен по этой ссылке.
Заключение
Если вы дочитали статью до конца, но у вас остались вопросы, вы можете задать их в репозитории с расширением. Там же вы найдете коммиты под каждый обозначенный шаг.
А если вам интересно посмотреть код настоящего расширения, то вы сможете найти это здесь.
Веб-страницы или другие HTML документы, сохраненные в неправильном формате, например, в txt, легко перевести в формат html с помощью стандартной программы Блокнот. Допустим, у вас на хостинге не правильно сохранен один из HTML документов, его необходимо перевести из txt формата в формат html.
Конвертирование txt в html
Скачайте документ в неправильном формате себе на компьютер. Откройте его с помощью программы блокнот. Обычно для документов формата txt текстовый редактор Блокнот является программой по умолчанию, то есть при двойном щелке ЛКМ по файлу, он откроется в Блокноте. Если на вашем компьютере документы txt открываются с помощью другой программы (Word или другие), то следует запустить Блокнот и открыть файл с помощью команды Файл > Открыть или нажатием сочетания клавиш CTRL + O :
Рисунок 1.Команда открыть файл в программе Блокнот
Теперь необходимо пересохранить исходный документ в формате веб-страниц — html. Для этого выполняем команду Файл > Сохранить как:
Рисунок 2. Команда «Сохранить как» в программе Блокнот
Откроется окно сохранения файлов программы блокнот:
Рисунок 3. Сохранение файла в программе Блокнот
Здесь необходимо выбрать место, куда сохранить веб-документ, чтобы потом его отыскать. И задать нашему его текстовому файлу формат html. Для этого задаем такие параметры в полях которые я подчеркнул:
- Имя файла : вместо *.txt указываем название-файла.html (например, index.html, about.html и т.д.);
- Тип файла : Все файлы;
- Кодировка : вместо ANSI указываем UTF-8.
Можно сохранять файл, нажимаем по кнопке Сохранить. Для проверки можно открыть файл в любом браузере, если браузер правильно отображает все теги и символы, значит мы сделали все правильно.
Вот так легко можно перевести формат txt в html.
В статье разберем как изменить расширение файла в Windows, расскажем о популярных расширениях файлов и мерах предосторожности при изменение расширения файла. Рассмотрим процесс изменения расширений на примерах Windows 7 и Windows 10. На остальных версиях операционных систем процесс будет похожим.
Расширение файла — это символы после названия файла (например: название.txt), определяющие действия, которые должен совершить компьютер для запуска объекта.
Простым языком, компьютер использует символы после точки, чтобы выбрать какую программу использовать для запуска файла.
Популярные виды расширений
.txt — текстовой файл, который открывается программой «блокнот»;
.jpg,. png, .jpg — изображения и фото;
.pdf, .docx, .xls, .epub — электронные документы;
.mp3 — аудио;
.avi, .amc, .mpeg4 — видео;
.html, .php — веб файлы;
.exe — исполняемый файл (инсталлятор виндовс );
.rar, .zip — электронные архивы.Иногда возникает потребность изменить расширение файла в windows. Для разных операционных систем алгоритм изменения расширения будет отличаться.
Зачем менять расширение файла
Причины, по которым может понадобиться изменить расширение файла, бывают разные. Например, чтобы подтвердить права на сайт в Яндекс.Вебмастер, нужно создать текстовой файл и прописать в нём определенный набор символов. Но Яндекс может увидеть файл только в формате .html. Соответственно, нужно изменить расширение с .txt на .html.
Потребность поменять тип файла возникает довольно редко, так как изначально большинство программ правильно сопоставимы с открываемыми файлами.
Меры предосторожности при изменении типа файла
Изменяя расширение файла, есть риск повредить его. Прежде чем производить нижеописанные манипуляции, рекомендую скопировать исходник и производить действия с копией.
Если вы случайно сменили расширение и файл теперь недоступен, следует проделать обратную процедуру и все вернется в исходное состояние.
Меняем расширение файлов на Виндовс 7
По умолчанию расширение скрыто от пользователя, чтобы он по ошибке не поменял параметры файлов важных системных программ. Поэтому начать нужно с включения этой опции.
В виндовс 7 это делается следующим образом:
Открываем «проводник» или любую другую папку на рабочем столе. Находим кнопку «упорядочить».Из выпавшего меню выбираем «пaрaметры пaпок и пoиска»
Чтобы сохранить изменения, нажимаем «применить».Теперь видно, что после названия дописывается точка и символы рacширения фaйла.
Для того чтобы поменять формат файла, нужно стереть то, что написано после точки и дописать нужное вам расширение.Находим файл, который надо изменить, щелкаем правой кнопкой мыши. В выпадающем списке жмём «переименовать».
Приступаем к изменению расширения файла:
После того как вы поменяли значение файла, нажимаем «Ввод» и соглашаемся с всплывающим окном, то есть кликаем мышкой по кнопке «Да».Как изменить расширение файла в windows 10
Алгоритм в принципе не сильно отличается от Виндовс 7. Однако, есть нюансы. Поэтому для наглядности я записал видео: как изменять расширения файлов в windows 10
HTML документ — это обычный текстовой файл c расширением .html , который содержит HTML-код. HTML документ иначе ещё называют HTML файлом .
Чтобы из обычного текстового файла (с расширением .txt ) сделать HTML документ, нужно сменить расширение с .txt на .html .
Открыть файл, сохраненный с расширением .html , для просмотра в браузере можно двумя способами:
- Кликнуть по нему два раза левой кнопкой мыши, в этом случае HTML документ откроется в том браузере, который выбран по умолчанию.
- Кликнуть по нему ПКМ → навести курсор на открыть с помощью. → выбрать нужный браузер.
При получении HTML документа браузер будет отображать его в виде веб-страницы ( веб-страница — это то, что отображается в окне браузера). Рассмотрим это на примере. Создадим HTML-документ и расположим в нём следующий HTML-код:
Теперь откроем HTML файл браузером. В окне браузера мы не увидим отображения самого HTML-кода, потому что он будут интерпретирован для отображения содержимого страницы в нужном виде. Результат данного кода в окне браузера:
Чтобы отредактировать код HTML документа, нажимаем на него ПКМ → наводим курсор на открыть с помощью. → и выбираем нужный редактор, если в списке нет нужного редактора, жмём Выбрать программу. и выбираем нужный редактор. Некоторые редакторы (для примера возьмем notepad++) можно выбрать прямо в контекстном меню, нажав по документу ПКМ и выбрав сверху Edit with Notepad++ (редактировать с помощью notepad++).
В этом уроке я расскажу, что такое расширение и какие бывают типы файлов в Windows. А в конце дам таблицу наиболее популярных форматов с подробным описанием.
Что такое формат и расширение
Формат или тип — это информация о файле, по которой система понимает, какого он вида и в какой программе его открыть. Для этого у каждого файла есть расширение .
Расширение — это несколько английских букв и/или цифр. Находятся они сразу после названия и разделяются точкой.
На картинке показан файл с расширением mp3. Про него компьютер знает, что это аудио и открывать его нужно в программе-проигрывателе. Значок, которым он отмечен – это иконка программы запуска.
Есть текстовые файлы - они открываются в программе для работы с текстом. Есть музыкальные и видео - они запускаются в проигрывателях. Есть графические (фото, картинки) – они открываются в программах для просмотра изображений. И еще много других типов. У каждого из них свой значок, точнее, значок приложения, в котором он будет открыт.
Если у файла вместо иконки белый лист, значит, компьютер не подобрал для него подходящую программу.
При его открытии появится окно с выбором приложения. Компьютер предлагает пользователю самостоятельно указать программу для запуска.
На заметку . В Windows есть разнообразные системные иконки:
Как правило, такими значками отмечены файлы, которые нужны для корректной работы компьютера. Их много в системном локальном диске. Такие объекты нельзя удалять или переименовывать, иначе приложения, за которые они отвечают, могут работать со сбоями.
Как узнать расширение
Система компьютера может быть настроена таким образом, что расширения у всех файлов показаны.
Или наоборот: так, что показаны только имена, без форматов.
Эту настройку можно изменить.
В Windows 10 открыть любую папку, нажать на пункт «Вид» вверху и поставить или убрать птичку с пункта «Расширения имен файлов».
В Windows 7 чуть сложнее:
Или так: Пуск → Панель управления → Оформление и персонализация → Параметры папок.
Если расширения нет
Если у объекта нет расширения, компьютер не может подобрать программу для его запуска. Это происходит, когда пользователь случайно или намеренно удаляет расширение из имени. А еще может быть из-за вируса.
Решить эту проблему легко, если знаешь тип объекта. Например, знаешь, что это фотография. Тогда нужно просто переименовать файл, добавить после названия точку и указать формат. Вот как это сделать:
- Настроить компьютер на показ расширений (см. выше).
- Правой кнопкой мыши по файлу – Переименовать.
- Сразу после названия напечатать точку и расширение.
- Нажать Enter.
Наиболее популярные форматы:
- Документы – doc, docx или pdf
- Таблицы – xls, xlsx
- Архивы – zip или rar
- Фотографии – jpg или png
- Музыка – mp3 или wav
- Видео – mp4 или avi
Другие типы можно посмотреть в конце урока в таблице.
Если формат неизвестен . Чтобы открыть файл, необязательно вручную прописывать расширение. Можно просто запустить его и в окошке выбрать подходящую программу. Если вы правильно ее укажите, объект откроется.
Или щелкните по нему правой кнопкой мыши, выберите «Открыть с помощью…». Или «Открыть с помощью» → «Выбрать другое приложение».
Как изменить расширение
Изменить расширение можно через переименование:
- Настроить компьютер на показ расширений (см. выше).
- Щелкнуть правой кнопкой мыши по файлу – Переименовать.
- Стереть старое расширение после точки и напечатать новое.
- Нажать Enter.
Появится окошко, в котором система предупредит о последствиях. Ведь если вы неправильно укажите формат, файл может не открыться. Например, у вас документ с расширением doc, а вы меняете его на pdf.
После нажатия на кнопку «Да» новый тип будет назначен. А также добавится значок программы для его запуска. Но обычно после такой ручной смены расширения файл перестает открываться. Потому что он технически остался тем же, что и был.
Вернуть старое расширение можно таким же образом – через переименование. Или щелкнув правой кнопкой мыши по пустому месту и выбрав пункт «Отменить переименование».
Так как же правильно изменить расширение? Для этого нужно сделать конвертацию – преобразование в другой формат. Это делается через специальные программы или онлайн-сервисы.
Вбиваем в поисковик Яндекс или Гугл запрос «из … в …». Например, из word в pdf .
В моем случае Яндекс предложил несколько онлайн сервисов. Все они интуитивно понятны: загружаем документ на сайт → сервис преобразовывает его в pdf → скачиваем результат на компьютер.
Но в некоторых случаях лучше использовать программу. Например, если нужно конвертировать видео большого размера.
Как назначить программу запуска
Каждому типу файла система назначает приложение для его запуска. И помечает иконкой этой программы. Например, текстовые (txt) будут по умолчанию открыты в Блокноте. А музыкальные (mp3) – в проигрывателе Windows Media.
Когда вместо значка показан белый лист, значит, система не понимает, в какой программе открыть объект. И при его запуске предлагает самостоятельно выбрать приложение из тех, что установлены на компьютере.
Если поставить птичку на пункт «Всегда использовать это приложение», то в последующем все объекты данного типа будут запускаться в выбранной программе.
Но не всегда нужная программа установлена на компьютере. Бывает, ее просто нет - тогда файл открыть никак не получится. В этом случае нужно установить подходящее приложение.
Для каждого популярного формата есть своя бесплатная программа:
- PDF – Foxit Reader (оф.сайт)
- ZIP и RAR – 7-Zip (оф.сайт)
- DOC, DOCX, XLS, XLSX и другие документы MS Office – OpenOffice (оф.сайт)
- MP3, MP4, MKV и другие аудио/видео – Media Player Classic (оф.сайт)
Другие форматы и программы для них смотрите в таблице.
На заметку . Также белый лист вместо значка приложения показывается на файлах, у которых нет расширения. Об этом я рассказывал выше в статье.
Выбор программы по умолчанию
А бывает, объекты определенного типа открываются в неподходящей программе. Тогда можно указать другое приложение для их запуска.
1 . Щелкните правой кнопкой мыши по файлу. Выберите «Открыть с помощью…» или «Открыть с помощью» → «Выбрать другое приложение».
2 . В окошке кликните левой кнопкой мыши по нужной программе и поставьте птичку на пункт «Всегда использовать это приложение». Нажмите ОК.
Вот и всё – теперь объекты данного формата будут по умолчанию запускаться в назначенной программе.
Читайте также: