Как сделать расширение для Maxthon? Шаг 1: Аддоны боковой панели

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


Как собрать собственное расширение для Maxthon?
Шаг 1. Аддоны боковой панели

Большинство расширений для Maxthon  это расширения для боковой панели, в основном это панели. Сделать их довольно просто. Если у вас уже есть заранее подготовленный шаблон, займёт это всё всего пару минут, и большую часть этого времени вы будете искать подходящую иконку. У расширений для боковой панели минимальный функционал, но и усилия, затраченные на их создание, минимальны.

У нас скопилась целая куча аддонов для боковой панели, по 2-3 аддона для большинства популярных сайтов (ВКонтакте, Facebook, Twitter, Google+ и т. п.), отличаются они разве что иконками да размерами окон. А я жуткий перфекционист, и я хочу видеть красивую иконку, с ровными краями. А ещё я хочу менять размер окна по своему усмотрению. Я много чего хочу! Поэтому я и залез внутрь подобного расширения, чтобы разобраться что там да как. Вот только я ничего не понимаю в программирование. Так что это лишь мой опыт…

Сегодня мы начнём разговор о том, как собрать собственное расширение для Maxthon, и начнём мы с простейших аддонов боковой панели. Они станут основой для всего, что мы будем делать в дальнейшем. В первый раз информации будет довольно много. Скорее всего, легким это всё уж точно вам не покажется, но потом будет проще. В качестве первого примера будем использовать Google+. Понеслась!

ВАЖНО: Для наглядности я прикреплю несколько скриншотов, но они довольно старые и слегка не к месту. Впервые эта заметка была опубликована на форуме Maxthon, и в качестве примера я использовал Яндекс.Почты). Но на момент публикации в блоге Google+ был гораздо актуальнее, а переделывать скриншоты мне уже не хотелось.


1. Создаём папку Google Plus. Не думаю, что на этом этапе могут возникнуть какие-то проблемы, но я бы всё-таки посоветовал использовать латинские буквы, а не кириллицу. Кто знает, что будет в следующих версиях браузера?

2. Внутри папки Google Plus создаём папку icons.

3. Пока внутри папки icons нам понадобятся всего три иконки: icon_48.png, icon_32.png и icon_16.png для страницы в Extension Center, боковой панели / менеджера расширений и панели инструментов соответственно.

ВАЖНО: В некоторых версиях MX5 иконки на панели инструментов были увеличены до 20 пикселей. Старые иконки 16x16 выглядели размытыми и нечёткими, и от этой идеи довольно быстро отказались.


ВАЖНО: .png  это формат изображения, а не просто часть имени файла. Нельзя просто приписать .png к названию, это так не работает! Либо сразу ищите иконки в нужном формате (благо,Яндекс позволяет сделать это всего в два лишникх клика), либо придётся менять формат изображения вручную (например, через Paint.NET).

4. Если иконку в формате PNG найти не удалось, формат изображения можно поменять вручную. Откройте картинку в стандартном Paint или Paint.NET, зайдите в меню Файл → Сохранить как... и в типе файла выберите .png


5. Теперь у нас есть иконка для нашего расширения, но нам нужно ещё две таких же. Тупо копипастим!

6. Вот только нам нужны иконки другого размера. Придётся менять его вручную. Для этого кликните правой кнопкой мыши по любому файлу в папке icons и выберите Открыть с помощью → Microsoft Office Picture Manager. В открывшемся окне выберите Изменить рисунок → Изменение размера. Нам нужны квадратные изображения размером 48x48 (icon_48.png), 32x32 (icon_32.png) и 16x16 (icon_16.png).


7. С иконками покончено! Возвращаемся в папку Google Plus.

8. В папке Google Plus нам нужно создать файл def.json. Но это слегка сложнее, так что обо всём по порядку…

