There are a lot of plugin development tutorials on IDEA (IntelliJ platform) on the Internet, and I think the author’s awesome article on plugin development in The book is very good, which has guided me a lot in the process of plugin development. However, in general, there are not many tutorials for loading web pages on IDEA, and the official documentation is not so complete. From this perspective, this series will explore how to write plug-ins that load Web pages.

preface

Why would you want to develop a plug-in that handles Web pages? In fact, because in IDEA, we can open the MarkDown file, and IDEA has the ability to render markDown in real time:

Because I used JCEF for development before. When you look at this rendering, you probably assume that the browser kernel is used. Open task Manager:

Sure enough, the familiar JCEF. And then enter the JetBrains website, found in plug-in development of document: JCEF – Java Chromium Embedded Framework | IntelliJ Platform Plugin SDK (jetbrains.com).

So, let’s start from scratch and write a plug-in of our own that can load Web pages.

Environment to prepare

  • JDK 11
  • Gradle
  • Good network environment

Let’s create an IntelliJ Platform Plugin named intellij-Jcef-plugin

Then the Gradle project configuration work, complete the entire project setup. The project will be submitted to Github for download at the end.

The code

First of all, we want to have a place to display our Web page on the side of the IDEA, similar to gradle and Maven plugins:

By reading the official document we can know that we need to write the ToolWindow (Tool Windows | IntelliJ Platform Plugin SDK (jetbrains.com)) such a page form.

Basic ToolWindow development

Before we develop, we need to be clear that, although the section title says “Developing with A Blank ToolWindow”, it seems to imply that we are going to develop a so-called implementation class for ToolWindow. In fact, ToolWindow is provided by the plugin framework itself. All we need to do is create a UI component (such as JPanel) and then call the ToolWindow instance to help us set the UI component inside the ToolWindow.

Implement ToolWindowFactory

Create an implementation class for ToolWindowFactory, named MyToolWindowFactory here, and override the createToolWindowContent method.

