Вітаю вас Maultalk'овци # 33;
І ось я вирішив «відзначити» своє повернення на цей форум і написати «невеликий мануальчік», заснований на власному досвіді, по створенню розширень для популярних браузерів, які допоможуть вам у просуванні та популяризації ваших проектів.
Один з моїх проектів переживає не найкращі часи і вирішив я його хоч якось «підбадьорити» і зробити пару трійку «онлайн сервісів» на піддоменів ( «онлайн сервісів» - сказано звичайно голосно, але будемо називати їх так).
Першим (і поки останнім) став простенький, але корисний генератор паролів - genpass.hyperione.com.
Було замовлено .js скрипт самого генератора, намальований «на коліні» дизайн (на основі основного сайту), зроблена верстка макета і, як то кажуть - в путь. Але треба ж нести ще більше користі людям, подумав я, і замовив «десктопну» версію генератора, а потім, не знайшовши нормальних виконавців, було вирішено - самостійно зробити розширення для основних браузерів.
Власне про розробку даного розширення я вам в подробицях і розповім, а ви грунтуючись на цьому - зможете створити свій власний розширення для свого улюбленого сайту.
Частина 1. Як вибрати - для якого браузера створити розширення?
Існує 4 основних браузера для ПК на базі Windows - Ghrome, Я.Браузер, Mozilla і Opera, ці дані взяті з статистики того ж, ЛайвІнтернет тиц
Дуже добре, тепер трохи про самих браузерах - якщо дозволите, тут буде трохи копипаста з Вікі.
Якщо ви уважно вчитались в опис браузерів, то вам вже стало ясно, що писати ми будемо розширення під браузери Chrome, Opera і Я.Браузер, так як вони розроблені на одному двигуні.
Але є невеликий нюанс - з перерахованих вище, тільки браузер Opera допоможе нам створити дійсно «правильне» розширення, так як він володіє засобами тестування розширень на етапі розробки і модератори, там дуже добрі люди, але про це нижче.
Якщо у вас ще не встановлена Opera - йдіть встановлюйте, а я продовжу свою писанину.
Частина 2. Основа розширень або з чого вони складаються?
Поле "version" - це номер версії встановленого вашого розширення, він публікується як в магазині розширень, так і в менеджері розширень.
Поле "manifest_version" - це версія маніфесту (їх 2, 1 і 2 відповідно). Щоб не заглиблюватися в цю інформацію (вона не настільки важлива для вас) - ви можете почитати їх відмінність на тому ж Хабре тиц. Варто усвідомити одне, актуальна для нас версія маніфесту - 2а.
Поле "default_locale" - це поле необхідно, щоб ми змогли вказати в магазині розширень - для яких країн це розширення створено (знову-таки - на цьому ми акцентуємо увагу трохи пізніше).
Поле "icons" - це набір іконок для вашого розширення, які будуть відображатися в менеджері розширень. Ви можете обмежитися і 1 іконкою максимального розміру, але давайте підемо на принцип і отрісуем іконки всіх розмірів
Поле "browser_action" - це основні налаштування нашого розширення, які вказують на те - як розширення буде взаємодіяти з браузером:
"Default_title" - це підказка, яка з'являється при наведенні курсору на іконку розширення.
"Default_popup" - вказує браузеру, що необхідно відкрити нашу .html сторінку з розширенням при кліці на іконку розширення.
Поле "permissions" - це список дозволів, які потрібні для роботи нашого розширення - це поле є обов'язковим, якщо ваше розширення буде якимось чином взаємодіяти з ПК користувача або його браузером, крім показу простий інформації про вашому сайті.
Це звичайна .html сторінка, яка є основою нашого розширення і відображається у користувача в браузері - ось так вона виглядає у мого розширення.
На цій сторінці і файлах відносяться до неї (style.css і genPass.js), ми не будемо зупиняти докладно, так як там немає нічого особливого.
Да да, саме таку назву і має бути у цій папки «_locales» - в ній зберігаються файли локалізації, а по Україн - файли переводять наше розширення на інші мови.
Папка ru з файлом messages.json в папці _locales
Ну якщо з папкою «ru» все повинно бути зрозуміло (там міститься один єдиний файлик), то на файлі messages.json я трохи затримаюсь.
"ExtensionName" # 58; "Message" # 58; "GenPass - Розумний генератор паролів"
>,
"ExtensionDescription" # 58; "Message" # 58; "GenPass - Генератор паролів, що дозволяє створити одночасно складний, зламостійкий пароль, який легко буде запам'ятати."
>
>
Цей файл необхідний для коректного відображення «Назви» і «Опису» вашого розширення в менеджері розширень в браузері (і в магазині Хром, наприклад), відповідно до мовних настройками браузера.
Як ви напишіть в файлі messages.json «назва» і «опис» - так воно і буде відображатися, ця папка і файл більше потрібні при додаванні в магазин Oper'и - без нього, вам просто не дадуть заповнити опис на Російському мовою, а запропонують заповнювати на Англійському, а якщо замість Англійського заповніть на Російському ... Про це, як-небудь потім
На цьому начебто все - трохи сумбурненько ніби вийшло? Ок, давайте внесемо більше ясності.
Підготуйте всі файли для свого розширення і переходите до наступного пункту.
Частина 3. Тестування розширення і його «упаковка».
Пам'ятайте, десь серед букав вище, я говорив, що ми будемо використовувати саме браузер Opera для створення і тестування свого розширення, так ось - відкривайте
Перейдіть в меню браузера в пункт "Розширення" - "Керувати розширеннями». ви потрапили в менеджер доповнень.
Все вийшло? Круто # 33;
Тепер у нас 2 шляхи:
- Якщо ми використовуємо .js в нашому розширенні - необхідно його протестувати на помилки (інакше злісний дядько модератор з Oper'и - його не пропустити в каталог) - для цього натисніть на чекбокс «Збирати помилки» і просто протестуйте всі функції свого розширення - якщо не вилізе будь-яких помилок - Круто # 33; Продовжуємо далі.
- Якщо ми не використовуємо .js в нашому розширенні - можна сміливо переходити до наступного кроку - упаковці нашого розширення.
Для того, щоб отримати своє розширення в готовому для завантаження в магазин вигляді - натисніть на кнопку «Запакувати розширення» і вкажіть на папку з вашим розширенням - на виході ви отримаєте той самий файл .nex, який і необхідно буде завантажити в магазин Opera.
Власне, ось і все - ваше розширення готове # 33;
І тут ви скажете - ОБМАН # 33; ШАРЛОТАН # 33; СТІЛЬКИ ВСЬОГО ПОНАОБЕЩАЛ, А ЯК ЖЕ ІНШІ броузера І мультимовну # 33; # 33; # 33;
Частина 4. Локалізація розширення або як легально збільшити кількість установок.
Відразу хотілося б зробити невелику оговорочка - якщо ви робите просте розширення, яке буде відображати, будь-яку інформацію про вашому сайті або з вашого сайту - пропустіть цей пункт - багатомовність для вашого розширення не принесе особливих дивідендів - свої ссилочку з магазинів ви тепер отримаєте.
Ну а якщо ви робите розширення, що несе мир і доброту для користувачів - велкам # 33;
Отже, пам'ятайте, ми створювали папку «_locales» містить папку «ru» і файл messages.json в ній?
Пора заповнити її під зав'язку # 33; Ну тобто заповнити її тими мовами, на які ми будемо переводити наше розширення.
Далі все просто - вибрали мову для перекладу, створили відповідну папочку і файл messages.json в ній.
Наприклад, ми вибрали Французька мова - значить в папці «_locales» створюємо папочку «fr» і в ній новий файл messages.json.
Тепер буде все складно
Нам необхідно перевести наше розширення на інші мови, якщо з самим перекладом не повинно виникнути проблем (замовити, попросити друзів або ви сам ПОЛИГЛОТ), то з технічною частиною - можуть бути проблеми ...
Але не зі мною # 33;
Я витратив достатньо часу на пошук рішення і знайшов його на github.com - там представлений простий .js скрипт, який замінює статичні елементи вашої .html сторінки (якщо бути більш точним - текст) на елементи з наших файлів messages.json.
Якось незрозуміло пояснив, да? Розглянемо на прикладі ...
window.addEventListener # 40; 'load', function # 40; # 41; function translator # 40; html # 41; var i,
length,
attrs_to_check = # 91; 'title', 'alt', 'placeholder', 'value', 'href' # 93 ;;
if # 40; html.attributes # 41; attrs_to_check.forEach # 40; function # 40; el # 41; if # 40; html.attributes # 91; el # 93; # 41; html.attributes # 91; el # 93; .value = replacer # 40; html.attributes # 91; el # 93; .value # 41 ;;
>
> # 41 ;;
>
if # 40; html.nodeType === 3 # 41; html.data = replacer # 40; html.data # 41 ;;
> Else for # 40; i = 0, length = html.childNodes.length; i
>
>
і підключіть цей скрипт на сторінці index.html.
Тепер виберіть текст, який буде змінюватися на вашій сторінці index.html залежно від мовних налаштувань браузера, наприклад:
Моє додаток дуже класне і несе користь людям.
Тут ми будемо міняти слово «класне».
Замініть його наступним чином ->. де klass - це його умовний id.
Тепер відкрийте файл messages.json і внесіть туди наступний запис:
"Klass" # 58; "Message" # 58; "Тут переклад вашого слова"
>
У підсумку ваш файл messages.json повинен мати наступний вигляд:
"ExtensionName" # 58; "Message" # 58; "Назва вашого доповнення"
>,
"ExtensionDescription" # 58; "Message" # 58; "Опис вашого доповнення."
>,
"Klass" # 58; "Message" # 58; "Тут переклад вашого слова"
>
>
За таким принципом ви можете перевести всі необхідні текстові елементи свого розширення.
Ах да ... Мало не забув ...
Пам'ятайте на самому початку, коли ми розбирали файл manifest.json, у мене в поле "name" і "description" стояли значення "__MSG_extensionName__" і "__MSG_extensionDescription__" відповідно?
Так ось - поміняйте в своєму файлі маніфесту їх точно так же - це стандартні id для цих полів, які необхідні для переведення відповідних полів.
Ну ніби все. З мультимовну ми начебто розібралися ...
Частина 5. Коротко про інших браузерах.
Ну ось, по ідеї у вас лежить на робочому столі готове розширення для браузера Opera, можливо ви його вже завантажили в каталог і отримали мульени установок ... Але як бути з іншими браузерами, в часності Chrome і Я.Браузер?
Ну а з Хромом все просто, йдете відразу в магазин розширень і завантажуєте туди .zip архів з файлами свого розширення, заплативши перед цим 5 # 036; в казну ....
Звичайно, при додаванні в магазини розширень є свої нюанси і тонкощі, але про це як-небудь потім ...