Ярлыки

Как собрать расширение для Maxthon? Шаг 2: Букмарклеты

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



Как собрать собственное расширение для Maxthon?
Шаг 2. Букмарклеты

Давеча мы научилось собирать аддоны боковой панели для браузера Maxthon. Достижение так себе, ведь в Vivaldi, Firefox и Opera на Presto такие штуки можно делать и без расширений. Даже в новой Opera всего один аддон может избавить вас от всех плясок с бубном по этому. И только в Maxthon вам придётся так заморачиваться!

Переходим к следующему этапу на пути создания собственного расширения. Сегодня мы соберём первое расширение, основанное на букмарклете. Букмарклет — это такой скрипт, который запускается по клику. Мы соберём расширение, которое по нажатию кнопки на панели инструментов активирует простенький скрипт для публикации ссылки на открытую страницу или поиска выделенного текста. Некоторое время назад мы уже говорили о букмарклетах, которые могут пригодиться в повседневных делах.

Объяснять вам, как написать скрипт, я не стану. Хотя бы потому, что я тупо не знаю, как это сделать. Поэтому вам придётся искать эту информацию без моей помощи. Ну или вы можете искать уже готовые скрипты. Это не так сложно, как кажется. Разумеется, я покажу, как всё это работает в Maxthon. И в качестве примера я выбрал TL;DR-ify, весьма своеобразный сервис для цитирования. С ним вы можете выделить конкретное место в тексте, а потом опубликовать ссылку на конкретный отрывок. Когда-то я уже писал  об этой штуке. У TLDRify есть расширения для Google Chrome, Mozilla Firefox и Maxthon (последнее даже обзавелось полуофициальным статусом: разработчики не имели к порту никакого отношения, но в целом поддержали перенос расширения на новый браузер). Пользователям других браузеров придется использовать букмарклет. Так что сегодня мы сделаем нечто похожее на TLDRify для Maxthon. Если вам эта идея не особо нравится, вы можете выбрать другой скрипт.


1. Создаём папку TLDRify

 2. Внутри папки TLDRify создаём папку icons. Сюда скидываем все нужные нам иконки. Всё, как мы делали в 1-й части этого гайда.

 3. Переходим к def.json. Открываем блокнот и пишем:
[{
  "author": "Michael Spector (original)"
  "email": "webmaster@tldrify.com (about servise)",
  "website": "https://tldrify.com/"
  "date": "25.01.2016",
  "type":"extension",
  "frameworkVersion":"1.0.0",
  "version":"1.0.0",
  "guid": "{1BAEC378-8726-4FD1-8D44-E4AD2A4747C1}",
  "name": " TLDRify"
  "icon": "icon",
  "title": {"ru-ru": "TLDRify"},
  "description": {"ru-ru": "цитирование текста"},

Если вы уже ознакомились с 1-й частью гайда, вам не нужно объяснять, за что отвечают все эти строки. Так ведь? Пока это просто описание нашего расширения, так что это не так важно. Важнее следующее:
  "actions": [{
               "type": "script",
               "entryPoints": ["toolbar"],
               "js": ["script.js"]
               }]

Букмарклет – это скрипт, не забыли? Поэтому в графе "tipe" указываем "script", а в графе "entryPoints" – ["toolbar"]. Такие расширения лучше смотрятся на панели инструментов, но если хотите, вы можете использовать и ["sidebar"].

Не забудьте закрыть все скобки!
}]

На самом деле всё это не так сложно, но, пожалуй, стоит всё же показать, что должно было получиться в итоге:
[{
  "author": "Michael Spector (original)"
  "email": "webmaster@tldrify.com (about servise)",
  "website": "https://tldrify.com/"
  "date": "25.01.2016",
  "type":"extension",
  "frameworkVersion":"1.0.0",
  "version":"1.0.0",
  "guid": "{1BAEC378-8726-4FD1-8D44-E4AD2A4747C1}",
  "name": " TLDRify"
  "icon": "icon",
  "title": {"ru-ru": "TLDRify"},
  "description": {"ru-ru": "цитирование текста"},

  "actions": [{
               "type": "script",
               "entryPoints": ["toolbar"],
               "js": ["script.js"]
               }]

}]

Сохраняем файл в формате .json 
Не знаете как? Тогда возвращайтесь на шаг назад!

