Skip to main content

Notice: this Wiki will be going read only early in 2024 and edits will no longer be possible. Please see: https://gitlab.eclipse.org/eclipsefdn/helpdesk/-/wikis/Wiki-shutdown-plan for the plan.

Jump to: navigation, search

Difference between revisions of "Orion/Documentation/Developer Guide/Simple plugin example"

(Examples)
(Troubleshooting plugin installation)
(108 intermediate revisions by 6 users not shown)
Line 1: Line 1:
This page explains how to write a plugin for Orion. It's intended for developers who want to extend Orion's functionality.
+
This section explains how to write a plugin for Orion. It is intended for developers who want to extend Orion's functionality.
  
== What's a plugin? ==
+
== What is a plugin? ==
A '''plugin''' is basically just an HTML file that knows how to connect to the Orion client. A plugin can be hosted on any web server. Plugins are written in HTML and JavaScript.
+
* A <i>plugin</i> is an HTML file containing some JavaScript that knows how to connect to the Orion client. Plugins can be hosted on any web server and installed into Orion using their URL.
 +
* In order to be useful, a plugin should provide one or more <i>services</i>. When Orion needs a service contributed by a plugin, it loads the plugin inside an IFrame.
 +
* Orion currently supports a set of <dfn>extension points</dfn>: service types that plugins can contribute to, in order to customize the client and add more functionality. These include things like:
 +
** Adding more commands to the editor toolbar
 +
** Adding more commands to the navigator view
 +
** Adding content assist for new file types
 +
** Adding syntax highlighting rules for new file types
 +
For a full list of available services, see the [[Orion/Documentation/Developer_Guide|Developer Guide]].
  
In order to be useful, a plugin should provide one or more '''services'''. When Orion needs a service contributed by a plugin, it loads the plugin inside an IFrame.
+
== What you need ==
 +
Every plugin must minimally include the following JavaScript library: '''<tt>[http://orionhub.org/orion/plugin.js plugin.js]</tt>'''
  
