Skip to main content
Jump to: navigation, search

Orion/Documentation/Developer Guide/Simple plugin example

< Orion‎ | Documentation‎ | Developer Guide
Revision as of 19:14, 5 May 2011 by (Talk | contribs) (Creating the plugin HTML file)

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

What's 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.

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 small set of extension points — service types that plugins can contribute to, in order to customize the client and add more functionality. These include:

  • 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

What you need

Every plugin must include the following JavaScript libraries:

The easiest way to satisfy these is to get orion-plugin.js, which is a minified file that includes both of them. You can then copy-paste its contents into a <script> tag in your plugin, or load it externally like so:

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

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 plugin HTML file

  • Create a new HTML file called reversePlugin.html with the following content:
<!DOCTYPE html>
    <meta charset="UTF-8" />
    <title>Reverse Plugin</title>
  • What we have now isn't a plugin yet. It's just a bare-bones HTML file. The next step is to include the API we'll need to talk to Orion.
  • Grab the orion-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 file:
<script src="orion-plugin.js" />
  • Now we'll add some code that exposes a service to Orion. Add the following, again inside the <head> tags:
    window.onload = function() {
        var provider = new eclipse.PluginProvider();
        var serviceImpl = { /* TODO */ };
        var serviceProperties = { /* TODO */ };
        provider.registerServiceProvider("editorAction", serviceImpl, serviceProperties);
  • At this point, we've got an honest-to-goodness Orion plugin, albeit one that doesn't do anything. Let's go over the various parts in detail:
    • window.onload
    • eclipse.PluginProvider
    • serviceImpl
    • serviceProperties
    • provider.registerServiceProvider("editorAction", serviceImpl, serviceProperties);
    • provider.connect();
  • Now we'll fill in the serviceImpl and serviceProperties objects with the actual details of the service that our plugin will provide.


  • Before continuing, make sure that reversePlugin.html looks like this:

Testing the plugin

First we need to host our plugin somewhere.

  • If you have a personal web server available
  • 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/Getting_Started_with_Orion#Launching_your_project_as_a_website Launching your project as a website].

Once you've got a URL - install it - run the action


Here are some existing plugins we've written. View their source code to see how they work:
Contributes a "Beautify JS" button to the editor toolbar by using the editorAction service type.
Contributes an "Uglify JS" button to the editor toolbar byusing the editorAction service type.
Contributes several sample actions to the Orion navigator by using the fileCommands service type.
Contributes syntax highlighting support for HTML files by using the ISyntaxHighlight service type.

See also

Back to the top