4. Пришло время найти сам скрипт! Для этого нам придётся отправиться на tldrify.com. Ищем зеленую кнопку TLDRify. Нашли? Правый клик /копировать адрес ссылки. Снова открываем блокнот и вставляем скопированный текст:
javascript:(function(d){d.body.appendChild(d.createElement('script')).src='//tldrify.com/static/js/bookmarklet.min.js?_'+new Date().getTime();})(document);

Сохраняем как script.js
Снова проблемы? Тогда снова вернитесь на шаг назад!

5. Готово! Осталось только упаковать папку TLDRify в .mxaddon и установить расширение в ваш браузер. И если вы снова не имеете ни малейшей идеи о том, как это делается, почему вы до сих пор здесь? По-моему, уже вам уже давно стало ясно, что пропускать 1-ю часть было ошибкой!

И за сим как бы всё, но…

*   *   *

Мы ведь начинали с аддона боковой панели для Google+, и было бы логично, если бы со временем мы бы постепенно расширяли его функционал. Так давайте этим и займёмся!

1. Отрываем старый файл def.json в папке Google Plus и слегка корректируем номер текущей версии нашего расширения:
[{
  "author": "кто сделал это",
  "name": "имя",
  "email": "мыло",
  "website": "https://plus.google.com/"
  "date": "25.01.2016",
  "type": "extension",
  "frameworkVersion":"1.0.0",
  "version":"1.0.1",

Боковую панель оставляем без изменений:
  "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}
               }]

А теперь давайте добавим в наше расширение скрипт для быстрой публикации ссылки на открытую страницу:
  "actions": [{
               "type": "script",
               "entryPoints": ["toolbar"],
               "js": ["script.js"]
               }]

Не забудьте закрыть скобки:
}]


2. Теперь скрипт. Снова открываем блокнот:
javascript:q=(document.location.href);void(open('https://plus.google.com/share?url='+escape(q),'_self','resizable,location,menubar,toolbar,scrollbars,status'));

Способов написать простенький скрипт, который будет автоматически копировать адрес открытой страницы и вставлять его в специальное поле на другой странице, много. Но я бы советовал пойти по пути наименьшего сопротивления: не заморачивайтесь! Ведь кто-то уже наверняка делал нечто подобное. Поэтому вам нужно просто найти подходящий образец. Например, вы можете использовать скрипт из SaveFrom.Net Download Button для Maxthon. Это одно из первых подобных расширений. Просто поменяйте адрес сайта. К чему лишние сложности?

3. Сохраняем букмарклет как script.js, упаковываем папку Google Plus в .mxaddon и устанавливаем новую версию расширения. Если используете portable-версию браузера, новый файл придётся вручную скопировать в MaxthonPortable\UserData\Users\Логин MX\Addons

*   *   *

Ну и раз уж мы всё равно говорим о букмарклетах, пожалуй, стоит рассказать о некоторых из них поподробнее…

  • share.js
    Этот скрипт автоматически копирует адрес открытого сайта. Вам нужно лишь найти страницу, через которую можно публиковать ссылки. Например, для Google+ скрипт выглядел бы вот так:
javascript:
var myRuntime = window.external.mxGetRuntime();
var mxTabs = myRuntime.create('mx.browser.tabs');
var TabNum = mxTabs.newTab({url:"https://plus.google.com/share?url="+encodeURIComponent(location.href)+'',
activate: true,position:"afterCurrrent"});

  • search.js
    Этот скрипт автоматически копирует выделенный текст. Обычно его используют для быстрого поиска. Вам нужно лишь указать страницу поисковой выдачи. Например, скрипт для быстрого поиска в Google+ выглядел бы вот так:
javascript:
selected=window.getSelection();
var myRuntime = window.external.mxGetRuntime();
var mxTabs = myRuntime.create('mx.browser.tabs');
var TabNum = mxTabs.newTab({url:'https://plus.google.com/s/'+encodeURIComponent(selected)+'',activate: true,position:"afterCurrrent"});

  • page.js
    Этот скрипт тупо открывает в новой вкладке указанный сайт. Звучит бессмысленно, но в случае с макстоновскими расширениями иногда это может быть действительно полезно. Например, для страницы профиля в Google+ скрипт выглядит примерно так:
javascript:
var myRuntime = window.external.mxGetRuntime();
var mxTabs = myRuntime.create('mx.browser.tabs');
var TabNum = mxTabs.newTab({url:"https://plus.google.com/me",
activate: true,position:"afterCurrrent"});

*   *   *

P. S.

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

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

Комментарии

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

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