Hello World!

") // ② toolWindow.contentManager.addContent( ContentFactory.getInstance().createContent(browser.component, "", false)) } } ``` 其中①用于初始化`JBCefBrowser`对象，然后直接使用`loadHTML`加载 HTML 文本（还可以加载本地 HTML 文件或者外部链接），之后在②中将 browser 的 UI 组件添加到侧边栏中即可实现下图所示的效果： ![image-20250108171815241](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/2d9da9aff86849b5b201b812ad6c85d7~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5bqE5ZGoZGXonbTonbY=:q75.awebp?rk3s=f64ab15b&x-expires=1758692642&x-signature=ouKEcb6b8oSWy1ZhTkKVUqoQhgs%3D) 为了减少不必要的代码展示，后续在`createToolWindowContent`中处理的部分，只展示①部分的代码。 ## 加载网页的几种方式 ### 直接加载 HTML 内容可以直接通过`loadHTML(String html)`加载 HTML 文本，例如上述的 demo。该方法还有`loadHTML(String html, String url)`两个参数的版本，`loadHTML(String html)`其实j就是`loadHTML(html, "about:blank")`的简写，第二个参数 url 用于设置基础 url，比如可以设置为 D 盘位置，然后 HTML 设置图片的相对路径即可： ```kotlin browser.loadHTML("

