Creating IntelliJ plugin with WebView

Hello!

In this post, I would like to show how to create a simple plugin for IntelliJ with JCEF, the new WebView framework. In our company, we use it to build such tools as GraphBuddy or CodeTale. The first one is already released, the second one we are still working on in our R&D team. It is a plugin to your IDE, which enables you to browse comments from pull requests.

To make the UI easier to reuse with many IDEs, we have decided to use WebView. If you are not familiar with it — it’s an embedded web browser, which allows you to create a UI once in the form of a web page. From the beginning of the project, we have decided to support two IDEs: IntelliJ and VSCode, as one of the most popular IDEs. VSCode bases on WebView technology — Electron, so it uses an efficient Chromium web engine.

On the opposite, IntelliJ supported only the obsolete JavaFX version of WebView up to the middle of this year. It uses an old Safari engine, which generates some problems with the UI (mainly poor performance). However, in version 2020.2 there was introduced a new officially supported implementation of WebView — JCEF. The community requested this change for a long time, and finally, there it is! It uses Chromium, so it is much faster and easier to debug. What’s more, the old one is no longer officially supported.

Maybe in the next blog post, I could present an example of migration — please, let me know if you are interested :) But now, I would like to show you how to build a toy plugin for IntelliJ. It would render a web page saved in plugin’s resources folder — what is a bit tricky part since JCEF doesn’t support jar protocol.

What do you need?

installed JDK
installed or downloaded Gradle
your favourite IDE
10 minutes
a cup of coffee or mug of tea ;)

So, let’s start!

At first, we need to create plugin.xml file:

1<idea-plugin>
2<id>catviewer</id>
3<name>CatViewer</name>
4<version>1.0</version>
5 
6<description><![CDATA[
7Your employee track every minute spent in the browser? Use CatViewer in your IDE, and browse funny cats along your code!
8]]></description>
9 
10<idea-version since-build="192.5118"/>
11 
12<depends>com.intellij.modules.platform</depends>
13 
14<extensions defaultExtensionNs="com.intellij">
15  <toolWindow id="CatViewer" anchor="right" factoryClass="com.catviewer.WindowFactory"/>
16</extensions>
17 
18</idea-plugin>

It should be located in src/main/resources/META-INF/plugin.xml. It is a file with some general information about the plugin, like version, name, or id. Its important part is extensions — it contains a list of declared services or tool windows, like in this case. I.e. Projects is one of the default tool windows in IntelliJ.

Let’s look closer to it:

1<toolWindow id="CatViewer" anchor="right" factoryClass="com.catviewer.WindowFactory"/>

The tool window has a few properties. Some of them — like id or factoryClass are obligatory, but others, like an icon , are optional. Keep in mind that id has, in this case, two functions — it is the name displayed on the button, but also is tool window ID. So, if later in code, you want to access this tool window, you can do it only by that name.

And factoryClass — it has to contain a classpath to class in your project, which implements ToolWindowFactory with its method createToolWindowContent. This method is invoked by IDE, when the tool window button is pressed. The next step would be creating a factory class mentioned above.

1package com.catviewer
2 
3import com.intellij.openapi.components.ServiceManager
4import com.intellij.openapi.project.Project
5import com.intellij.openapi.wm.{ ToolWindow, ToolWindowFactory }
6 
7class WindowFactory extends ToolWindowFactory {
8  override def createToolWindowContent(project: Project, toolWindow: ToolWindow): Unit = {
9    val catViewerWindow = ServiceManager.getService(project, classOf[CatViewerWindowService]).catViewerWindow
10    val component = toolWindow.getComponent
11    component.getParent.add(catViewerWindow.content)
12  }
13}

Save it to src/main/scala/com/catviewer/WindowFactory.scala. Surprised about language? Yes, it is possible to develop plugins for IntelliJ also using Scala!

In the above method — createToolWindowContent the WebView window is injected into the ToolWindow component. As IntelliJ UI is written using Swing, it must be passed as a compatible component. But what about the ServiceManager? It is a typical way of implementing singleton in plugins — create service, which creates and keeps stateful objects. In this case, it is a WebView window. In the next step let's create service and window class itself, so everything should be clear:

1package com.catviewer
2
3import com.intellij.openapi.project.Project
4
5class CatViewerWindowService(val project: Project) {
6  val catViewerWindow = CatViewerWindow(project)
7}

Save it to src/main/scala/com/catviewer/CatViewerWindowService.scala. Also, add it as project service by adding a line to extensions field in plugin.xml:

1<extensions defaultExtensionNs="com.intellij">
2  <toolWindow id="CatViewer" anchor="right" factoryClass="com.catviewer.WindowFactory"/>
3  <projectService id="CatViewerWindowService" serviceImplementation="com.catviewer.CatViewerWindowService"/>
4</extensions>

