Како направити Цхроме додатак

У овом чланку ћу вас научити како да направите сопствени додатак за Цхроме. Заснивам то на лекцијама наученим током стварања ТалкТоМе-а, Цхроме екстензије која слабовидим помаже читањем садржаја веб страница и кретањем до других веб страница.

Покрићу основе постављања вашег додатка, укључујући:

  • Конфигурисање датотека за подешавање
  • Припрема за стављање у Цхроме продавницу
Нећу говорити о управљању аудио функцијама, попут руковања дозволама за микрофон. Ово је у овом чланку обрадио мој пријатељ Паласх, а такође користи ТалкТоМе екстензију као пример.

Конфигурисање датотека за подешавање

Прво идите на цхроме: // ектенсионс у прегледачу или једноставно кликните на „Море Тоолс“ и „Ектенсионс“ у Цхроме менију. Ово би требало да вас одведе на страницу Управљање екстензијама, где можете да укључите режим за програмере (требало би да буде у горњем десном углу).

Затим ћете морати да направите manifest.jsonдатотеку у новом директоријуму за свој додатак. Ова датотека пружа важне информације за функционисање вашег проширења, као што су дозволе и датотеке скрипти са којима ћете повезати свој пројекат. Ево како би требало да изгледа садржај вашег манифеста:

{ "name": "Chrome Extension Example", "version": "1.0", "description": "Build an Extension!", "manifest_version": 2}

Да бисте свој директоријум учитали на страницу Управљање екстензијама, кликните на дугме „Учитај распаковано“ и одаберите свој директоријум. Ово ће повезати ваше датотеке са веб корисничким интерфејсом.

Још једна важна датотека коју ћете морати да конфигуришете је background.js, а то је позадинска скрипта вашег пројекта.

Узорак позадинске скрипте има ову врсту структуре:

chrome.runtime.onInstalled.addListener(function() { // add an action here});

Увек ће бити покренут док је ваш додатак укључен и користан је за преслушавање различитих догађаја, попут притиска тастатуре, или за навигацију на различите странице.

Можете чак имати више скрипти у позадини. Само их прво требате регистровати у датотеци манифеста. Да бисте то урадили, једноставно структурирајте manifest.jsовако, како изгледа датотека манифеста наше екстензије:

{ "name": "Chrome Extension Example", ...
 "background": { "scripts": [ "js/es6-promise.auto.min.js", "js/defaults.js", "js/speech.js", "js/document.js", "js/events.js", "js/stt.js", "js/listen.js" ], "persistent": false }}

Сада ће вам требати датотека не само за функцију ваше екстензије, већ и за кориснички интерфејс. Да бисте то урадили, направите датотеку која се зове popup.html. Искачући прозор је мали прозор који се појављује када се кликне на икону вашег додатка. На пример, ево искачућег прозора за проширење Цоокие Манагер Фирефок.

popup.htmlФајл може бити једноставно. Испод је неки код за прављење искачућег прозора једним дугметом. Једноставно је као додати ознаке дугмета за отварање и затварање у тело документа и неколико стилских правила.

    button { height: 30px; width: 30px; outline: none; }  ;    

Наравно, popup.htmlкод за наше проширење има много више компоненти од ове. Слободно додајте још тастера, табела стилова и било чега другог што сматрате погодним за своју идеју за проширење.

Време је за конфигурисање искачућег кода и иконе. Међутим, за икону ћете морати да додате код на два места, „дефаулт_ицон“ и „ицонс“. Својство „дефаулт_ицон“ користи се за иконе на траци са алаткама, а „ицонс“ се користи за слике приказане на страници Ектенсион Манагемент.

Вратите се manifest.jsonи додајте следеће редове кода, замењујући путање слика за подразумевану икону својим сликама. Такође можете ставити исте слике и за „дефаулт_ицон“ и за „иконе“. И, не требате стављати слике истих димензија као оне наведене у наставку. На пример, ако имате само слике величине 16 к 16 и 48 к 48, слободно избришите друге две линије које одређују 32 и 128 пиксела.

{ "name": "Chrome Extension Example", ...
 "page_action": { "default_popup": "popup.html", "default_icon": { "16": "images/img16.png", "32": "images/img32.png", "48": "images/img48.png", "128": "images/img128.png" } }, "icons": { "16": "images/img16.png", "32": "images/img32.png", "48": "images/img48.png", "128": "images/img128.png" }}

Дакле, ово су датотеке које су кључне за изградњу хром екстензије:

  • датотеку манифеста,
  • позадинске скрипте и
  • искачућа датотека

Неке друге датотеке које бисте можда желели да конфигуришете су:

  • options.html и
  • options.js

options.jsће вашим корисницима пружити ширу палету опција када је у питању коришћење вашег проширења. Побринуће се за изглед странице са опцијама (врло је слична popup.html), док options.jsће се побринути за функционалност.

Ове датотеке нису обавезне, али ако се одлучите да их додате, не заборавите да конфигуришете options.htmlу манифесту и повежете своју options.jsдатотеку додавањем <; / сцрипт> непосредно пре завршне ХТМЛ ознаке.

{ "name": "Chrome Extension Example", ... "options_page": "options.html"}

Да бисте видели свој додатак на делу, сачувајте све датотеке и кликните на „Поново учитај“ док сте на страници Управљање додацима. Требали бисте видети своју икону на траци са алаткама. Да бисте погледали страницу са опцијама, такође можете да кликнете на „Детаљи“ испод додатка и померите се надоле до места на којем пише „Опције проширења“.

Објављивање вашег пројекта у веб продавници

Дакле, развили сте и тестирали своје проширење. Сада га требате дистрибуирати!

Да бисте започели пренос вашег пројекта, прво га претворите у .зип датотеку. Датотека треба да садржи најмање manifest.jsonдатотеку. Затим проверите да ли имате налог програмера тако што ћете посетити контролну таблу програмера Цхроме Вебсторе.

Кликните на дугме „Додај нову ставку“ и требало би да вам омогући да тамо пренесете своју .zipдатотеку. Ако не желите да региструјете плаћања за своју апликацију, можете прескочити корак око подешавања система плаћања. Кад ставите пројекат у веб продавницу, мораћете да платите једнократну накнаду за програмера у износу од 5 УСД.

Такође, не заборавите да приложите детаљан опис и слике вашег проширења како би потенцијални корисници тачно знали шта ваш пројекат ради!

Када све ово завршите, добићете ИД апликације и ОАутх токен. ИД апликације се користи за упућивање захтева Гоогле АПИ-има, док се ОАутх токен користи за плаћање путем веб продавнице.

Честитамо, сада сте објавили своје проширење! ?

Ако вам се свидео овај пост, погледајте следећи чланак. Заронићемо дубље у то како да конфигуришемо аудио функције у вашем Цхроме продужетку, баш као што смо то урадили за ТалкТоМе.