Как сделать расширение для Maxthon? Шаг 4: Меню на панели инструментов

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


Как сделать расширение для Maxthon?
Шаг 4. Меню на панели инструментов


Прежде, чем мы начнём, я бы хотел убедиться, что вы действительно прочитали предыдущие части этого гайда. Мы не будем обсуждать "штуки", о которых вы уже должны знать. Сегодня мы говорим о меню на панели инструментов и только о нём, ничего больше. Если что-то всё-таки будет непонятно, попробуйте вернуться на несколько шагов назад (ссылки выше) или воспользуйтесь поиском по блогу.

Мы начинали с простого аддона боковой панели для Google+, потом мы добавили в него кнопку для быстрой публикации ссылок, и сейчас было бы логично превратить эту кнопку в меню... Но... Взгляните на меню Google+: там слишком много всего, а я лентяй и я не уверен, что вам хочется смотреть на десятки почти одинаковых строк в коде def.json. Так что нам нужно что-то ещё, что-то попроще, поменьше и покороче. И я хочу показать вам довольно полезный сервис. Так что я выбрал Kwout.

Kwout - это онлайн сервис, позволяющий вам "цитировать" фрагмент страницы в виде изображения с сохранением всех ссылок. Вам нужно просто сохранить букмарклет в закладки. Довольно просто и работает в любом браузере (если нужна информация о букмарклетах, найти её можно здесь), но мы сделаем собственное расширение для Maxthon.


1. Создаём новую папку - Kwout

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

3. Переходим к def.json. Открываем блокнот (или любой другой текстовый редактор) и пишем:

