Electron在linux系统下的桌面快捷方式

董员外
1,067 阅读6分钟

最近在linux操作系统下使用electron进行开发，对于图标格式打包报错的解决方案记录一下，还有桌面快捷方式的步骤

linux系统:统信UOS

electron版本："30.0.1"

electron-builder版本: "24.13.3"

图片格式打包报错

electron在linux系统上进行打包，出现报错

图片格式不正确导致打包失败

  ⨯ unknown output format set
github.com/develar/app-builder/pkg/icons.convertSingleFile
        /Volumes/data/Documents/app-builder/pkg/icons/icon-converter.go:305
github.com/develar/app-builder/pkg/icons.doConvertIcon
        /Volumes/data/Documents/app-builder/pkg/icons/icon-converter.go:247
github.com/develar/app-builder/pkg/icons.ConvertIcon
        /usr/local/Cellar/go/1.17/libexec/src/runtime/asm_amd64.s:1581  
  ⨯ /data/home/HiteVision/zmyapp/electron-desktop-tool/node_modules/app-builder-bin/linux/x64/app-builder process failed ERR_ELECTRON_BUILDER_CANNOT_EXECUTE
Exit code:
1  failedTask=build stackTrace=Error: /data/home/HiteVision/zmyapp/electron-desktop-tool/node_modules/app-builder-bin/linux/x64/app-builder process failed ERR_ELECTRON_BUILDER_CANNOT_EXECUTE
Exit code:
1

这个报错原因是因为 linux系统配置的图标格式有问题

image.png

windows配置图标的格式是ico,而linux要配置 png格式的图片，而且对图片的大小还有要求，至少是256*256的，否则同样会导致打包失败

图片大小不符导致打包失败

此时就需要安装一个新的插件electron-icon-builder，用来生成多种不同尺寸和格式的图标

npm install --save-dev electron-icon-builder

并且配置执行命令，./public/icon.png是要转化的图片，release是生成的图片存放的路径

  • input 为输入png文件
  • output 为输出文件夹
"build-icon": "electron-icon-builder --input=./public/icon.png --output=release --flatten"

执行之后就会在 release下生成一个icons文件夹，里面是各种大小的图片

49aec2982172f74dcd4a4279264ecc32_720.png 之后使用这里生成的图片,使用相对路径找到 icons文件夹，系统会自动匹配到合适的图片

"linux": {
  "icon": "./release/icons",
  "target": "deb"
},

再次执行打包，可以打出deb安装包 打包成功

如果使用的是一张指定大小的图片，虽然可以打包成功，但是在执行程序时，在任务栏的和程序菜单处图标可能会是默认的electron图标

image.png

安装路径

windows安装包可以自定义安装路径，linux系统会固定在一个路径，在/opt目录下

并且安装目录名字就是定义的"productName"名

a873c24a702e44eb1d0adbee5f3b9003.png

桌面快捷方式

在linux系统中，Electron的应用程序需要通过创建.desktop文件，并把该文件放到指定的目录下，来生成桌面快捷方式

.desktop 文件是一个包含应用程序信息和启动命令的配置文件，它遵循自由桌面环境规范。

所以就需要在安装electron程序时，执行一个脚本来创建.desktop文件并复制到指定的目录下

在package.json进行配置

"linux": {
  "icon": "./release/icons",
  "target": "deb"
},
"deb": {
  "afterInstall": "./entries/install.sh"
},
"extraFiles": [
  {
    "from": "entries",
    "to": "entries"
  }
],

  • "deb": 这个字段是针对 .deb 包的特定配置。

    • "afterInstall": 这个选项允许你指定一个脚本文件，该文件将在 .deb 包安装完成后执行。在这个配置中，"./entries/install.sh" 表示安装脚本位于项目根目录下的 entries 文件夹中，名为 install.sh。这个脚本可以包含你需要在用户安装应用程序后自动执行的命令或脚本，例如创建配置文件、初始化数据库等。

  • "extraFiles": 这个字段是一个数组，用于指定在打包过程中需要包含在最终 .deb 包中的额外文件或目录。

    • 数组中的每个对象都包含两个属性："from" 和 "to"。

      • "from": 指定源路径，即你希望包含在包中的文件或目录的当前位置。
      • "to": 指定目标路径，即你希望这些文件或目录在包内的放置位置。在配置中，"from": "entries" 和 "to": "entries" 表示将项目根目录下的 entries 文件夹中的所有内容复制到 .deb 包内的 entries 目录中。

在根目录下新建一个entries文件,里面存放.desktop文件和脚本文件 脚本目录

01配置 .desktop文件基础参数

在entries目录下创建ElectronDeskTopTool.desktop文件

