从 CRX 文件安装 Chrome 扩展程序

2024-08-31 10:52
文章标签 安装 程序 扩展 chrome crx

本文主要是介绍从 CRX 文件安装 Chrome 扩展程序，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在使用嵌入式 Browser 中的扩展程序时，您可能希望将它们打包并分发在应用程序中，并静默安装。

在本教程中，我将演示如何通过编程方式从 CRX 文件中安装扩展程序，保持它们的更新，并使用它们。

此外，我还会向您展示如何获取在 Chrome 应用商店中发布的扩展程序的 CRX 文件。

想让终端用户直接访问 Chrome 应用商店吗？我们在JxBrowser 支持 Chrome 扩展程序[1]一文中对此进行了介绍。

扩展程序

在本教程中，我选择了 React DevTools 扩展程序。虽然它对终端用户并不实用，但它非常适合本教程的目的，并且在开发过程中很有用。许多 JavaScript 库提供的开发工具作为扩展程序，最终的功能都是一样的：将库特定的功能扩展到 Chrome DevTools 中。

通过 JxBrowser，您可以使用 React 构建用户界面，将 React DevTools 集成到 JxBrowser 中非常方便。特别是当嵌入式 Web 应用程序需要 JxBrowser 与 Java 宿主应用程序进行通信，而不能在独立 Browser 中运行时，这一点尤为重要。

您可以从源代码[2]构建此扩展程序，或者按照本教程后续部分中的描述从 Chrome 应用商店获取它。

创建应用程序

让我们从创建一个简单的应用程序开始。这个应用程序将显示一个 Browser 和一个按钮，用于打开标准的 Chrome DevTools。

import static java.awt.BorderLayout.CENTER;
import static java.awt.BorderLayout.NORTH;
import static javax.swing.BoxLayout.X_AXIS;
import static javax.swing.SwingUtilities.invokeLater;
import static javax.swing.WindowConstants.DISPOSE_ON_CLOSE;import com.teamdev.jxbrowser.browser.Browser;
import com.teamdev.jxbrowser.engine.Engine;
import com.teamdev.jxbrowser.engine.EngineOptions;
import com.teamdev.jxbrowser.engine.RenderingMode;
import com.teamdev.jxbrowser.view.swing.BrowserView;
import java.awt.Dimension;
import java.awt.event.WindowAdapter;
import java.awt.event.WindowEvent;
import java.nio.file.Paths;
import javax.swing.BoxLayout;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JPanel;public final class CrxExtensions {private static final Dimension BUTTON_SIZE = new Dimension(32, 32);public static void main(String[] args) {var options = EngineOptions.newBuilder(RenderingMode.HARDWARE_ACCELERATED).userDataDir(Paths.get("<path to the directory>")).build();var engine = Engine.newInstance(options);var profile = engine.profiles().defaultProfile();var browser = profile.newBrowser();invokeLater(() -> {var frame = new JFrame("在 JxBrowser 中使用 CRX Chrome 扩展程序");frame.addWindowListener(new WindowAdapter() {@Overridepublic void windowClosing(WindowEvent e) {engine.close();}});frame.setDefaultCloseOperation(DISPOSE_ON_CLOSE);frame.add(BrowserView.newInstance(browser), CENTER);frame.add(createExtensionBar(browser), NORTH);frame.setSize(1280, 900);frame.setLocationRelativeTo(null);frame.setVisible(true);browser.navigation().loadUrl("https://react.dev/");});}private static JPanel createExtensionBar(Browser browser) {var extensionBar = new JPanel();extensionBar.setLayout(new BoxLayout(extensionBar, X_AXIS));var openDevTools = new JButton("打开 DevTools");openDevTools.addActionListener(e -> browser.devTools().show());extensionBar.add(openDevTools);return extensionBar;}
}

请注意，我突出显示了配置用户数据目录的行。这是 Chromium 将存储已安装扩展程序的地方。我们希望此目录是持久的，以便在启动之间保留扩展程序的状态。

安装扩展程序

要安装扩展程序，我们需要一个指向 CRX 文件的路径。我们将从资源中找到可用的扩展程序，并将它们传递给 JxBrowser 进行安装：

