Ярлыки

Как собрать расширение для Maxthon? Шаг 5: Локализация

  • "Как собрать собственное расширение для Maxthon" – это простое пошаговое руководство для пользователей MX, которым не удалось найти нужный аддон в Extensions Center. Я почти уверен, что абсолютно любой пользователь сможет собрать удобное расширение под свои нужны. Простейшие макстоновские расширения собрать гораздо проще, чем, скажем, ранние расширения для Chrome или аддоны боковой панели Opera. Начнём?



Как собрать расширение для Maxthon?
Шаг 5: Локализация

Если вы не читали предыдущие части этого гайда, сделайте это. Прямо сейчас! Я не буду объяснять простейший штуки, которые уже знаете (или должны знать к этому моменту). Но я постараюсь пробежаться по основным стадиям «разработки» нашего расширения: боковая панель, букмарклеты / скрипты, меня панели инструментов. А сегодня мы добавим ещё и локализацию.

Для последней части гайда я выбрал совершенно особенное расширение. Дело в том, что его пока не существует. И делать его я тоже не собираюсь. Так что это будет ваш экзамен. Вам придётся самостоятельно собрать и расширение и испытать его в работе.

Итак, что это за расширение? VK Lite! Возможно, вы уже пользовались его старшим собратом – ВКонтакте для Maxthon, но там было уж слишком много кнопок. Так давайте уберём оттуда всё лишнее!

1. Создаём новую папку – VK Lite

