API расширения Chrome позволяет настраивать широкий спектр функций браузера: внешний вид веб-страниц, изменение поведения сайтов и расширение функций браузера.
Одной из функций браузера, которые вы можете расширить, являются определенные страницы, предоставляемые браузером: закладки, история и страница новой вкладки. Эта страница просматривается каждый раз, когда вы открываете новую вкладку, если пользователь не выбрал другое поведение.
Учитывая, как часто его посещают, он представляет собой одну из самых ценных объектов недвижимости, которую может преодолеть пристройка. В этой статье мы рассмотрим создание расширения Chrome, которое предоставляет уникальную страницу новой вкладки, и способы его развертывания в Интернет-магазине Chrome.
У нас есть несколько шагов, которые необходимо выполнить, чтобы создать замену страницы новой вкладки и разместить ее в Интернет-магазине Chrome:
- Создайте и протестируйте наше расширение
- Получите учетную запись разработчика Интернет-магазина Chrome
- Опубликовать пакет в Интернет-магазине Chrome
Создание расширения Chrome
Из чего сделана пристройка?
Расширение Chrome - это примерно произвольный набор HTML, CSS и JavaScript. Если это похоже на веб-страницу, это потому, что это так. По сути, это основа для платформы расширений Chrome. Видение платформы состоит в том, чтобы строить на веб-технологиях так, чтобы существовала стабильная, безопасная основа, имеющая широкую базу разработчиков, способных воспользоваться ее преимуществами.
Хотите прочитать эту историю позже? Сохранить в журнале.
Базовое репо для расширения содержит следующие файлы:
- index.html
- manifest.json
Вот и все. Это базовая модель расширения: читается файл manifest.json расширения, и этот манифест содержит указатель на точку входа в приложение, которую загрузит браузер.
Пошаговое руководство: создание расширения Chrome
Давайте создадим манифест расширения, который устанавливает для страницы новой вкладки новое значение, которым будет наш index.html.
Это минимальное количество полей для переопределения страницы новой вкладки, и большинство из них применимо к любому расширению Chrome.
- name: имя вашего приложения, которое появляется везде, где ваше расширение упоминается по имени в пользовательском интерфейсе Chrome. Это включает в себя наведение курсора на панель расширения и на страницу расширения.
- описание: отображается в списке расширений Chrome на странице пользователя для вашего расширения после установки.
- default_icon: значок вашего приложения. Это значение по умолчанию, и можно указать другие размеры, которые будут использоваться в разных контекстах. А пока мы просто установим значок по умолчанию.
- chrome_url_overrides: список URL-адресов, которые расширение переопределит. Обратите внимание: хотя название подразумевает, что вы можете переопределить более одной страницы в своем расширении, вы можете переопределить только один URL-адрес Chrome в данном расширении. Вы можете указать
newtab,bookmarksилиhistoryи указать путь к вашей точке входа HTML. - версия: семантический номер версии, представляющий конкретный выпуск расширения. После публикации вы начнете увеличивать это значение, когда захотите обновить приложение.
- manifest_version: API манифеста, на который нацелен ваш манифест. Manifest v3 был выпущен в начале 2021 года и пока не требуется, но предлагает расширенные возможности для расширений, поэтому я рекомендую использовать v3 для нового расширения. В этом примере устанавливается значение v2, но все, что здесь указано, также применимо в v3. Некоторые функции расширения, такие как фоновые страницы или перехват сетевых запросов, работают по-другому в версии 3, но переопределения страницы новой вкладки такие же.
С помощью этого манифеста Chrome будет загружать index.html каждый раз, когда открывается страница новой вкладки. Это важно учитывать, поскольку это действие происходит очень часто во время сеанса просмотра пользователем. Это означает, что наше расширение должно загружаться быстро и не заставлять пользователя чувствовать, что что-то вообще замедляет его навигацию.
Итак, у нас сейчас загружается пустой index.html (отличная производительность), но теперь мы хотим использовать что-то более значимое для создания пользовательского интерфейса нашего приложения, верно? Оказывается, это ничем не отличается от рендеринга любого другого index.html, поэтому мы можем использовать любой из наших любимых фреймворков. Вот как может выглядеть точка входа в React - это типичный файл индекса React:
Обратите внимание, что в вашем собственном приложении вы должны учитывать время запуска предпочитаемой вами платформы, когда решаете сделать с ней расширение NTP. Это время запуска будет происходить каждый раз при открытии NTP. NTP повторно инициализируется при каждом открытии, и ваш добавочный код каждый раз начинается с шага 0. Ничто не может отображаться на странице до тех пор, пока файл точки входа не будет загружен, а JS фреймворка не будет проанализирован и запущен, поэтому убедитесь, что вы проводите тестирование на различных уровнях регулирования ЦП, которые представляют устройства ваших пользователей.
Тестирование расширения
Теперь самое время посмотреть, сможем ли мы запустить наш образец индекса в реальном браузере. Нам нужно сообщить Chrome, что мы хотим загрузить некоторые потенциально сомнительные расширения. Перейдите к chrome://extensions/ и переключите переключатель режима разработчика.
Это представит новый набор параметров под заголовком, один из которых - «Загрузить распакованный». Выберите его и выберите папку для вашего репо. На странице расширений теперь должно быть указано ваше расширение, и оно станет активным, если вы проверите панель расширений (щелкните значок головоломки, если он не отображается по умолчанию).
Далее: показать это миру 🚀
Если все работает, как ожидалось, перейдите в папку, содержащую ваш проект, и создайте из нее ZIP-папку. Вы воспользуетесь этим на следующем шаге.
Как опубликовать в Интернет-магазине Chrome
Пошаговое руководство: получение учетной записи разработчика Интернет-магазина Chrome
Предпосылки:
- аккаунт Google
- ZIP-папка, содержащая файлы вашего расширения
- 5 долларов США
Перейдите к https://chrome.google.com/webstore/category/extensions и щелкните значок шестеренки, чтобы перейти на панель инструментов разработчика.
Вам будет предложено пройти процедуру регистрации для регистрации в качестве разработчика Интернет-магазина Chrome.
Завершите этот процесс, и теперь вы разработчик Интернет-магазина Chrome 🎉
На этом этапе у вас уже должна быть ZIP-папка, содержащая файлы расширений вашего проекта.
Панель управления покажет вам существующие расширения и позволит вам создать новое. Нажмите «Новый элемент» и в появившемся окне выберите папку ZIP.
Вы попадете на страницу, которая позволит вам редактировать все поля, относящиеся к магазину, для вашего расширения. Только некоторые из них могут потребоваться для отправки вашего расширения на рассмотрение. Чтобы узнать, какие поля вам еще нужно заполнить, нажмите «Почему я не могу отправить?» кнопка. Вы увидите что-то вроде этого:
Заполните соответствующие поля для своего расширения, и кнопка «Отправить на рассмотрение» станет доступной. Отправьте свое приложение, подождите несколько дней для проверки, и тогда ваше расширение станет доступным для всего мира 🎊
Я использовал этот процесс для создания Паспорта, расширения, которое дает вам красивую страницу новой вкладки. Уже доступно в Интернет-магазине Chrome и Надстройках Edge.
📝 Сохраните эту историю в Журнале.