[{
"author": "кто сделал это",
"name": "имя",
"email": "электронная почта", 
"website": "http://kwout.com/" 
"date": "22.06.2017"
"type":"extension",
"frameworkVersion":"1.0.0",
"version":"1.0.0",
     "guid": "{76A85129-4F77-4C1E-AAF9-6B54684EB6CB}",
"name": "Kwout",
"icon": "icon",
"title": {"ru_ru": "Kwout"},
"description": {"ru-ru": "Цитирование текста в виде картинки"},

Если не понимаете, что означают все эти строки, вернитесь к шагу 1. Это было описание нашего расширение. Теперь переходим непосредственно к тому, что оно должно уметь:

"actions": [{
  "type": "mxcmd",
  "title": {"ru-ru": "Kwout"},
  "entryPoints": ["toolbar"],        
  {"type": "script",
  "js": ["quote.js"]

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

  "menu": [
  {
  "type": "script",
  "title": {"ru-ru": "Цитировать"},
  "icon": "point.png",
  "js": ["quote.js"]
  },

Стоп! Мелькнуло что-то новое, и нам стоит об этом поговорить. Что за point.png? Конкретно в этом случае это универсальная иконка, я использую её в тех случаях, когда у меня нет иконок для каждого пункта меню. Вы можете поступить также или вовсе отказаться от иконок в меню (как во встроенных макстоновских расширениях. Для этого просто удалите эту строку.

  {
  "type": "script",
  "title": {"ru-ru": "Новая вкладка"},
  "icon": "point.png",
  "js": ["new.js"]
  },
  {
  "type": "script",
  "title": {"ru-ru": "Текущая вкладка"},
  "icon": "point.png",
  "js": ["same.js"]
  },
  {"type": "separator"},

Стоп! опять что-то новое! Мы будем использовать "type": "separator", когда нужно визуально отделить друг от друга части нашего меню. И, по-моему, конкретно в этом случае скрипты лучше отделить от остальных пунктов.

  {
  "type": "page",
  "title": {"ru-ru": "Мои цитаты"},
  "icon": "point.png",
  "main": "http://kwout.com/entry/"
  },
  {
  "type": "page",
  "title": {"ru-ru": "История"},
  "icon": "point.png",
  "main": "http://kwout.com/history/"
  },

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

  {"type": "separator"},
  {
  "type": "page",
  "title": {"ru-ru": "Отзывы"},
  "icon": "point.png",
  "main": "http://extension.maxthon.com/server/go.php?guid={76A85129-4F77-4C1E-AAF9-6B54684EB6CB}"
  }

И не забудьте закрыть все скобки!

  ]
  }
  }]
}]


Если никто из нас по ходу сего действа не допустил ошибок, в итоге у вас должно получиться следующее:

[{
     "author": "кто сделал это",
     "name": "имя",
     "email": "электронная почта", 
     "website": "http://kwout.com/" 
     "date": "22.06.2017"
     "type":"extension",
     "frameworkVersion":"1.0.0",
     "version":"1.0.0",
     "guid": "{76A85129-4F77-4C1E-AAF9-6B54684EB6CB}",
     "name": "Kwout",
     "icon": "icon",
     "title": {"ru_ru": "Kwout"},
     "description": {"ru-ru": "Цитирование текста в виде картинки"},
     "actions": [{
               "type": "mxcmd",
               "title": {"ru-ru": "Kwout"},
               "entryPoints": ["toolbar"],        
               {"type": "script",
                    "js": ["quote.js"]
                    "menu": [
                                {
                                    "type": "script",
                                "title": {"ru-ru": "Цитировать"},
                                "icon": "point.png",
                                "js": ["quote.js"]
                                },
                                {
                                "type": "script",
                                "title": {"ru-ru": "Новая вкладка"},
                                "icon": "point.png",
                                "js": ["new.js"]
                                },
                                {
                                "type": "script",
                                "title": {"ru-ru": "Текущая вкладка"},
                                "icon": "point.png",
                                "js": ["same.js"]
                                },
                    {"type": "separator"},
                                {
                                "type": "page",
                                "title": {"ru-ru": "Мои цитаты"},
                                "icon": "point.png",
                                "main": "http://kwout.com/entry/"
                                },
                                {
                                "type": "page",
                                "title": {"ru-ru": "История"},
                                "icon": "point.png",
                                "main": "http://kwout.com/history/"
                                },
                    {"type": "separator"},
                                {
                                "type": "page",
                                "title": {"ru-ru": "Отзывы"},
                                "icon": "point.png",
                                "main": "http://extension.maxthon.com/server/go.php?guid={76A85129-4F77-4C1E-AAF9-6B54684EB6CB}"
                                }
                                ]
                                }
                    }]
}]

Сохраняем как def.json (если понятия не имеете, как это сделать, вернитесь к шагу 1).

4. Теперь пора добавить сами скрипты. Их мы возьмём с сайта kwout.com:
  • в качестве основного скрипта (quoute.js) мы будем использовать kwout everywhere
  • для цитирования в новой вкладке (new.js) берем kwout in a new window
  • для цитирования в уже открытой вкладке (same.js) - kwout in the same window

Просто скопируйте нужный букмарклет в блокнот и сохраните в формате .js. Если слабо представляете, как это делается, вернитесь к шагу 3.

5. С помощью MXPacker упаковываем папку Kwout в Kwout.mxaddon. Если впервые об этом слышите, вернитесь к шагу 1. Мы об этом уже говорили!

Устанавливаем расширение двойным кликом. Если используете portable-версию Maxthon, просто скопируйте полученный файл в MaxthonPortable\UserData\Users\Логин MX\Addons и перезапустите браузер. Работает?

P.S. 

Мне давным давно следовало написать эту часть гайда, ибо за это время я успел научиться новым штукам. Например, я больше не использую "ru-ru", вместо этого гораздо удобнее использовать отдельные файлы локализации для разных языков. Так меньше путаницы. Но тут пришлось откатиться назад и вернуться к старым обозначениям. Редактируя def.json я мог допустить кучу ошибок. Так что, если что-то не работает, говорите!

За сим всё...
Рассказать друзьям через AddThis или Shareaholic
Translate via GoogleYandexBing or Promt
English translation