Създаване на разширения за Chrome от самото начало

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

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

По-долу ще ви покажа най-лесният начин да създадете разширение. Ако имате познания за уеб разработката (HTML, CSS и JS), ще се почувствате като у дома си. Ако не, първо ги гледайте научите основите на уеб разработката, след това продължете по-долу.

Предварителни

Трябва да имате следните изисквания, преди да започнете с този урок.

1. Трябва да сте запознати HTML, CSS и JavaScript. [Проверете ресурсите]
2. Трябва да имате a редактор на код , за да напишете разширението. [Сравни редакторите]
3. (По избор) Ако искате да разпространявате разширението си към други потребители, трябва да имате профил на разработчика в уеб магазина на Chrome. [Създай профил]

Забележка: Google ви моли да заплатите малка такса за създаване на профил на програмист в уеб магазина на Chrome.

Създайте разширение

В този урок ще споделя процеса на създаване на разширяване на задачите за Google Chrome. Ще бъде полезна (както е показано по-долу), за да покаже съществените компоненти и способностите, предоставени на разширенията.

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

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

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

Освен това, той предлага различни опции за фина настройка включва / изключва необходимите добавки, разрешения, Трябва да изберете “Действие на браузъра” като разширение и “Няма фон” като фонова страница за този урок.

Когато приключите с избора на опции за създаване на примерното разширение, натиснете бутона “Изтегли го!” в Extensionizr. накрая, извлечете архива (.zip) в директория и отворете редактора на код, за да започнете да пишете разширението.

2. Кодирайте разширението

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

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

1. _locales: Той е свикнал съхранява информация за езика за многоезично приложение.
2. CSS: Той функционира за съхранение на външни библиотеки от трети страни като Bootstrap 4.
3. икони: Той е проектиран да има икони за вашето разширение в различни размери.
4. JS: Той е удобен за спасяване библиотеки от трети страни като jQuery 3.
5. SRC: Той съхранява действителния код, който ще напишете за вашето разширение.

manifest.json

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

Например в кода по-долу ще забележите, че промених името, описанието и homepage_url заедно с default_title в browser_action. Освен това аз добавен “съхранение” по разрешения както трябва да съхраняваме данни в разширението ни.

 "name": "Todoizr - To-do Simplified", "version": "0.0.1", "manifest_version": 2, "description": "Лесно приложение за всички.", "homepage_url": " https://go.aksingh.net/todoizr "," икони ": " 16 ":" икони / icon16.png "," 48 ":" икони / icon48.png "," 128 ":" икони / icon128 .png "," default_locale ":" en "," browser_action ": " default_icon ":" икони / icon19.png "," default_title ":" Опростяване на задачите "," default_popup ": browser_action / browser_action.html "," permissions ": [" storage "] 

SRC \ browser_action

Тази директория ще съдържа кода за действие на браузъра. В нашия случай ще го направим въведете изскачащия прозорец показани при щракване върху иконата на разширението в браузъра. Нашето разширение ще позволи на потребителите да добавят и да преглеждат елементи на задачите в изскачащия прозорец.

Забележка: Винаги можете да започнете с кода, като клонирате това хранилище.

Първоначален код от шаблона

Въпреки че в тази директория имаше само един HTML файл, съдържащ целия код, реших да го разделя на три отделни файла за по-голяма яснота. Това каза HTML файл с име “browser_action.html” вече има следния код:

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

 #mainPopup запълване: 10px; височина: 200px; ширина: 400px; семейство шрифтове: Helvetica, Ubuntu, Arial, sans-serif;  h1 размер на шрифта: 2em;  

Проектирайте интерфейса на изскачащия прозорец

След като създадем първоначалния проект, нека първо да проектираме интерфейса на изскачащия прозорец. аз имам създаде интерфейс с минималистичен подход, показвайки името в горната част, последвано от формуляр за добавяне на позиции за задачи и област по-долу за преглед на добавените елементи. Тя е вдъхновена от опростения дизайн на “Стил на формуляра 5“.

В кода по-долу, добавих два divs - един за показване на формуляра за добавяне на елемент за задача, а другият за показване на списъка с вече добавени позиции за задачи. Новият код за “browser_action.html” е както следва:

       
  
 
Todoizr
 
 
   
 
 
  
 
 
 
 
    

И стиловия файл “browser_action.css” вече има следния код:

 @import url ("./ 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"] фон: # 308ce3; ширина: автоматично; поплавък: десен; подложка: 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” съдържа следното съдържание. Тя е просто взета от нейния уебсайт, за да вдъхнови дизайна на нашето разширение.

 / * Form Style 5 от Sanwebe.com * / / * https://www.sanwebe.com/2014/08/css-html-forms-designs * / .form-style-5 max-width: 500px; подплата: 10px 20px; фон: # f4f7f8; марж: 10px авто; пълнеж: 20px; фон: # f4f7f8; граничен радиус: 8 пиксела; семейство шрифт: Грузия, "Times New Roman", Times, serif;  .form-style-5 fieldset border: none;  .form-style-5 legend размер на шрифта: 1.4em; margin-bottom: 10px;  .form-style-5 етикет display: block; margin-bottom: 8px;  .form-style-5 input [type = "text"], .form-style-5 вход [type = "date"], .form-style-5 input [type = "datetime"], .form-style -5 input [type = "email"], .form-style-5 вход [type = "number"], .form-style-5 input [type = "search"], .form-style-5 input [type] = "time"], .form-style-5 вход [type = "url"], .form-style-5 textarea, .form-style-5 select font-family: Georgia, "Times New Roman", Times , serif; фон: rgba (255,255,255, .1); граница: няма; граничен радиус: 4px; размер на шрифта: 16px; марж: 0; контур: 0; подложка: 7px; ширина: 100%; оразмеряване на кашони: гранична кутия; -вибъкит кутия: гранична кутия; -moz-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) добавка; margin-bottom: 30px;  .form-style-5 input [type = "text"]: фокус, .form-style-5 вход [type = "date"]: focus, .form-style-5 input [type = "datetime"]: фокус, .form-style-5 вход [type = "email"]: фокус, .form-style-5 вход [type = "number"]: фокус, .form-style-5 input [type = "search"] : focus, .form-style-5 вход [type = "time"]: фокус, .form-style-5 вход [type = "url"]: фокус, .form-style-5 textarea: фокус, .форма- style-5 select: focus фон: # d2d9dd;  .form-style-5 select -webkit-външен вид: menulist-button; височина: 35px;  .form-style-5. номер фон: # 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 вход [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 вход [type = "button"]: hover background: # 109177;  

Напишете логиката на popup

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

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

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

 функция 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:

1. Всички способности, компоненти и характеристики на разширенията.
2. Примерете разширения от екипа на Google Chrome.

Ако сте преминали през тези ресурси и сте готови за някакво предизвикателство, опитайте да добавите по-долу функции в разширението, което току-що сте разработили:

1. Опция за изтриване на запаметените задачи.
2. Функция за показване на известия, когато приключите с добавянето на елемент.

Това е всичко за разработването на първото ви разширение за най-популярния браузър. Какво разширение създадохте? Попаднахте ли в проблем? Моля да ме уведомите за вашата история, като напишете коментар по-долу или ми изпратите съобщение в @aksinghnet.

И накрая, но не на последно място, имайте предвид, че можете да изпробвате Todoizr (разширението, което създадохме) в уеб магазина на Chrome и да проверите пълния му код в това хранилище.