Расширяем функционал. Шаг 1


Recommended Posts

Шаг 1. Собираем аддоны быстрого доступа для боковой панели.
Шаг 2. Портируем простые расширения, написанные для других браузеров.
Шаг 3. Собираем свое первое расширение, запускающее скрипт.

Большинство расширений для MX - аддоны быстрого доступа для боковой панели. Делать их несложно. Если сохранить шаблон, весь процесс занимает меньше минуты. Да, функционал таких "расширений" минимален, но минимальны и усилия, которые нужно затратить на их создания. Да и ресурсов они потребляют ровно столько, сколько бы потребляли эти сайты, открой мы их в обычной вкладке.
Аддонов быстрого доступа для популярных сайтов полно. Отличаются они иконками, размерами окна и наличием/отсутствием некоторых параметров. О том, о чем речь будет идти ниже, я узнавал эмпирическим путем. Мне просто не нравился внешний вид таких "расширений". С этого всё и началось. Теперь ваша очередь!
Для примера возьмем аддон быстрого доступа к Яндекс.Почте. Во-первых, в нем указаны все нужные нам параметры, не придется делать оговорок. Во-вторых, его отклонили, и на сайте его не найти.
Итак...

  1. Создаем папку, в которой и будем творить! Особых глюков не будет, но логичнее использовать латинские символы. В данном случае папку мы назовем Yandex.Mail.
  2. Внутри папки Yandex.Mail создаем папку icons. В ней будут хранится иконки нашего аддона.
  3. Внутри папки icons должны быть три файла (на самом деле, хватит и одного, но давайте-ка по правилам): icon_48.png, icon_32.png и icon_16.png
    post-6290285-1431512391614_thumb.jpg
    NB: .png - это формат! Нельзя просто взять картинку и приписать к названию .png! Поэтому или ищите иконки именно в этом формате, или меняйте формат вручную в банальном Paint или Paint.NET!
    Яндекс.Картинки умеют искать изображения определенного формата. Я бы сразу искал только квадратные картинки. Должно быть что-то вроде этого.
  4. Если мы не нашли подходящей иконки в формате .png, подойдет любой другой. Просто открываем нужную картинку в Paint, Paint.NET или любом другом редакторе. Заходим в Файл -> Сохранить как, в поле "Тип файла" выбираем: .png.
    post-6290285-14315123916819_thumb.jpg
  5. Теперь, когда у нас есть файл, который мы хотим сделать иконкой, нам нужно 2 его копии. Копируем и вставляем. Копируем и вставляем.
  6. Пришло время позаботится о размере. Щелкаем правой кнопкой по любому из файлов, выбираем Открыть с помощью -> Microsoft Office Picture Manager. В самом программе жмем Изменить рисунок -> Изменить размер. Нам нужно три иконки размерами 48х48, 32х32, 16х16.
    post-6290285-14315123917431_thumb.jpg
    NB: У файлов формата .png может быть прозрачный фон, но в боковой панели Maxthon его заменят белым. То есть если вы выбрали иконку со скругленными краями, готовьтесь к тому, что углы будут белыми. Только если же вы закрепите боковую панель на рабочем столе, прозрачный фон будет действительно прозрачным. Нужна ли вам прозрачность или подойдет белый фон, решайте сами.
  7. На этом работа с иконками завершена, выходим из папки icons обратно в папку Yandex.Mail
  8. В папке Yandex.Mail должен находится файл def.json
    Открываем блокнот. Указываем сведения об авторе: имя, адрес электронной почты, сайт. В качестве вебсайта я обычно указываю источник. Теоретически, эти сведения должны будут отображаться и на сайте, но...
    [{
            "author": "A.S.",
                    "name": "Semenov-Sherin",
                    "email": "Semenov-Sherin@qip.ru",
                    "website": "http://mail.yandex.com"  
    Указываем дату создания "расширения". Это поможет не запутаться в версиях, да и вообще забавно потом будет вспоминать былые времена... Пункт необязательный, да и формат даты не важен.
            "date": "10.11.2014"
    Следующее, что нам нужно указать, версия "расширения". Начинаем, естественно, с 1.0.0. Я обычно указываю идентичные версии, хотя это и не совсем правильно. Maxthon не даст вам обновить даже описание и скриншоты без обновления самого расширения. Приходится выкручиваться...
            "type": "extension",
                    "frameworkVersion":"1.0.0",
                    "version":"1.0.0",
    Для идентификации расширений в Maxthon используется QUID. Скорее всего Maxthon не даст вам перезалить чужое расширение, если оно еще доступно в галерее. По QUID происходит и обновление аддонов. Казалось бы, если я делаю аддон "для себя" и не собираюсь загружать его на сайт, я мог бы обойтись и без QUID, но нет. Без него Maxthon не даст вам включить расширение.
    Где взять QUID? Maxthon рекомендует этот сайт.
            "guid": "{CE3219ED-2F2A-4AEE-B9BB-AB5EAAB70A6E}",
    Далее мы указываем название расширения на английском и русском. Можно добавить и описание, хотя я обычно не заморачиваюсь:
            "name": "Yandex.Mail",
                    "icon": "icon",
            "title": {"en": "Yandex.Mail", "ru-ru": "Яндекс.Почта"},
                    "description": {"en": "Yandex.Mail"}
    Дальше нам предс таит решить: где будет располагаться иконка "расширения". Классический вариант для подобных аддонов - боковая панель (sidebar), но кому-то больше нравится, когда иконки расположены на панели инструментов (toolbar). Со скином Chrome такое выглядит особенно забавно.
            "actions": [{
                    "type": "panel",
                    "entryPoints": ["sidebar"],
    Следующий пункт по мнению разработчиков Maxthon и авторов большинства подобных расширений вообще не важен. Аддоны быстрого доступа для боковой панели по умолчанию нельзя закрыть. Да, кнопка "х" у них есть, но она только сворачивает окно. Поэтому мы добавляем этот пункт. Ресурсы в конце концов не резиновые!
                    "stopOnClose": true,
    Далее мы указываем страницу, которую хотим отрывать в боковой панели:
                    "main": "https://mail.yandex.com/lite/inbox",
    Ну и напоследок мы задаем минимальные/максимальные размеры окна и размеры окна по умолчанию (таким они будут при первом запуске). Пункты "allowPin" и "resizable" оставляем нетронутыми. Они отвечают за возможность закрепить окно и изменять его размеры.
                    "allowPin": true,
                    "resizable": true,
                    "width": {"default": 990,
                            "min": 200,
                            "max": 1920},
                    "height": {"default": 500,
                            "min": 490,
                            "max": 1200}
    На этом всё. Остается только закрыть скобки, открытые в графе "actions", и скобки, открытые в самом начале:
                    }]
    }]
    Таким образом, без моих объяснений содержимое вашего блокнота сейчас должно выглядеть примерно так:
    post-6290285-14315123917951_thumb.jpg
    [{
            "author": "A.S.",
                    "name": "Semenov-Sherin",
                    "email": "Semenov-Sherin@qip.ru",
                    "website": "http://mail.yandex.com"  
            "date": "10.11.2014"
            "type": "extension",
                    "frameworkVersion":"1.0.0",
                    "version":"1.0.0",
            "guid": "{CE3219ED-2F2A-4AEE-B9BB-AB5EAAB70A6E}",
            "name": "Yandex.Mail",
                    "icon": "icon",
            "title": {"en": "Yandex.Mail", "ru-ru": "Яндекс.Почта"},
                    "description": {"en": "Yandex.Mail"}
            "actions": [{
                    "type": "panel",
                    "entryPoints": ["sidebar"],
                    "stopOnClose": true,
                    "main": "https://mail.yandex.com/lite/inbox",
                    "allowPin": true,
                    "resizable": true,
                    "width": {"default": 990,
                            "min": 200,
                            "max": 1920},
                    "height": {"default": 500,
                            "min": 490,
                            "max": 1200}
                    }]
    }]
    
  9. Сохраняем файл в нужном формате. Для этого заходим в Файл -> Сохранить как, в графе "Тип файла" указываем "Все файлы", в графе "Имя" - def.json

  10. Готово! Осталось только запаковать!

