How to write a plugin for Web Client?

You can find, download or submit Web Client Plugins here.

How to write a plugin for Web Client?

Postby FTP » Sun Mar 06, 2011 1:44 pm

How to write a plugin for Web Client?

From Wing FTP Server 3.8.0, Web Client Plugins will be supported!
And you can write your own plugin easily without modifying the "webclient/main.html" or other original html, 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 (
-- Version: 1.0

local tab = {}
tab.plugin_enabled = true

tab.extbutton_name = "My First App"
tab.extbutton_func = "show_mydiv()"
tab.extbutton_icon = "plugins/myapp/icon.gif"
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";


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:
* The icon image must be 16px*16px GIF image.
* 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".
* If you want to submit your plugin to, you also need to create a readme.txt file, you can check out this example.
Site Admin
posts 1351
joined Tue Sep 29, 2009 6:09 am

Return to Web Client Plugins

Who is online

Users browsing this forum: No registered users and 1 guest