private static final List<String> EXTENSION_FILES = List.of("react_dev_tools.crx"
);public static void main(String[] args) {...var profile = engine.profiles().defaultProfile();var browser = profile.newBrowser();var extensions = profile.extensions();for (var crx : EXTENSION_FILES) {extensions.install(getResourcePath(crx));}invokeLater(() -> {...});
}private static Path getResourcePath(String name) {try {var resource = CrxExtensions.class.getClassLoader().getResource(name);if (resource != null) {return Paths.get(resource.toURI());} else {throw new IllegalStateException("Couldn't find the bundled extension.");}} catch (URISyntaxException e) {throw new IllegalStateException(e);}
}

在上述代码中，我们在每次启动应用程序时安装扩展程序。这可以确保扩展程序保持最新：如果 CRX 文件的版本不同，JxBrowser 会重新安装该扩展程序。

打开新标签页的权限

扩展程序可以打开带有任意 Web 内容的新标签页。例如，它们可以打开设置页面或授权表单。在 JxBrowser 中，我们将这些称为扩展程序弹出窗口，并默认将它们禁用。现在是时候启用它们了：

var extensions = profile.extensions();
for (var crx : EXTENSION_FILES) {extensions.install(getResourcePath(crx));extension.set(OpenExtensionPopupCallback.class, new DefaultOpenExtensionPopupCallback());
}

与扩展程序交互

大多数扩展程序会在 Google Chrome 工具栏中添加一个图标。这个图标称为扩展程序操作，当点击时，它会执行逻辑操作或打开一个弹出窗口。

React DevTools 的操作弹出窗口

让我们创建一个类似的扩展工具栏，并将扩展程序操作添加到应用程序的 UI 中：

import com.teamdev.jxbrowser.extensions.callback.OpenExtensionPopupCallback;
import com.teamdev.jxbrowser.view.swing.callback.DefaultOpenExtensionPopupCallback;
...private static JPanel createExtensionBar(Browser browser) {...var extensions = browser.profile().extensions();for (var extension : extensions.list()) {extension.action(browser).ifPresent(action -> {var button = new JButton();extensionBar.add(button);configureActionButton(button, action);});}return extensionBar;
}

扩展操作随时可能发生变化。例如，React DevTools 的操作在没有 React 的页面上会变为禁用状态。其他扩展程序可能会根据 Browser 中发生的事情更改图标或徽章。让我们跟踪这些变化并更新 UI：

import com.teamdev.jxbrowser.extensions.callback.OpenExtensionPopupCallback;
import com.teamdev.jxbrowser.extensions.event.ExtensionActionUpdated;
import com.teamdev.jxbrowser.view.swing.callback.DefaultOpenExtensionPopupCallback;
...private static JPanel createExtensionBar(Browser browser) {...var extensions = browser.profile().extensions();for (var extension : extensions.list()) {extension.action(browser).ifPresent(action -> {var button = new JButton();extensionBar.add(button);configureActionButton(button, action);action.on(ExtensionActionUpdated.class, params -> {invokeLater(() -> configureActionButton(button, action));});});}return extensionBar;
}

现在，让我们实现显示操作图标和名称的方法并配置点击处理程序：

import com.teamdev.jxbrowser.extensions.ExtensionAction;
import com.teamdev.jxbrowser.view.swing.graphics.BitmapImage;
...private static void configureActionButton(JButton button, ExtensionAction action) {var icon = BitmapImage.toToolkit(action.icon());button.setPreferredSize(new Dimension(32, 32));button.setText(action.tooltip());button.setIcon(new ImageIcon(icon));button.setEnabled(action.isEnabled());if (button.getActionListeners().length == 0) {button.addActionListener(e -> action.click());}
}

结果

在这个视频中，您将看到 React DevTools 扩展程序在 JxBrowser 中安装并使用的过程。

video

在 JxBrowser 演示应用程序中从 Chrome 应用商店安装扩展程序。

从 Chrome 应用商店获取 CRX 文件

很多时候，开源扩展程序会在 GitHub 上发布 CRX 文件，或提供如何自行构建这些文件的说明。但如果既没有 CRX 文件也没有说明，您可以从 Chrome 应用商店获取该文件。

