How to make extension for Maxthon? Step 5: Localization

  • "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!



How to make own extension for Maxthon?
Step 5: Localization

Have you read the previous parts of this guide? Do it! Because I'll not explain simple things what you should know already. But I'll try to repeat the main stages of development of "our expansion": sidebar windows, bookmarklets / scripts, toolbar menu. And today we'll add localizations.

For the last part of the guide I chose a special extension: it does not exist yet. And I will not make it. I'll just write how to do this. It could be your exam: just make the extension. I know you can do this!

So what extension will we make today?
VK Lite. We already have VK for MX, but... What if you don't need all this poinst? What if you need only news, profile and share? VK for MX is too big, and now we'll make simple version of this.


1. Create new folder VK Lite

2. Inside VK Lite create icons folder and add icons (as on Step 1)

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

[{
"author": "who made it",
"name": "your name",
"email": "your email", 
"website": "http://vk.com/" 
"date": "22.08.2018"
"type":"extension",
"frameworkVersion":"1.0.0",
"version":"1.0.0",
     "guid": "{1A7AF015-9187-4257-91A0-7E9C853A0833}",
"name": "VK Lite",
"icon": "icon",

This is our description. Here are many optional lines (for example, the first 4-5 lines could be deleted). If you don't know what is this and can't understand what this line do, you have to return to the Step 1. But now we'll add something new:
 
"title": {"_t": "app.VKLite"},
"description": {"_t": "app.Description"},

It's very simple: instead of {"en": "Title"} we use {"_t": "app.Title"}. Just remember this and later I'll show you how it works. Now we'll add sidebar panel for m.vk.com (if you don't remember what it is and how it works, return to Step 1):

"actions": [{ 
  "type": "panel", 
  "entryPoints": ["sidebar"], 
  "stopOnClose": true,
   "icon": "sidebar.png", 
  "main": "https://m.vk.com/",
   "allowPin": true,
   "resizable": true, 
  "width": {"default": 360, 
  "min": 300,
                                   "max": 720}
            }]      
 

Done. Go to toolbar menu:

"actions": [{
  "type": "mxcmd",
  "title": {"_t": "app.VKLite"},
  "entryPoints": ["toolbar"],        
  {"type": "script",
  "js": ["page.js"]

For some reason button on toolbar can't work as link to URL if you use toolbar menu. So I used simple script page.js to open the URL in a new tab. Maybe this bug has been fixed already, but
I haven't updated my Maxthon for a long time.

  "menu": [
    {
    "type": "script",
    "title": {"_t": "app.Share"},
    "icon": "point.png",
    "js": ["share.js"]
    },
    {
    "type": "page",
    "title": {"_t": "app.Feed"},
    "icon": "point.png",
    "main": "https://vk.com"
    },
    {
    "type": "page",
    "title": {"_t": "app.Profile"},
    "icon": "point.png",
    "main": "https://vk.com/id0"
    },
    {
    "type": "script",
    "title": {"_t": "app.Search"},
    "icon": "point.png",
    "js": ["search.js"]
    },
    ]
  }
            }]
}]

Now your def.json look like this:

[{
"author": "who made it",
"name": "your name",
"email": "your email", 
"website": "http://vk.com/" 
"date": "22.08.2018"
"type":"extension",
"frameworkVersion":"1.0.0",
"version":"1.0.0",
     "guid": "{1A7AF015-9187-4257-91A0-7E9C853A0833}",
"name": "VK Lite",
"icon": "icon",
"title": {"_t": "app.VKLite"},
"description": {"_t": "app.Description"},

"actions": [{ 
"type": "panel", 
"entryPoints": ["sidebar"],
"stopOnClose": true, 
"icon": "sidebar.png",
"main": "https://m.vk.com/",
"allowPin": true,
"resizable": true, 
"width": {"default": 360,
          "min": 300,
                                          "max": 720}

}]

"actions": [{
"type": "mxcmd",
"title": {"_t": "app.VKLite"},
"entryPoints": ["toolbar"],        
{
"type": "script",
"js": ["page.js"]
"menu": [
         {
         "type": "script",
         "title": {"_t": "app.Share"},
         "icon": "point.png",
         "js": ["share.js"]
         },
         {
         "type": "page",
         "title": {"_t": "app.Feed"},
         "icon": "point.png",
         "main": "https://vk.com"
         },
         {
         "type": "page",
         "title": {"_t": "app.Profile"},
         "icon": "point.png",
         "main": "https://vk.com/id0"
         },
         {
         "type": "script",
         "title": {"_t": "app.Search"},
         "icon": "point.png",
         "js": ["search.js"]
         },
         ]
}
}]
}]


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


4. Now we need three scripts:
 
page.js:
javascript:
var myRuntime = window.external.mxGetRuntime();
var mxTabs = myRuntime.create('mx.browser.tabs');
var TabNum = mxTabs.newTab({url:"
https://vk.com",activate: true,position:"afterCurrrent"});

share.js:
javascript:
var myRuntime = window.external.mxGetRuntime();
var mxTabs = myRuntime.create('mx.browser.tabs');
var TabNum = mxTabs.newTab({url:"https://vk.com/share.php?url="+encodeURIComponent(location.href)+'',activate: true,position:"afterCurrrent"});


search.js:
javascript:
selected=window.getSelection();
var myRuntime = window.external.mxGetRuntime();
var mxTabs = myRuntime.create('mx.browser.tabs');
var TabNum = mxTabs.newTab({url:'https://vk.com/search?c[q]='+encodeURIComponent(selected)+'&c[section]=auto',activate: true,position:"afterCurrrent"});


If you don't remember how ho save scripts, re-read Step 2 and Step 3.


5. Go back to VK Lite folder and create new folder – locale – here you will store localization files:

en.ini:
[lang]
app.VKLite=VK Lite
app.Description=Lite version of unofficial add-on for VK.com
app.Share=Share
app.Feed=News feed
app.Profile=My page
app.Search=Search


ru-ru.ini:
[lang]
app.VKLite=VK Lite
app.Description=Лёгкая версия неофициального расширения ВКонтакте
app.Share=Опубликовать
app.Feed=Новости
app.Profile=Моя страница
app.Search=Найти


uk-ua.ini:
[lang]
app.VKLite=VK Lite
app.Description=Легка версія неофіційного розширення ВКонтакте
app.Share=Поширити
app.Feed=Новини
app.Profile=Моя сторінка
app.Search=Знайти


Save as .ini files. If you don't know how to do this, go back to Step 1.

6. Use MXPacker to pack folder VK Lite (if you don't remember ho to use it, just read Step 1 again, it was very important step) and install new extension. If you use portable-version of Maxthon, just copy VKLite.mxaddon to MaxthonPortable\UserData\Users\Your Login\Addons and restart your browser. Done!


It's all what I know about extensions for Maxthon. As I said before, I'm not developer and I can't write code. I can make only very simple extensions and many people can much more. So this is probably the last part of the guid. 

Choose the website with good mobile version and try to make own extension. Without help and tips. Add a window to too sidebar, try to copy website menu to the toolbar, add scripts for searching and sharing and don't forget about localization!

That's all...
Share via AddThis or Shareaholic
Translate via GoogleYandexBing or Promt
More about Maxthon
Перевод на русский (скоро)

Комментарии

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