Содержание
$('#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 А также само расиширние
. Спасибо за прочтение. Всем удачи.
Одна из моих любимых вещей в браузере Chrome — это его расширяемость. Складывается впечатление, что существуют плагины для всего, что вы когда-либо можете захотеть.
Но хотели бы вы создать свое собственное расширение Chrome? Задумывались ли вы, насколько трудоемкий этот процесс и что для этого нужно? Что ж, оказывается, это супер просто, возможно даже проще, чем вы представляли.
В этом уроке я собираюсь показать, как создать базовое расширение для Chrome, затратив на это около 5 минут — без шуток!
Что мы собираемся разрабатывать
Я одержим заботой о скорости моего сайта, , так что я часто использую такие сайты как , чтобы проверить скорость сайта.
Также я часто проверяю другие сайты, чтобы сравнивать.
Было бы неплохо иметь расширение для Chrome, которое позволяло бы, используя GTmetrix, проверить скорость сайта, который вы в данный момент просматриваете, просто нажав кнопку?
Я проверил Chrome Web Store и не нашел подобного расширения, так что именно это мы и реализуем.
Что такое расширение для Google Chrome
Прежде, чем мы начнем разработку расширения, неплохо было бы разобраться в том, что представляют собой расширения для Chrome и как они работают.
На самом базовом уровне расширение Chrome — это набор HTML, CSS и JavaScript-файлов, позволяющий добавить некоторую функциональность в Chrome через JavaScript API, который предоставляет браузер. По сути, расширение — это веб-страница в Chrome, имеющая доступ к некоторым дополнительным API.
Расширение FastProxy открывает доступ к заблокированным сайтамВ этом уроке я собираюсь показать вам, как создать базовое расширение 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: Создание файла манифеста
Теперь, когда мы создали базовую структуру проекта, нам нужно добавить описание расширения в файл манифеста.
14 расширений для браузера, которые решат кучу ваших проблемОткройте файл 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: Создание интерфейса
Следующим шагом будет создание интерфейса, который будет отображаться при нажатии на иконку.
Наш интерфейс будет очень простым, содержащим заголовок «GTmetrix Analyzer» и кнопку, по которой пользователь сможет проанализировать текущую страницу.
Откройте popup.html и добавьте следующий код:
<title>GTmetrix Analyzer</title>GTmetrix Analyzer
<button>Check this page now!</button> </pre>
Загрузка...
Как экспортировать и импортировать закладки в Google Chrome
Что делать, если зависает Яндекс браузер при просмотре видео
12+ полезных Google Chrome chrome:// команд
Расширение VPN от Browsec: установка, настройка и использование