要在 JxBrowser 中从 Chrome 应用商店获取扩展程序文件，请按如下方式注册 InstallExtensionCallback，然后导航到 Chrome 应用商店，手动安装扩展程序。

安装扩展程序后，回调函数将把下载的 CRX 文件复制到当前目录，并在文件资源管理器中打开它。

import static java.awt.Desktop.getDesktop;
import static javax.swing.SwingUtilities.invokeLater;
import static javax.swing.WindowConstants.DISPOSE_ON_CLOSE;import com.teamdev.jxbrowser.engine.Engine;
import com.teamdev.jxbrowser.engine.RenderingMode;
import com.teamdev.jxbrowser.extensions.callback.InstallExtensionCallback;
import com.teamdev.jxbrowser.view.swing.BrowserView;
import java.awt.event.WindowAdapter;
import java.awt.event.WindowEvent;
import java.io.IOException;
import java.nio.file.Files;
import java.nio.file.Paths;
import javax.swing.JFrame;public final class CrxFileFromChromeWebStore {private static final String EXTENSION_URL ="https://chromewebstore.google.com/detail/...";public static void main(String[] args) {var engine = Engine.newInstance(RenderingMode.HARDWARE_ACCELERATED);var browser = engine.newBrowser();var extensions = browser.profile().extensions();extensions.set(InstallExtensionCallback.class, (params, tell) -> {var name = params.extensionName();var source = Paths.get(params.extensionCrxFile());var target = Paths.get(name + ".crx").toAbsolutePath();try {Files.copy(source, target);getDesktop().open(target.getParent().toFile());} catch (IOException e) {throw new RuntimeException(e);}tell.cancel();});browser.navigation().loadUrl(EXTENSION_URL);invokeLater(() -> {var view = BrowserView.newInstance(browser);var frame = new JFrame("Chrome 应用商店");frame.add(view);frame.setSize(1280, 900);frame.setLocationRelativeTo(null);frame.addWindowListener(new WindowAdapter() {@Overridepublic void windowClosing(WindowEvent e) {engine.close();}});frame.setDefaultCloseOperation(DISPOSE_ON_CLOSE);frame.setVisible(true);});}
}

源代码

您可以在 JxBrowser-Examples[3] 仓库中找到这个示例的源代码。

相关链接

  • 如何为 Java 应用程序创建安装程序[4]
  • Chrome 应用商店中的 React DevTools[5]

参考资料

[1] JxBrowser 支持 Chrome 扩展程序: https://teamdev.cn/jxbrowser/blog/chrome-extensions-in-jxbrowser/?utm_source=csdn&utm_medium=article&utm_campaign=install-chrome-extensions-from-crx-files

[2] 源代码: https://github.com/facebook/react/tree/main/packages/react-devtools-extensions?utm_source=csdn&utm_medium=article&utm_campaign=install-chrome-extensions-from-crx-files

[3] JxBrowser-Examples: https://github.com/TeamDev-IP/JxBrowser-Examples/tree/v8.0.0-eap/tutorials/crx-extensions/src/main/java?utm_source=csdn&utm_medium=article&utm_campaign=install-chrome-extensions-from-crx-files

[4] 如何为 Java 应用程序创建安装程序: https://teamdev.cn/jxbrowser/blog/how-to-create-installer-for-java-application/?utm_source=csdn&utm_medium=article&utm_campaign=install-chrome-extensions-from-crx-files

[5] Chrome 应用商店中的 React DevTools: https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?pli=1&utm_source=csdn&utm_medium=article&utm_campaign=install-chrome-extensions-from-crx-files

这篇关于从 CRX 文件安装 Chrome 扩展程序的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1123703。

相关文章

Linux系统中查询JDK安装目录的几种常用方法

Linux系统中查询JDK安装目录的几种常用方法

《Linux系统中查询JDK安装目录的几种常用方法》：本文主要介绍Linux系统中查询JDK安装目录的几种常用方法,方法分别是通过update-alternatives、Java命令、环境变量及目... 目录方法 1：通过update-alternatives查询（推荐）方法 2：检查所有已安装的 JDK方
阅读更多...
SQL Server安装时候没有中文选项的解决方法

