IDEA Web渲染插件开发（一）— 使用JCEF

2023-10-16 21:57:03 浏览数 (1)

目前网上已经有了很多关于IDEA（IntelliJ平台）的插件开发教程了，本人觉得简书上这位作者秋水畏寒 的关于插件开发的文章很不错，在我进行插件开发的过程中指导了我很多。但是综合下来看，在IDEA上加载网页的插件的教程还不是特别多，官方文档也不是那么的完整。本系列将会从这个角度出发，探讨如何编写加载Web页面的插件。

前言

为什么会有想到开发处理Web网页的插件呢？实际上因为在IDEA中，我们可以打开markdown文件，并且IDEA具有markdown实时渲染的能力：

因为之前，本人使用过JCEF进行开发。看到这个渲染，心里大概猜测，应该用了浏览器内核。打开任务管理器：

果然，熟悉的JCEF。然后进入JetBrains的官网，在插件开发的文档中找到了：JCEF - Java Chromium Embedded Framework | IntelliJ Platform Plugin SDK (jetbrains.com)。

那么，接下来我们从零开始，编写一款属于自己的插件，这款插件能够加载Web页面。

环境准备

  • JDK 11
  • Gradle
  • 良好的网络环境

我们先创建一个IntelliJ Platform Plugin，名为：intellij-jcef-plugin

然后进行这个Gradle项目的配置工作，完成整个项目搭建。本项目会在最后提交到github供读者下载。

代码编写

首先说明我们的目的，就是希望能够类似于gradle、maven插件一样，能够在IDEA的侧边有一个显示我们Web页面的地方：

通过阅读官方的文档我们可以知道，我们需要编写的是ToolWindow（Tool Windows | IntelliJ Platform Plugin SDK (jetbrains.com)）这样一个页面窗体。

基础ToolWindow开发

在开发之前，我们需要明确一点，尽管这一节的标题写着"空白ToolWindow开发"，似乎在暗示我们，接下来我们会开发一个所谓的ToolWindow的实现类。实际上，ToolWindow是插件框架本身提供的，我们只需要做的是创建UI组件（例如JPanel），然后调用ToolWindow实例通过相关的API帮我们把UI组件设置到ToolWindow内部，具体的步骤如下：

实现ToolWindowFactory

创建一个ToolWindowFactory的实现类，这里我们取名MyToolWindowFactory，然后重写createToolWindowContent方法。

代码语言：javascript复制
public class MyToolWindowFactory implements ToolWindowFactory {
    @Override
    public void createToolWindowContent(
            @NotNull Project project,
            @NotNull ToolWindow toolWindow) {
        // 此处方法将会在点击ToolWindow的时候触发
        // 获取ContentManager
        ContentManager contentManager = toolWindow.getContentManager();
        Content labelContent =
                contentManager.getFactory() // 内容管理器获取工厂类
                        .createContent( // 创建Content（组件类实例、显示名称、是否可以锁定）
                                new JLabel("hello, world"),
                                "MyTab",
                                false
                        );
        // 利用ContentManager添加Content
        contentManager.addContent(labelContent);
    }
}

在重写的createToolWindowContent方法中，插件框架会为我们传入两个对象：Project以及ToolWindow对象。其中，Project对象是当前项目的内容抽象，而ToolWindow这个对象就是插件框架本身内部构造的，抽象了我们需求所说的，点击侧边栏时候弹出的页面。

在该方法实现中，主要有以下步骤：

  1. 使用ContentFactory（ContentManager.getFactory()获取）的createContentAPI创建Content对象。这个创建时候，需要swing组件对象（JPanel、JLabel等等）。
  2. 使用ContentManager的addContentAPI添加步骤1的Content对象。

注册插件

接下来，我们将我们实现的MyToolWindowFactory通过plugin.xml进行注册，alt enter，IDEA帮助我们快速完成填写xml配置到plugin.xml中：

进行上述操作后，IDEA自动为我们在plugin.xml文件的extensions节点中，添加了toolWindow节点的内容，但是我们还需要填写必备的属性id：

