How to write a plugin for Web Client?

You can find, download or submit Web Client Plugins here.
Post Reply
FTP
Site Admin
Posts: 2072
Joined: Tue Sep 29, 2009 6:09 am

How to write a plugin for Web Client?

Post by 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!

Image
Image

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".
Post Reply