Поздравявам всички вас Maultalk'ovtsy # 33;
И така, реших да "маркират" им завръщане в този форум и да се напише "малък manualchik" въз основа на собствения си опит, за да създадете разширения за популярните браузъри, които ще ви помогнат в насърчаването и популяризирането на вашите проекти.
Един от моите проекти преминава през трудни времена и реших, че трябва по някакъв начин да "развесели" и да направи няколко три "онлайн услуги" на поддомейни ( "онлайн услуги" - каза на висок глас, разбира се, но нека да ги наречем така).
Първият (и засега последен) стана един прост, но полезен парола генератор - genpass.hyperione.com.
.js скрипт на генератора е било наредено, боядисани "на коляно" дизайн (на базата на основния сайт), направен разположението и оформлението, както се казва - в известен смисъл. Но е необходимо да се извърши дори по-голяма стойност за хората, помислих си, и нареди на "настолно" версия на генератора, а след това, намирането липсва нормален изпълнители, беше решено - сами по себе си да направи разширение за основните браузъри.
Всъщност развитието на това разширение ще ви кажа в детайли, и, както въз основа на това - ще бъде в състояние да създадат свое собствено разширение за любимия си сайт.
Част 1. Как да изберем - да се създаде разширение на браузъра?
Има 4 основни браузър за персонални компютри с Windows - Ghrome, Ya.Brauzer, Mozilla и Opera, тези данни са взети от статистиката на същите, layvinterneta tyts
Добре, сега малко за себе си браузъри - ако ще, ще има малко kopipasta от Вики.
Ако се вгледате внимателно в описанието на браузъра, вие вече ще е ясно, че ще напишем разширение за браузъра Chrome, Opera, Ya.Brauzer те са разработени на един двигател.
Но има една малка нюанс - от по-горе, само на браузъра Opera ще ни помогне да се създаде един наистина "правилната" разширение, тъй като има средство за тестване на разширения по време на фазата на развитие и модераторите, има много добри хора, но повече за това по-долу.
Ако все още не сте инсталирали Опера - отидете място, а аз ще продължа моя дрънкулки.
Част 2. База за разширения или какво са направени?
Поле "версия" - е броят на текущата версия на разширението си, той се публикува в разширенията за продукти, както и в диспечера на разширение.
Поле "manifest_version" - тази версия на манифест (2, 1 и 2, съответно). За да не се рови в информацията (това не е толкова важно за вас) - можете да проверите разликата между тях на същите Хабре tyts. Трябва да се изясни едно нещо за нас да актуална версия на манифеста - 2-ра.
"DEFAULT_LOCALE" поле - това поле се изисква, за да можем да посочите разширенията на магазин - за някои страни, това разширение е създаден (отново - на това ние се фокусира малко по-късно).
"Икони" поле - набор от икони за разширението си да се показва в диспечера на разширение. Можете да ограничите и максималният размер на една икона, но нека да отидем на принципа и otrisuem иконите от всички размери
Поле "browser_action" - това са основната конфигурация на нашата експанзия, която да показва - като разширяването ще си взаимодействат с браузъра:
"Default_title" - е подсказка, която се появява, когато мишката върху иконата на разширението.
"Default_popup" - казва на браузъра, че трябва да се отвори страницата ни .html с разширение, когато кликнете върху иконата на разширението.
Полето "разрешения" - списък на разрешения, които са необходими за нашата експанзия - това поле е задължително, ако то е по някакъв начин си взаимодействат с компютъра на потребителя или на уеб браузър, в допълнение към показване на проста информация за вашия сайт.
Това е често срещан .html страница, която е в основата на нашата експанзия и показва на потребителя в браузъра - това е как изглежда от разширението си.
На тази страница и файловете, свързани с него (style.css и genPass.js), ние няма да се спирам в подробности, защото няма нищо специално.
Да, да, това име трябва да е в папката «_locales» на - тя съхранява локализацията файлове, и на английски език - файловете трансформират нашата експанзия на други езици.
Ru папка с messages.json файл в _locales на папките
Е, ако на папката «РУ» трябва да е ясно (единственият, аз открих, че съдържа), а след това messages.json файл съм малко късно.
"ExtensionName" # 58; "Съобщение" # 58; "GenPass - Смарт парола генератор"
>
"ExtensionDescription" # 58; "Съобщение" # 58; "GenPass -. Парола генератор, който позволява едновременно създаване на комплекс отварян парола, която ще бъде лесно да се помни"
>
>
Този файл е необходим за правилното показване на "Име" и "Описание" на разширението си в диспечера на разширение в браузъра (Chrome и магазина, например), в съответствие с езиковите настройки на вашия браузър.
Как се пише във файл messages.json «Name" и "Описание" - начина, по който се показва, папката и файла вече не е необходима, когато добавите в Oper'y магазин - без него, просто не давам попълните описанието на руски език и предложено да попълнят на английски език и, ако вместо на Англия да запълни руски ... на този по-късно
В този вид на всички - малко като sumburnenko това се е случило? Добре, нека да бъдем по-голяма яснота.
Подгответе всички файлове за разширенията си и да преминете към следващата стъпка.
Част 3: Изпитване на разширяването и "опаковка".
Не забравяйте, че някъде сред буковата по-горе, аз казах, че ще използвате браузъра Opera за създаване и тестване на нейното разширяване, и така - отворен
Отиди в менюто на браузъра, щракнете върху "Разширения" - "Управление на разширенията". ви удари управлението на добавките.
Всичко работеше навън? Cool # 33;
Сега имаме 2 начина:
- Ако използваме в нашето разширение .js - необходимо е да се провери за грешки (известен още като зло чичо модератор на Oper'y - не го пропускайте в указателя) - за да направите това, кликнете върху квадратчето "Събиране на грешки" и просто да тестват всички функции на своята експанзия - ако не излязат никакви грешки - Cool # 33; Продължаваме по-нататък.
- Ако ние не използваме в нашето разширение .js - можете спокойно да преминете към следващата стъпка - опаковане на нашата експанзия.
За да се получи удължаване си готов за изтегляне под формата на един магазин - кликнете върху "разширяването Pack" бутона и изберете папката на експанзия - на изхода да получите най-.nex файл, който ще трябва да изтеглите магазин на Opera.
Всъщност, това е всичко - разширение ви е готов да # 33;
И след това, което казвате - BAM # 33; Sharlotany # 33; Дадох големи обещания толкова много, но какво да кажем за другите браузъра и многоезичен # 33; # 33; # 33;
Част 4: Локализация на разширяването или увеличаване на броя на правните системи.
Някога исках да направя малко с резерви - ако се направи проста разширение, което ще покаже, някаква информация за вашия сайт, или от вашия сайт - пропуснете тази стъпка - многоезичност за разширението си няма да доведе специален дивидент - връзката му с магазините си толкова получите.
Е, ако го направите, разширяването, който ще донесе мир и доброта към другите - ДОБРЕ ДОШЛИ # 33;
Сега, не забравяйте, ние създадохме папка «_locales» папката, съдържаща «РУ» messages.json и файл в него?
Това е време, за да го напълни с капацитет # 33; Е, това е го напълни с езика, на който ще се превежда нашата експанзия.
След това всичко е просто - изберете език за превод, и да се създаде подходящата татко messages.json файла в нея.
Например, ние сме избрали френски език - това означава да "_locales» Папката е създадена татко «FR» и в новия си messages.json файл.
Сега тя ще бъде трудно за всички
Ние трябва да преведат нашата експанзия на други езици, ако самият превод би трябвало да има проблем (по поръчка, помолете приятел или притежавате Полиглот), след това с техническата част - може да е проблем ...
Но не и с мен # 33;
Прекарах достатъчно време за търсене на решение и установил, че тя github.com - там е прост .js скрипт, който замества статичните елементи на вашите .html страници (за да бъдем по-точни - текстът) на елементите на нашите messages.json файлове.
Как е ясно обяснено, не е тя? Вземем примера на ...
window.addEventListener # 40; "товар", функция # 40; # 41; функция преводач # 40; HTML # 41; Var аз,
дължина,
attrs_to_check = # 91; "заглавието", "н", "заместител", "стойност", "HREF" # 93 ;;
ако # 40; html.attributes # 41; attrs_to_check.forEach # 40; функция # 40; ел # 41; ако # 40; html.attributes # 91; ел # 93; # 41; html.attributes # 91; ел # 93; .value = заместител # 40; html.attributes # 91; ел # 93; .value # 41 ;;
>
> # 41 ;;
>
ако # 40; html.nodeType === # 3 41; html.data = заместител # 40; html.data # 41 ;;
> Иначе за # 40; I = 0, = дължина html.childNodes.length; аз
>
>
и прикачете скрипта на страницата за index.html.
Сега изберете текста, за да бъде променено на index.html страница, в зависимост от езиковите настройки на браузъра, например:
Освен това ми е много готино и е в полза на хората.
Тук ние ще се промени думата "готин".
Заменете я, както следва: ->. където Klaß - зависи му номер.
Сега отворете файла и да messages.json за следната позиция:
"Клас" # 58; "Съобщение" # 58; "Ето превода на думата си"
>
В резултат на това си messages.json файл трябва да изглежда по следния начин:
"ExtensionName" # 58; "Съобщение" # 58; "Името на Вашето добавки"
>
"ExtensionDescription" # 58; "Съобщение" # 58; "Описание на вашите добавки."
>
"Клас" # 58; "Съобщение" # 58; "Ето превода на думата си"
>
>
Съгласно този принцип, можете да поставите всички необходими елементи на текста нейното разширяване.
О, да ... щях да забравя ...
Не забравяйте, в началото, когато обсъждахме manifest.json файл в моята област "име" и "Описание" стойности са "__MSG_extensionName__" и "__MSG_extensionDescription__" съответно?
Така че - промяна в чийто манифест ги подадат по същия начин - стандартен номер за тези области, които са необходими, за да преведат съответните области.
Е, нещо като всички. С многоезично ние вид измисли ...
Част 5. Накратко за други браузъри.
Е, на теория лежи на вашия работен плот готов за разширяване на браузъра Opera, може да имате вече го изтеглили към каталога и се muleny растения ... Но какво да кажем за другите браузъри, Chrome и chasnosti Ya.Brauzer?
Но с Chrome, просто, просто отидете в магазина и разширения, за да качите .zip архив с разширителните си файлове, като се обръща преди това 5 # 036; съкровищницата ....
Разбира се, като към разширения магазини има своите нюанси и тънкости, но повече за това по-късно ...
Свързани статии