代码语言：javascript复制
<!-- plugin.xml文件 -->
    <extensions defaultExtensionNs="com.intellij">
        <!-- Add your extensions here -->
        <!-- id是必须的属性，我们进行添加 -->
        <!-- anchor锚点非必须，但是为了像Gradle插件一样默认显示在右边，我们设置为right -->
        <toolWindow id="myToolWindowFactory"
                    anchor="right"
                    factoryClass="com.compilemind.demo.ui.MyToolWindowFactory"
        />
    </extensions>

解决调试环境问题

目前为止，我们实现了ToolWindowFactory以及将我们的实现类注册到plugin.xml中。现在，我们先什么内容都不编写，开始调试我们的插件：

不过开始调试后，会有很多的情况发生，这里我做了一些遇到的问题的总结。

Gradle乱码

此时进行Debug调试，在我的机器上会出现乱码：

解决方案为，在build.gradle中添加如下的语句：

代码语言：javascript复制
tasks.withType(JavaCompile) {
    options.encoding = "UTF-8"
}
Gradle报错不知道这样的主机（Unknown host）

如果出现了类似于Unknown host 'xxxxx.cloudfront.net'. You may need to adjust the proxy settings in Gradle.这样的报错，一般是当前网络的连通问题，导致无法下载cloudfront.net一些jar文件。此时挂代理是最好的办法。

rumIde：Download JCEF

如果使用调试模式，intellij插件开发的Gradle插件会下载jcef的运行时，这个过程会比较漫长，目前解决办法是使用好的网络等待下载：

在本人机器上，第一次调试的时候主要就是遇到上面的三种情况。

验证基础ToolWindow

解决完上述的几个问题之后，界面弹出了我们的调试下的社区版的IDEA（ideaIC），并且，查看Plugins页签，会发现我们编写的插件已经被这个ideaIC安装了：

我们使用这个IDEA创建一个简单的空项目，然后可以看到右侧有我们提供的ToolWindow：

可以看到，此时的ToolWindow中的内容显示为我们上面设置的new JLabel("hello, world")，该ToolWindow上方有我们设置的"My Tab"标题。截至目前的代码，包含在这个github上这个提交：

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

Web页面ToolWindow开发

通过上面一些系列的环境搭建，以及ToolWindow开发练习，我们已经了解了如何开发一款用于IDEA侧边栏展示内容的插件。当然，我们一开始的需求是要在ToolWindow中展示网页，并且也知道了，JetBrains已经将JCEF引入到了IntelliJ插件平台。接下来，我们使用JCef以及JBCef相关API创建一个用于展示Web的UI组件，再通过上述的方式，添加到ToolWindow。

创建MyWebToolWindowContent

代码语言：javascript复制
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;

    /**
     * 构造函数
     */
    public MyWebToolWindowContent() {
        this.content = new JPanel(new BorderLayout());
        // 判断所处的IDEA环境是否支持JCEF
        if (!JBCefApp.isSupported()) {
            this.content.add(new JLabel("当前环境不支持JCEF", SwingConstants.CENTER));
            return;
        }
        // 创建 JBCefBrowser
        JBCefBrowser jbCefBrowser = new JBCefBrowser();
        // 将 JBCefBrowser 的UI控件设置到Panel中
        this.content.add(jbCefBrowser.getComponent(), BorderLayout.CENTER);
        // 加载URL
        jbCefBrowser.loadURL("https://cnblogs.com/w4ngzhen");
    }

    /**
     * 返回创建的JPanel
     * @return JPanel
     */
    public JPanel getContent() {
        return content;
    }
}

修改MyToolWindowFactory

这里，我们将创建MyWebToolWindowContent实例，然后返回其Panel，按同样的方式设置到ToolWindow中。

验证Web渲染ToolWindow

上述代码完成开发后，我们再次运行Debug模式，可以看到此时的界面显示了相关的网页：

附录

本次代码本人放在了Github上，地址为：w4ngzhen/intellij-jcef-plugin (github.com)。

上面基础ToolWindow开发以及web页面ToolWindow开发两节的内容，按如下提交对应：

基础ToolWindow开发 ：simple ToolWindow Content · w4ngzhen/intellij-jcef-plugin@bf2ca8e (github.com)

web页面ToolWindow开发：web ToolWindow Content · w4ngzhen/intellij-jcef-plugin@45604d3 (github.com)

渲染 web 插件 对象 开发

0 人点赞