2. Внутри неё создаём ещё одну папку — icons (точно также, как мы делали в 1-ом шаге.

3. Переходим к def.json:
[{
     "author": "кто сделал это",
     "name": "имя",
     "email": "электронная почта", 
     "website": "http://vk.com/" 
     "date": "22.08.2018"
     "type":"extension",
     "frameworkVersion":"1.0.0",
     "version":"1.0.0",
     "guid": "{1A7AF015-9187-4257-91A0-7E9C853A0833}",
     "name": "VK Lite",
     "icon": "icon",

Это описание нашего расширения. Кстати, здесь довольно много необязательных строк (например, первые 4 строки можно было бы и не писать). Если не понимаете, за что именно отвечает конкретная строка, вернитесь к 1-й части этого гайда. Дальше привычный немного меняется:
     "title": {"_t": "app.VKLite"},
     "description": {"_t": "app.Description"},

Но и тут всё довольно просто: теперь вместо {"ru-ru": "Title"} мы используем {"_t": "app.Title"}. Пока примите это как данность, чуть позже я объясню, как это всё работает. Сейчас же давайте добавим в боковую панель браузера мобильную версию сайта ВКонтакте – m.vk.com (если нужно освежить в памяти устройство аддонов боковой панели, возвращайтесь к 1-му шагу):
     "actions": [{ 
               "type": "panel", 
               "entryPoints": ["sidebar"], 
               "stopOnClose": true,
               "icon": "sidebar.png", 
               "main": "https://m.vk.com/",
               "allowPin": true,
               "resizable": true, 
               "width": {"default": 360, 
                             "min": 300,
                             "max": 720}
               }]

Готово! Теперь переходим к панели инструментов:
     "actions": [{
               "type": "mxcmd",
               "title": {"_t": "app.VKLite"},
               "entryPoints": ["toolbar"],        
               {"type": "script",
                  "js": ["page.js"]

По каким-то причинам кнопка на панели инструментов не может быть ссылкой. Поэтому под неё нам придётся спрятать простенький скрипт page.js, единственной задачей которого будет переход по заранее указанному URL-адресу. Метод немного топорный, зато работает! Целиком код, отвечающий за меню на панели инструментов будет выглядеть примерно так:
                    "menu": [
                              {
                                "type": "script",
                                "title": {"_t": "app.Share"},
                                "icon": "point.png",
                                "js": ["share.js"]
                                },
                                {
                                "type": "page",
                                "title": {"_t": "app.Feed"},
                                "icon": "point.png",
                                "main": "https://vk.com"
                                },
                                {
                                "type": "page",
                                "title": {"_t": "app.Profile"},
                                "icon": "point.png",
                                "main": "https://vk.com/id0"
                                },
                                {
                                "type": "script",
                                "title": {"_t": "app.Search"},
                                "icon": "point.png",
                                "js": ["search.js"]
                                },
                            ]
                       }
            }]
}]

Если вы всё сделали правильно (и если я нигде не накосячил), сейчас ваш файл def.json выглядит примерно так:
[{
     "author": "who made it",
     "name": "your name",
     "email": "your email", 
     "website": "http://vk.com/" 
     "date": "22.08.2018"
     "type":"extension",
     "frameworkVersion":"1.0.0",
     "version":"1.0.0",
     "guid": "{1A7AF015-9187-4257-91A0-7E9C853A0833}",
     "name": "VK Lite",
     "icon": "icon",
     "title": {"_t": "app.VKLite"},
     "description": {"_t": "app.Description"},

     "actions": [{ 
                   "type": "panel", 
                   "entryPoints": ["sidebar"],
                   "stopOnClose": true, 
                   "icon": "sidebar.png",
                   "main": "https://m.vk.com/",
                   "allowPin": true,
                   "resizable": true, 
                   "width": {"default": 360,
                                 "min": 300,
                                 "max": 720}
                }]

     "actions": [{
                   "type": "mxcmd",
                   "title": {"_t": "app.VKLite"},
                   "entryPoints": ["toolbar"],        
                   {
                     "type": "script",
                     "js": ["page.js"]
                     "menu": [
                               {
                                 "type": "script",
                                 "title": {"_t": "app.Share"},
                                 "icon": "point.png",
                                 "js": ["share.js"]
                                 },
                                 {
                                 "type": "page",
                                 "title": {"_t": "app.Feed"},
                                 "icon": "point.png",
                                 "main": "https://vk.com"
                                 },
                                 {
                                 "type": "page",
                                 "title": {"_t": "app.Profile"},
                                 "icon": "point.png",
                                 "main": "https://vk.com/id0"
                                 },
                                 {
                                 "type": "script",
                                 "title": {"_t": "app.Search"},
                                 "icon": "point.png",
                                 "js": ["search.js"]
                                 },
                              ]
                         }
              }]
}]


Упаковываем код в файл def.json (если не знаете, как это сделать, снова вернитесь к 1-й части гайда).

4. Теперь нам нужно подготовить несколько скриптов. Всего их будет три:

page.js
javascript:
var myRuntime = window.external.mxGetRuntime();
var mxTabs = myRuntime.create('mx.browser.tabs');
var TabNum = mxTabs.newTab({url:"https://vk.com",activate: true,position:"afterCurrrent"});

share.js
javascript:
var myRuntime = window.external.mxGetRuntime();
var mxTabs = myRuntime.create('mx.browser.tabs');
var TabNum = mxTabs.newTab({url:"https://vk.com/share.php?url="+encodeURIComponent(location.href)+'',activate: true,position:"afterCurrrent"});

search.js
javascript:
selected=window.getSelection();
var myRuntime = window.external.mxGetRuntime();
var mxTabs = myRuntime.create('mx.browser.tabs');
var TabNum = mxTabs.newTab({url:'https://vk.com/search?c[q]='+encodeURIComponent(selected)+'&c[section]=auto',activate: true,position:"afterCurrrent"});

Если не помните, как сохранять скрипты, или нужны другие примеры их использования, вернитесь к 2-й и 3-й частям данного руководства.

5. Теперь возвращаемся в папку VK Lite, в которой нам нужно создать ещё одну папку – locale – в ней и будут располагаться файла локализации:

ru-ru.ini
[lang]
app.VKLite=VK Lite
app.Description=Лёгкая версия неофициального расширения ВКонтакте
app.Share=Опубликовать
app.Feed=Новости
app.Profile=Моя страница
app.Search=Найти

en.ini
[lang]
app.VKLite=VK Lite
app.Description=Lite version of unofficial add-on for VK.com
app.Share=Share
app.Feed=News feed
app.Profile=My page
app.Search=Search

uk-ua.ini
[lang]
app.VKLite=VK Lite
app.Description=Легка версія неофіційного розширення ВКонтакте
app.Share=Поширити
app.Feed=Новини
app.Profile=Моя сторінка
app.Search=Знайти

Каждый файл сохраняем в формате .ini (если не знаете, как это сделать, вернитесь к 1-й части гайда).

6. Теперь используйте MXPacker чтобы упаковать папку VK Like в файл формата .mxaddon (если не помните, как это сделать, вернитесь к 1-й части гайда; судя по всему, она то и была самой важной частью данного руководства). Готово? Тогда пришло время проверить наше расширение в деле!

7. Если браузер уже установлен на ваш ПК, просто дважды щёлкните по появившемуся файлу VKLite.mxaddon и согласитесь на установку. Если же вы используете portable-версию, новое расширение придётся добавить в браузер вручную. Для этого просто скопируйте нужный файл в папку MaxthonPortable\UserData\Users\ЛОГИН\Addons. Не забудьте перезапустить браузер и проверить установленные расширения (возможно, новый аддон будет выключен).

Вот и всё, что я знаю о расширениях для Maxthon… Кажется, я уже говорил: я вовсе не разработчик, и я вообще не понимаю как писать код. Для меня это сродни магии. Скорее всего, за исключением нескольких мелочей это действительно всё, чем я мог с вами поделиться. Так что пора закругляться…

Ну а теперь попробуйте собрать собственное расширение! Выберите сайт с удобной мобильной версией и сделайте его частью боковой панели браузера, а затем попробуйте скопировать меню сайта и перенести его на панель инструментов. Добавьте скрипты для поиска и публикации ссылок. И не забудьте о локализации на знакомые вам языки!

P. S.

Если ваше расширение не работает, сообщите. Я ведь действительно не собирал и не тестировал эти расширения. Я просто написал пошаговую инструкцию с простыми примерами. За все эти годы я мог наделать кучу глупых ошибок и так их и не заметить.

Рассказать друзьям через AddThis или Shareaholic
Translate via Google, Yandex, Bing or Promt
Другие публикации о Maxthon
The same in English
Отправить сообщение по электронной почте
📎

Комментарии

  1. Alex Semёnov15 января 2020 г. в 21:42

    Коль уж разработчики Maxthon уже обмолвились о том, что уже несколько месяцев в поте лица трудятся над шестой версией своего браузера, мне, пожалуй, теперь тоже можно раскрыть несколько деталей, которые мне известны.

    Главной особенностью MX6 станет полная поддержка привычных расширений из Chrome Web Store. Её собирались добавить чуть ли не 2-3 версии назад, но как-то не срослось. А вот собственные расширения в новой версии браузера появятся не сразу.

    Так что, если по каким-то причинам вам вообще не зайдёт новый Maxthon, придётся хотя бы на начальному уровне осваивать тамошние расширения, ибо макстоновский Extensions Center уже несколько месяцев как мёртв.

    ОтветитьУдалить

Отправить комментарий

Популярные сообщения