Техно-мир

Google Chrome – это один из наиболее популярных браузеров, и тому есть множество причин: он быстро работает, он надежен и предлагает невероятный набор инструментов для разработчиков, а также сотни различных расширений для своих пользователей, которые можно скачивать из Google Store.Также следует отметить, что вы можете создавать собственные расширения используя лишь HTML, CSS и javascript, и поэтому многим из вас не придется изучать новые языки программирования. Вы уже все знаете, вам нужно лишь понять, как эти знания можно применить на Chrome.Бывают случаи, когда вам хочется добиться чего-то особенного в вашем браузере, но такие функции отсутствуют в стандартном арсенале Chrome, и именно тогда вам на помощь приходят расширения.

О расширениях Chrome

Первое, что вам нужно знать, это то, что существует два типа расширений:* Операции на страницах, зависящие от страниц* Операции в браузере, которые не зависят от страницВзгляните на такую ситуацию:Первая иконка в адресной строке, RSS-иконка, представляет собой операцию, связанную со страницей, так как она появляется только на тех страницах, где имеется поддержка RSS-рассылки. Это операция, которая связывается со страницами.Первая иконка за пределами адресной строки – это камера, которая демонстрирует нам пример расширения для создания скриншотов страниц. Оно всегда доступно и не зависит от страниц. Это операция в браузере, которая не зависит от страниц.Сегодня мы расскажем вам о создании простого браузерного расширения.

Создаем расширение

Первое, что нам нужно сделать, это создать root-папку для нашего расширения и добавить туда manifest.json, в котором будет содержаться JSON-объект с характеристиками нашего расширения:

{
    “name": "BrowserAction",
    "version": "0.0.1",
    "manifest_version": 2,
}

Это и будет скелетом нашего файла. Затем нам нужно добавить фоновые страницы нашего расширения, — эти страницы будут отвечать за логику, происходящую на фоне нашего расширения:

"background": {
    “scripts”: [“main.js”, "script.js"]
  }

Нам также нужно внедрить сюда объект browser_action, — здесь будет размещаться простой UI нашего расширения. Так как это браузерная операция, и при нажатии кнопки на панели инструментов, скорее всего, будет вылезать всплывающее окно, этот объект позволяет нам как раз-таки вписать исходный код этого окна: иконки, видимые пользователю, заголовок и так далее:

"browser_action": {
    “default_icon”: “icon.png”,
    “default_title”: "The Title",
    "default_popup": "popup.html"
}

Если мы добавим это к нашему манифесту, то получим нечто вроде следующего:

{
    "name": "BrowserAction",
    "version": "0.0.1",
    "manifest_version": 2,
    "background": {
      “scripts": [“main.js”, "script.js"]
     }
     "browser_action": {
     "default_icon": "icon.png",
       "default_title": "The Title",
     "default_popup": "popup.html"
     }
}

После того, как мы все это проделаем, все что останется сделать, это создать непосредственно само приложение.

Расширение

Задача данного руководства заключалась в том, чтобы создать простую jQuery-пипетку при помощи javascript-плагина Spectrum. Итак, наш popup.html будет выглядеть следующим образом:

    Simple Extension




  

Как видно, все, что мы сделали, это лишь добавили раздел, который содержит два необходимых элемента, чтобы Spectrum заработал, а затем запустили все файлы вроде jquery, spectrum.js, css-файл, а также popup.js, где и будет инициализироваться код spectrum.Наш javascript-код состоит из всего 6 строк ввиду простоты самого плагина:

$(".picker").spectrum({
    color: "#fff",
    change: function(color) {
        $("#picker-log").text("The Color is: " + color.toHexString());
    }
});

(этот код – это лишь пример, и он не трогает Chrome API, так как нам нужно было просто продемонстрировать то, как использовать простой HTML/CSS и javascript коды для создания того, что вам нужно в браузере Chrome).

Тестируем приложение

Вы только что создали собственное простенькое приложение, но оно вполне может пригодиться вам в работе, и у вас нет планов загружать его в Google Store.Поэтому давайте протестируем его локально. Для этого, откройте в Chrome chrome://extensions, и убедитесь, что у вас включен режим разработчика (Developer Mode). Если да, то можете загрузить распакованное приложение или перетащить папку с рабочего стола, и тогда ваше приложение немедленно отобразится на панели инструментов. Это сработает только в режиме разработчика. Если вы хотите загрузить расширение в Google Store, то вам нужно будет запаковать приложение, так как Chrome Store позволяет загружать файлы только в формате .crx.

В завершение

Расширения для Chrome – это не так уж сложно и страшно, как казалось ранее. И создавать их можно довольно быстро, буквально за несколько минут.

Вернуться назад