Build a plugin for Remix

The simplest plugin ever

Recently, Remix added plugins to its online editor. It’s still in early stage, but it opens a new world of opportunities for Ethereum developers and the community. Let’s see how to build the simplest plugin ever.

An experimental plugin for auto documentation

What and where are plugins ?

Plugins are actually Iframes opened by Remix. Once opened, Remix and the plugin exchange data through PostMessage. Remix offers an API for the plugin to send requests and listen on notifications and responses from Remix.

Currently there is only one plugin available: Oraclize. You can find it under the tab settings :

The section Plugin has :

• A textarea field where you can had the declaration of your plugin.
• A load button to save the config into localstorage.
• A list of available plugins (here only Oraclize).

The declaration expected by remix is a simple JSON with the title and the url of the plugin.

Let’s code a plugin

We will build a very simple plugin that will be green if the compilation succeed, and red if it failed.

Bootstrap a simple index.html file. In the script tag, listen on message events.

For security, we will only accept trusted origins.
Then we parse the data from the message event.

Remix Plugin API

The data is an object with 5 keys :

• Action: can be a notification, response or request.
• Key: where the message come from, or go to, in Remix.
• Type: the type of message send.
• Value: the content of the message (as a string).
• id: the index of the message.

Listen on compilation

Our plugin will listen for notification from the compiler. So in our example we would filter action notification, key compiler and type compilationFinished. The list of all the actions, keys and types are available here.

Let’s refactor our code inside the event listener :

Here we check if the message data has the right action, key and type.
Then we check the first index of value which says if the compilation is a success or not.
Finally we change the background of the body.

We just need a little bit of CSS to make it work :

<style>
html, body {
  height: 100%;
  margin: 0;
}
</style>

Host and Load our Plugin

Host on swarm

To load our plugin into Remix we need to host it somewhere. We could use github page, but for the sake of the example we’ll use SWARM :

• Download SWARM
• Add the executable in the same folder than your index.html
• Open a command line interface and run :

swarm --bzzapi https://30400.swarm-gateways.net up index.html

This will create the hash of the manifest of your file and upload it to a SWARM gateway. Your console will return the hash :

06f60ed9f1b5ac51c5ee2c4de1473904989b7cd66ab1bebed781cc1e1042f316

I used https://30400.swarm-gateways.net because it allows the result to be loaded inside an iframe.

Load on Remix

Now go to you https://remix.ethereum.org, under settings > plugin add :

{
  "title": "Medium",
  "url": "https://30400.swarm-gateways.net/bzz:/06f60ed9f1b5ac51c5ee2c4de1473904989b7cd66ab1bebed781cc1e1042f316"
}

Hit Load and click on the new Medium button. Then recompile your contract and check the color !

For now there are no marketplace for plugins, so you’ll need to share your url directly for people to use it.

Sum up

Here is the complete index.html file :