", "file:///D:") ``` ![image-20250120125803917](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/6ea955c120a7428cb71730463f328155~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5bqE5ZGoZGXonbTonbY=:q75.awebp?rk3s=f64ab15b&x-expires=1758692642&x-signature=vo4rVxBaT0gDnPVHAUvVKHgCq4c%3D) 这种方式只作了解即可，对于稍复杂界面还是会使用下面介绍的`loadURL`方法。 ### 通过 URL 加载页面 #### 加载网页地址通过`loadURL`方法可以直接加载网页地址，例如展示百度首页： ```kotlin browser.loadURL("https://www.baidu.com") ``` ![image-20250120160343349](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/0e1d7fdc283645c0baea4d95be7fb48a~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5bqE5ZGoZGXonbTonbY=:q75.awebp?rk3s=f64ab15b&x-expires=1758692642&x-signature=8vYcvbRfGQGmwdSdm9d6A7x%2Flbg%3D) #### 加载本地文件此外也可以选择加载本地的网页文件，但是稍微复杂些，步骤如下： 1. 注册自定义处理的协议、域名和处理方法，然后再加载： ```kotlin CefApp.getInstance().registerSchemeHandlerFactory("http", "butterfly") { _, _, _, _ -> JCEFResourceHandler() } browser.loadURL("http://butterfly/index.html") ``` > 这里的`butterfly`用于标识自定义的域名，用于后续映射本地文件地址。 2. 自定义处理器，拦截自定义域名映射到本地文件： ```kotlin class JCEFResourceHandler : CefResourceHandler { private var connection: JCEFConnection? = null override fun processRequest(cefRequest: CefRequest, callback: CefCallback): Boolean { val url = cefRequest.url // 拦截本地文件请求并处理 if (url.startsWith("http://butterfly")) { val resource = javaClass.classLoader.getResource(url.replace("http://butterfly", "static")) ?: return false connection = JCEFConnection(resource.toURI().toURL().openConnection()) callback.Continue() return true } return false } override fun getResponseHeaders(cefResponse: CefResponse, responseLength: IntRef, redirectUrl: StringRef?) { connection?.getResponseHeaders(cefResponse, responseLength) } override fun readResponse(dataOut: ByteArray, dataSize: Int, bytesRead: IntRef, callback: CefCallback?): Boolean { return connection?.readResponse(dataOut, dataSize, bytesRead) ?: false } override fun cancel() { connection?.close() } } ``` > 这里的`static`就是存放本地文件的目录： > > ![image-20250121151200288](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/e1a1f8fb455645a59c50391ad1640fa2~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5bqE5ZGoZGXonbTonbY=:q75.awebp?rk3s=f64ab15b&x-expires=1758692642&x-signature=5Bbk6MtCSE%2FiFv5bhly32nrWMqc%3D) > > `JCEFConnection`用于处理返回信息，下面会进行展示。 3. 处理返回信息： ```kotlin class JCEFConnection(private var connection: URLConnection) { private var inputStream = connection.getInputStream() fun getResponseHeaders(cefResponse: CefResponse, responseLength: IntRef) { // 设置响应头信息 cefResponse.mimeType = connection.contentType responseLength.set(inputStream.available()) cefResponse.status = 200 } fun readResponse(dataOut: ByteArray, dataSize: Int, bytesRead: IntRef): Boolean { // 读取响应数据 inputStream.use { val available = it.available() if (available > 0) { bytesRead.set(it.read(dataOut, 0, available.coerceAtMost(dataSize))) return true } } return false } fun close() { // 关闭流 inputStream.close() } } ``` 4. 经过以上设置后就可以展示本地文件，效果如下： ![image-20250121152343666](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/968e12ab1cf44888a933f8004808be37~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5bqE5ZGoZGXonbTonbY=:q75.awebp?rk3s=f64ab15b&x-expires=1758692642&x-signature=To26f0yRZrspmyyA9IKLTemORNI%3D) ![image-20250121152333749](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/c5dc5a54e38149518ba04799f3fd08e6~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5bqE5ZGoZGXonbTonbY=:q75.awebp?rk3s=f64ab15b&x-expires=1758692642&x-signature=E2Sk0dhRMpdupbE4Ly058eJQ4Kk%3D) ## 事件处理器 JCEF 提供了一系列的事件处理器用于处理浏览器触发的各种事件，例如可以自定义加载事件： ```kotlin browser.jbCefClient.addLoadHandler(object : CefLoadHandler { override fun onLoadingStateChange(p0: CefBrowser?, p1: Boolean, p2: Boolean, p3: Boolean) { println("加载状态变更") } override fun onLoadStart(p0: CefBrowser?, p1: CefFrame?, p2: CefRequest.TransitionType?) { println("加载开始") } override fun onLoadEnd(p0: CefBrowser?, p1: CefFrame?, p2: Int) { println("加载结束") } override fun onLoadError( p0: CefBrowser?, p1: CefFrame?, p2: CefLoadHandler.ErrorCode?, p3: String?, p4: String? ) { println("加载出错") } }, browser.cefBrowser) ``` ![image-20250121154122790](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/68924a16813440e9a5f781a238072cab~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5bqE5ZGoZGXonbTonbY=:q75.awebp?rk3s=f64ab15b&x-expires=1758692642&x-signature=nT%2FftOqv4I2FyVs1HOqk4oZkOx8%3D) 也可以自定义文件下载事件： ```kotlin browser.jbCefClient.addDownloadHandler(object : CefDownloadHandler { override fun onBeforeDownload( browser: CefBrowser?, downloadItem: CefDownloadItem?, suggestedName: String?, callback: CefBeforeDownloadCallback ) { callback.Continue("", true) } override fun onDownloadUpdated(browser: CefBrowser?, downloadItem: CefDownloadItem?, callback: CefDownloadItemCallback?) { println("下载状态更新") } }, browser.cefBrowser) ``` 还可以自定义 JS 弹框事件，使用 IDE 的弹框展示前端弹框要展示的信息： ```kotlin browser.jbCefClient.addJSDialogHandler(object : CefJSDialogHandler { override fun onJSDialog( browser: CefBrowser?, originUrl: String?, dialogType: CefJSDialogHandler.JSDialogType?, messageText: String?, defaultPromptText: String?, callback: CefJSDialogCallback, suppressMessage: BoolRef? ): Boolean { invokeLater { Messages.showInfoMessage(messageText, "") callback.Continue(true, messageText) } return true } override fun onBeforeUnloadDialog(p0: CefBrowser?, p1: String?, p2: Boolean, p3: CefJSDialogCallback?) = true override fun onResetDialogState(p0: CefBrowser?) {} override fun onDialogClosed(p0: CefBrowser?) {} }, browser.cefBrowser) ``` 除了以上三个事件外，JCEF 还提供很多其它方面的事件，这里就不再一一展示，可以在[GitHub](https://github.com/JetBrains/jcef/tree/master/java/org/cef/handler)中查看所有支持的事件。 ## 插件代码与 JS 互操作如果想要实现插件代码与 JS 互操作，可以使用 JCEF 自带的`CefMessageRouter`来处理，下面会介绍如何借助`CefMessageRouter`来实现两者的相互调用，其实也可以选择使用`Websocket`进行交互，这里就不再介绍。 1. 创建并设置消息路由： ```kotlin // ① val routerConfig = CefMessageRouter.CefMessageRouterConfig("javaQuery", "javaQueryCancel") val messageRouter = CefMessageRouter.create(routerConfig, object : CefMessageRouterHandlerAdapter() { override fun onQuery( browser: CefBrowser, frame: CefFrame?, queryId: Long, request: String?, persistent: Boolean, callback: CefQueryCallback ): Boolean { // ② if (request == "butterfly") { invokeLater { println("后端收到请求") browser.executeJavaScript("window.butterfly('Hello, world!')", null, 0) } callback.success("butterfly") return true } return false } }) browser.jbCefClient.cefClient.addMessageRouter(messageRouter) ``` 上述代码中的①是进行消息路由设置，提供给前端调用的方法名，注意这里的名称不能使用内部已经使用的`cefQuery`和`cefQueryCancel`。 ![image-20250122090140977](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/c60dce3fc7014b458bb5061bcb0a04e6~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5bqE5ZGoZGXonbTonbY=:q75.awebp?rk3s=f64ab15b&x-expires=1758692642&x-signature=AyAfy0tUftoLt4gNQY6jYBB1QTc%3D) 上述代码中的②用于处理前端请求，包括使用`executeJavaScript`直接执行 JS 脚本代码和通过回调返回信息。 2. 前端代码处理：首先是用于发起请求的代码： ```html ``` 然后是提供给插件代码调用的函数： ```javascript window.butterfly = function (msg) { console.log(`前端收到消息${msg}`) } ``` 3. 最终效果如下： ![动画](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/83ba4a2e516b4621af336d31264d1eb1~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5bqE5ZGoZGXonbTonbY=:q75.awebp?rk3s=f64ab15b&x-expires=1758692642&x-signature=Xoqoo7RNkjgGr8iUarsv1H3UO9k%3D) ## 统一滚动条样式使用 JCEF 时默认的滚动条样式和浏览器中的一致，如下所示： ![image-20250122124200526](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/c633760d22724417a7d319a4896b71d7~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5bqE5ZGoZGXonbTonbY=:q75.awebp?rk3s=f64ab15b&x-expires=1758692642&x-signature=jXzN6aRzJAhcr2XI78G7aH2R6VI%3D) 可以看到滚动条的样式和 IDE 的样式格格不入，当然我们也可以通过 CSS 自定义滚动条的样式。不过，官方已经为我们考虑好了，`JBCefScrollbarsHelper.buildScrollbarsStyle()`方法会返回和 IDE 风格一致的滚动条样式，然后结合前文中的消息路由，就可以通过回调返回到前端进行设置： ```kotlin if (request == "init") { callback.success(JBCefScrollbarsHelper.buildScrollbarsStyle()) } window.javaQuery({ request: 'init', persistent: false, onSuccess: function(scrollbarStyle) { const style = document.createElement('style') style.innerHTML = scrollbarStyle document.head.appendChild(style) }, onFailure: function(error_code, error_message) {} }) ``` 最终效果如下： ![image-20250122124603932](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/2b09797e9d1e4610b7e2419707b30216~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5bqE5ZGoZGXonbTonbY=:q75.awebp?rk3s=f64ab15b&x-expires=1758692642&x-signature=EoW94bcs6YE01osIJDKulvO9ZzQ%3D) ## 调试如果想要对嵌入的网页进行调试，则可以通过点击顶部菜单的`Help | Find Action`，然后输入`ide.browser.jcef.debug.port`，双击后可以修改端口（这里的 12345 是我自定义的）： ![image-20250122141435105](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/1bb26ccfaf56477a9fdcac841721e9b7~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5bqE5ZGoZGXonbTonbY=:q75.awebp?rk3s=f64ab15b&x-expires=1758692642&x-signature=iqq60%2FaDp5YwCmTvU51z8JuUEn8%3D) 然后在谷歌浏览器中输入`chrome://inspect/#devices`打开调试工具： ![image-20250122141731510](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/e03ed4e3fb024fe3a0f2a06ae7e84597~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5bqE5ZGoZGXonbTonbY=:q75.awebp?rk3s=f64ab15b&x-expires=1758692642&x-signature=xJ9xdbDn%2FpVibvUijEg7OwK0HSA%3D) 点击`inspect`即可进入调试界面： ![image-20250122141755685](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/ef82923f29e448daa22af2b12936181d~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5bqE5ZGoZGXonbTonbY=:q75.awebp?rk3s=f64ab15b&x-expires=1758692642&x-signature=eddkKkYQ0hetDU0xFld1VCF4wMw%3D) ## 总结本文讲解了如何在 IDEA 插件开发中使用 JCEF 在应用中嵌套网页，对于大部分开发场景以上内容已经足够了，如果本文有不足之处，也欢迎评论进行交流讨论。