Services in IntelliJ are initialized lazily, so if you want to make sure that your service is running, remember to access it (as it is done in WindowFactory).

And CatViewerWindow (src/main/scala/com/catviewer/CatViewerWindow.scala):

1package com.catviewer
2
3import com.intellij.openapi.project.Project
4import com.intellij.openapi.util.Disposer
5import com.intellij.ui.jcef.JBCefBrowser
6import javax.swing.JComponent
7import org.cef.CefApp
8
9case class CatViewerWindow(project: Project) {
10  private lazy val webView: JBCefBrowser = {
11    val browser = new JBCefBrowser()
12    registerAppSchemeHandler()
13    browser.loadURL("http://myapp/index.html")
14    Disposer.register(project, browser)
15    browser
16  }
17
18  def content: JComponent = webView.getComponent
19
20  private def registerAppSchemeHandler(): Unit = {
21    CefApp
22      .getInstance()
23      .registerSchemeHandlerFactory(
24        "http",
25        "myapp",
26        new CustomSchemeHandlerFactory
27      )
28  }
29}

As you can see, it is almost the same as in the JetBrains documentation. There are a few places worth looking. Notice the "myapp" domain registered in WebView — it allows us to use custom resource handler and load files from the resources folder in our jar archive. To do this, we need to implement CustomResourceHandler and CustomSchemeHandlerFactory.

Another not obvious point is registering WebView in disposer — it helps IDE with memory management (and is a must to avoid "Memory leak detected" in IntelliJ logs). src/main/scala/com/catviewer/CustomResourceHandler:

1package com.catviewer
2
3import java.io.{IOException, InputStream}
4import java.net.URLConnection
5import org.cef.callback.CefCallback
6import org.cef.handler.{CefLoadHandler, CefResourceHandler}
7import org.cef.misc.{IntRef, StringRef}
8import org.cef.network.{CefRequest, CefResponse}
9
10class CustomResourceHandler extends CefResourceHandler {
11  private var state: ResourceHandlerState = ClosedConnection
12  override def processRequest(
13      cefRequest: CefRequest,
14      cefCallback: CefCallback
15  ): Boolean = {
16    val urlOption = Option(cefRequest.getURL)
17    urlOption match {
18      case Some(processedUrl) =>
19        val pathToResource = processedUrl.replace("http://myapp", "webview/")
20        val newUrl = getClass.getClassLoader.getResource(pathToResource)
21        state = OpenedConnection(
22          newUrl.openConnection()
23        )
24        cefCallback.Continue()
25        true
26      case None => false
27    }
28  }
29
30  override def getResponseHeaders(
31      cefResponse: CefResponse,
32      responseLength: IntRef,
33      redirectUrl: StringRef
34  ): Unit = {
35    state.getResponseHeaders(cefResponse, responseLength, redirectUrl)
36  }
37
38  override def readResponse(
39      dataOut: Array[Byte],
40      designedBytesToRead: Int,
41      bytesRead: IntRef,
42      callback: CefCallback
43  ): Boolean = {
44    state.readResponse(dataOut, designedBytesToRead, bytesRead, callback)
45  }
46
47  override def cancel(): Unit = {
48    state.close()
49    state = ClosedConnection
50  }
51}
52
53sealed trait ResourceHandlerState {
54  def getResponseHeaders(
55      cefResponse: CefResponse,
56      responseLength: IntRef,
57      redirectUrl: StringRef
58  ): Unit
59
60  def readResponse(
61      dataOut: Array[Byte],
62      designedBytesToRead: Int,
63      bytesRead: IntRef,
64      callback: CefCallback
65  ): Boolean
66
67  def close(): Unit = {}
68}
69
70case class OpenedConnection(connection: URLConnection)
71    extends ResourceHandlerState {
72  private lazy val inputStream: InputStream = connection.getInputStream
73  override def getResponseHeaders(
74      cefResponse: CefResponse,
75      responseLength: IntRef,
76      redirectUrl: StringRef
77  ): Unit = {
78    try {
79      val url = connection.getURL.toString
80      url match {
81        case x if x.contains("css") => cefResponse.setMimeType("text/css")
82        case x if x.contains("js") =>
83          cefResponse.setMimeType("text/javascript")
84        case x if x.contains("html") => cefResponse.setMimeType("text/html")
85        case _ => cefResponse.setMimeType(connection.getContentType)
86      }
87      responseLength.set(inputStream.available())
88      cefResponse.setStatus(200)
89    } catch {
90      case e: IOException =>
91        cefResponse.setError(CefLoadHandler.ErrorCode.ERR_FILE_NOT_FOUND)
92        cefResponse.setStatusText(e.getLocalizedMessage)
93        cefResponse.setStatus(404)
94    }
95  }
96
97  override def readResponse(
98      dataOut: Array[Byte],
99      designedBytesToRead: Int,
100      bytesRead: IntRef,
101      callback: CefCallback
102  ): Boolean = {
103    val availableSize = inputStream.available()
104    if (availableSize > 0) {
105      val maxBytesToRead = Math.min(availableSize, designedBytesToRead)
106      val realNumberOfReadBytes =
107        inputStream.read(dataOut, 0, maxBytesToRead)
108      bytesRead.set(realNumberOfReadBytes)
109      true
110    } else {
111      inputStream.close()
112      false
113    }
114  }
115
116  override def close(): Unit = {
117    inputStream.close()
118  }
119}
120
121case object ClosedConnection extends ResourceHandlerState {
122  override def getResponseHeaders(
123      cefResponse: CefResponse,
124      responseLength: IntRef,
125      redirectUrl: StringRef
126  ): Unit = {
127    cefResponse.setStatus(404)
128  }
129
130  override def readResponse(
131      dataOut: Array[Byte],
132      designedBytesToRead: Int,
133      bytesRead: IntRef,
134      callback: CefCallback
135  ): Boolean = {
136    false
137  }
138}

