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

Архитектура расширения Chrome.

Пользовательский интерфейс кнопки на панели инструментов браузера хорошо известен как расширение Chrome.
Существуют расширения без пользовательского интерфейса, такие как ADBlocker, которые позволяют нам удалять рекламу с веб-страниц.

На приведенной ниже диаграмме архитектура расширения Chrome представлена ​​как один лист.
Оно разделено на 3 раздела: пользовательский интерфейс, фон и внешний вид Chrome. Вы также можете просмотреть и загрузить его как файл Google Slide.

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

Синие прямоугольники обозначают API расширений Chrome, предоставляемый в виде библиотеки JavaScript.

Перейдя по URL-адресу, вы можете узнать подробности об API расширения Chrome.

Внутри браузера Chrome (пользовательский интерфейс)

Пользовательский интерфейс кнопки панели инструментов

Самый популярный пользовательский интерфейс для расширений Chrome отображается в браузере Chrome в виде небольшого значка.
Когда пользователь щелкает значок, отображается всплывающее окно. Там часто реализованы основные возможности Расширения.
Кроме того, вы можете отображать некоторые уведомления в виде значка.

Интерфейс меню/опций

Пользователь щелкает правой кнопкой мыши кнопку на панели инструментов, затем наводит курсор на список меню.
Из списка меню он может перейти на страницу параметров, чтобы изменить конфигурацию расширения.

веб-страница

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

Контекстное меню

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

Фон

Фоновый скрипт

Пользователи не могут видеть, как работает фоновый скрипт, потому что у него нет пользовательского интерфейса. Однако это важно для обеспечения функционального пользовательского интерфейса.

Вот некоторые примеры:

  • Он извлекает данные через равные промежутки времени, используя фоновый скрипт и отображая уведомления в виде значка.
  • Он проверяет URL-адреса, которые посещает пользователь, и видит, есть ли какие-либо риски. Если он подтверждает наличие рисков, он отображает сообщения об ошибках, чтобы предотвратить доступ к опасным сайтам.

Данные и функции браузера

Расширения могут получать доступ к данным и функциям браузера Chrome.
Это помогает нам сделать сервис, улучшающий основные функции браузера.

Вне браузера Chrome

Как из функций пользовательского интерфейса, так и из фоновых процессов расширения могут взаимодействовать с внешним API.

Внешний API

Расширения могут работать с такими API, как Twitter API, Google API и оригинальный разработанный API.
Примером оригинально разработанного API является API поиска принадлежащих сервисных элементов.

Как мы все знаем, стоимость размещения оригинального API зависит от количества пользователей.
Мы должны убедиться, что риск стоимости из-за увеличения количества пользователей.

Основные функции ОС

Мы также используем основные функции ОС, такие как Mac и Windows, через API.
Например, ресурсы ОС — это чтение и запись в локальную файловую систему и печать данных.

Следующий

В следующей статье я напишу о своей новой идее расширения Chrome.