SQL Server安装时候没有中文选项的解决方法

《SQLServer安装时候没有中文选项的解决方法》用户安装SQLServer时界面全英文,无中文选项,通过修改安装设置中的国家或地区为中文中国,重启安装程序后界面恢复中文,解决了问题,对SQLSe... 你是不是在安装SQL Server时候发现安装界面和别人不同，并且无论如何都没有中文选项？这个问题也
阅读更多...
2025版mysql8.0.41 winx64 手动安装详细教程

2025版mysql8.0.41 winx64 手动安装详细教程

《2025版mysql8.0.41winx64手动安装详细教程》本文指导Windows系统下MySQL安装配置,包含解压、设置环境变量、my.ini配置、初始化密码获取、服务安装与手动启动等步骤,... 目录一、下载安装包二、配置环境变量三、安装配置四、启动 mysql 服务，修改密码一、下载安装包安装地
阅读更多...
Redis MCP 安装与配置指南

Redis MCP 安装与配置指南

《RedisMCP安装与配置指南》本文将详细介绍如何安装和配置RedisMCP,包括快速启动、源码安装、Docker安装、以及相关的配置参数和环境变量设置,感兴趣的朋友一起看看吧... 目录一、Redis MCP 简介二、安www.chinasem.cn装 Redis MCP 服务2.1 快速启动（推荐）2.
阅读更多...
在macOS上安装jenv管理JDK版本的详细步骤

在macOS上安装jenv管理JDK版本的详细步骤

《在macOS上安装jenv管理JDK版本的详细步骤》jEnv是一个命令行工具,正如它的官网所宣称的那样,它是来让你忘记怎么配置JAVA_HOME环境变量的神队友,：本文主要介绍在macOS上安装... 目录前言安装 jenv添加 JDK 版本到 jenv切换 JDK 版本总结前言China编程在开发 Java
阅读更多...
Linux下在线安装启动VNC教程

Linux下在线安装启动VNC教程

《Linux下在线安装启动VNC教程》本文指导在CentOS7上在线安装VNC,包含安装、配置密码、启动/停止、清理重启步骤及注意事项,强调需安装VNC桌面以避免黑屏,并解决端口冲突和目录权限问题... 目录描述安装VNC安装 VNC 桌面可能遇到的问题总结描js述linux中的VNC就类似于Window
阅读更多...
虚拟机Centos7安装MySQL数据库实践

虚拟机Centos7安装MySQL数据库实践

《虚拟机Centos7安装MySQL数据库实践》用户分享在虚拟机安装MySQL的全过程及常见问题解决方案,包括处理GPG密钥、修改密码策略、配置远程访问权限及防火墙设置,最终通过关闭防火墙和停止Net... 目录安装mysql数据库下载wget命令下载MySQL安装包安装MySQL安装MySQL服务安装完成
阅读更多...
JAVA中安装多个JDK的方法

JAVA中安装多个JDK的方法

《JAVA中安装多个JDK的方法》文章介绍了在Windows系统上安装多个JDK版本的方法,包括下载、安装路径修改、环境变量配置（JAVA_HOME和Path）,并说明如何通过调整JAVA_HOME在... 首先去oracle官网下载好两个版本不同的jdk（需要登录Oracle账号，没有可以免费注册）下载完
阅读更多...
Java JDK1.8 安装和环境配置教程详解

Java JDK1.8 安装和环境配置教程详解

《JavaJDK1.8安装和环境配置教程详解》文章简要介绍了JDK1.8的安装流程,包括官网下载对应系统版本、安装时选择非系统盘路径、配置JAVA_HOME、CLASSPATH和Path环境变量,... 目录1.下载JDK2.安装JDK3.配置环境变量4.检验JDK官网下载地址：Java Downloads
阅读更多...
SQL server数据库如何下载和安装

SQL server数据库如何下载和安装

《SQLserver数据库如何下载和安装》本文指导如何下载安装SQLServer2022评估版及SSMS工具,涵盖安装配置、连接字符串设置、C#连接数据库方法和安全注意事项,如混合验证、参数化查... 目录第一步：打开官网下载对应文件第二步：程序安装配置第三部：安装工具SQL Server Manageme
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2