Plugin development tutorial

From Maxthon Help

Jump to: navigation, search

This short tutorial is created for developers who like to create a Maxthon plugin written in JavaScript.

If you like to create a COM or EXE type plugin, please take a look at the SDK (note that it's a bit outdated, it will be updated later).


Contents

[edit] Plugin Structure

Maxthon plugins are stored in the Maxthon\Plugin directory.

You should create a new folder under this main plugin directory (use your plugin name as folder name), so the path looks like this:

C:\Program Files\Maxthon\Plugin\MyPlugin


In your plugin folder you have to create these files:

plugin.ini
file used by Maxthon to identify your plugin
<iconName>.ico
an icon that will be displayed inside Maxthon. <iconName> can be any name you like, this has to be defined in plugin.ini
<scriptName>.html
a script that will be run (if it's a button type plugin) or a webpage (if it's a sidebar type plugin). <scriptName> can be anything you like, this has to be defined in plugin.ini

Not required files:

config.html
webpage that will be opened if the user clicks the "config" (in Maxthon 1.x) or "options" (in Maxthon 2.x) button inside the Maxthon configuration.
<hotIconName>.ico
a "hot" icon that will be used if the user hovers over the plugin button. <hotIconName> can be anything you like, this has to be defined in plugin.ini

Automatically created files for sidebar plugins:

max.src
this file contains the security_id (used by certain Maxthon commands, see below)

Naturally you can add any file you like if required by your plugin, like images, script & stylesheets.




[edit] Button Plugin

For a button plugin, displayed on the Plugin Bar, the plugin.ini file should look like this:

[General]
Name=Plugin Name
Author=Your name
Version=1.0.0
ModuleType=SCRIPT
FileName=fileToRun.html
Comments=This plugin does nothing
Type=M2Plugin_Button
HotIcon=hotIcon.ico
icon=icon.ico
StartAfterPageDone=0

[MyIE2Buttons]
Count=2
Name1=View online
FileName1=viewOnline.html
Name2=View details
FileName2=viewDetails.html
  • Note that FileName supports subdirectories.
  • The [MyIE2Buttons] section is not required if your button plugin does not have a drop down menu.
  • You can add your own sections if you like (to store settings for example)

The FileName script should look like this:

<script language="javascript">

//your script

</script>


Toolbar plugins can easily access the HTML DOM from the active tab, simply by using the normal window, document etc. objects.

To create an alertbox with the URL from the active tab you will only have to write:

alert(location.href)


The security_id can be accessed with

%max_security_id

So for example

var SECURITY_ID = %max_security_id

stores the security_id inside the SECURITY_ID variable.


NOTE: since the script is run on the active tab this variable can be accessed by the website itself. This can be a security issue, but it's easy to fix: simply put your script inside an anonymous function, like this:

<script language="javascript">
(function(){

//your script

}())
</script>


Note that this could cause problems if you add a button to the current website, that should run a script when pressed. Since your plugin is anonymous the function that should be run isn't available anymore.

This problem can be solved by adding this line to your script:

window.functionToRun = functionToRun

Where functionToRun is the function that should be available on the current website.


[edit] Sidebar Plugin

For a sidebar plugin the plugin.ini file should look like this:

[General]
Name=Plugin Name
Author=Your name
Version=1.0.0
ModuleType=SCRIPT
FileName=webpage.html
Comments=This sidebar plugin does nothing
Type=M2Plugin_Sidebar
HotIcon=hotIcon.ico
Icon=icon.ico
  • Note that FileName supports subdirectories.
  • You can add your own sections if you like (to store settings for example)

The FileName webpage should look like a normal webpage, so like this:

<html>
<head>  
  <script language="javascript" type="text/javascript" src="max.src"></script>
</head>
<body>
  <h1>Header</h1>
  <a href="http://www.maxthon.com" target="_blank">Maxthon.com</a>
  
  <h2>Another Header</h2>
  <a href="#" onclick="alert(external.get_tab(max_security_id, external.cur_sel).document.URL)">Get URL of active website</a>
</body>
</html>


The security_id is stored in the max.src file, automatically created by Maxthon.

You can access it if you add this line to the <head> of your webpage:

<script type="text/javascript" src="max.src"></script>

Note that you should insert this line above any other external script you might have.


The security_id can now be accessed using the max_security_id variable.


For the Maxthon Scripting API see this document: http://www.maxthon.com/files/doc/script_api.htm


[edit] External Links

Personal tools