Как создать Chrome-расширения с нуля

Если вы хотите добавить или изменить некоторые функции в Google Chrome вам нужно использовать расширение. Хотя вы можете загрузить расширение из Интернет-магазина Chrome, но иногда вам нужны специальные функции, которых нет ни в одном из существующих расширений..

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

В следующем я собираюсь показать вам Самый простой способ создать расширение. Если у вас есть некоторые знания о веб-разработке (HTML, CSS и JS), вы будете чувствовать себя как дома. Если нет, сначала посмотрите эти каналы, чтобы изучить основы веб-разработки, затем продолжайте ниже.

Предпосылки

Вы должны выполнить следующие требования, прежде чем начать с этого урока.

1. Вы должны быть знакомы с HTML, CSS и JavaScript. [Проверьте ресурсы]
2. Вы должны иметь редактор кода написать расширение. [Сравнить редакторов]
3. (Необязательно) Если вы хотите распространить ваше расширение на других пользователей, вы должны иметь аккаунт разработчика в Интернет-магазине Chrome. [Завести аккаунт]

Замечания: Google просит вас заплатить небольшую плату за создание учетной записи разработчика в Chrome Web Store.

Создать расширение

В этом уроке я собираюсь поделиться процессом создания расширение дел для Google Chrome. Это будет утилита (как показано ниже) для демонстрации основных компонентов и возможностей, предоставляемых расширениям..

1. Получить шаблон

Google Chrome, как и любая другая платформа, требует расширения иметь заданную структуру, что может показаться сложным для начинающих. Вот почему хорошо получить шаблон для расширения, которое обеспечит все необходимое.

Extensionizr - лучший шаблонный генератор для хромированных расширений. Позволяет выбрать один из заданных типов расширений. - действие браузера (действие для всех страниц или браузера), действие страницы (действие для текущей страницы) или скрытое расширение (фоновое действие, которое обычно скрыто в переднем интерфейсе).

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

Когда вы закончите выбирать варианты для создания образца расширения, нажмите “Загрузить!” кнопка в Расширение. в заключение, распаковать архив (.zip) в каталог и откройте редактор кода, чтобы начать писать расширение.

2. Код расширения

После загрузки и извлечения шаблона вы увидите структуру каталогов, как показано на снимке экрана ниже. Шаблон аккуратно организован, и вы должны знать, что самый важный файл “manifest.json“.

Давайте познакомимся и с другими файлами и папками в этом каталоге:

1. _locales: Используется для хранить информацию о языке для многоязычного приложения.
2. CSS: Он функционирует для хранения сторонних интерфейсных библиотек, таких как Bootstrap 4.
3. иконки: Он разработан, чтобы иметь значки для вашего расширения в различных размерах.
4. ЯШ: Это удобно, чтобы сохранить сторонние фоновые библиотеки как jQuery 3.
5. ЦСИ: Он хранит фактический код, который вы напишите для вашего расширения.

manifest.json

Он содержит основные метаданные о вашем приложении, который определяет детали вашего приложения для браузера. Вы можете отредактировать его, чтобы задать имя вашего расширения, описание, веб-сайт, значок и т. Д., А также такие особенности, как действия и разрешения браузера.

Например, в приведенном ниже коде вы заметите, что я изменил имя, описание и homepage_url вместе с default_title в browser_action. Более того, я добавленной “место хранения” по разрешениям как нам нужно хранить данные в нашем расширении.

 "name": "Todoizr - Упрощенный список дел", "version": "0.0.1", "manifest_version": 2, "description": "Простое приложение для всех.", "homepage_url": " https://go.aksingh.net/todoizr "," icons ": " 16 ":" icons / icon16.png "," 48 ":" icons / icon48.png "," 128 ":" icons / icon128 .png "," default_locale ":" en "," browser_action ": " default_icon ":" icons / icon19.png "," default_title ":" Todoizr - Упрощенное задание "," default_popup ":" src / browser_action / browser_action.html "," permissions ": [" storage "] 

ЦСИ \ browser_action

Этот каталог будет содержать код для действий браузера. В нашем случае мы будем код всплывающего окна отображается при нажатии на значок расширения в браузере. Наше расширение позволит пользователям добавлять и просматривать задачи во всплывающем окне..

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

Исходный код из шаблона

Хотя в этом каталоге был только HTML-файл, содержащий весь код, я решил разделить его на три отдельных файла для большей ясности. Тем не менее, файл HTML с именем “browser_action.html” теперь имеет следующий код:

Кроме того, файл стиля с именем “browser_action.css” имеет содержимое ниже, в то время как файл JavaScript с именем “browser_action.js” пока пусто.

 #mainPopup padding: 10px; высота: 200 пикселей; ширина: 400 пикселей; семейство шрифтов: Helvetica, Ubuntu, Arial, без засечек;  h1 font-size: 2em;  

