Как сделать расширение для Google Chrome и немного улучшить UX на главной странице почты — Разработка на vc.ru

Excerpt

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

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

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

Больше года назад я заметил, что ссылки «Входящие» и «Написать письмо» на главной странице почты, которой я часто пользуюсь, стали открываться в новом окне. По ответу эксперта стало понятно, что придется привыкать к этому спорному нововведению.

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

SimilarWeb показывает 1,141 млрд посещений главной страницы за август. Если хотя бы 10% из них приходится на десктопный браузер и целевое действие, то это 141 млн открытых вкладок в месяц. На возврат и закрытие вкладки уходит не меньше секунды. Получается, мы собираемся сэкономить 31,5 тысячи человеко-часов в месяц.

Приготовим минимальный стартовый набор.

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": [ "<all_urls>" ], "js": [ "app.js" ] } ] }

Обязательные параметры, должны быть в каждом 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-стилей.

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

1. Войдите в свой аккаунт в браузере Chrome.

2. Перейдете на страницу chrome://extensions.

3. В правом верхнем углу включите Режим разработчика.

4. Нажмите Загрузить распакованное расширение и выберите папку проекта. В результате вы увидите похожую картинку:

5. В новой вкладке браузера откройте любую веб-страницу. Отлично, работает!

Теперь мы готовы добавить полезное действие.

Проверим код ссылок «Входящие» и «Написать письмо» на странице почты с помощью инструментов разработчика браузера. Нажимаем правую кнопку на ссылке и выбираем Посмотреть код. Видно, что ссылки открываются в новой вкладке из-за атрибута 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)

Похоже, этого кода достаточно для решения проблемы.

Заодно давайте пропишем в 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/).

Готово! Проверим расширение в боевых условиях.

Открываем целевую страницу и переходим по ссылкам «Входящие» и «Написать письмо». Победа! Ссылки открываются в той же вкладке, как в старые добрые времена.

Этот шаг необязательный. Во-первых, возможно, вы не хотите делать доступным для всех свое расширение. А во-вторых, возможно, не захотите платить за это $5. Такой регистрационный сбор должен оплатить разработчик Chrome Web Store.

Создайте zip-архив с файлами проекта.
Зарегистрируйтесь как разработчик Chrome Web Store. Для этого войдите в консоль разработчика под своим аккаунтом Chrome, примите условия соглашения и Политику конфиденциальности.
Оплатите регистрационный сбор $5. Оплатить можно картой, как в обычных интернет-магазинах.
На дашборде разработчика в разделе Аккаунт добавьте адрес электронной почты. Без этого не получится отправить расширение на проверку.
В личном кабинет разработчика нажмите Добавить продукт и загрузите zip-архив проекта.
В разделе Описание продукта заполните описание расширения, выберите категорию и язык. Добавьте хотя бы один скриншот расширения.
В разделе Конфиденциальность коротко опишите единственное назначение расширения, обоснование для использования разрешения и отметьте, что не используете разрешение «удаленный код».
В разделе Цель и распространение задайте, кому будет доступно расширение.
Нажмите Отправить на проверку в правом верхнем углу.

Это всё. Остается ждать результат проверки, которая может занять несколько недель.

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

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

«ВКонтакте» и «Авито» попали в список контрафакции и пиратства торгпредставительства США за 2024 год

«Вконтакте» — за неудаление «пиратского» видео, «Авито» — за контрафакт на площадке.

[

Странно, что до рутуб не внесли, но, возможно, просто не смогли разобраться с интерфейсом

](https://vc.ru/services/1751598-vkontakte-i-avito-popali-v-spisok-kontrafakcii-i-piratstva-torgpredstavitelstva-ssha-za-2024-god#comments)

«Эта идея абсурдна»: ЦБ прокомментировал возможную заморозку вкладов в России

Регулятор назвал такой сценарий «вредным мифом».

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

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

День 1055: ВТБ получил 5 млрд рублей со счетов бывшей британской «дочки» в России, «ВКонтакте» и «Авито» попали в «пиратский» список США

Собираем новости, события и мнения о рынках, банках и реакциях компаний.

GPT боты в массовом рекрутинге: будущее HR автоматизации

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

Как я с помощью GPT читаю и запоминаю посты из сотни Telegram каналов и не схожу с ума

В Телеграме море полезной информации, но как найти время, чтобы читать и запоминать ее?
Как заставить нейросети помогать с чтением не только книг, но и тысяч постов с полезным контентом?
Расскажу, как использую GPT, чтобы читать и учиться быстрее, чем когда-либо. Покажу примеры работы со своей базой знаний из постов Telegram-каналов, книг и курсов.

⭐️ВТБ под давлением. Опять 😞

Рейтинговое агентство АКРА выпустило интересный материал по банковскому сектору. Разбираемся, что к чему, и причем тут ВТБ?

Где дивиденды, Алроса? История, доходность, дивидендная политика и перспективы Алросы

Не всё то золото, что блестит. Алмазы, например, тоже блестят, как и глаза инвесторов, когда они ждут дивиденды. Смотрим, что по дивидендам у крупнейшего алмазадобытчика России и мира.