[Desktop Entry]
Encoding=UTF-8
Name=ElectronDeskTopTool
Name[zh_CN]=ElectronDeskTopTool
Exec=/opt/ElectronDeskTopTool/electron-desktop-tool %U
Icon=/opt/ElectronDeskTopTool/entries/512x512.png
StartupNotify=false
Terminal=false
Type=Application
Categories=Messaging;
  • [Desktop Entry]：这是文件的头部，指明这是一个桌面条目文件。
  • Encoding=UTF-8：设置文件的字符编码为 UTF-8。
  • Name=ElectronDeskTopTool：设置应用程序的默认名称为 "ElectronDeskTopTool"。
  • Name[zh_CN]=ElectronDeskTopTool：为中文（简体）环境提供本地化的应用程序名称，这里与默认名称相同，表示没有特别的本地化名称。
  • Exec=/opt/ElectronDeskTopTool/electron-desktop-tool %U：定义启动应用程序时执行的命令。/opt/ElectronDeskTopTool/electron-desktop-tool 是可执行文件的路径。%U 是一个占位符，表示如果有通过桌面环境传递给应用程序的 URI 列表，则将它们作为参数。
  • Icon=/opt/ElectronDeskTopTool/entries/512x512.png：指定应用程序的图标文件路径。图标通常用于桌面环境的应用程序菜单、任务栏、桌面快捷方式等地方。
  • StartupNotify=false：指示桌面环境在应用程序启动时不发送启动通知。
  • Terminal=false：表明应用程序不应当在终端中启动，意味着它是一个图形界面应用程序。
  • Type=Application：指明这是一个应用程序的桌面条目。
  • Categories=Messaging：将应用程序归类到 "Messaging"（消息）类别。这有助于用户在应用程序菜单中找到它。

02创建脚本

#! /bin/sh

desktopPath=/opt/ElectronDeskTopTool/entries/ElectronDeskTopTool.desktop

rootDesktop=/root/Desktop

if [ -d $rootDesktop ]; then

  cp $desktopPath $rootDesktop

fi

users=`users`

for u in $users

  do

  dir=/home/$u/Desktop

  cndir=/home/$u/桌面

  if [ -d $dir ]; then

    cp $desktopPath $dir;

    chmod 777 $dir/ElectronDeskTopTool.desktop;

  fi

  if [ -d $cndir ]; then

    cp $desktopPath $cndir;

    chmod 777 $cndir/ElectronDeskTopTool.desktop

  fi

done

# 设置 chrome-sandbox 的所有者为 root 并设置正确的权限
# 确保使用正确的路径到您的 chrome-sandbox 文件
chromeSandboxPath="/opt/ElectronDeskTopTool/chrome-sandbox"

# 检查 chrome-sandbox 文件是否存在
if [ -f "$chromeSandboxPath" ]; then
  # 更改所有者为 root
  chown root:root "$chromeSandboxPath"
  
  # 设置权限为 4755
  chmod 4755 "$chromeSandboxPath"
  
  echo "chrome-sandbox 权限和所有者已设置。"
else
  echo "警告：未找到 chrome-sandbox 文件：$chromeSandboxPath"
fi

这段 shell 脚本的主要目的是在 Linux 系统上进行一些自动化的配置任务，具体包括：

  1. 复制桌面快捷方式：

    • 脚本首先定义了 .desktop 文件的路径 desktopPath。
    • 然后检查 /root/Desktop 目录是否存在，如果存在，将 .desktop 文件复制到该目录，为 root 用户创建桌面快捷方式。

  2. 为所有用户创建桌面快捷方式：

    • 使用 users 命令获取系统上所有用户的列表。
    • 对于每个用户，脚本检查其 /home/$u/Desktop 和 /home/$u/桌面（中文版用户目录的桌面）目录是否存在。
    • 如果存在，脚本将 .desktop 文件复制到这些目录，并为复制的 .desktop 文件设置权限为 777（所有用户都可以读写执行）。

  3. 设置 chrome-sandbox 的权限和所有者：如果不设置权限，双击时可能无法启动

    • 脚本指定了 chrome-sandbox 文件的路径 chromeSandboxPath。

    • 检查该文件是否存在，如果存在：

      • 使用 chown 命令将文件的所有者更改为 root。
      • 使用 chmod 命令设置文件权限为 4755，这是一个特殊的权限设置，允许 setuid 位，通常用于让普通用户以 root 权限执行程序。

    • 如果文件不存在，脚本会打印一条警告信息。

这个脚本通常用于 Electron 应用程序的安装或初始化过程，确保应用程序的快捷方式对所有用户都可用，并且确保与 Electron 相关的安全沙箱机制（chrome-sandbox）具有正确的权限设置。

打完包，安装后就会在桌面生成一个快捷方式，双击可以正常启动 af3fc4d419ff611cdaae444dda1e2011.png

完整的代码放到github上了👉：electron桌面端工具

扩展阅读

最近在尝试总结关于electron桌面端的系列文章，以下是往期文章

一：用electron+vite+vue3搭建桌面端项目，electron基础配置

二：electron进程通信实战，实现截图功能

avatar
文章
阅读
粉丝