Андрей Смирнов
Время чтения: ~5 мин.
Просмотров: 2

Как создать и опубликовать расширение Chrome за 20 минут

Т.к. данные вставляются посредством InnerHtml, то данная возможность просто так не появится. Вот, что пришлось организовать:
$('#dannie').on('mouseover', '.sait', function( ) { $(this).css({'border':'3px solid #ffffff'}); }); $('#dannie').on('mouseout', '.sait', function( ) { $(this).css({'border':'3px solid black'}); }); $('#dannie').on('mousedown', '.sait', function( ) { $(this).css({'border':'3px solid black'}); });  $('#dannie').on('mouseover', '.sait', function( ) {   $('.sait').draggable({  helper:'clone' });   }); 

вместо привычного:

$('.sait').mouseover(function(){ $('#'+this.id).css({'border':'3px solid #ffffff'}); }); $('.sait').mouseout(function(){ $('#'+this.id).css({'border':'3px solid black'}); }); $('.sait').mousedown(function(){ $('#'+this.id).css({'border':'0px solid black'}); }); $('.sait').draggable( {  helper:'clone', }); 

Думаю, объяснять не нужно. Почитать подробнее можете по ссылкеТестирование расширения Заходим в Настройки — Инструменты — Расширения, жмем на «Загрузить распакованное расширение»Публикация расширения Заходим на страницу оплачиваем 5$, публикуем. Я не останавливаюсь на моментах, с которыми у меня не возникли трудности. А трудности возникли при оплате карточкой: — В моём случае должен быть подключен 3д пароль. Если Вам при оплате пишет ошибку, звоните своему банку и узнавайте. Мне за минуту помогли и всё гуд.Источники:ДокументацияОб отправке сообщенийО манифестеФорум javascript А также само расиширниеae7da0daa725de6cef3e2773912d18a5.png. Спасибо за прочтение. Всем удачи.

290
187.4k 290

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

Но хотели бы вы создать свое собственное расширение Chrome? Задумывались ли вы, насколько трудоемкий этот процесс и что для этого нужно? Что ж, оказывается, это супер просто, возможно даже проще, чем вы представляли.

В этом уроке я собираюсь показать, как создать базовое расширение для Chrome, затратив на это около 5 минут — без шуток!

Что мы собираемся разрабатывать

Я одержим заботой о скорости моего сайта, , так что я часто использую такие сайты как , чтобы проверить скорость сайта.

create-chrome-extension-10-minutes-flat-1.png

Также я часто проверяю другие сайты, чтобы сравнивать.

Было бы неплохо иметь расширение для Chrome, которое позволяло бы, используя GTmetrix, проверить скорость сайта, который вы в данный момент просматриваете, просто нажав кнопку?

Я проверил Chrome Web Store и не нашел подобного расширения, так что именно это мы и реализуем.

Что такое расширение для Google Chrome

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

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

В этом уроке я собираюсь показать вам, как создать базовое расширение Chrome, которое называют Browser Action. Этот вид расширения добавляет в панель инструментов Chrome кнопку, нажатие на которую показывает HTML-страницу. Также такие расширения позволяют выполнять какой-либо JavaScript-код.

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

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

Шаг 1: Создание проекта

Первое, что мы должны сделать, это создать проект и все файлы, которые нужны для нашего расширения. Давайте начнем с создания нового каталога, который мы назовем «GTmetrix Extension». В этот каталог мы поместим все файлы, которые нужны для расширения. Chrome позволяет загрузить плагин, указав директорию, содержащую файлы с расширением.

Все расширения Chrome требуют наличия файла манифеста. Файл манифеста сообщает браузеру все, что нужно для загрузки расширения. Создадим файл manifest.json в директории проекта. Оставим пока его пустым.

Далее нам потребуется иконка для нашего расширения. Это должен быть PNG-файл 19×19px. Можно взять .

Далее создадим HTML-страницу, которая будет отображаться при нажатии на иконку. ДЛя этого добавим файлы popup.html и popup.js в директорию проекта «GTmetrix Extension».

Из-за ограничений безопасности, мы не можем использовать в расширении JavaScript-код, встроенный в HTML, поэтому мы будем ссылаться на внешний файл.

Шаг 2: Создание файла манифеста

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

Откройте файл manifest.json и добавьте в него следующий код:

  {      "manifest_version": 2,         "name": "GTmetrix Analyzer Plugin",      "description": "This extension will analyze a page using GTmetrix",      "version": "1.0",         "browser_action": {          "default_icon": "icon.png",          "default_popup": "popup.html"      },        "permissions": [          "activeTab"      ]  }  

Большинство полей в этом JSON-файле не требуют дополнительного объяснения, поэтому я не буду тратить на это время, обратите внимание на раздел browser_action, где мы определяем, какая иконка будет использоваться и какая HTML-страница должна отображаться при нажатии на кнопку.

Вы также, наверное, заметили, что я добавил раздел permissions, который определяет, что расширение имеет доступ к текущей вкладке. Это необходимо для того, чтобы мы могли получить URL в текущей вкладки и перейти к GTmetrix.

Шаг 3: Создание интерфейса

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

create-chrome-extension-10-minutes-flat-2.png

Наш интерфейс будет очень простым, содержащим заголовок «GTmetrix Analyzer» и кнопку, по которой пользователь сможет проанализировать текущую страницу.

Откройте popup.html и добавьте следующий код:

                    <title>GTmetrix Analyzer</title>

GTmetrix Analyzer

<button>Check this page now!</button> </pre>

Рейтинг автора
5
Подборку подготовил
Илья Коновалов
Программист и опытный пользователь интернета
Написано статей
179
Ссылка на основную публикацию
Похожие публикации