Дизайн интерфейса всплывающего окна

После настройки начального проекта давайте сначала спроектируем интерфейс всплывающего окна. я имею настроить интерфейс с минималистским подходом, с указанием имени вверху, за которым следует форма для добавления элементов списка дел и область ниже для просмотра добавленных элементов. Это вдохновлено упрощенным дизайном “Форма Стиль 5“.

В приведенном ниже коде я добавил два элемента div - один для отображения формы для добавления элемента списка дел, а другой для отображения списка уже добавленных элементов списка задач. Тем не менее, новый код для “browser_action.html” как следует:

       
  
 
Todoizr
 
 
   
 
 
  
 
 
 
 
    

И файл стиля “browser_action.css” теперь имеет следующий код:

 @import url ("./ form_style_5.css"); #mainPopup height: 200px; ширина: 300 пикселей; семейство шрифтов: Helvetica, Ubuntu, Arial, без засечек;  / * Форма элемента списка дел * / .form-style-5 margin: auto; отступы: 0px 20px;  .form-style-5: first-child background: none;  .form-style-5 h1 color: # 308ce3; размер шрифта: 20 пикселей; выравнивание текста: по центру;  .form-style-5 input [type = "text"] width: auto; плыть налево; поле внизу: не установлено;  .form-style-5 input [type = "button"] background: # 308ce3; ширина: авто; плавать: правильно; обивка: 7px; граница: нет; радиус границы: 4 пикселя; размер шрифта: 14 пикселей;  .form-style-5 input [type = "button"]: hover background: # 3868d5;  / * Список элементов списка дел * / .form-style-5: last-child высота: наследовать; нижнее поле: 5 пикселей;  .form-style-5 ul padding: 20px;  .form-style-5 ul li font-size: 14px;  

Наконец, сторонний файл стиля “form_style_5.css” имеет содержание ниже. Он просто взят с его сайта, чтобы вдохновить дизайн нашего расширения.

 / * Form Style 5 от Sanwebe.com * / / * https://www.sanwebe.com/2014/08/css-html-forms-designs * / .form-style-5 максимальная ширина: 500 пикселей; отступы: 10px 20px; фон: # f4f7f8; маржа: 10px авто; отступы: 20 пикселей; фон: # f4f7f8; радиус границы: 8 пикселей; семейство шрифтов: Грузия, "Times New Roman", Times, Serif;  .form-style-5 fieldset border: none;  .form-style-5 legend font-size: 1.4em; нижнее поле: 10 пикселей;  .form-style-5 label display: block; нижнее поле: 8 пикселей;  .form-style-5 input [type = "text"], .form-style-5 input [type = "date"], .form-style-5 input [type = "datetime"], .form-style -5 input [type = "email"], .form-style-5 input [type = "number"], .form-style-5 input [type = "search"], .form-style-5 input [type = "time"], .form-style-5 input [type = "url"], .form-style-5 textarea, .form-style-5 select font-family: Georgia, "Times New Roman", Times с засечками; справочная информация: rgba (255 255 255, 1); граница: нет; радиус границы: 4 пикселя; размер шрифта: 16 пикселей; поле: 0; контур: 0; обивка: 7px; ширина: 100%; размер коробки: бордюр; -webkit-box-sizing: бордюр-бокс; -моз-бокс-проклейка: бордюр-бокс; цвет фона: # e8eeef; цвет: # 8a97a0; -webkit-box-shadow: 0 1px 0 rgba (0,0,0,0.03); box-shadow: 0 1px 0 rgba (0,0,0,0.03); нижнее поле: 30 пикселей;  .form-style-5 input [type = "text"]: фокус, .form-style-5 input [type = "date"]: фокус, .form-style-5 input [type = "datetime"]: focus, .form-style-5 input [type = "email"]: focus, .form-style-5 input [type = "number"]: focus, .form-style-5 input [type = "search"] : focus, .form-style-5 input [type = "time"]: focus, .form-style-5 input [type = "url"]: focus, .form-style-5 textarea: focus, .form- выбор стиля 5: focus background: # d2d9dd;  .form-style-5 select -webkit-Appearance: menulist-button; высота: 35px;  .form-style-5 .number background: # 1abc9c; цвет: #fff; высота: 30 пикселей; ширина: 30 пикселей; дисплей: встроенный блок; размер шрифта: 0,8em; поле справа: 4 пикселя; высота строки: 30 пикселей; выравнивание текста: по центру; тень для текста: 0 1px 0 rgba (255,255,255,0,2); радиус границы: 15px 15px 15px 0px;  .form-style-5 input [type = "submit"], .form-style-5 input [type = "button"] позиция: относительная; дисплей: блок; отступы: 19px 39px 18px 39px; цвет: #FFF; поле: 0 авто; фон: # 1abc9c; размер шрифта: 18 пикселей; выравнивание текста: по центру; стиль шрифта: нормальный; ширина: 100%; граница: 1px solid # 16a085; ширина границы: 1px 1px 3px; нижнее поле: 10 пикселей;  .form-style-5 input [type = "submit"]: hover, .form-style-5 input [type = "button"]: hover background: # 109177;  

Напишите логику всплывающего окна

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

В приведенном ниже коде мы будем использовать две функции - sync.get () и sync.set (), которые являются частью “chrome.storage“. Нам нужен второй, чтобы сохранить задачи в хранилище и первый, чтобы получить их и показать их.

Тем не менее, ниже приведен окончательный код “browser_action.js” файл. Как вы можете видеть ниже, код высоко комментируется, чтобы помочь вам понять его назначение.

 function loadItems () / * Сначала получить () данные из хранилища * / chrome.storage.sync.get (['todo'], function (result) var todo = [] if (result && result.todo &&) result.todo.trim ()! == ") / * Разобрать и получить массив при сохранении в виде строки * / todo = JSON.parse (result.todo) console.log ('todo.length =' + todo.length) для (var i = 0; i < todo.length; i++)  item = todo[i] if (item && item.trim() !==")  /* Append the items in the #list for showing them */ var list = document.getElementById('list') var entry = document.createElement('li') var text = document.createTextNode(item) entry.appendChild(text) list.appendChild(entry)   )  /* Load the to-do items upon popup load */ document.addEventListener('DOMContentLoaded', function() console.log('Inside doc.loaded()') loadItems() ) /* Save the to-do item upon button click */ document.getElementById('btn').addEventListener('click', function (ev)  console.log('Inside btn.click()') text = document.getElementById('txt').value if (text && text.trim() !==")  /* First get() old data as calling set() will replace it */ chrome.storage.sync.get(['todo'], function(result)  var todo = [] if (result && result.todo && result.todo.trim() !==")  /* Parse and get the array as it is saved as a string */ todo = JSON.parse(result.todo)  todo.push(text) chrome.storage.sync.set('todo': JSON.stringify(todo), function()  /* Data is saved now */ var list = document.getElementById('list') while (list.firstChild)  list.removeChild(list.firstChild)  loadItems() ) )  ) 

3. Загрузите расширение

После того как вы закончите написание своего расширения, самое время протестировать его с помощью функции Google Chrome, которая предлагает загружать неупакованные, распакованные расширения. Но сначала вы должны включить режим разработчика в вашем браузере: нажмите опции кнопка > выбирать “Больше инструментов” > расширения, а затем включить “режим разработчика“.

Теперь вы увидите больше кнопок под строкой поиска. Здесь нажмите “Загрузить без упаковки” кнопка. Он попросит каталог - просмотрите и выберите каталог вашего расширения, и он загрузит расширение. Если вы редактируете или обновляете код своего расширения, вы можете нажать перезагрузить кнопку, чтобы загрузить последние изменения.

В нашем примере, вы увидите значок расширения рядом со значком профиля, потому что мы добавили действие браузера в нашем примере расширения. Вы можете нажать на этот значок, чтобы добавлять и просматривать задачи в нашем расширении, так как это указанное действие.

Распространить расширение

Хотя это легко загрузить расширение в Chrome Web Store этот процесс слишком длинный, чтобы охватить все детали. Короче говоря, вы создаете учетную запись разработчика, упаковываете свое расширение, а затем отправляете его вместе с деталями его содержимого (такими как имя, значок, снимки экрана и т. Д.); как указано в его пошаговом руководстве.

Что дальше? Читать и код

Как и следовало ожидать, цель этого руководства - начать работу с расширением для Google Chrome. Я попытался охватить основные понятия; тем не мение, вам нужно знать намного больше для серьезного развития расширения.

Тем не менее, ниже приведены некоторые из моих любимые ресурсы для обучения разработке расширений для Google Chrome и других браузеров на основе Chromium:

1. Все возможности, компоненты и особенности расширений.
2. Примеры расширений от команды Google Chrome.

Если вы прошли через эти ресурсы и готовы к некоторым испытаниям, попробуйте добавить нижеприведенные функции в расширение, которое вы только что завершили разработку:

1. Возможность удалить сохраненные задачи.
2. Возможность показывать уведомления, когда закончите добавление элемента.

Это все о разработке вашего первого расширения для самого популярного браузера. Какое расширение вы создали? Вы попали в проблему? Пожалуйста, дайте мне знать вашу историю, написав комментарий ниже или отправив мне сообщение на @aksinghnet.

И последнее, но не менее важное: обратите внимание, что вы можете попробовать Todoizr (расширение, которое мы создали) в Chrome Web Store и проверить его полный код в этом репозитории..