Для этого нам понадобится простенькая программка MXPacker. Показывает ее интерфейс особого смысла нет. Просто перетаскиваем папку Yandex.Mail на значок MXPacker.
post-6290285-14315123918369_thumb.jpg
Если всё сделано правильно, получаем файл Yandex.Mail.mxaddon. Устанавливаем его двойным кликом (сам файл исчезнет) или копируем вручную в C:\Users\ИМЯ ПОЛЬЗОВАТЕЛЯ WINDOWS\AppData\Roaming\Maxthon3\Users\ЛОГИН MAXTHON PASPORT\Addons

Теперь, если вы привыкли следить за новостями на каком-то сайте, но не нашли для него расширений, или если вам просто не нравится как выглядят готовые расширения, вы можете за несколько минут состряпать то, что будет вам нравится. Особых умений для этого не нужно.
Хорошо это или плохо? Я так и не ответил на этот вопрос. Хорошо, что расширения начального уровня настолько просты. Но плохо, что что-то сложнее найти трудно. Все эти годы я ждал от Maxthon "чего-то"... Чего?
Ну, допустим под Maxthon есть вот такой аддон ВКонтакте. Его собрал я. Способ, которым я его собрал, описан выше.
А в Firefox мне было бы достаточно просто кликнуть правой кнопкой по пустому месту на панели закладок, выбрать "Новая закладка", указать адрес m.vk.com и поставить галочку на "Загружать закладку в боковой панели".
Что мешало добавить нечто подобное в Maxthon? Ведь прошло столько лет!
post-6290285-14315123964766_thumb.jpg


P.S. Мы переехали на новый форум. Старые обсуждения были любезно скопированны для нас администрацией. Вот только сделано это было, судя по всему, несколько месяцев назад. Мои посты уже давно выглядят не так. Да и оформление слетело. Пришлось редактировать. Так что, если что-то не сходится, или спрашивайте тут, или сверьтесь с оригинальным постом.

 

Шаг 1. Собираем аддоны быстрого доступа для боковой панели.
Шаг 2. Портируем простые расширения, написанные для других браузеров.
Шаг 3. Собираем свое первое расширение, запускающее скрипт.

Яндекс.Почта.mxaddon

Edited by A.S.
  • Like 2
Link to comment
Share on other sites