Orion currently supports a small set of '''extension points''' &mdash; service types that plugins can contribute to, in order to customize the client and add more functionality. These include:
+
You can copy-paste its contents into a &lt;script&gt; tag in your plugin, or load it externally like so:
* Adding more commands to the editor toolbar
+
<source lang="html5" enclose="div" >
* Adding more commands to the navigator view
+
<script src="plugin.js"></script>
* Adding content assist for new file types
+
</source>
* Adding syntax highlighting rules for new file types
+
The plugin.js file is also an AMD module, so you can alternatively load it through a module loader like [http://requirejs.org/ RequireJS].
 +
<source lang="javascript" enclose="div" >
 +
require(['plugin'], function(PluginProvider) {
 +
    // ...
 +
});
 +
</source>
  
== What you need ==
+
==== Advanced API usage ====
Every plugin must include the following JavaScript dependencies:
+
If you're authoring a plugin that will use [[Orion/Documentation/Developer Guide/Architecture#Object_References|Object References]], you must load an additional script, <code>Deferred.js</code>. Your script section would then look like this:
* '''OpenAjax''': defined in <tt>[http://orionhub.org/openajax/release/all/OpenAjaxManagedHub-all.js OpenAjaxManagedHub-all.js]</tt>
+
* '''Orion Provider API''': <tt>[http://orionhub.org/js/plugin.js plugin.js]</tt>
+
The easiest way to satisfy these is to get <tt>orion-plugin.js</tt>, which is a minified file that includes both of them. You can then copy-paste its contents into a &lt;script&gt; tag in your plugin, or load it externally like so:
+
<script src="orion-plugin.js">
+
  
== Services ==
+
<source lang="html5" enclose="div">
TODO
+
<script src="Deferred.js"></script>
 +
<script src="plugin.js"></script>
 +
</source>
 +
 
 +
The plugin we construct in this tutorial does not use Object References, so just <code>plugin.js</code> will suffice.
 +
 
 +
== Writing the plugin ==
 +
Let's make a plugin that adds a button to the toolbar of the Orion editor. When clicked, it will reverse the selected text in the editor. This is not a very useful feature, but it'll be a good introduction to the concepts involved.
 +
 
 +
=== Creating the HTML file ===
 +
Create a new HTML file called <tt>reversePlugin.html</tt> with the following content:
 +
 
 +
<source lang="html5" enclose="div">
 +
<!DOCTYPE html>
 +
<html>
 +
<head>
 +
<meta charset="UTF-8" />
 +
  <title>Reverse Plugin</title>
 +
</head>
 +
<body></body>
 +
</html>
 +
</source>
 +
Now we have a bare-bones HTML file. The next step is to include the API we need to talk to Orion. Grab the <tt>plugin.js</tt> file (see [[#What you need|What you need]]) and put it in the same folder as <tt>reversePlugin.html</tt>. Then add this inside the &lt;head&gt; tags of the HTML file:
 +
<source lang="html5" enclose="div" start="6">
 +
<script src="plugin.js"></script>
 +
</source>
 +
 
 +
=== Making it a plugin ===
 +
Next, we'll add some code that connects our file to Orion. Add the following, again inside the &lt;head&gt; tags:
 +
<source lang="javascript" enclose="div" >
 +
    <script>
 +
        var headers = { name: "My Plugin", version: "1.0", description: "My first Orion plugin." };
 +
        var provider = new orion.PluginProvider(headers);
 +
        provider.connect();
 +
    </script>
 +
</source>
 +
At this point, we've got an honest-to-goodness Orion plugin, albeit one that does nothing. Let's go over the various parts in detail.
 +
; <tt>var headers = ...</tt>
 +
: An optional object supplying metadata about the plugin's name, version and description. This is used to display information about the plugin on Orion's Settings page.
 +
; <tt>var provider = new orion.PluginProvider(headers)</tt>
 +
: Creates a new PluginProvider. The PluginProvider may provide one or more services, but right now ours doesn't provide any.
 +
; <tt>provider.connect()</tt>
 +
: This is where the magic happens. When our plugin is activated from Orion, this call opens an asynchronous communication channel. Orion adds information about our plugin, and any service contributions it makes, to the Orion registry.
 +
 
 +
=== Registering the service ===
 +
Now we're going to expose a service to Orion. We'll create and register a service with the [[Orion/Documentation/Developer Guide/Plugging into the editor#orion.edit.command|orion.edit.command]] service type.
 +
Add the additional lines as shown:
 +
<source lang="javascript" enclose="div" highlight="2-4" >
 +
        var headers = { name: "My Plugin", version: "1.0", description: "My first Orion plugin." };
 +
        var provider = new orion.PluginProvider(headers);
 +
        var serviceImpl = { };
 +
        var serviceProperties = { };
 +
        provider.registerService("orion.edit.command", serviceImpl, serviceProperties);
 +
        provider.connect();
 +
</source>
 +
Let's review what was added:
 +
; <tt>var serviceImpl</tt>
 +
: This object gives the implementation of our service, the part that will do the actual work. When someone requests our service,<!-- — for example, by getting a <tt>ServiceReference</tt> object and calling getService() &mdash; --> our plugin is loaded into an IFrame, and the service's methods are made available. The <tt>function</tt>-typed properties of the <tt>serviceImpl</tt> object define the service methods.
 +
; <tt>var serviceProperties</tt>
 +
: Every service provider can supply '''properties''', which is an object that holds metadata about the service provider. <!-- Orion stores these properties when a plugin is installed <span style="background-color: #00ff00;">(?)</span>, and they can later be queried without causing the plugin to be loaded.<br>Properties are often used to filter out service providers that are irrelevant to a particular task. For example, if you're writing a service provider for content assist, you'd specify what file types your provider applies to in its properties. The content assist loader then only loads plugins that provide content assist for the particular file type being edited.  This is important because plugin load can be an expensive operation, so we want to avoid doing it if possible. since these can be queried without loading the plugin itself. --> If you're familiar with Eclipse desktop, you can think of service properties as analogous to the extensions declared in a plugin.xml file.
 +
; <tt>provider.registerService("orion.edit.command", serviceImpl, serviceProperties);</tt>
 +
: This call registers our service implementation and properties with the service type [[Orion/Documentation/Developer_Guide/Plugging_into_the_editor#orion.edit.command|"orion.edit.command"]]. At this point, if we tried installing our plugin into Orion, we'd have enough to make the Orion editor see our contribution. However, our contribution still does nothing. Let's fix that.
 +
 
 +
=== Implementing the service ===
 +
We'll fill in the <tt>serviceImpl</tt> and <tt>serviceProperties</tt> objects with the actual details of the service.
 +
Change the <tt>serviceImpl</tt> object to look like this:
 +
<source lang="javascript" enclose="div" >
 +
        var serviceImpl = {
 +
            run: function(text) {
 +
                return text.split("").reverse().join("");
 +
            }
 +
        };
 +
</source>
 +
Note that the functions defined in the service will depend on what service type you're contributing to. In our case, we're contributing to [[Orion/Documentation/Developer_Guide/Plugging_into_the_editor#orion.edit.command|"orion.edit.command"]], which expects a <tt>run()</tt> function. (See the [[Orion/Documentation/Developer_Guide|Developer Guide]] for a list of extension points and their API.)
 +
 
 +
Change the serviceProperties object to look like this:
 +
<source lang="javascript" enclose="div" >
 +
        var serviceProperties = {
 +
            name: "Reverse Text",
 +
            key: ["e", true, true] // Ctrl+Shift+e
 +
        };
 +
</source>
 +
=== The finished plugin file ===
 +
Make sure that your copy of <tt>reversePlugin.html</tt> looks like this:
 +
<source lang="javascript" enclose="div" line="GESHI_FANCY_LINE_NUMBERS">
 +
<!DOCTYPE html>
 +
<html>
 +
<head>
 +
  <meta charset="UTF-8" />
 +
  <title>Reverse Plugin</title>
 +
  <script src="plugin.js"></script>
 +
  <script>
 +
      var headers = { name: "My Plugin", version: "1.0", description: "My first Orion plugin." };
 +
      var provider = new orion.PluginProvider(headers);
 +
      var serviceImpl = {
 +
              run: function(text) {
 +
                  return text.split("").reverse().join("");
 +
              }
 +
      };
 +
      var serviceProperties = {
 +
              name: "Reverse Text",
 +
              key: ["e", true, true] // Ctrl+Shift+e
 +
      };
 +
      provider.registerService("orion.edit.command", serviceImpl, serviceProperties);
 +
      provider.connect();
 +
</script>
 +
</head>
 +
<body></body>
 +
</html>
 +
</source>
 +
 
 +
=== Testing the plugin ===
 +
First we need to host our plugin somewhere.
 +
* If you have a personal web server available, you can copy <tt>reversePlugin.html</tt> and <tt>plugin.js</tt> there.
 +
* If you're using Orionhub, you can put the plugin in a new folder in your Orionhub workspace. Then create a Site Configuration in Orion that launches your folder. See [[Orion/Documentation/User Guide/Getting started#Launching_your_project_as_a_website|Launching your project as a website]].
 +
* You can also use a pre-built version at [https://orion-plugins.github.io/1.0/plugins/reverse/reversePlugin.html https://orion-plugins.github.io/1.0/plugins/reverse/reversePlugin.html].
 +
 
 +
 
 +
Now that you've got a URL for reversePlugin.html, install it into Orion:
 +
* Go to http://yourOrionServer/settings/settings.html#,category=plugins,installPlugin=http://yourPluginServer/reversePlugin.html.
 +
* You'll be prompted to install the plugin. Click '''Yes'''.
 +
* You should see a message indicating success. If you get an error, see [[#Troubleshooting plugin installation|Troubleshooting plugin installation]].
 +
 
 +
 
 +
Let's try it out.
 +
* In Orion, go to the navigator and create a new file called <tt>test.txt</tt>.
 +
* Click on <tt>test.txt</tt> to open the editor.
 +
* You'll see a menu entry under "Tools" called "Reverse Text".
 +
* Select some text, click the menu entry (Tools -> Reverse Text) and it should be reversed.
 +
 
 +
 
 +
==== Troubleshooting plugin installation ====
 +
So you got a <tt>Plugin handshake timeout</tt> or similar error while trying to install a plugin? Try these troubleshooting tips:
 +
 
 +
; Check that the plugin URL can be loaded.
 +
: Open the plugin's URL in a web browser -- does the page load correctly? If it 404s, it will fail to install into Orion as a plugin.
 +
 
 +
; Check for errors in the plugin.
 +
: Load the plugin's URL in a web browser, then open your browser's developer console. Look for any script errors or missing resources. Is the required library <tt>plugin.js</tt> loaded correctly? Any of these failures can cause the plugin to fail to handshake with Orion.
 +
 
 +
; Check that the plugin is connecting to the framework.
 +
: To call back to Orion at installation time, the plugin must invoke the <tt>PluginProvider.connect()</tt> method. Load the plugin's URL in a web browser, and use a breakpoint (or <tt>console.log()</tt>) to ensure that the <tt>.connect()</tt> method is actually getting called.
 +
 
 +
; Check for mixed content blocking.
 +
: When you attempt to install the plugin into Orion, does a shield icon appear in your address bar? If so, you're hitting the ''mixed content blocking'' feature of your web browser. The most frequent cause is trying to install a plugin from an <tt>http://</tt> URL into an HTTPS Orion server like <tt>orionhub.org</tt>.
 +
[[Image:Mixed-content-chrome.png||top|alt=Mixed content blocking in Chrome]]
 +
[[Image:Mixed-content-firefox.png||top|alt=Mixed content blocking in Firefox]]
 +
 
 +
There are a few ways to resolve this problem:
 +
* [https://support.mozilla.org/en-US/kb/how-does-content-isnt-secure-affect-my-safety Temporarily turn off] the mixed content blocker.
 +
* Host the plugin on an HTTPS server like [https://pages.github.com/ GitHub Pages]. Then install it from its <tt>https://</tt> URL.
 +
* Use an HTTP Orion server instead of HTTPS. Running a local server on <tt>http://localhost</tt> is a good option. Mixed content blocking will not apply in this case.
 +
* Set up an HTTPS server on your local machine, and host your plugin there while you develop.
  
 
== Examples ==
 
== Examples ==
 
Here are some existing plugins we've written. View their source code to see how they work:
 
Here are some existing plugins we've written. View their source code to see how they work:
; http://bokowski.github.com/format-js.html
+
; [https://github.com/eclipse/orion.client/blob/master/bundles/org.eclipse.orion.client.ui/web/plugins/sampleCommandsPlugin.html bundles/org.eclipse.orion.client.ui/web/plugins/sampleCommandsPlugin.html]
: Contributes a "Beautify JS" button to the editor toolbar by using the <tt>editorAction</tt> service type.
+
: Contributes several sample actions to the Orion navigator by using the <tt>orion.navigate.command</tt> service type.
  
; http://mamacdon.github.com/m6/uglify/uglify-plugin.html
+
; [https://github.com/eclipse/orion.client/blob/master/bundles/org.eclipse.orion.client.ui/web/plugins/webEditingPlugin.js bundles/org.eclipse.orion.client.ui/web/plugins/webEditingPlugin.js]
: Contributes an "Uglify JS" button to the editor toolbar byusing the <tt>editorAction</tt> service type.
+
: Contributes syntax highlighting support for HTML files by using the <tt>orion.edit.highlighter</tt> service type.
  
; http://orionhub.org/plugins/sampleCommandsPlugin.html
+
; https://orion-plugins.github.io/0.5/plugins/beautify/jsbeautify.html
: Contributes several sample actions to the Orion navigator by using the <tt>fileCommands</tt> service type.
+
: Contributes a "Beautify JS" button to the editor toolbar by using the <tt>orion.edit.command</tt> service type.
  
; http://orionhub.org/plugins/htmlSyntaxHighlightPlugin.html
+
Visit [https://orion-plugins.github.io orion-plugins.github.io] for a directory of Orion plugins that you can install and view the source of.
: Contributes syntax highlighting support for HTML files by using the <tt>ISyntaxHighlight</tt> service type.
+
  
 
== See also ==
 
== See also ==
* [[Orion/How Tos/Installing A Plugin Installing a plug-in]]
+
* [[Orion/How Tos/Installing A Plugin|Installing a plugin]]
* eclipse.PluginProvider JSdoc
+
 
+
[[Category:Orion]]
+
[[Category:Orion/How To]]
+

Revision as of 11:18, 24 July 2015

This section explains how to write a plugin for Orion. It is intended for developers who want to extend Orion's functionality.

What is a plugin?

  • A plugin is an HTML file containing some JavaScript that knows how to connect to the Orion client. Plugins can be hosted on any web server and installed into Orion using their URL.
  • In order to be useful, a plugin should provide one or more services. When Orion needs a service contributed by a plugin, it loads the plugin inside an IFrame.
  • Orion currently supports a set of extension points: service types that plugins can contribute to, in order to customize the client and add more functionality. These include things like:
    • Adding more commands to the editor toolbar
    • Adding more commands to the navigator view
    • Adding content assist for new file types
    • Adding syntax highlighting rules for new file types

For a full list of available services, see the Developer Guide.

What you need

Every plugin must minimally include the following JavaScript library: plugin.js

You can copy-paste its contents into a <script> tag in your plugin, or load it externally like so:

<script src="plugin.js"></script>

The plugin.js file is also an AMD module, so you can alternatively load it through a module loader like RequireJS.

require(['plugin'], function(PluginProvider) {
    // ...
});

Advanced API usage

If you're authoring a plugin that will use Object References, you must load an additional script, Deferred.js. Your script section would then look like this:

<script src="Deferred.js"></script>
<script src="plugin.js"></script>

The plugin we construct in this tutorial does not use Object References, so just plugin.js will suffice.

Writing the plugin

Let's make a plugin that adds a button to the toolbar of the Orion editor. When clicked, it will reverse the selected text in the editor. This is not a very useful feature, but it'll be a good introduction to the concepts involved.

Creating the HTML file

Create a new HTML file called reversePlugin.html with the following content:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
   <title>Reverse Plugin</title>
</head>
<body></body>
</html>

Now we have a bare-bones HTML file. The next step is to include the API we need to talk to Orion. Grab the plugin.js file (see What you need) and put it in the same folder as reversePlugin.html. Then add this inside the <head> tags of the HTML file:

 <script src="plugin.js"></script>

Making it a plugin

Next, we'll add some code that connects our file to Orion. Add the following, again inside the <head> tags:

    <script>
        var headers = { name: "My Plugin", version: "1.0", description: "My first Orion plugin." };
        var provider = new orion.PluginProvider(headers);
        provider.connect();
    </script>

At this point, we've got an honest-to-goodness Orion plugin, albeit one that does nothing. Let's go over the various parts in detail.

var headers = ...
An optional object supplying metadata about the plugin's name, version and description. This is used to display information about the plugin on Orion's Settings page.
var provider = new orion.PluginProvider(headers)
Creates a new PluginProvider. The PluginProvider may provide one or more services, but right now ours doesn't provide any.
provider.connect()
This is where the magic happens. When our plugin is activated from Orion, this call opens an asynchronous communication channel. Orion adds information about our plugin, and any service contributions it makes, to the Orion registry.

Registering the service

Now we're going to expose a service to Orion. We'll create and register a service with the orion.edit.command service type. Add the additional lines as shown:

        var headers = { name: "My Plugin", version: "1.0", description: "My first Orion plugin." };
        var provider = new orion.PluginProvider(headers);
        var serviceImpl = { };
        var serviceProperties = { };
        provider.registerService("orion.edit.command", serviceImpl, serviceProperties);
        provider.connect();

Let's review what was added:

var serviceImpl
This object gives the implementation of our service, the part that will do the actual work. When someone requests our service, our plugin is loaded into an IFrame, and the service's methods are made available. The function-typed properties of the serviceImpl object define the service methods.
var serviceProperties
Every service provider can supply properties, which is an object that holds metadata about the service provider. If you're familiar with Eclipse desktop, you can think of service properties as analogous to the extensions declared in a plugin.xml file.
provider.registerService("orion.edit.command", serviceImpl, serviceProperties);
This call registers our service implementation and properties with the service type "orion.edit.command". At this point, if we tried installing our plugin into Orion, we'd have enough to make the Orion editor see our contribution. However, our contribution still does nothing. Let's fix that.

Implementing the service

We'll fill in the serviceImpl and serviceProperties objects with the actual details of the service. Change the serviceImpl object to look like this:

        var serviceImpl = {
            run: function(text) {
                return text.split("").reverse().join("");
            }
        };

Note that the functions defined in the service will depend on what service type you're contributing to. In our case, we're contributing to "orion.edit.command", which expects a run() function. (See the Developer Guide for a list of extension points and their API.)

Change the serviceProperties object to look like this:

        var serviceProperties = {
            name: "Reverse Text",
            key: ["e", true, true] // Ctrl+Shift+e
        };

The finished plugin file

Make sure that your copy of reversePlugin.html looks like this:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="UTF-8" />
  5.   <title>Reverse Plugin</title>
  6.   <script src="plugin.js"></script>
  7.   <script>
  8.       var headers = { name: "My Plugin", version: "1.0", description: "My first Orion plugin." };
  9.       var provider = new orion.PluginProvider(headers);
  10.       var serviceImpl = {
  11.               run: function(text) {
  12.                   return text.split("").reverse().join("");
  13.               }
  14.       };
  15.       var serviceProperties = {
  16.               name: "Reverse Text",
  17.               key: ["e", true, true] // Ctrl+Shift+e
  18.       };
  19.       provider.registerService("orion.edit.command", serviceImpl, serviceProperties);
  20.       provider.connect();
  21. </script>
  22. </head>
  23. <body></body>
  24. </html>

Testing the plugin

First we need to host our plugin somewhere.


Now that you've got a URL for reversePlugin.html, install it into Orion:


Let's try it out.

  • In Orion, go to the navigator and create a new file called test.txt.
  • Click on test.txt to open the editor.
  • You'll see a menu entry under "Tools" called "Reverse Text".
  • Select some text, click the menu entry (Tools -> Reverse Text) and it should be reversed.


Troubleshooting plugin installation

So you got a Plugin handshake timeout or similar error while trying to install a plugin? Try these troubleshooting tips:

Check that the plugin URL can be loaded.
Open the plugin's URL in a web browser -- does the page load correctly? If it 404s, it will fail to install into Orion as a plugin.
Check for errors in the plugin.
Load the plugin's URL in a web browser, then open your browser's developer console. Look for any script errors or missing resources. Is the required library plugin.js loaded correctly? Any of these failures can cause the plugin to fail to handshake with Orion.
Check that the plugin is connecting to the framework.
To call back to Orion at installation time, the plugin must invoke the PluginProvider.connect() method. Load the plugin's URL in a web browser, and use a breakpoint (or console.log()) to ensure that the .connect() method is actually getting called.
Check for mixed content blocking.
When you attempt to install the plugin into Orion, does a shield icon appear in your address bar? If so, you're hitting the mixed content blocking feature of your web browser. The most frequent cause is trying to install a plugin from an http:// URL into an HTTPS Orion server like orionhub.org.

Mixed content blocking in Chrome Mixed content blocking in Firefox

There are a few ways to resolve this problem:

  • Temporarily turn off the mixed content blocker.
  • Host the plugin on an HTTPS server like GitHub Pages. Then install it from its https:// URL.
  • Use an HTTP Orion server instead of HTTPS. Running a local server on http://localhost is a good option. Mixed content blocking will not apply in this case.
  • Set up an HTTPS server on your local machine, and host your plugin there while you develop.

Examples

Here are some existing plugins we've written. View their source code to see how they work:

bundles/org.eclipse.orion.client.ui/web/plugins/sampleCommandsPlugin.html
Contributes several sample actions to the Orion navigator by using the orion.navigate.command service type.
bundles/org.eclipse.orion.client.ui/web/plugins/webEditingPlugin.js
Contributes syntax highlighting support for HTML files by using the orion.edit.highlighter service type.
https://orion-plugins.github.io/0.5/plugins/beautify/jsbeautify.html
Contributes a "Beautify JS" button to the editor toolbar by using the orion.edit.command service type.

Visit orion-plugins.github.io for a directory of Orion plugins that you can install and view the source of.

See also

Back to the top