Пишем своё Chrome расширение. Вступление, манифест. Часть 1.

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

Перейдите во вкладку "Расширения" и нажмите на режим разработчика. После этого должна появиться панель с кнопками. Пока что нас будет интересовать только кнопка "Загрузить распакованное расширение…", которая позволит установить разрабатываемое расширение.

Хорошо, этап предподготовки пройден, но что же будет наше расширение?! Мне всегда не хватало на Голосе вкладки, где бы я мог посмотреть список постов, за которые голосовал. Создадим расширение, которое создаст такую вкладку.

Манифест

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

{
  
  "manifest_version": 2,
  "name": "Вкладка \"Понравившиеся\" для блокчейн Golos.IO",
  "version": "1.0",
  
  "icons": {
    "128": "favicon128.png",
    "48": "favicon48.png",
    "16": "favicon16.png"
  },
  "content_scripts": [
    {
      "matches": [ "*://golos.io/*" ],
      "js": [ "content.js"],
      "css": [ "style.css" ]
    }
  ],
  "permissions": [
    "storage",
    "tabs"
  ],
  "browser_action": {
    "default_title": "Вкладка \"Понравившиеся\" для блокчейн Golos.IO",
    "default_icon": "favicon128.png",
    "default_popup": "popup.html"
  },
  "web_accessible_resources": [
    "script.js"
  ]
    
}

Разберем подробнее, что же там написано.

manifest_version - версия манифеста, документация гугла говорит нам, что она обязательно должна быть 2.

name - имя расширения.

version - версия расширения.

icons - набор иконок, основными размерами являются 128х128, 48х48, 16х16. Обязательно наличие хоть одной иконки.

content_scripts - скрипты, которые будут загружаться на сайтах. В matches - прописываются сайты, на которых эти скрипты будут запускаться, если не добавлять это поле, то скрипты будут грузиться на всех сайтах. js - javascript скрипты. css - файлы стилей.

permissions - разрешения для расширения. В данном случае необходима работа с вкладками (tabs) и локальным хранилищем (storage).

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

web_accessible_resources - файл script.js будет интегрироваться в сайт Golos, поэтому его необходимо указать в веб доступных ресурсах.

У манифеста имеется множество различных свойств, которые вы можете посмотреть на странице документации

Мы разобрались со структурой манифеста, но если сейчас загрузить это расширение, то Chrome ошибку отсутствия файлов content.js, style.css, popup.html, script.js. Давайте сейчас создадим их, а что будет содержать каждый из файлов поговорим уже в следующих частях!

Cкачать готовое расширение можно здесь

Заглавное фото с сайта energysmi.ru

Данный материал о создании расширений для Google Chrome подготовлен автором @mo3golom. Продолжение будет:)