How to make extension for Maxthon? Step 4: Toolbar menu

• "How to make own extension for Maxthon?" is simple guide for ordinary MX users, who need some add-on that they can't find in Extensions Center. I'm sure that MX Team make the most simple extensions system (even early extensions for Chrome and sidebar add-ons for Opera were more difficult) and every user can make own simple add-on for the browser. Let's go!

• Step 1. Sidebar addons 
• Step 2. Bookmarklets 
• Step 3. Scripts 
• Step 4. Toolbar menu 
• Step 5. Localization

How to make own extension for Maxthon?
Step 4: Toolbar menu

Before we start I must be sure that you have read the previous parts of this guide already. I will not repeat simple things that you should know already. Today we talk about toolbar menu only and nothing else. If you don't understand something, try to find necessary information in the previous parts (look links above) or use search on the blog. 

We started with simple sidebar add-on for Google+, then we added "Share" button on toolbar and today is time to add toolbar menu, but... Look on Google+ menu. There are too many points, I'm too lazy and I'm not sure that you want to read about ten almost identical lines of def.json code. We need something else, something shorter, smaller and simpler. And I want to show you very usefull service. So I chose Kwout.

• NB: This is old note and Kwout is closed already, but I'll not change original text. I'll just add other service.

Kwout is a service where you can quote a part of a web page as an image with an image map. All you need to use the service is to add bookmarklet to your favorite browser. This is very simple and workd for every browser (you can read about bookmarklets here), but we will make own extension for Maxthon. 

1. Create new folder – Kwout

2. Create icons folder inside Kwout and add icons (as we did on step 1)

3. Time for def.json. Open notepad and write:

[{
 "author": "who made it",
 "name": "your name",
 "email": "your 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": {"en": "Kwout"},
 "description": {"en": "Quote text as image"},

If you don't know what is this and can't understand what this line do, you have to return to the 1st step. This was the description of our extension and it's time to move on to action:

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

Even if you use toolbar to add menu, the icon can work as usual button. So we add the main script here. It mean that if you need to use this script you, you can just click on toolbar button. Other scripts we'll add in toolbar menu:

   "menu": 
    [
    {
    "type": "script",
    "title": {"en": "Quote page"},
    "icon": "point.png",
    "js": ["quote.js"]
    },

Stop! This is something new what we should talk about. What point.png is? In this case this is a universal icon, I use it when I don't have icons for all menu items. You can do the same or just delete this line (as in official build-in Maxthon add-ons).

    {
    "type": "script",
    "title": {"en": "New tab"},
    "icon": "point.png",
    "js": ["new.js"]
    },
    {
    "type": "script",
    "title": {"en": "Same tab"},
    "icon": "point.png",
    "js": ["same.js"]
    },
   {"type": "separator"},

Stop! Something new again! We use "type": "separator" when we need to add dotted line separating parts of our menu. This is all scripts in our menu and I think we should add separator.

    {
    "type": "page",
    "title": {"en": "My kwout"},
    "icon": "point.png",
    "main": "http://kwout.com/entry/"
    },
    {
    "type": "page",
    "title": {"en": "History"},
    "icon": "point.png",
    "main": "http://kwout.com/history/"
    },

We could end up here, but I want to show you something else. You need feedback, but Maxthon users post reviews very rarely. So we can add universal link to the extension:

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

Do not forget to close all brackets!

    ]

   }

  }]

}]

If you did it right now, now you see this:

[{
 "author": "who made it",
 "name": "your name",
 "email": "your 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": {"en": "Kwout"},
 "description": {"en": "Quote text as image"},

 "actions": [{
  "type": "mxcmd",
  "title": {"en": "Kwout"},
  "entryPoints": ["toolbar"], 
   {
   "type": "script",
   "js": ["quote.js"]
   "menu": 
    [
    {
    "type": "script",
    "title": {"en": "Quote page"},
    "icon": "point.png",
    "js": ["quote.js"]
    },
    {
    "type": "script",
    "title": {"en": "New tab"},
    "icon": "point.png",
    "js": ["new.js"]
    },
    {
    "type": "script",
    "title": {"en": "Same tab"},
    "icon": "point.png",
    "js": ["same.js"]
    },
    {"type": "separator"},
    {
    "type": "page",
    "title": {"en": "My kwout"},
    "icon": "point.png",
    "main": "http://kwout.com/entry/"
    },
    {
    "type": "page",
    "title": {"en": "History"},
    "icon": "point.png",
    "main": "http://kwout.com/history/"
    },
    {"type": "separator"},
    {
    "type": "page",
    "title": {"en": "Feedback"},
    "icon": "point.png",
    "main": "http://extension.maxthon.com/server/go.php?guid={76A85129-4F77-4C1E-AAF9-6B54684EB6CB}"
    }
    ]
   }
  }]
}]

Save this as def.json (if you have no idea how to do this, read step 1 again!)

4. Now is time to add scripts. We will use:

• kwout everywhere for quote.js
• kwout in a new window for new.js
• kwout in the same window for same.js 

Go to kwout.com, scroll page down, copy the bookmarks in notepad and save as .js file. If you don't know how to do this, you should reread step 3.

5. Use MXPacker to pack Kwout folder in Kwout.mxaddon. If you have no ideas what MXPacker is, go back to step 1. We already told about this!

Use duble click to instill you exteinsion in the browser. If you use portable version and duble click does not work, just copy new file in MaxthonPortable\UserData\Users\Your Login\Addons and it will work!

*   *   *

Once again?

Kwout is closed and now the extension is useless. So we need something else... What about DuckDuckGo? This is popular private search engine (I hope you use it already). Let's make simple add-on for DuckDuckGo!

[{
 "author": "who made it",
 "name": "your name",
 "email": "your 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": {"en": "DuckDuckGo"},
 "description": {"en": "DuckDuckGo fast private search"},

 "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": {"en": "DuckDuckGo"},
  "entryPoints": ["toolbar"],
  "icon": "toolbar.png",  
   {
   "type": "script",
   "js": ["web.js"]
   "menu": [
     {
     "type": "script",
     "title": {"en": "Web"},
     "icon": "search.png",
     "js": ["web.js"]
     },
     {
     "type": "script",
     "title": {"en": "Image"},
     "icon": "search.png",
     "js": ["image.js"]
     },
     {
     "type": "script",
     "title": {"en": "Video"},
     "icon": "search.png",
     "js": ["video.js"]
     },
     {
     "type": "script",
     "title": {"en": "News"},
     "icon": "search.png",
     "js": ["news.js"]
     },
     ]
    }
   }]
 "config": "https://duckduckgo.com/settings",
}]

We use "config" if we need to add settings. It's not nessesery if we talk about DuckDuckGo. I just showed you a new feature. Maybe it will be usefull.

What about scripts?

• 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"});

Save as .js and pack DuckDuckGo folder to .mxaddon

*   *   *

P.S.

I had to write this guide many months ago. Now I know a little more about this and I had to use the preset techniques. For example, I don't use "en" anymore. So when I edited new def.json and added "en" titles I could make mistakes. Tell me if something wrong!

That's all...
Share via AddThis or Shareaholic
Translate via Google, Yandex, Bing or Promt
More about Maxthon

Перевод на русский

• All notes in English
• All notes in Russian