Как создать расширение для Google Chrome?

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

Связанный: Как установить и удалить расширения в Google Chrome?

Предпосылки

Вот основные требования для создания расширения Chrome:

  • Базовые знания технологии веб-разработки. Расширение Chrome похоже на веб-страницу, поэтому для создания расширения вам потребуются базовые навыки HTML, JavaScript и CSS.
  • Редактор кода – вам также понадобится простой редактор кода, такой как Notepad ++ или Brackets.
  • Учетная запись разработчика Интернет-магазина Chrome – нужна только в том случае, если вы хотите распространять свое расширение среди других пользователей Chrome.

Элементы расширения Chrome

Любое расширение браузера Chrome должно иметь следующие основные компоненты:

  • Файл манифеста в формате JSON «manifest.json».
  • Скрипт содержимого.
  • Всплывающая страница.
  • Страница событий.

Создать каталог для расширения Chrome

Первый шаг – создать новый каталог (папку), куда вы загрузите все файлы расширений. Поэтому вам нужно создать новую папку на вашем компьютере и дать ей желаемое имя, в данном случае «My Sample Ext».

Создайте и сохраните файл манифеста

Файл манифеста предоставляет Chrome подробную информацию о расширении, такую ​​как имя, разрешения и номер версии среди других деталей.

  • Чтобы создать файл, откройте редактор кода и создайте новый файл с именем «manifest.json».
  • Теперь добавьте содержимое файла манифеста, как показано на изображении, и сохраните файл в каталоге, который вы создали выше.
Файл манифеста
  • Вы можете добавить дополнительные сведения в файл манифеста. Например, мы можем зарегистрировать всплывающую страницу и значок для расширения.
  • Наилучший подход – хранить другие элементы расширений, такие как скрипты, HTML и файлы изображений, в разных папках и использовать относительный URL-адрес для ссылки на них.
  • Добавьте свой значок и всплывающую страницу и сохраните изменения.
Подробный манифест
Подробный манифест
  • Вы также можете добавить разрешения для файла манифеста.

Как создать всплывающую страницу

Всплывающая страница – это HTML-файл, который загружается, когда пользователь щелкает действие браузера. В нашем случае мы назвали файл «sample.html».

  • Чтобы создать новый файл в редакторе кода и сохранить файл в каталоге расширений с расширением файла .html.
Всплывающая страница
Всплывающая страница
  • Будучи стандартным файлом HTML, вы можете добавлять в него все, что захотите, включая кнопки, текст и т. Д.
  • HTML-файл включает ссылку на скрипт «sample.js», фоновую страницу, которая содержит логику для расширения Chrome.

Стилизация всплывающей страницы

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

  • Для этого создайте новый файл и переименуйте его с расширением файла .css, в нашем случае «sample.css». Обратите внимание, что это файл .css, на который есть ссылка в HTML-файле выше.
  • Добавьте свой код CSS, как показано на рисунке, и сохраните изменения.
Расширение стиля
Расширение стиля

Создание сценария содержимого / фоновой страницы

Это файл .js, который определяет логику расширения. Он определяет задачи / функции, которые будет выполнять расширение.

  • Добавьте четыре файла в редактор кода и сохраните файл с расширением .js «sample.js» в каталоге.
  • Добавьте команды, которые будут выполняться, как только пользователь нажимает кнопку или значок расширения, как показано.
  • Вам также необходимо зарегистрировать сценарий содержимого в файле manifest.json.

Заметка: Вы можете добавить несколько задач для выполнения основной задачи в файл .js.

Добавление расширения в Chrome

Создав все 4 файла и сохранив их в каталоге, теперь вы готовы загрузить расширение в Chrome.

  • Откройте браузер Chrome, введите URL-адрес «chrome: // extensions /», чтобы открыть страницу управления расширениями.
  • Переключите переключатель в правом верхнем углу страницы, чтобы активировать «Режим разработчика».
Режим разработки
Режим разработки
  • С левой стороны нажмите кнопку «Загрузить распакованные» и просмотрите свои файлы, чтобы выбрать папку, в которой вы сохраняете файлы расширения.
  • В список будет добавлено новое расширение. Вы также заметите значок своего расширения на панели инструментов, расположенной справа от адресной строки.
Новое расширение
Новое расширение
  • Чтобы протестировать расширение, щелкните значок, чтобы открыть всплывающую страницу.
Тестовое расширение
Расширение теста

Заключение

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

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *