Как создать расширение Chrome для отображения метатегов, используемых на веб-странице, за 5 простых шагов

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

Лучшее место, где можно узнать все о разработке расширений и ознакомиться с техническими терминами, — это официальный сайт разработчиков Chrome. Прочитав все об этом, вы поймете, что можете создавать новые расширения для Chrome с помощью тех основных технологий, с которыми вы уже знакомы из веб-разработки: HTML, CSS и JavaScript. Если вы когда-либо создавали веб-страницу, вы должны довольно быстро освоиться с расширениями.

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

Разработка расширений Chrome

  1. Создайте пустую папку и добавьте файл с именем mainfest.json. По сути, этот файл является идентификатором вашего расширения. Он определяет имя расширения, значок, который будет использоваться, разрешение, необходимое от пользователей для работы расширения, и многое другое. Вы можете прочитать об этом здесь. Это выглядело как это для меня.
  2. После этого добавьте значок для вашего расширения. Это отображается в вашем браузере рядом с омнибоксом.
  3. Создайте файл с именем всплывающее окно.html. Это представление для вашего расширения, которое будет отображаться во всплывающем окне, созданном в ответ на щелчок пользователя по действию браузера.
  4. Создайте файл js с именем всплывающее окно.js. Фактическая логика рендеринга содержимого всплывающего окна реализуется этим файлом.
  5. Мне пришлось пойти и создать дополнительный файл для моего расширения метатега с именем getPageMetas.js. По сути, это content_script, который выполняется на веб-странице и может использоваться для взаимодействия с файлами расширения. Одна вещь, которую вы должны заметить, это то, что файлы расширений и файлы веб-страниц выполняются отдельно и полностью изолированы друг от друга. Единственный способ общаться друг с другом — использовать content_scripts. Вы можете прочитать все об этом здесь.

Когда у вас есть все эти файлы, вы готовы запустить свое первое расширение для Chrome. Довольно легко, правда?

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

Я сделал свой код расширения открытым для всеобщего обозрения. Вот полный код расширения метатега:

Вот моя ссылка на расширение для всех, чтобы скачать и использовать:

Прочтите другие статьи моего блога здесь:

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

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

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