In terms of logic — it is quite straightforward. We need to implement opening files, returning headers, sending data, and handling cases of cancellation. Path to files is constructed by simple replacement of prefix http://myapp with webview (page sources are located inwebview folder in resources).

Update: in the 2021.1 release there were some changes in the resource loader in JBR. To create code compatible with 2020.2+ and 2021.1, more generic URLConnection should be used instead of JarURLConnection and better mime types recognition should be added (new loader don’t detect those types). So if your page loads other files than CSS, HTML, or js — it may be needed to extend the above implementation.

And CustomSchemeHandlerFactory:

1package com.catviewer
2 
3import org.cef.browser.{ CefBrowser, CefFrame }
4import org.cef.callback.CefSchemeHandlerFactory
5import org.cef.handler.CefResourceHandler
6import org.cef.network.CefRequest
7 
8class CustomSchemeHandlerFactory extends CefSchemeHandlerFactory {
9  override def create(
10    cefBrowser: CefBrowser,
11    cefFrame: CefFrame,
12    s: String,
13    cefRequest: CefRequest
14  ): CefResourceHandler = {
15    new CustomResourceHandler()
16  }
17}

And finally, we can create WebView folder in resources and insert their website files.

index.html ( src/main/resources/webview/index.html)

1<html>
2<body>
3  <div>
4    <img src="cat.png"/>
5  </div>
6</body>
7</html>

Insert there also your favourite image with the name cat.png ( src/main/resources/webview/cat.png). To build everything we would use Gradle. build.gradle:

1buildscript {
2    repositories {
3        mavenCentral()
4        maven { url 'https://plugins.gradle.org/m2/' }
5        maven { url 'https://oss.sonatype.org/content/repositories/snapshots/' }
6    }
7    dependencies {
8        classpath "org.jetbrains.intellij.plugins:gradle-intellij-plugin:0.6.5"
9        classpath "cz.alenkacz:gradle-scalafmt:1.13.0"
10    }
11}
12
13allprojects {
14    repositories {
15        mavenCentral()
16        maven { url 'https://plugins.gradle.org/m2/' }
17        maven { url 'https://oss.sonatype.org/content/repositories/snapshots/' }
18    }
19}
20
21apply plugin: 'idea'
22apply plugin: 'scala'
23apply plugin: 'org.jetbrains.intellij'
24apply plugin: 'scalafmt'
25
26ext {
27    scalaVersion = "2.13.3"
28}
29
30sourceSets {
31    main.scala.srcDirs = ['src/main/scala']
32    main.java.srcDirs = []
33}
34
35dependencies {
36    implementation  group: "org.scala-lang",    name: "scala-library",  version: scalaVersion
37    implementation  group: 'org.scala-lang',    name: 'scala-reflect',  version: scalaVersion
38}
39
40sourceCompatibility = 8
41targetCompatibility = 8

Place it in the root of the project. And finally — to run IntelliJ with our plugin: $ gradle runIde On the right toolbar, you should see the CatViewer button. After clicking on it, a tool window with your photo should appear.

Of course, WebView can show much more. My colleagues develop quite a heavy app for browsing code like a graph — and for presenting it in IntelliJ, they use JCEF. The project has the name GraphBuddy — please check it, even to see how complex things can be presented using WebView.

Thank you for reading!

More materials:

Creating IntelliJ plugin with WebView

Subscribe to our newsletter and never miss an article

Explore more topics

Multi-Context Content Delivery - An Enterprise headless content delivery

Frontend Enterprise Experience – An architecture for every scale business

8 trending frontend technologies for 2025