Как создать расширение Chrome для отображения метатегов, используемых на веб-странице, за 5 простых шагов
На днях мне было интересно, является ли разработка расширения для Chrome сложной задачей. Я вижу тысячи расширений, доступных в интернет-магазине Chrome, которые облегчают нашу жизнь, но действительно ли сложно разработать одно из них? Был только один способ узнать. На самом деле я пытался разработать его сам.
Лучшее место, где можно узнать все о разработке расширений и ознакомиться с техническими терминами, — это официальный сайт разработчиков Chrome. Прочитав все об этом, вы поймете, что можете создавать новые расширения для Chrome с помощью тех основных технологий, с которыми вы уже знакомы из веб-разработки: HTML, CSS и JavaScript. Если вы когда-либо создавали веб-страницу, вы должны довольно быстро освоиться с расширениями.
Я решил создать расширение для отображения метатегов, используемых на веб-странице. Если вы не разбираетесь в технологиях и не знаете, как их просматривать, это может быть очень полезно. Чтобы создать расширение, вам необходимо выполнить следующие шаги:
Разработка расширений Chrome
- Создайте пустую папку и добавьте файл с именем mainfest.json. По сути, этот файл является идентификатором вашего расширения. Он определяет имя расширения, значок, который будет использоваться, разрешение, необходимое от пользователей для работы расширения, и многое другое. Вы можете прочитать об этом здесь. Это выглядело как это для меня.
- После этого добавьте значок для вашего расширения. Это отображается в вашем браузере рядом с омнибоксом.
- Создайте файл с именем всплывающее окно.html. Это представление для вашего расширения, которое будет отображаться во всплывающем окне, созданном в ответ на щелчок пользователя по действию браузера.
- Создайте файл js с именем всплывающее окно.js. Фактическая логика рендеринга содержимого всплывающего окна реализуется этим файлом.
- Мне пришлось пойти и создать дополнительный файл для моего расширения метатега с именем getPageMetas.js. По сути, это content_script, который выполняется на веб-странице и может использоваться для взаимодействия с файлами расширения. Одна вещь, которую вы должны заметить, это то, что файлы расширений и файлы веб-страниц выполняются отдельно и полностью изолированы друг от друга. Единственный способ общаться друг с другом — использовать content_scripts. Вы можете прочитать все об этом здесь.
Когда у вас есть все эти файлы, вы готовы запустить свое первое расширение для Chrome. Довольно легко, правда?
Как только вы закончите кодирование, заархивируйте папку, перейдите в панель разработчика интернет-магазиназагрузите свой zip, добавьте необходимые данные и вуаля, вы успешно запустили свое первое расширение для Chrome.
Я сделал свой код расширения открытым для всеобщего обозрения. Вот полный код расширения метатега:
Вот моя ссылка на расширение для всех, чтобы скачать и использовать:
