Изображение 1 из 4
Написать расширение для Chrome не так сложно, как может показаться на первый взгляд.
На самом деле, если вы уже пробовали JavaScript и HTML, в вашем распоряжении будет большая часть знаний и инструментов. Все, что вам нужно знать, это как его собрать, чтобы Chrome мог его интерпретировать и использовать.
Даже если вы новичок в программировании, вы сможете следовать этому простому руководству, и к его концу вы создали расширение, позволяющее быстро находить факты в энциклопедии с открытым исходным кодом, Википедия.
Все, что вам нужно, это текстовый редактор — мы использовали наш текущий фаворит, Sublime Text — браузер Google Chrome и приложение для рисования, такое как Paint. NET, чтобы создать значок для вашего расширения.
Написание расширения для Chrome: основы
Существует два разных типа расширений Chrome: «действие страницы» и «действие браузера». Значки для действий на странице отображаются в адресной строке омнибокса Chrome и влияют только на страницу, загруженную на отображаемую в данный момент вкладку. Примером действия на странице является кнопка, позволяющая подписаться на RSS-канал страницы.
Действия браузера, с другой стороны, работают независимо от загруженной страницы, и их значки отображаются за пределами омнибокса. Наше расширение Википедии — это действие браузера, расширение, которое мы хотим сделать доступным независимо от того, какая веб-страница или вкладка у нас открыта.
Первый шаг в создании расширения для Chrome прост: создайте папку, в которой будут храниться все файлы. Это может быть где угодно на вашем ПК или ноутбуке, но имеет смысл поместить его туда, куда вы легко сможете добраться, например, на рабочий стол или в папку «Мои документы».
Далее вам нужно создать текстовые файлы, которые будут содержать код. Мы создаем самое простое расширение для Chrome, поэтому все, что нам нужно, — это файл манифеста, файл HTML и файл PNG.
Создайте два новых текстовых файла и переименуйте их следующим образом:
manifest.json
displaypane.html
Что делают эти файлы? Файл манифеста представляет собой инструкцию. Он сообщает Chrome, какой это тип расширения, его имя, версию формата файла манифеста, который вы используете, а также другую важную информацию, например, где находится значок кнопки и какие файлы расширение должно хранить. бегать. Файл HTML содержит код, который сообщает расширению, что делать или отображать при нажатии.
Файл PNG представляет собой изображение размером 19 x 19 пикселей, которое появится на кнопке расширения на панели инструментов. Лучше всего, чтобы ваша иконка была простой. Мы использовали одну букву «W» и создали значок в Paint. СЕТЬ.
После того, как вы разработали свое изображение, вы можете сохранить его в папку, назвав файл icon.png, а затем приступить к заполнению текстовых файлов нужным вам кодом. Вы также можете создать изображение размером 38 x 38 пикселей, если не хотите, чтобы значок выглядел нечетким на дисплеях с высоким разрешением.
Написание расширения для Chrome: код
Файл манифеста создается с использованием нотации объектов JavaScript (JSON), которая является подмножеством языка программирования JavaScript. Как вы можете видеть из приведенного ниже, файлы манифеста могут быть довольно простыми. Они содержат блок кода, заключенный в фигурные скобки, который включает ряд настроек,
или «поля».
Единственными обязательными полями являются версия манифеста и имя, которое вы можете увидеть в верхней части нашего блока кода. В наш манифест мы добавили несколько дополнений. Есть поле описания, поле номера версии, и мы также сообщили Chrome, что тип расширения — это действие браузера.