public class MyToolWindowFactory implements ToolWindowFactory {
    @Override
    public void createToolWindowContent(
            @NotNull Project project,
            @NotNull ToolWindow toolWindow) {
        // Here the method will fire when the ToolWindow is clicked
        / / get the ContentManager
        ContentManager contentManager = toolWindow.getContentManager();
        Content labelContent =
                contentManager.getFactory() // The content manager gets the factory class
                        .createContent( // Create Content (component class instance, display name, lockable or not)
                                new JLabel("hello, world"),
                                "MyTab".false
                        );
        // Add Content using ContentManagercontentManager.addContent(labelContent); }}Copy the code

In the overridden createToolWindowContent method, the plug-in framework passes us two objects: the Project and the ToolWindow object. The Project object is an abstraction of the content of the current Project, while the ToolWindow object is built inside the plug-in framework itself and abstracts the page that pops up when we need to click on the sidebar.

In the implementation of this method, there are the following steps:

  1. Using ContentFactory (ContentManager. GetFactory () to obtain)createContentAPI creates Content objects. When this is created, you need Swing component objects (JPanel, JLabel, and so on).
  2. Use ContentManageraddContentAPI to add the Content object from Step 1.

To register the plugin

Next, we will implement MyToolWindowFactory through plugin.xml to register, Alt + Enter, IDEA to help us quickly fill in the XML configuration into plugin.xml:

IDEA automatically adds the toolWindow node to the Extensions node in the plugin.xml file, but we also need to fill in the required attribute ID:

<! -- plugin.xml -->
    <extensions defaultExtensionNs="com.intellij">
        <! -- Add your extensions here -->
        <! -- id is a required attribute, we add it -->
        <! The anchor is not required, but in order to be displayed on the right side by default like the Gradle plugin, we set it to right -->
        <toolWindow id="myToolWindowFactory"
                    anchor="right"
                    factoryClass="com.compilemind.demo.ui.MyToolWindowFactory"
        />
    </extensions>
Copy the code

Solve debug environment problems

So far, we have implemented the ToolWindowFactory and registered our implementation class in plugin.xml. For now, let’s start debugging our plug-in without writing anything:

But when you start debugging, a lot of things happen, so here’s a summary of some of the problems I encountered.

The Gradle garbled

At this point, Debug debugging will appear on my machine garbled:

The solution is to add the following statement to build.gradle:

tasks.withType(JavaCompile) {
    options.encoding = "UTF-8"
}
Copy the code

Gradle reports error for Unknown host

If something like Unknown host ‘xxxxx.cloudfront.net’ appears, You may need to adjust the proxy Settings in Gradle. This error is usually caused by the connectivity of the current network. As a result, some Jar files of Cloudfront.net cannot be downloaded. Hanging the agent is the best option at this point.

RumIde: Download JCEF

In debug mode, the Gradle plug-in developed by Intellij will download the jCEF runtime, which is a long process. The solution is to use a good network to wait for the download:

In my machine, the first time debugging is mainly encountered in the above three cases.

Verify the base ToolWindow

After solving the above problems, the community version of our IDEA (ideaIC) was displayed on the interface, and if you check the Plugins TAB, you will find that the Plugins we wrote have been installed by the ideaIC:

We use this IDEA to create a simple empty project, and you can see our ToolWindow on the right:

As you can see, the contents of the ToolWindow are displayed as new JLabel(” Hello, World “) that we set above, with the title “My Tab” that we set above. As of now, the code contained on this Github commit:

Simple ToolWindow Content · w4ngzhen/intellij-jcef-plugin@bf2ca8e (github.com)

Web page ToolWindow development

Through the above series of environment builds and ToolWindow development exercises, we’ve seen how to develop a plug-in for displaying content in the IDEA sidebar. Of course, our initial requirement was to display the web page in the ToolWindow, and as you know, JetBrains has introduced JCEF into the IntelliJ plugin platform. Next, we use JCef and JBCef related apis to create a UI component for displaying the Web and add it to the ToolWindow as described above.

Create MyWebToolWindowContent

package com.compilemind.demo.ui;

import com.intellij.ui.jcef.JBCefApp;
import com.intellij.ui.jcef.JBCefBrowser;

import javax.swing.*;
import java.awt.*;

public class MyWebToolWindowContent {

    private final JPanel content;

    /** * constructor */
    public MyWebToolWindowContent(a) {
        this.content = new JPanel(new BorderLayout());
        // Determine whether the IDEA environment supports JCEF
        if(! JBCefApp.isSupported()) {this.content.add(new JLabel("Current environment does not support JCEF", SwingConstants.CENTER));
            return;
        }
        / / create JBCefBrowser
        JBCefBrowser jbCefBrowser = new JBCefBrowser();
        // Set the JBCefBrowser UI control to the Panel
        this.content.add(jbCefBrowser.getComponent(), BorderLayout.CENTER);
        / / load the URL
        jbCefBrowser.loadURL("https://cnblogs.com/w4ngzhen");
    }

    /** * Returns the JPanel * created@return JPanel
     */
    public JPanel getContent(a) {
        returncontent; }}Copy the code

Modify MyToolWindowFactory

Here, we’ll create an instance of MyWebToolWindowContent, then return its Panel and set it the same way into the ToolWindow.

Verify the Web rendering ToolWindow

After the above code is developed, we run the Debug mode again, and we can see that the interface at this time displays the relevant webpage:

The appendix

This code I put on Github address: w4ngzhen/intellij-jcef-plugin (github.com).

The above two sections of basic ToolWindow development and Web page ToolWindow development are submitted as follows:

Simple ToolWindow Content · w4ngzhen/intellij-jcef-plugin@bf2ca8e (github.com)

Web ToolWindow Content · w4ngzhen/intellij-jcef-plugin@45604d3 (github.com)