How to make extension for Maxthon? Step 3: Scripts
- "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 3: Scripts
We continue to talk how to make own extension for Maxthon Browser. We already know how to make sidebar add-on, how to add toolbar button and how to add bookmarklet in our extension. And today we talk about scripts. And it will be very easy!
What do you remember about bookmarklets? Bookmarklet is script, which is run by click. Today we make extensions with script, which will run without our action. If you did not read previous guides, look up and read, because I will not explain things that you should know already.
As an example I chose "Instagram: middle-click to new tab" by Xiao. And now we make earlier version of Instagram middle-click for Maxthon Browser. Let's start?
1. Create Middle-click for Instagram folder
2. Create icons folder inside Middle-click for Instagram
3. Add icon_16.png, icon_32.png and icon_48.png inside icons folder.
4. This is our def.json for scripts:
[
{
"author": "Xiao",
"website": "https://greasyfork.org/users/5802",
"date": "10.01.2016",
"type":"extension",
"frameworkVersion":"1.0.0",
"version":"1.0.1",
"guid": "{EEF9EC3E-C7AE-42A0-A1B6-7118A32AD36E}",
"name": "Instagram: middle-click to new tab"
"icon": "icon",
"title": {"en": "Instagram: middle-click to new tab"},
"description": {"en": "Middle-click to open new tab on Instagram"},
This is description of our expansion. If you have any questions at this stage, re-read previous part of the tutorial (all links in the beginning of the publication).
"actions": [
{
"type": "script",
"entryPoints": ["doc_end"],
"include": ["*.instagram.com", "instagram.com"],
"js": ["script.js"],
}
]
We already told about scripts in Step 2, bookmarklets are scripts too, so you have to know this "type". But this "entryPoints" is something new for you. This is the option for script running (we used click before). When the script have to begin work?
- "doc_start": Executes the scripts listed in "js" attribute when the page begins to load. Timing: before the construction of page DOM. Not supported in IE core.
- "doc_end": Executes the scripts listed in "js" attribute when the page finishes loading. Timing: after the DOM is built, but before the loading of images and FRAME contents.
- "doc_onload": Executes the scripts listed in "js" attribute when the page is completely loaded. Timing: after the page onload event. Not supported in IE core.
What "entryPoints" sould you use? I don't know. If you need instant start use "doc_start", if time is not so important, use "doc_end" or "doc_onload". And don't forget about Trident: you exntensions will not work in Retro mode with some of these "entryPoints". But MX updates SDK from time to time, so you need test it every time to be sure. And if you script does not work as mxaddon, try to change "entryPoints". From time to time it can be usefull if you scripts is not running.
By the way, that's all. Do not forget to close the bracket and save as def.json:
} ]
5. Now is time to add the script in our extension. We will take it from GreasyFork page. Again open notepad:
// ==UserScript== // @name Instagram: middle-click to new tab // @description Allows you to open links in new tabs by middle clicking // @include *://www.instagram.com/* // @version 1.01 // @grant none // @namespace https://greasyfork.org/users/5802 // ==/UserScript==
This is the description of the script and this is unnecessary. So if you want to save the size of you extensions, you can remove it. But this is not so inmoprtant: this is very little text and this is your respect for developer. So I think you should use this text too!
Save as script.js and all will be done.
6. Pack the Middle-click for Instagram folder in .mxaddon via MXPacker and instill it in you browser by double click. Open Instagram.com and try to use middle click on any link. Does it work?
window.addEventListener('click', function(e){
if(e.button == 1 || (e.button == 0 && e.ctrlKey)){
e.stopPropagation();
}
}, true);
Save as script.js and all will be done.
6. Pack the Middle-click for Instagram folder in .mxaddon via MXPacker and instill it in you browser by double click. Open Instagram.com and try to use middle click on any link. Does it work?
* * *
Where you can find useful scripts
As I told before, we will not talk how to write a script. So you should use other guide about scripts of you can just find the script what you need without my help. From time to time I try to check these websites:And do not forget about the official developers websites. For example, Sebaro publishes new version of SaveTube on his website first. SaveTube for Maxthon is my work and I try to update this in time, but MX need a few days for moderation.
If you want to be sure that the script can work in Maxthon, you have to add it in ViolentMonkey. If the script work, you have a chance. But Maxthon is too specific browser, not every script will work as mxaddon, even if it works via ViolentMonkey. More about scripts and how to use scripts on MX3 you can read here.
Комментарии
Отправить комментарий