Как сделать расширение для Google Chrome и немного улучшить UX на главной странице почты
В этой инструкции я покажу, как создать расширение для браузера Google Chrome и при желании опубликовать его в открытом доступе.
12 показов
36K открытий
Расширение или плагин для Chrome – это приложение, которое добавляет новые возможности браузеру. В магазине Chrome порядка 200 тысяч расширений для разработчиков, маркетологов, дизайнеров и других пользователей браузера.
Больше года назад я заметил, что ссылки «Входящие» и «Написать письмо» на главной странице почты, которой я часто пользуюсь, стали открываться в новом окне. По ответу эксперта стало понятно, что придется привыкать к этому спорному нововведению.
Я привыкнуть не смог: каждый раз возвращаться и закрывать вкладку браузера неудобно. Так появилась идея простого расширения для Chrome, которое вернет прежнее поведение при открытии Входящих и написании нового письма.
SimilarWeb показывает 1,141 млрд посещений главной страницы за август. Если хотя бы 10% из них приходится на десктопный браузер и целевое действие, то это 141 млн открытых вкладок в месяц. На возврат и закрытие вкладки уходит не меньше секунды. Получается, мы собираемся сэкономить 31,5 тысячи человеко-часов в месяц.
Шаг 1. Подготовка расширения
Приготовим минимальный стартовый набор.
1. Создайте папку проекта. Назовите ее именем вашего расширения.
2. Создайте javascript-файл, в котором будет реализована логика приложения. Я назвал его app.js.
3. Добавьте в созданный файл команду для тестирования: вывод строки в консоль или в диалоговое окно браузера.
alert(‘Hello from my extension!’);
4. Создайте manifest.json – служебный файл, который должен быть в каждом расширении.
< "manifest_version": 2, "name": "Mail link healer", "version": "1.0", "description": "Ссылка «Входящие» и «Написать письмо» снова открываются в той же вкладке!", "icons": < "128": "128.png" >, «content_scripts»: [ < "matches": [ "
Обязательные параметры, должны быть в каждом manifest.json:
- manifest_version – целое число, обозначает версию формата манифеста. Для современных версий браузера значение равно 2;
- name – название расширения, до 45 символов. К названию стоит подойти ответственно – оно отображается в магазине, при установке и на странице управления расширениями (chrome://extensions); version – строка с версией расширения. Содержит до четырех чисел, разделенных точками, например 2.19.7.0.
- description – простой текст, до 132 символов. Отображается в магазине и на странице управления расширениями;
- icons – список из иконок расширения;
- content_scripts – скрипты, которые загружает приложение. Мы прописали запуск app.js на всех веб-страницах. Позже мы изменим этот параметр, чтобы запускать скрипт только на целевой странице. Строго говоря, в нашем случае content_scripts – обязательный параметр. Если его не задать, расширение не сделает ничего полезного.
5. Подготовьте иконку в формате png размером 128х128 пикселей и положите ее в папку проекта. Эта версия отображается при установке и в магазине расширений. Рекомендуют также добавить иконку размером 48х48 пикселей – она отображается на странице управления расширениями. И можно добавить версию 16х16 пикселей, которая будет использоваться как фавикон.
К этому моменту в нашем проекте есть иконка расширения, manifest.json со служебной информацией и app.js, в котором позже появится код приложения.
. ├── 128.png ├── app.js ├── manifest.json
Примечание: расширение может состоять из нескольких JS-файлов, HTML-верстки и CSS-стилей.
Теперь можно проверить, что мы выполнили минимальные требования к расширению.
Шаг 2. Промежуточное тестирование
1. Войдите в свой аккаунт в браузере Chrome.
2. Перейдете на страницу chrome://extensions.
3. В правом верхнем углу включите Режим разработчика.
4. Нажмите Загрузить распакованное расширение и выберите папку проекта. В результате вы увидите похожую картинку:
Расширение после загрузки в браузер.
5. В новой вкладке браузера откройте любую веб-страницу. Отлично, работает!
alert из app.js сработал. Можно двигаться дальше.
Теперь мы готовы добавить полезное действие.
Шаг 3. Код приложения
Проверим код ссылок «Входящие» и «Написать письмо» на странице почты с помощью инструментов разработчика браузера. Нажимаем правую кнопку на ссылке и выбираем Посмотреть код. Видно, что ссылки открываются в новой вкладке из-за атрибута target=”_blank”.
Кусочек кода в этой рамке доставляет столько неудобств. Избавимся от него!
Получается, с помощью javascript нам нужно выбрать две ссылки и удалить этот атрибут.
1. В app.js сохраните ссылки в переменные:
const inboxLink = document.getElementById(‘mailbox:unreadEmails:link’); // ссылка на Входящие const composeLink = document.getElementById(‘mailbox:write_letter’); // ссылка «Написать письмо»
Здесь мы выбираем элементы по их идентификатору (id).
2. Если такие ссылки найдены, удалите у них атрибут target.
if (inboxLink && composeLink) < // если ссылки есть на странице // удаляем у них атрибут 'target' inboxLink.removeAttribute('target'); composeLink.removeAttribute('target'); >
Похоже, этого кода достаточно для решения проблемы.
Заодно давайте пропишем в manifest.json правило, по которому расширение будет запускать наш скрипт только на целевой странице. Для этого в параметре content_scripts в ключе matches пропишем конкретный URL:
«content_scripts»: [ < "matches": [ "https://mail.ru/*" ], "js": [ "app.js" ] >]
Звездочку в конце URL я поставил, чтобы скрипт срабатывал на всех страницах, начинающихся с https://mail.ru/.
Кстати, после обновления расширения стоит обновить версию и в manifest.json:
«version»: «1.1»,
После внесения правок важно обновить расширение в браузере. Для этого нажмите на стрелку на странице управления расширениями (chrome://extensions/).
Быстрый способ обновить расширение.
Готово! Проверим расширение в боевых условиях.
Шаг 4. Финальное тестирование
Открываем целевую страницу и переходим по ссылкам «Входящие» и «Написать письмо». Победа! Ссылки открываются в той же вкладке, как в старые добрые времена.
Шаг 5. Публикация расширения
Этот шаг необязательный. Во-первых, возможно, вы не хотите делать доступным для всех свое расширение. А во-вторых, возможно, не захотите платить за это $5. Такой регистрационный сбор должен оплатить разработчик Chrome Web Store.
- Создайте zip-архив с файлами проекта.
- Зарегистрируйтесь как разработчик Chrome Web Store. Для этого войдите в консоль разработчика под своим аккаунтом Chrome, примите условия соглашения и Политику конфиденциальности.
- Оплатите регистрационный сбор $5. Оплатить можно картой, как в обычных интернет-магазинах.
- На дашборде разработчика в разделе Аккаунт добавьте адрес электронной почты. Без этого не получится отправить расширение на проверку.
- В личном кабинет разработчика нажмите Добавить продукт и загрузите zip-архив проекта.
- В разделе Описание продукта заполните описание расширения, выберите категорию и язык. Добавьте хотя бы один скриншот расширения.
- В разделе Конфиденциальность коротко опишите единственное назначение расширения, обоснование для использования разрешения и отметьте, что не используете разрешение «удаленный код».
- В разделе Цель и распространение задайте, кому будет доступно расширение.
- Нажмите Отправить на проверку в правом верхнем углу.
Это всё. Остается ждать результат проверки, которая может занять несколько недель.
Я отправил расширение на проверку параллельно с публикацией статьи. Как только получу ответ, добавлю комментарий со ссылкой на опубликованное расширение.
Надеюсь, эта инструкция была вам полезной. Буду рад обсудить детали в комментариях.
8 комментариев
Написать комментарий.
UPD. Расширение опубликовано в Chrome Web Store. На почту никакое уведомление не приходило, поэтому сложно сказать, сколько времени заняла проверка.
Ссылка «Входящие» и «Написать письмо» снова открываются в той же вкладке!
chrome.google.com
Развернуть ветку
Ага, примерно так я первое расширение для Pyrus написал в 2013 году )))
Развернуть ветку
И всё это ради 5 (3) строк кода?
По поводу самой идеи, а не инструкции по написанию расширений:
Чтобы не создавать каждый раз новое расширение для незначительных правок для каждого сайта, на котором Вам что-то захочется подправить под себя, достаточно один раз установить расширение Tampermonkey и делать это для сотни сайтов быстро и удобно в три клика (открыть меню -> создать скрипт -> сохранить).
Развернуть ветку
И всё это ради 5 (3) строк кода?
Всё это ради решения проблемы. В данном случае получилось решить её с помощью нескольких строк кода.
один раз установить расширение Tampermonkey
Вы правы, это можно делать и так. Или можно было просто написать сниппет и сохранить его в браузере. Подозреваю, что есть еще несколько вариантов. Но мне хотелось самому написать расширение для браузера и показать в инструкции, как это сделать. Писать под эту задачу сложное приложение, кажется, излишне.
Развернуть ветку
мне хотелось самому написать расширение
Вот это уже другой вопрос. Поэтому я сознательно опустил тему непосредственно написания расширений, а комментарий относился именно к самой идеи/мотивации (читать: проблеме) и описал максимально быстрый и эффективный способ решения таких проблем (создание правок для сайтов).
Развернуть ветку
Да, понимаю.
Кстати, если бы вы описывали пошагово создание расширения, какую задачу выбрали бы для иллюстрации?
У меня было несколько идей, в итоге победила та, что связана с реальной «болью» и не требует долгих объяснений, чтобы не раздувать инструкцию.
Развернуть ветку
Скорее всего я бы выбрал вариант автономного приложения с использованием сетевого API бесплатных сервисов (чтобы это смог повторить каждый), либо просто парсинга, с информативной иконкой с числовым показателем и уведомлениями (Notifications API).
Идеальным вариантом для демонстрации, как мне кажется, было бы расширение для мониторинга конкретной информации (входящие e-mail, доступные билеты, баланс на счёте, начало трансляций и так далее) с информативными image/text-уведомлениями.
Это не требует много кода, но функционал используемых API очень показателен и информативен, который в последствии можно универсально применить под свои нужды.
Развернуть ветку
Спасибо
Хорошая инструкция
Просто и доступно
До этого перелопатил 5 других инструкций по этой теме, и только здесь мне дошло что и как
Спасибо ��
Как создать расширение для Chrome
У вас в браузере наверняка есть хотя бы одно расширение. Если вам интересно узнать, как они делаются, читайте наш материал по написанию самого простого плагина для Google Chrome.
Расширения и плагины — полезные дополнения к уже существующим функциям на сайте и в браузере. С их помощью можно записывать аудио и видео с экрана, включать поиск ошибок, а также многое другое.
В этой статье мы рассмотрим создание самого простого расширения — запускатора избранных сайтов. Хотя приложение и будет примитивным, оно всё-таки раскроет процесс создания и загрузки расширения для google Chrome.
Желательно знать HTML, CSS и JS (если придётся расширить набор функций) на самом базовом уровне, чтобы понимать материал лучше, но в любом случае мы будем объяснять код.
В каждом расширении для Chrome должен быть файл manifest.json . Он служит только для описания функций приложения, общего описания, номера версии и разрешений. Более подробно вы сможете ознакомиться с этим файлом в блоге команды разработчиков Chrome.
Давайте же внесём свой вклад в развитие web
Здесь всё очень просто:
< "manifest_version": 2, "name": "Tproger Launcher", "description": "Запускатор представительств Tproger", "version": "1.0.0", "icons": , "browser_action": < "default_icon": "icon.png", "default_popup": "popup.html" >, "permissions": ["activeTab"] > После того как мы описали наше расширение в файле manifest.json , можно благополучно переходить к следующему этапу, а именно к разметке.
Для начала давайте напишем базовый HTML-код:
Добро пожаловать в интернет-магазин Chrome!
Дополните возможности браузера с помощью расширений и тем для Chrome.
Посмотреть коллекцию
Работы авторов-представителей коренных народов США
Фоновые изображения Chrome, созданные художниками-представителями коренных народов США.
Посмотреть коллекцию
Работы темнокожих художников
Фоновые изображения Chrome, созданные выдающимися темнокожими художниками.
Посмотреть коллекцию
Мнения редакторов Chrome
Вся важная информация в одном виджете
С помощью Momentum вы сможете отслеживать задачи, задавать цели и узнавать прогноз погоды на каждой новой вкладке. Минималистичный дизайн расширения поможет сосредоточиться на главном.
Как создать расширение для Google Chrome
Google Chrome – достаточно быстрый браузер и очень удобный в использовании. В настоящий момент он является самым популярным в мире. При этом функциональность у него на достаточно низком уровне. Браузерные расширения исправляют этот момент. Среди них есть блокировщики рекламы, темная тема для всех сайтов, скачивание видео с YouTube и т. д. Причем выпускают подобные расширения сторонние разработчики. В данной статье мы расскажем, как создать расширение для Google Chrome самостоятельно.
Подробное руководство
В качестве примера мы возьмем очень простой плагин-закладку, при клике на который откроется наш сайт (Sergoot.ru). Разумеется, на практике такой плагин не будет особенно полезным, но наша задача – показать общий принцип.
Всю процедуру можно разделить на 3 глобальных шага:
- Непосредственное создание расширение (написание кода, добавление графики и т. д).
- Тестирование работоспособности.
- Публикация в интернет-магазин Chrome.
Остановимся на каждом из них более подробно.
Шаг №1: Подготовка самого плагина
Для начала создайте на компьютере папку. Ее название должно совпадать с названием расширения, чтобы по итогу не запутаться. В этой папке обязательно должно присутствовать два файла:
- manifest.json – текстовый документ с исходным кодом (файл манифеста).
- 128.png – иконка плагина, которая будет видна на панели инструментов Хрома.
Предлагаем создать файл манифеста с помощью встроенного в Windows Блокнота. Запустите программу через меню «Пуск», папка «Стандартные».
А затем вставьте в нее следующий код:
«name»: «Sergoot.ru – быстрый доступ»,
«description»: «Закладка для быстрого доступа к сайту Sergoot.ru»,
В графе name указано название расширения, в description – описание, а в url – ссылка на сайт. Теперь его нужно сохранить в нужном формате. Для этого:
-
Нажмите Ctrl + S на клавиатуре или выберите «Сохранить как…» в меню «Файл».
Остается только сделать иконку с разрешением 128×128 и сохранить ее в виде файла 128.png в той же папке. Мы возьмем иконку нашего сайта.
Дополнение уже готово, но его работоспособность нужно протестировать.
Шаг №2: Проверка его работы в браузере
В Google Chrome есть режим «Для разработчиков», с помощью которого можно устанавливать любые дополнения, а не только официально опубликованные в магазине. Именно он нам сейчас и пригодится.
-
Откройте страницу «Расширения» в браузере, поочередно кликнув по отмеченным пунктам.
Здесь и будет иконка созданного расширения. После клика по ней должен открываться сайт Sergoot.ru.
Шаг №3: Загрузка в магазин Google
Распространять расширения можно и без магазина Chrome, но тогда их установка будет несколько более сложной для пользователя. А вот для публикации требуется аккаунт разработчика Google. Общую информацию по этой процедуре читайте здесь.
Завершение
Мы не стали делать инструкцию о том, как написать плагин для Chrome, поскольку данная тема слишком сложная. В любом случае человеку, кто решится на такое занятие, нужно знать основы программирования (хватит языка JavaScript) и внимательно изучить документацию, которую предоставляет компания Google для разработчиков. Кроме того, большая часть информации в ней на английском языке.
Если вас заинтересовала данная тематика, то ознакомьтесь с этим материалом на сайте Google. Там есть все актуальные ссылки и более подробное руководство.