Сделать приложение в браузере
Если вы всерьез подумываете о разработке своего веб-приложения, сначала ответьте на два вопроса:
- Для решения какой задачи будет использоваться это приложение?
- Каким способом будет разработано данное приложение?
Первое — веб-приложение всегда разрабатывается для решения конкретной задачи, как правило, одной. Оно должно быстро реагировать на изменения, и чем проще и меньше время реакции, тем более веб-приложение жизнеспособно.
Второе — есть по меньшей мере 6 путей к разработке веб-приложения, самым современным из которых является реализация фронтенда как single page application, где контакт с бэкендом реализуется через REST API. Данный путь к созданию веб-приложения достигается за 8 шагов.
1. Работа с бизнес-логикой бэкенда
Есть два способа такой работы: вы можете сгруппировать бизнес-логику бэкенда в одном сервисе (монолитная логика) или реализовать каждый ее компонент в отдельном микросервисе. Работая с небольшим проектом, используйте первый способ, а при работе с крупным проектом идеально подойдет второй.
2. Выбор языка программирования
3. Реализация бизнес-логики
Сперва ориентируйтесь на паттерн MVC, а когда поймете, что бизнес-логика начинает усложняться, используйте presenter и interactor. Но помните, что presenter и interactor находится на разных уровнях и выполняют различные смысловые и функциональные нагрузки.
Presenter обрабатывают события от пользовательского интерфейса (UI) и выполняют роль callback из внутренних уровней (Interactors). Presenters легко тестировать и их задача состоит в том, чтобы получить информацию от веб-приложения и преобразовать ее для перемещения presenters на экран с помощью представления (View).
Interactor по факту вмещают бизнес-логику веб-приложения, то есть проверку условий и обработку информации. Interactor работают фоном и перемещают события и информацию на верхний уровень, presenters, c помощью callback.
4. QA-тестирование бэкенда
Тестирование нужно обязательно делать для того, чтобы знать, правильно ли работает бизнес-логика вашего веб-приложения, а также для того чтобы не проверять постоянно "вручную" работоспособность кода. Используйте автоматическое тестирование для модулей и библиотек, соответствия UI/UX и API. Пропишите несколько вариантов тестирования. Разработайте roadmap для платформы, чтобы управлять испытаниями для всех типов тестирования. Обязательно сделайте подключение инструментов отслеживания текущего покрытия кода, чтобы убедиться в том, что ваше веб-приложение не "виснет" и работает без багов и перебоев.
5. Добавление поддержки сваггера
Swagger – это "умная" документация RESTful web-API. По сути, это фреймворк для спецификации REST API, дающий возможность не только просматривать спецификацию в интерактивном режиме, но и отправлять запросы, именуемые Swagger UI. А теперь на счет веб-приложения.
Предположим, вы уже начали разработку фронтенда вашего веб-приложения. Как вам понять, какие параметры и запросы отправлять на сервер? Заглядывать в код бэкенда? Поверьте, это не лучший выход.
Рекомендую вам добавить поддержку сваггера, при этом очень здорово, если сваггер еще и поддерживает генерацию через тесты. Таким образом, он поможет вам документировать API.
6. Работа с бизнес-логикой фронтенда
Сложность работы с бизнес-логикой фронтенда заключается в том, что тут очень много фреймворков. Обычно в современном програмировании используются Angular, React, Vue. У них у всех есть как свои достоинства, так и свои недостатки. Но я рекомендую вам выбирать для работы с фронтендом React, так как он легче, проще и более гибкий.
7. QA-тестирование фронтенда
Фронтенд тестируют двумя основными видами тестов — на логику и на отображение. Тесты на логику проверяют логическую реализацию функций и классов. Тесты на отображение отвечают за то, чтобы наполнение демонстрировалось пользователю в том виде, который вы задумали, прописывая фронтенд. Для осуществления QA-тестирования фронтенда используйте такие фреймворки, как Mocha, Chai, Jest, Ava, Enzyme, Jest — они самые ходовые, простые в эксплуатации и наиболее понятные из всех.
8. Мониторинг качества веб-приложения
Когда вы завершили седьмой этап, ваше веб-приложение, можно сказать, готово. Ну, или оно находится на финальной стадии готовности — 98%. Что вам нужно знать по итогу? Естественно, первое, что нужно, — это понять, насколько качественно реализовано приложение, как оно будет работать и на какое время хватит его износостойкости. В этом вам поможет Lighthouse — автоматизированный инструмент с открытым исходным кодом для мониторинга качества вашего веб-приложения. Lighthouse проводит системный аудит производительности и доступности веб-приложения для понимания обычного пользователя.
Собранные с помощью Lighthouse данные помогут вам в дальнейшем в случае надобности дорабатывать ваше веб-приложение, изменять в нем какие-то детали или же добавлять и оптимизировать новые функции.
Имейте в виду, что, начав разработку веб-приложения, вам нужно будет изучить все "подводные камни" каждого этапа, а также запастись терпением, потому как сама разработка может занять у вас несколько дней, а вот тестирование и доработка с устранением багов может затянуться и на многие месяцы. Будьте ко всему готовы и помните про первые и самые важные два вопроса: всегда ставьте конкретную задачу, которую должно решать ваше приложение, перед тем, как начать разработку, и выбирайте самый удобный и легкий для вас способ разработки, в котором вы хорошо ориентируетесь. Ведь разработка веб-приложения — это именно тот случай, когда надо идти путем наименьшего сопротивления.
В конце 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() полный код скрипта из проекта со снежинками и сохранить файл.
Проверка
В прошлый раз мы не смогли запустить скрипт на любой странице Яндекса — мешала политика безопасности. Теперь всё работает:
Выясняем, с помощью чего люди переводят сайты и отдельные слова на страницах в 2020 году. Обсудим и браузеры со встроенными переводчиками, и плагины, помогающие не только переводить отдельные слова, но и лучше понимать язык.
Встроенные в браузеры переводчики
Глобализация вкупе с искусственным интеллектом сделали машинный перевод обыденностью. Даже специальные программы для этого не нужны. Все необходимое встраивают в браузер, чтобы люди могли общаться в соцсетях или читать иностранные блоги, не зная языка собеседника и посещаемых сайтов.
Поэтому для начала разберем те интерпретаторы, что есть в браузерах «из коробки», а уже потом рассмотрим альтернативные варианты.
Google Chrome
Google давно работает на поприще переводов, поэтому наличие встроенного переводчика в Chrome вполне очевидное явление. Алгоритм перевода тот же, что используется на одноименном сайте, так что качество перевода не станет сюрпризом.
Важное преимущество – поддержка большого количества языков. Используя Chrome, можно зайти на тот же Weibo и чувствовать себя там относительно комфортно, потому что даже с китайского браузер Google переводит сносно.
И второе – кастомизация. Вы вправе сами решать, на какой язык переводить сайт. Он не привязан к языку системы или браузера как такового. Дополнительные языки можно добавить через настройки и использовать для перевода по умолчанию или, наоборот, исключить из языков для перевода (тогда Chrome начнет их игнорировать). Также можно выбрать, какие сайты не стоит переводить вовсе, а какие нужно переводить автоматически при каждом посещении.
Чтобы воспользоваться Google Translate в Chrome:
- Открываем страницу на иностранном языке.
- Кликаем по логотипу Google Translate в правой части поисковой строки.
- Выбираем язык, на который надо перевести страницу.
Готово, текст на сайте моментально изменится на переведенный.
Microsoft Edge
Microsoft использует похожую с Google модель перевода страниц в браузере. Разница заключается в используемых технологиях. Разработчики Edge встроили в него собственное детище по имени Bing Translator.
Качество перевода неоднозначное. Он переводит заметно медленнее, чем конкуренты, и не все части страницы. Больше слов интерпретирует либо некорректно, либо так, что из них не удается уловить контекст и понять суть написанного. Частенько после перевода через Bing текст обрезается на полуслове. Google так не делает.
Но это все субъективное мнение, основанное на тестировании китайского блога Weibo и пары немецких статей в Википедии.
Чтобы воспользоваться Bing Translator в браузере Эдж:
- Заходим на непереведенную страницу.
- Кликаем по логотипу Bing Translator в правой части поисковой строки.
- Выбираем знакомый язык из списка доступных в Bing Translator.
- И соглашаемся на перевод страницы, кликнув по кнопке «Перевести».
Через несколько секунд язык страницы изменится.
Safari
В 2020 году Apple тоже решила заняться разработкой собственного переводчика. У них получился удобный аналог Google Translate для iOS 14 и заметно прокачались языковые навыки Siri. Естественно, не обошлось без появления функции перевода в браузере.
Но, как это часто бывает у Apple, функциональность встроенного интерпретатора оказалась заметно ограничена.
- Во-первых, он переводит только на язык, установленный в системе. Если по умолчанию в вашем компьютере или смартфоне установлен английский язык в качестве основного, то перевести сайт с английского на русский не получится. Только наоборот.
- Во-вторых, в Safari для macOS переводчик все еще находится в стадии бета-тестирования и не всегда срабатывает даже на тех страницах, на которых мобильная версия прекрасно справляется с переводом.
Зато, когда переводчик Apple работает, он работает хорошо. Перевод действительно на уровне конкурентов, а зачастую и уровнем выше.
Чтобы воспользоваться переводчиком в Safari:
- Открываем страницу на иностранном языке (это должен быть иностранный язык для системы, а не для вас).
- И кликаем по иконке в виде двух облаков в поисковой строке (в macOS).
В случае с iOS процесс немного усложняется:
- Открываем непереведенный сайт.
- Потом тапаем по значку в виде буквы А в поисковой строке.
- Выбираем пункт Translate to English (или другой язык в зависимости от языка ОС).
Язык страницы изменится моментально.
Яндекс.Браузер
Российский IT-гигант тоже обладает и собственным переводчиком, и браузером. Яндекс.Браузер построен на базе Chromium, как и новый Edge, поэтому принцип работы встроенного интерпретатора там такой же, как у Google и Microsoft.
Но переводом занимаются алгоритмы, разработанные Яндексом и используемые на одноименном сайте. Поддержка языков довольно широкая, но выбирать среди них нельзя. Как и Safari, разработка Яндекса предлагает переводить только на язык ОС.
Спасибо хотя бы на том, что перевод можно автоматизировать или вовсе отключить, если язык знаком пользователю.
Чтобы воспользоваться переводчиком в Яндекс.Браузере:
- Заходим на непереведенную страницу.
- Кликаем по логотипу Яндекс.Переводчика в правой части адресной строки.
- Нажимаем на кнопку «Перевести».
Как я уже сказал выше, язык перевода только в браузере поменять нельзя. Придется менять язык браузера или всей ОС.
Плагины для перевода
Плагины с функцией перевода страниц и отдельных слов пользуются популярностью, так как не все браузеры обладают соответствующей встроенной функциональностью. Взять тот же Firefox. Им все еще пользуется большое количество людей, а переводчика в нем нет.
К тому же не всегда встроенный интерпретатор справляется со своими задачами так же хорошо, как решения от сторонних разработчиков. Яндекс и Safari, например, не дают выбирать язык перевода. В разработке Apple также нет функции перевода отдельных слов в тексте (не считая встроенного в macOS и iOS словаря).
Ну и алгоритмы некоторых сторонних переводчиков заметно выигрывают по качеству перевода. Например, они могут быть лучше знакомы с новыми словами и выражениями, предлагать примеры использования в контексте, отображать больше вариаций перевода одного и того же выражения или вовсе выводить пользовательские варианты интерпретации фраз.
Ниже разберем лучшие сторонние плагины-переводчики для браузеров.
Google Translate
Разработки Google в области перевода на хорошем счету у пользователей, поэтому многие разработчики пытаются перенести алгоритмы переводчика корпорации в другие браузеры. Более того, сама Google создала расширение для браузеров на базе Chromium с соответствующей функциональностью.
Расширение Google почти не отличается от встроенных в Chrome инструментов, но зато его можно установить в Edge, Яндекс.Браузер и даже в браузеры, не поддерживающие перевод по умолчанию. В их числе Firefox, Vivaldi, Brave, Opera и прочие.
Плагин умеет переводить страницы целиком, а также отдельные слова и отрывки текста, если их выделить и выбрать опцию Google Translate в контекстном меню. Отдельные слова можно озвучить прямо в браузере.
А еще он содержит в себе мини-версию Google Translate. В нее можно ввести произвольный текст для перевода на тот случай, если не удается его скопировать (когда непереведенный текст отображается в видео или только озвучивается) или он вовсе не связан с просматриваемыми страницами.
Mate Translator
Популярный плагин для перевода, доступный сразу для всех актуальных браузеров. Как и решение от Google, Mate умеет переводить страницы целиком и отдельные слова.
- Отличается продвинутыми алгоритмами перевода. Пользователи отмечают, что Mate часто справляется лучше, чем Google.
- Поддерживает 103 языка, среди которых базовые (в духе английского с китайским) и более специфичные (наподобие люксембургского).
- Синхронизирует историю переводов между всеми устройствами, где сервис установлен и подключен к одному аккаунту.
- Позволяет сохранять и сортировать слова и фразы в личном словарике для путешествий или работы.
- Отображает синонимы, дополнительные значения, род, склонения и другие характеристики переводимых слов.
Mate распространяется бесплатно в виде расширений для браузера, но при установке программы в ОС требует оплаты. Также он доступен в версиях для мобильных устройств в App Store и Google Play.
TranslateMe
Google Translate пока недоступен для браузера Apple. Но есть плагин, использующий алгоритмы Google и копирующий большую часть возможностей переводчика корпорации в Safari.
TranslateMe – альтернатива, существующая в Mac App Store уже несколько лет и успешно заменяющая отсутствующий интерпретатор Google.
Правда, стоит плагин аж 10 долларов, что немного странно для расширения, построенного целиком и полностью на базе бесплатного Google Translate. Все еще дешевле, чем полная версия того же Mate, но уже неприятно. Тем не менее удобный интерфейс и отсутствие дешевых альтернатив сделали TranslateMe популярным решением, одним из лучших в своем классе. Поэтому он и угодил в подборку.
Lingvo Live
Детище компании ABBYY, до сих пор являющееся одним из лучших профессиональных решений для перевода фраз и отдельных слов. Lingvo Live содержит в себе много инструментов для работы с языком: личный словарь, большой список примеров использования слов и фраз, подборку словосочетаний для каждого переведенного фрагмента текста.
Но важнее всего – наличие некой социальной сети, куда пользователи словаря заливают собственные варианты перевода слов. Так база пополняется выражениями, которые уже активно используются, но все еще не попали в актуальные словарные базы.
Плагин выполняет те же функции, что и условный Google Translate, задействуя технологии ABBYY и предлагая воспользоваться встроенным разговорником.
Англо-русский словарь Lingvo
Аналог словаря Lingvo для Safari. Устанавливается через Mac App Store и встраивается напрямую в систему. Так как это профессиональное решение ABBYY, работающее в офлайн-режиме, то за плагин придется заплатить.
Leo Translate
Reverso
Фаворит всех преподавателей иностранных языков в РФ и мой личный выбор. Context Reverso, пожалуй, мой любимый сервис по переводу отдельных слов и фрагментов текста. Он хорош огромной базой примеров перевода (в контексте реальной речи и письма).
Обращаясь в Context Reverso, гораздо проще найти подходящий перевод, особенно если речь идет о специфичных терминах, редко встречающихся словах или фразах, перевод которых может варьироваться в зависимости от контекста.
При переводе текстов используется продвинутый искусственный интеллект, разработанный создателями Context Reverso. Расширение позволяет работать не только с текстом на страницах, но и с субтитрами в YouTube или Netflix. Можно изучать языки по фильмам и роликам иностранных блогеров.
При использовании плагин Context Reverso пытается подобрать наиболее подходящие примеры употребления выделенных в браузере слов, сразу предлагает добавить их в список избранных или озвучить.
Также вместе с расширением устанавливается мини-версия словаря, обитающая в панели инструментов. Туда можно вводить произвольные слова и предложения для перевода, не переходя на одноименный ресурс.
Multitran Popup
Еще один словарь, востребованный в российских учебных заведениях. С большим отрывом выигрывает у Google Translate и его аналогов по количеству переводов одного слова. В можно найти крайне редко используемые значения фраз. Клад для лингвистов!
Плагин работает в двух режимах:
- Режим всплывающих окон. При выделении непонятного слова или предложения появляется полноценный интерфейс Multitran, отображающий большой список доступных значений вкупе с родом, частью речи, сферой применения и транскрипцией словарной единицы.
- Режим мини-словаря в панели инструментов. Это компактная версия одноименного сайта, встроенная в интерфейс браузера. Тут можно вводить произвольный текст для поиска по Multitran с указанием языка перевода.
Могу советовать это расширение с той же уверенностью, что и Context Reverso. А вместе они дадут еще больше полезной информации.
Urban Dictionary Search
Словарь для тех, кто хочет лучше понимать наиболее специфичную, современную речь. В частности, речь идет о словах и фразах из интернета, которые так быстро сменяют друг друга, что даже не успевают попасть в какой-то мало-мальски серьезный словарь.
К сожалению, расширение Urban Dictionary для браузеров умеет лишь искать по одноименному сайту. То есть оно показывает поисковое поле в панели инструментов, но результаты выводит только на официальном сайте сервиса.
Но немного ускорить процесс перевода можно. Надо выделить непонятное слово, кликнуть по нему правой кнопкой мыши и затем нажать на иконку расширения в появившемся выпадающем меню.
Выводы
Арсенал плагинов почти не изменился за последние годы. В плане популярности и удобства лидирует Google Translate. Он подойдет 90% пользователей, так как переводит целые страницы и отдельные слова лучше большинства машинных переводчиков.
А для тех, кому нужно больше данных, есть Context Reverso и Multitran. Это «взрослые» словари для профессионалов, которые не требуют никаких финансовых вложений. Лучшее, что можно найти для поиска редких слов и их характеристик.
В этой инструкции я покажу, как создать расширение для браузера Google Chrome и при желании опубликовать его в открытом доступе.
Расширение или плагин для Chrome – это приложение, которое добавляет новые возможности браузеру. В магазине Chrome порядка 200 тысяч расширений для разработчиков, маркетологов, дизайнеров и других пользователей браузера.
SimilarWeb показывает 1,141 млрд посещений главной страницы за август. Если хотя бы 10% из них приходится на десктопный браузер и целевое действие, то это 141 млн открытых вкладок в месяц. На возврат и закрытие вкладки уходит не меньше секунды. Получается, мы собираемся сэкономить 31,5 тысячи человеко-часов в месяц.
Приготовим минимальный стартовый набор.
1. Создайте папку проекта. Назовите ее именем вашего расширения.
2. Создайте javascript-файл, в котором будет реализована логика приложения. Я назвал его app.js.
3. Добавьте в созданный файл команду для тестирования: вывод строки в консоль или в диалоговое окно браузера.
4. Создайте manifest.json – служебный файл, который должен быть в каждом расширении.
Обязательные параметры, должны быть в каждом manifest.json:
manifest_version – целое число, обозначает версию формата манифеста. Для современных версий браузера значение равно 2;
name – название расширения, до 45 символов. К названию стоит подойти ответственно – оно отображается в магазине, при установке и на странице управления расширениями (chrome://extensions);
description – простой текст, до 132 символов. Отображается в магазине и на странице управления расширениями;
icons – список из иконок расширения;
5. Подготовьте иконку в формате png размером 128х128 пикселей и положите ее в папку проекта. Эта версия отображается при установке и в магазине расширений. Рекомендуют также добавить иконку размером 48х48 пикселей – она отображается на странице управления расширениями. И можно добавить версию 16х16 пикселей, которая будет использоваться как фавикон.
К этому моменту в нашем проекте есть иконка расширения, manifest.json со служебной информацией и app.js, в котором позже появится код приложения.
Примечание: расширение может состоять из нескольких JS-файлов, HTML-верстки и CSS-стилей.
Теперь можно проверить, что мы выполнили минимальные требования к расширению.
1. Войдите в свой аккаунт в браузере Chrome.
2. Перейдете на страницу chrome://extensions.
3. В правом верхнем углу включите Режим разработчика.
4. Нажмите Загрузить распакованное расширение и выберите папку проекта. В результате вы увидите похожую картинку:
5. В новой вкладке браузера откройте любую веб-страницу. Отлично, работает!
Теперь мы готовы добавить полезное действие.
Кусочек кода в этой рамке доставляет столько неудобств. Избавимся от него!Получается, с помощью javascript нам нужно выбрать две ссылки и удалить этот атрибут.
1. В app.js сохраните ссылки в переменные:
Здесь мы выбираем элементы по их идентификатору (id).
2. Если такие ссылки найдены, удалите у них атрибут target.
Похоже, этого кода достаточно для решения проблемы.
Заодно давайте пропишем в manifest.json правило, по которому расширение будет запускать наш скрипт только на целевой странице. Для этого в параметре content_scripts в ключе matches пропишем конкретный URL:
Кстати, после обновления расширения стоит обновить версию и в manifest.json:
После внесения правок важно обновить расширение в браузере. Для этого нажмите на стрелку на странице управления расширениями (chrome://extensions/).
Готово! Проверим расширение в боевых условиях.
Этот шаг необязательный. Во-первых, возможно, вы не хотите делать доступным для всех свое расширение. А во-вторых, возможно, не захотите платить за это $5. Такой регистрационный сбор должен оплатить разработчик Chrome Web Store.
Это всё. Остается ждать результат проверки, которая может занять несколько недель.
Я отправил расширение на проверку параллельно с публикацией статьи. Как только получу ответ, добавлю комментарий со ссылкой на опубликованное расширение.
Надеюсь, эта инструкция была вам полезной. Буду рад обсудить детали в комментариях.
Мы тут собрали умную камеру для наблюдения за котиками. Хотите научим?И всё это ради 5 (3) строк кода?
И всё это ради 5 (3) строк кода?
Всё это ради решения проблемы. В данном случае получилось решить её с помощью нескольких строк кода.
один раз установить расширение Tampermonkey
Вы правы, это можно делать и так. Или можно было просто написать сниппет и сохранить его в браузере. Подозреваю, что есть еще несколько вариантов. Но мне хотелось самому написать расширение для браузера и показать в инструкции, как это сделать. Писать под эту задачу сложное приложение, кажется, излишне.
мне хотелось самому написать расширение
Вот это уже другой вопрос. Поэтому я сознательно опустил тему непосредственно написания расширений, а комментарий относился именно к самой идеи/мотивации (читать: проблеме) и описал максимально быстрый и эффективный способ решения таких проблем (создание правок для сайтов).
Да, понимаю.
Кстати, если бы вы описывали пошагово создание расширения, какую задачу выбрали бы для иллюстрации?
У меня было несколько идей, в итоге победила та, что связана с реальной «болью» и не требует долгих объяснений, чтобы не раздувать инструкцию.
Скорее всего я бы выбрал вариант автономного приложения с использованием сетевого API бесплатных сервисов (чтобы это смог повторить каждый), либо просто парсинга, с информативной иконкой с числовым показателем и уведомлениями (Notifications API).
Идеальным вариантом для демонстрации, как мне кажется, было бы расширение для мониторинга конкретной информации (входящие e-mail, доступные билеты, баланс на счёте, начало трансляций и так далее) с информативными image/text-уведомлениями.
Это не требует много кода, но функционал используемых API очень показателен и информативен, который в последствии можно универсально применить под свои нужды.
Ага, примерно так я первое расширение для Pyrus написал в 2013 году )))
UPD. Расширение опубликовано в Chrome Web Store. На почту никакое уведомление не приходило, поэтому сложно сказать, сколько времени заняла проверка.
CNews Analytics составили рейтинг крупнейших поставщиков облаков и проанализировали спрос в России. Согласно исследованию, в прошлом году рынок SaaS был почти в вдвое больше рынка IaaS, но последний растет быстрее.
Читайте также: