Створення розширень Chrome з нуля

Якщо ви бажаєте додавати або змінювати деякі функції у Google Chrome потрібно використовувати розширення. Хоча ви можете завантажити розширення з Веб-магазину Chrome, але іноді потрібен певний функціонал, який не можна знайти в будь-якому існуючому розширенні.

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

Нижче я покажу вам Найпростіший спосіб створити розширення. Якщо у вас є певні знання про веб-розробку (HTML, CSS, JS), ви будете почувати себе як вдома. Якщо ні, спочатку перегляньте ці канали вивчити основи веб-розробки, потім продовжуйте нижче.

Передумови

Перш ніж розпочати цей навчальний посібник, потрібно виконати такі вимоги.

Ви повинні бути знайомі HTML, CSS і JavaScript. [Перевірити ресурси]
Ви повинні мати a редактор коду щоб написати розширення. [Порівняти редактори]
(Необов'язково) Якщо ви хочете поширити розширення на інших користувачів, ви повинні мати a обліковий запис розробника у Веб-магазині Chrome. [Створити аккаунт]

Примітка: Google вимагає сплатити невелику плату за створення облікового запису розробника в Веб-магазині Chrome.

Створіть розширення

У цьому підручнику я збираюся поділитися процесом створення розширення завдання для Google Chrome. Це буде утиліта (як показано нижче) для демонстрації основних компонентів і можливостей, які надаються розширенню.

1. Отримати шаблон

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

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

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

Коли ви завершите вибір варіантів створення зразка розширення, натисніть кнопку “Завантажте його!” у Extensionizr. Нарешті, розпакуйте архів (.zip) до каталогу і відкрийте редактор коду, щоб розпочати написання розширення.

2. Код розширення

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

Познайомимося з іншими файлами та папками в цьому каталозі:

_locales: Він звик зберігати інформацію про мову для багатомовної програми.
css: Він функціонує для зберігання сторонніх бібліотек інтерфейсу типу Bootstrap 4.
іконки: Він розроблений, щоб мати значки для вашого розширення в різних розмірах.
js: Це зручно для збереження бібліотеки сторонніх виробників як jQuery 3.
src: Він зберігає фактичний код, який ви пишете для вашого розширення.

manifest.json

Він містить основні метадані про вашу програму, яка визначає відомості про вашу програму для веб-переглядача. Ви можете редагувати його, щоб встановити назву розширення, опис, веб-сайт, піктограму тощо, а також специфіку дії та дозволи браузера.

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

 "name": "Todoizr - To-do Simplified", "version": "0.0.1", "manifest_version": 2, "description": "Просте завдання для всіх.", "homepage_url": " https://go.aksingh.net/todoizr "," іконки ": " 16 ":" icons / icon16.png "," 48 ":" icons / icon48.png "," 128 ":" іконки / icon128 .png "," default_locale ":" en "," browser_action ": browser_action / browser_action.html "," права доступу ": [" storage "]

src

Цей каталог міститиме код для дії браузера. У нашому випадку ми будемо код спливаючого вікна відображається при натисканні піктограми розширення у веб-переглядачі. Наше розширення дозволить користувачам додавати та переглядати пункти завдань у спливаючому вікні.

Примітка: Ви завжди можете запустити код з клонування цього сховища.

Початковий код із шаблону

Хоча цей каталог мав лише HTML-файл, що має весь код, я вирішив розділити його на три окремі файли для більшої ясності. Тим не менш, названий файл HTML “browser_action.html” тепер має такий код:

Більш того, файл стилю названий “browser_action.css” має наведене нижче вміст, у той час як файл JavaScript називається “browser_action.js” на даний момент порожній.

 #mainPopup padding: 10px; висота: 200px; ширина: 400px; сімейство шрифтів: Helvetica, Ubuntu, Arial, sans-serif;  h1 font-size: 2em;

Створити інтерфейс спливаючих вікон

Після налаштування початкового проекту, давайте спочатку розробимо інтерфейс спливаючого вікна. У мене є встановити інтерфейс з мінімалістичним підходом, із зазначенням назви у верхній частині, а потім форми, щоб додати елементи завдань і область нижче для перегляду доданих елементів. Він натхненний спрощеним дизайном “Стиль форми 5“.

У наведеному нижче коді я додав два divs - один для відображення форми, щоб додати елемент завдання, а інший - для відображення списку вже доданих елементів завдання. Тим не менш, новий код для “browser_action.html” виглядає наступним чином:

          Тодоізр

І файл стилю “browser_action.css” тепер має такий код:

 url @import ("./ form_style_5.css"); #mainPopup висота: 200px; ширина: 300px; сімейство шрифтів: Helvetica, Ubuntu, Arial, sans-serif;  / * Форма завдання * / .form-style-5 margin: auto; оббивка: 0px 20px;  .form-style-5: перша дитина фон: немає;  .form-style-5 h1 color: # 308ce3; розмір шрифту: 20px; text-align: center;  .form-style-5 input [type = "text"] width: auto; поплавок: лівий; margin-bottom: unset;  .form-style-5 input [type = "button"] background: # 308ce3; width: auto; поплавок: праворуч; прокладка: 7px; кордон: немає; кордон-радіус: 4px; розмір шрифту: 14px;  .form-style-5 input [type = "button"]: hover фон: # 3868d5;  / * Список завдань * / .form-style-5: остання дитина height: inherit; margin-bottom: 5px;  .form-style-5 ul заповнення: 20px;  .form-style-5 ul li розмір шрифту: 14px;

Нарешті, файл стилю третьої сторони “form_style_5.css” має нижчий вміст. Це просто взято з його веб-сайту, щоб надихнути дизайн нашого розширення.

 / * Стиль форми 5 від Sanwebe.com * / / * https://www.sanwebe.com/2014/08/css-html-forms-designs * / .form-style-5 max-width: 500px; заповнення: 10px 20px; фон: # f4f7f8; запас: 10px auto; заповнення: 20px; фон: # f4f7f8; кордон-радіус: 8px; сімейство шрифтів: Грузія, "Times New Roman", Times, serif;  .form-style-5 fieldset border: none;  .form-style-5 легенда font-size: 1.4em; margin-bottom: 10px;  .form-style-5 label display: block; margin-bottom: 8px;  .form-style-5 input [type = "text"], вхід .form-style-5 [type = "date"], введення .form-style-5 [type = "datetime"], .form-style -5 input [type = "email"], введення .form-style-5 [type = "number"], .form-style-5 input [type = "search"], введення .form-style-5 [тип] = "time"], .form-style-5 input [type = "url"], .form-style-5 textarea, .form-style-5 select font-family: Грузія, "Times New Roman", Times , serif; фон: rgba (255,255,255, .1); кордон: немає; кордон-радіус: 4px; розмір шрифту: 16px; маржа: 0; контур: 0; прокладка: 7px; ширина: 100%; розмір коробки: кордон; -вебкіт-короб-розмір: border-box; -moz-box-sizing: бордюр; background-color: # 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) вставка; margin-bottom: 30px;  .form-style-5 input [type = "text"]: фокус, .form-стиль-5 введення [type = "date"]: focus, .form-style-5 input [type = "datetime"]: focus, .form-style-5 input [type = "email"]: фокус, .form-стиль-5 введення [type = "number"]: фокус, .form-style-5 input [type = "search"] : focus, .form-style-5 input [type = "time"]: фокус, вхід .form-style-5 [type = "url"]: фокус, форма-стиль-5 textarea: фокус, .форма style-5 select: focus фон: # d2d9dd;  .form-style-5 select -вебкіт-вигляд: меню-кнопка; висота: 35px;  .form-style-5 .number background: # 1abc9c; колір: #fff; висота: 30px; ширина: 30px; дисплей: вбудований блок; розмір шрифту: 0.8em; margin-right: 4px; висота рядка: 30px; text-align: center; текстова тінь: 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"] position: relative; дисплей: блок; заповнення: 19px 39px 18px 39px; колір: #FFF; маржа: 0 авто; фон: # 1abc9c; розмір шрифту: 18px; text-align: center; стиль шрифту: нормальний; ширина: 100%; кордон: 1px суцільний # 16a085; border-width: 1px 1px 3px; margin-bottom: 10px;  .form-style-5 input [type = "submit"]: наведені дані, .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'], функція (результат) var todo = [] if (результат && 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 процес занадто довгий, щоб охопити всі деталі. Коротше кажучи, ви створюєте обліковий запис розробника, упаковуєте розширення, а потім надсилаєте його разом із деталями вмісту (наприклад, ім'я, значок, скріншоти тощо); як зазначено у покроковому посібнику.

Що далі? Читання та код

Як ви, напевно, очікували, мета цього посібника полягає в тому, щоб ви почали розробку розширення для Google Chrome. Я намагався охопити основні поняття; однак, Ви повинні знати набагато більше для серйозного розвитку.

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

Всі здібності, компоненти і особливості розширень.
Зразок розширень для команди Google Chrome.

Якщо ви перейшли ці ресурси та готові до виклику, спробуйте додати нижче функції, які тільки що завершили розробку:

Опція видалення збережених елементів завдань.
Функція для показу сповіщень після додавання елемента.

Це все про розробку вашого першого розширення для найпопулярнішого браузера. Яке розширення було створено? Ви потрапили в проблему? Будь ласка, дайте мені знати вашу історію, написавши коментар нижче або повідомлення мені в @aksinghnet.

Не в останню чергу зверніть увагу, що ви можете спробувати Todoizr (розширення, яке ми створили) у Веб-магазині Chrome і перевірити його повний код у цьому сховищі.