How to write a plugin for Web Client?

[FTP]

You can write your own web client plugin easily, just take a few steps as following:

1. Create a plugin folder under "webclient/plugins/", such as "webclient/plugins/myapp".

2. Then, under the created plugin folder, place at least one file: "setting.html", it is a Lua script file with core settings of your plugin. And its content will look like this:

Code: Select all

<%
-- Plugin Name: My First App
-- Description: This plugin can simply show or hide a square.
-- Author: wftpserver (https://www.wftpserver.com)
-- Version: 1.0

local tab = {}
tab.plugin_enabled = true

tab.extbutton_name = "My First App"
tab.extbutton_func = "show_mydiv()"
tab.need_selectfile = false
tab.exthtml = [[
<div id="extra_div" style="position:absolute; z-index:100; top:200px; left:200px; width:200px; height:200px; padding:20px; text-align:center; background:#FF0000; display:none;" onclick="hide_mydiv()">Click here to hide me.</div>
]]
tab.extjs = [[
function show_mydiv(){
	$("extra_div").style.display = "";
}
function hide_mydiv(){
	$("extra_div").style.display = "none";
}
]]

register_plugin(tab)
%>

Done! If you visit the main interface of web client, now you will see a new button "My First App" when you click on "More actions" or right-click on the top. After clicking the button "My First App", a square with red color will be shown, that's it!




It is so simple, right? OK, let me explain "setting.html" in more detail. First, the top of "setting.html" must contain a plugin information header ("Plugin Name", "Description", "Author" and "Version"). Then, you must create a Lua table variable (local variable), and the table format will look like this (all the fields are optional):

{
["plugin_enabled"] = Boolean, -- whether to enable the plugin.
["extbutton_name"] = String, -- the button name.
["extbutton_func"] = String, -- the button function, you can define the javascript function in the "extjs" field.
["extbutton_icon"] = String, -- the icon image of the button, if you don't define this field, then it will use a default icon.
["need_selectfile"] = Boolean, -- if the value is true, then the button will be shown when right-clicking on a file.
["exthtml"] = String, -- the extra html code, it will be placed in "webclient/main.html"
["extjs"] = String, -- the extra javascript code, it will be placed on the bottom of "webclient/main.html"
}

The last thing is registering your plugin, just call the register function: register_plugin(tab)


Other Tips:
* All the resource files (e.g. HTML, CSS) must be placed in the plugin folder, such as "webclient/plugins/myapp".
* You can re-write the existed javascript function, just define the same name function in the field "extjs".