Автор оригинала: Abhishek jain.
Мне было интересно, на днях, если разрабатывая хромированное расширение – это сложная задача. Я вижу, что тысячи расширений, доступных на веб-магазине Chrome, чтобы сделать нашу жизнь легкой, но действительно ли это трудно разрабатывать. Был только один способ узнать. Это было на самом деле попытаться развить один сам.
Лучшее место, чтобы узнать все о разработке расширения и создание самостоятельного использования с техническими терминами, является официальный сайт разработчика Chrome. Прочитав все об этом, вы поймете, что вы можете создавать новые расширения для Chrome с помощью этих основных технологий, которые вы уже знакомы с веб-разработкой: HTML, CSS и JavaScript. Если вы когда-либо построили веб-страницу, вы должны чувствовать себя хорошо дома с расширениями довольно быстро.
Я решил создать расширение для отображения мета-тегов, используемых на веб-странице. Если вы не Tech Savvy и не знакомы с тем, как просмотреть их, это может быть очень полезно. Для создания расширения необходимо выполнить следующие действия:
Развитие расширений хрома
- Создайте пустую папку и добавьте файл с именем Mainfest.json. По сути, этот файл является идентичностью для вашего расширения. Он определяет имя расширений, значок, который необходимо использовать, разрешение, необходимое от пользователей, в целях расширения на работу и многое другое. Вы можете прочитать об этом здесь Отказ Это выглядело что-то вроде это для меня.
- После этого добавьте значок для вашего расширения. Это шоу в вашем браузере рядом с Omnibox.
- Создать файл с именем popup.html Отказ Это представление для вашего расширения и будет отображаться внутри всплывающего окна, которое создается в ответ на щелчок пользователя на действии браузера.
- Создать файл JS с именем popup.js Отказ Фактическая логика рендеринга содержимого всплывающего окна реализуется этим файлом.
- Мне пришлось пойти и создать дополнительный файл для моего расширения META TAG с именем getpagemetas.js Отказ Это в основном является Content_Script, который выполняется на веб-странице, и может использоваться для взаимодействия с расширениями файлов. Одним из них необходимо заметить, является то, что файлы расширений и файлы веб-страниц выполняются отдельно и полностью изолированы друг с другом. Единственный способ общаться друг с другом использует Content_Scripts. Вы можете прочитать все об этом здесь Отказ
Как только у вас есть все эти файлы, вы готовы запустить ваше первое расширение Chrome. Довольно легко, верно?
Как только вы закончите кодирование, ZIP вашу папку, перейдите к своему WebStore Developer Dashboard Загрузите ZIP, добавьте необходимые детали и Voila, вы успешно запустили свое первое расширение Chrome.
Я сделал свой код расширения открытым для всех, чтобы увидеть. Вот полный код для расширения мета тега: https://github.com/abhij89/meta-tags-chroome-extension.
Вот моя ссылка на расширение для всех для загрузки и использования: https://chrome.google.com/webstore/detail/meta-tags-seo-tool/miihmfdpfdioogfbfofbnagblnjbjomg.
Читать далее Блог Сообщений со мной здесь: http://blog.stagingInstance.com.