在Remix-IDE中部署本地插件

一、环境准备

remix-ide 是基于Solidity编写的以太坊智能合约开发环境，用于对solidity语言编写的智能合约程序进行编译。关于remix的内容不做具体介绍。为了部署插件，可以进入在线remix编辑器（可能需要科学上网）。也可以搭建本地的remix环境，具体方法百度相关教程。

二、插件开发

这里直接给出一个最简单的插件示例。在remix-plugin的github页面可以查看详细的插件开发方法。以官方给出的hello-world示例，完成该插件的部署。该插件项目包含一个html文件（index.html），功能是在remix中新建一个hello-world文件，文件内容为Hello world。

完整代码(index.html)：

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hello World Plugin</title>
</head>
<body>
<!-- Remix Plugin inject boostrap theme by default -->
<button class="btn btn-primary" οnclick="showHelloWorld()">
  Create Hello World File
</button>

<script src="https://unpkg.com/@remixproject/plugin"></script>
<script>
  const { createIframeClient } = remixPlugin;
  const client = createIframeClient();

  async function showHelloWorld() {
    await client.onload();  // Wait for connection
    client.call('fileManager', 'setFile', 'browser/hello-world', 'Hello World');
  }
</script>
</body>
</html>

代码中的具体细节请前往github页面查看学习。

三、部署本地插件

1、打开remix；

2、在remix的插件管理器（左侧功能栏最后一个插头标志）中，点击“Connect to a Local Plugin”,可以看到，remix要能加载自己的插件，需要插件名以及插件的url链接。因此需要将这个文件部署在静态网页。一个简单的方法是使用Github pages,在github上创建仓库，并将插件文件放入，生成url连接即可。