Открываем блокнот. Начинаем с информации об авторе (это мы): указываем имя, электронную почту и сайт. В графе "website" я обычно указываю источник или сайт, с которым наше расширение будет работать (не всегда этот адрес совпадает с той страницей, которую наше расширение должно открывать). Скорее всего, на первом этапе ваш def.json будет выглядеть примерно так:
[{
  "author": "кто это сделал",
  "name": "имя",
  "email": "мыло",
  "website": "https://plus.google.com/"

Теоретически, пользователи должны видеть эту информацию на странице расширения в Extension Center, но я почему-то ничего подобного там не никогда встречал...

Теперь добавляем дату, чтобы любопытные пользователи могли узнать, когда именно мы собрали расширение (ну или чтобы потом не путаться в десятках папок с обновлениями):
  "date": "08.12.2015",

Теперь нужно указать тип расширения (пока нас интересует только один тип расширения, но потом их будет немного больше) и его версию. Вы можете использовать абсолютно любую нумерацию, но обычно используют v.1.0.0. Изменить нумерацию версий после публикации расширения в Exnetsions Center уже не получится. Загрузить на сайт "старую версию" вам, кстати, тоже уже не дадут.
  "type": "extension",
  "frameworkVersion":"1.0.0",
  "version":"1.0.0",

Для индикации расширений и последующих их обновлений Maxthon использует GUID. Залить в Extension Center расширения с чужим GUID вам не дадут (если, конечно, к тому времени оригинальное расширение не будет удалено, как было, например, с оригинальным портом NoAds). Без GUID (или с совпадающим с уже установленным в браузер расширением) вы не сможете даже запустить расширение, чтобы его протестировать: оно тупо всегда будет выключено. Так что GUID  штука важна. Так где её взять? А вот где! Выглядит оно, кстати, примерно так:
  "guid": "{ABD3EBCE-FFD0-4D0A-A68A-B93E446310A3}",

Теперь прописываем название и описание своего расширения:
  "name": "Google+",
  "icon": "icon",
  "title": {"ru-ru": "Google+"},
  "description": {"ru-ru": "Google+ для боковой панели"},

Пришло время решить, где именно мы хотим видеть наше расширение. Большинство подобных аддонов используют кнопку в боковой панели, и такие штуки нравятся старым пользователям MX. А вот новым юзерам, привыкшим к других браузерам, нравятся, когда иконки расширений расположены на панели инструментов, как в каком-нибудь Google Chrome. Кстати, со скином Ultimate Chrome в каком-нибудь MX4 это выглядело довольно забавно. Так что выбираем? Боковую панель (sidebar) или панель инструментов (toolbar)?
  "actions": [{
               "type": "panel",
               "entryPoints": ["sidebar"],

Следующий пункт, который нам предстоит писать, это возможность закрыть окно боковой панели. Звучит странно, но в некоторых версиях браузера окно боковой панели вообще не закрывается: оно тупо сворачивается и продолжает работу, даже если вы нажимаете кнопку "x". Даже не представляю человека, которому это могло показаться логичным шагом, но точно также сейчас устроены и веб-панели в браузере Vivaldi. Собственно поэтому я и начал делать собственные расширения: отсутствие возможности навсегда закрыть открытое однажды окно лично меня это дико бесит!
               "stopOnClose": true,

Теперь вводим адрес страницы, которую хотим сделать стартовой страницей нашего расширения. Обычно используют мобильные версии сайтов, для боковой панели они подходят почти идеально! Если бы Google не отказался от поддержки мобильной версии Google+, адрес был бы следующим:
               "main": "https://m.google.com/app/basic/",

Как на счёт возможности закрепить окно в боковой панели или изменить его размеры? Если это нужно, используем значение true, если нет  false:
               "allowPin": true,
               "resizable": true,

Ну и наконец указываем размеры самого окна:
               "width": {"default": 480,
                             "min": 300,
                             "max": 500},
              "height": {"default": 720,
                             "min": 610,
                             "max": 1200}

Всё! Осталось только закрыть скобки::
             }]
}]

Если вы всё сделали правильно, сейчас в вашем блокноте сейчас должно быть примерно следующее:
[{
   "author": "кто это сделал",
   "name": "имя",
   "email": "мыло",
   "website": "https://plus.google.com/"
   "date": "08.12.2015",
   "type": "extension",
   "frameworkVersion":"1.0.0",
   "version":"1.0.0",
   "guid": "{ABD3EBCE-FFD0-4D0A-A68A-B93E446310A3}",
   "name": "Google+",
   "icon": "icon",
   "title": {"ru-ru": "Google+"},
   "description": {"ru-ru": "Google+ для боковой панели"},
   "actions": [{
                "type": "panel",
                "entryPoints": ["sidebar"],
                "stopOnClose": true,
                "main": "https://m.google.com/app/basic/",
                "allowPin": true,
                "resizable": true,
                "width": {"default": 480,
                              "min": 300,
                              "max": 500},
               "height": {"default": 720,
                              "min": 600,
                              "max": 1200}
              }]
}]

9. Теперь этот текст нужно сохранить в подходящем формате: заходим в меню Файл → Сохранить как, в типе файла выбираем Все файлы, а в графе Имя файла вводим: def.json


10. Готово! Осталось только упаковать!
Для этого нам понадобится простенькая программка MXPocker. Разбираться в её устройстве необязательно, можно просто перетащить в неё папку Google Plus, и она автоматически создаст файл с соответствующим расширением — GooglePlus.mxaddon


Устанавливаются расширения двойным кликом. Однако, если вы используете portable-версию, придётся вручную переместить файл в папку с расширениями:
  • MaxthonPortable\UserData\Users\Логин MX\Addons

В этом случае браузер нужно будет перезапустить. И вуаля! Всё работает!


*   *   *


Ну а теперь посмотрите наверх...
Вы только что собрали своё первое расширения для Maxthon, но... К чему такие сложности? В браузере Opera вам понадобится всего одно расширение, с помощью которого вы сможете добавить в боковую панель почти любой сайт. В Viveldi и Firefox вам вообще не нужны расширения: вы можете тупо добавить сайт вручную, как делаете это с привычными закладками. И только пользователи Maxthon должны плясать с бубном! Почему?!



P. S. 

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

За сим всё...
Рассказать друзьям через AddThis или Shareaholic
Translate via GoogleYandexBing or Promt
Другие публикации Maxthon
The same in English

Комментарии

Популярные сообщения из этого блога

Как удалить друзей ВКонтакте и никого не обидеть?

Почему браузер закрывается без причины? Советы от разработчиков Maxthon

Настройки конфиденциальности: Часть 1. ВКонтакте