Chrome е лесно най-популярният уеб браузър на планетата. Според проучването на Statcounter за пазарен десктоп браузър, Chrome ще завладе 65% от пазара в настолни браузъри до края на 2017 г.

С този тип пазарна дефиниция, проектирането за Chrome се превърна в приоритет. Същото важи и за разширенията: Chrome най-много предлага най-голямата потребителска база за разширения, с десетки хиляди разширения, теми и приложения, популяризиращи уеб магазина на Chrome.

Ако искате да се възползвате от тенденцията, можете да създадете собствено основно разширение за Chrome. Ще имате нужда от някои основни умения за уеб развитие (HTML, CSS и Javascript), както и една чаена лъжичка от JSON, за да свържете всичко заедно.

Ще прегледаме най-основната структура, необходима за изграждането на основно разширение за Chrome в тази публикация. За да получите подробен изглед на наличните възможности, разгледайте ръководството за разширения за програмисти на Chrome.

Писане на основно разширение за Chrome: Manifest Destiny

За този урок ние ще изградим основно разширение за Chrome, което показва прост изскачащо съобщение при кликване. Ще имаме нужда от няколко важни файла: икона ("icon.png"), HTML файл ("popup.html") и важния манифест ("manifest.json"). Всички тези файлове ще се намират в директория с името на вашето разширение. В този случай това се нарича "Здравей свят".

Разширението за Chrome се определя от неговия манифест. Този фрагмент от JSON показва Chrome как да интерпретира разширението, какви файлове да се зарежда и как да взаимодейства с потребителя.

Манифестното досие за основното ни разширение изглежда така:

 {"manifest_version": 2, "name": "Hello World!", "description": "Моето първо разширение за Chrome", "browser_action": {default_icon ": icon.png, default_popup: .html "}, " разрешения ": [" activeTab "]]

Този манифестиран файл ще постави икона в лентата с инструменти на потребителя, която при щракване зарежда съдържанието на файла с име "popup.html". Следното е плътно прилепналите за останалата част от съдържанието:

  • manifest_version съобщава на Chrome каква версия на маркировката на манифеста ви работи. За модерните разширения ще трябва да зададете 2.
  • name показва името, което ще се показва в магазина на Chrome и "chrome: // extensions".
  • description показва описателния текст, показан на "chrome: // extensions".
  • browser action зарежда иконата в лентата с инструменти. Той също така позволява разширението да отговаря на входа на потребителя, като показва подсказка, изскачащ прозорец или значка. Вижте пълния списък на всичко, което "браузър_актив" може да направи.
  • default_icon показва пътя към иконата от директорията на разширението.
  • default_popup показва пътя към файла, който ще се зареди, когато се кликне върху иконата на разширението.
  • permissions ограничават функционалния регион на разширението. activeTab е най-често срещаното, което позволява на разширението да има достъп до най-предния раздел. Google предоставя списък с всички разрешения, които разширение може да поиска.

Ако искате дълбоко да се потопите в всичко, което манифестът на разширението на Chrome може да декларира, разгледайте документите на Google за разширенията на манифеста.

Писане на основно разширение за Chrome: изскачащи прозорци

Сега, когато написахме нашия манифест, можем да разберем какво ще покаже нашето разширение. Това зависи от нашия "popup.html" файл, който ще се покаже при зареждането на разширението. Ето какво ще използваме за този проект:

 Здравей свят

Както можете да видите, това ще направи някои текст оформен с CSS. Ако искате да добавите Javascript или външен CSS към вашето разширение, това изисква деклариране на скриптовете в манифеста под content_scripts . След като сте посочили това в манифеста, можете да заредите тези скриптове, както обикновено.

Писане на основно разширение за Chrome: Зареждане в Chrome

След като напишем основния код за разширението си и намерихме подходяща икона, можем да го заредим в Chrome.

1. Навигирайте до "chrome: // extensions" и включете "Режим за програмисти", като поставите отметка в квадратчето в горния десен ъгъл.

2. Кликнете върху бутона "Зареждане на неопаковано разширение ..." и изберете директорията на разширението.

3. След като разширението е заредено, ще видите неговата икона в лентата с менюта.

4. Кликнете върху разширението, за да видите неговия (много прост) ефект.

Заключение: Разширяване на разширението ви за Chrome

След като приключите с разширението си и сте готови за публикуване, ще трябва да създадете профил за програмисти на Chrome. Това не е точно процес, но Google предоставя пълни указания за публикуване на разширението ви за Chrome тук.

Очевидно има много повече неща, които можете да направите с разширението си за Chrome, но това малко надхвърля обхвата на тази публикация. Ако искате да научите повече за всичко, което разширенията за Chrome могат да направят, разгледайте ръководството на Google за разширители за програмисти.