Как собрать расширение для Maxthon? Шаг 4: Меню на панели инструментов
- "Как собрать собственное расширение для Maxthon" – это простое пошаговое руководство для пользователей MX, которым не удалось найти нужный аддон в Extensions Center. Я почти уверен, что абсолютно любой пользователь сможет собрать удобное расширение под свои нужны. Простейшие макстоновские расширения собрать гораздо проще, чем, скажем, ранние расширения для Chrome или аддоны боковой панели Opera. Начнём?
- Шаг 1. Аддоны боковой панели
- Шаг 2. Букмарклеты
- Шаг 3. Скрипты
- Шаг 4. Меню на панели инструментов
- Шаг 5. Локализация
Как сделать расширение для Maxthon?
Шаг 4. Меню на панели инструментов
Прежде, чем мы начнём, я бы хотел убедиться, что вы действительно прочитали предыдущие части этого гайда. Мы не будем обсуждать штуки, о которых вы уже (как бы) знаете. Сегодня мы говорим о меню на панели инструментов и только о нём, ничего больше. Если что-то всё-таки будет непонятно, попробуйте вернуться на несколько шагов назад (все ссылки выше).Мы начинали с простого аддона боковой панели для Google+, потом мы добавили в него кнопку для быстрой публикации ссылок, и сейчас было бы логично превратить эту кнопку в меню, но... Взгляните на меню Google+: там слишком много всего, а я лентяй и я не уверен, что вам хочется смотреть на десятки почти одинаковых строк в коде def.json. Нам нужно что-то другое, что-то попроще, поменьше и покороче. К тому же я бы хотел показать вам ещё один полезный сервис. Так что я выбрал Kwout.
- Важно:
Это копия довольно старой заметки, и за то время, что я ходил вокруг да около прежде, чем опубликовать её здесь, сервис успел закрыться. Однако переписывать заметку с нуля считаю неправильным. Поэтому я просто добавлю ещё один сервис, – прим.
Kwout – это онлайн сервис, позволяющий вам "цитировать" фрагмент страницы в виде изображения, сохраняя при этом все ссылки. Для его работы вам достаточно просто добавить в закладки нужный букмарклет (их несколько). Довольно просто и работает в любом браузере. И сегодня мы соберём расширение Kwout для Maxthon.
1. Создаём новую папку – Kwout
2. Внутри неё создаём ещё одну папку – 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
5. С помощью MXPacker упаковываем папку Kwout в Kwout.mxaddon. Если впервые об этом слышите, вернитесь к 1-й части гайда. Об этом мы уже говорили!
Устанавливаем расширение двойным кликом. Если используете portable-версию Maxthon, просто скопируйте полученный файл в MaxthonPortable\UserData\Users\Логин MX\Addons и перезапустите браузер. Работает?
* * *
Попробуем ещё раз
Раз уж Kwout теперь бесполезен, придётся придумать ещё один пример. Как насчёт DuckDuckGo? Это конфиденциальный поисковик, который не отслеживает и не запоминает поисковые запросы. Надеюсь, вы пользуетесь именно им. Так давайте слегка ускорим процесс поиска!
[
{
"author": "кто сделал это",
"name": "имя",
"email": "электронная почта",
"website": "https://duckduckgo.com/",
"date": "26.09.2017",
"type": "extension",
"frameworkVersion":"1.0.0",
"version":"1.0.0",
"guid": "{FDC7BC29-16E7-421C-AE27-4B3498EEB49E}",
"name": "DuckDuckGo",
"icon": "icon",
"title": {"ru-ru": "DuckDuckGo"},
"description": {"ru-ru": "Быстрый поиск DuckDuckGo"},
"actions": [
{
"type": "panel",
"entryPoints": ["sidebar"],
"stopOnClose": true,
"main": "https://duckduckgo.com/lite",
"allowPin": true,
"resizable": true,
"width": {"default": 480,
"min": 300,
"max": 640}
}
]
"actions": [
{
"type": "mxcmd",
"title": {"ru-ru": "DuckDuckGo"},
"entryPoints": ["toolbar"],
"icon": "toolbar.png",
{
"type": "script",
"js": ["web.js"]
"menu": [
{
"type": "script",
"title": {"ru-ru": "Интернет"},
"icon": "search.png",
"js": ["web.js"]
},
{
"type": "script",
"title": {"ru-ru": "Изображения"},
"icon": "search.png",
"js": ["image.js"]
},
{
"type": "script",
"title": {"ru-ru": "Видео"},
"icon": "search.png",
"js": ["video.js"]
},
{
"type": "script",
"title": {"ru-ru": "Новости"},
"icon": "search.png",
"js": ["news.js"]
},
]
}
}
]
"config": "https://duckduckgo.com/settings",
}
]
Параметр "config" отвечает за настройки, и поскольку наше расширение лишь передаёт поисковые запросы самому сайту, настройки у них будут общими. Но в данном случае от этой строки можно полностью отказаться. Я просто показал, как она выглядит.
Переходим к скриптам:
- web.js
javascript:
selected=window.getSelection();
var myRuntime = window.external.mxGetRuntime();
var mxTabs = myRuntime.create('mx.browser.tabs');
var TabNum = mxTabs.newTab({url:'https://duckduckgo.com/?q='+encodeURIComponent(selected)+'&ia=about', activate: true,position:"afterCurrrent"});
- image.js
javascript:
selected=window.getSelection();
var myRuntime = window.external.mxGetRuntime();
var mxTabs = myRuntime.create('mx.browser.tabs');
var TabNum = mxTabs.newTab({url:'https://duckduckgo.com/?q='+encodeURIComponent(selected)+'&ia=images', activate: true,position:"afterCurrrent"});
- video.js
javascript:
selected=window.getSelection();
var myRuntime = window.external.mxGetRuntime();
var mxTabs = myRuntime.create('mx.browser.tabs');
var TabNum = mxTabs.newTab({url:'https://duckduckgo.com/?q='+encodeURIComponent(selected)+'&ia=videos', activate: true,position:"afterCurrrent"});
- news.js
javascript:
selected=window.getSelection();
var myRuntime = window.external.mxGetRuntime();
var mxTabs = myRuntime.create('mx.browser.tabs');
var TabNum = mxTabs.newTab({url:'https://duckduckgo.com/?q='+encodeURIComponent(selected)+'&ia=news', activate: true,position:"afterCurrrent"});
Сохраняем скрипты и упаковываем папку DuckDuckGo в .mxaddon
* * *
P.S.
Эту часть гайда мне следовало написать уже давно, ибо за это время я успел научиться нескольким новым штукам. Например, я больше не использую параметр "ru-ru": вместо этого гораздо удобнее использовать отдельные файлы локализации для разных языков. Так меньше путаницы. Однако в этой части мне снова пришлось на время отказаться от файлов локализации и снова вернуться к старым языковым обозначениям. Редактируя def.json я мог допустить кучу ошибок. Я не собирал и не тестировал эти аддоны, я просто написал пошаговую инструкцию с простыми примерами. Так что, если что-то не работает, говорите!Рассказать друзьям через AddThis или Shareaholic
Translate via Google, Yandex, Bing or Promt
Другие публикации о Maxthon
The same in English
Комментарии
Отправить комментарий