适用于 Electron 应用 app.asar 文件的解压与重新打包

安装依赖

安装 asar 工具 

      npm install -g @electron/asar

验证是否安装成功 

      asar --version

解压 asar 文件 

      # 通用命令
asar extract 文件名.asar 解压到的文件夹

# 示例（解压 app.asar 到 app_extracted 目录）
asar extract app.asar ./app_extracted

仅查看文件列表 

      asar list app.asar

只提取单个文件 

      asar extract-file app.asar main.js

重新打包为 asar 

      # 通用命令
asar pack 源文件夹 输出文件名.asar

# 示例（把修改后的文件夹打包回 app.asar）
asar pack ./app_extracted app.asar

打包时排除目录（推荐）

排除 node_modules 等不需要打进 asar 的文件：

      asar pack app_extracted app.asar --unpack-dir "**/node_modules"

排除多个目录：

      asar pack app_extracted app.asar --unpack-dir "{**/node_modules,**/dist}"

常用 Electron 应用 asar 路径

Windows 

      C:\Users\你的用户名\AppData\Local\应用名\app-版本号\resources\app.asar

macOS 

      /Applications/应用名.app/Contents/Resources/app.asar

完整操作流程 

      # 安装工具
npm install -g @electron/asar

# 解压
asar extract app.asar ./app_extracted

# 修改代码/资源（在 app_extracted 里编辑）

# 重新打包
asar pack ./app_extracted app.asar

# 替换原 app.asar，重启应用生效

实战

新版picgo背景是透明的，解包后修改背景和侧边栏背景一致，样式如下

      #main-page .fake-title-bar {
    -webkit-app-region: drag;
    height: 22px;
    width: 100%;
    text-align: center;
    color: #eee;
    font-size: 12px;
    line-height: 22px;
    position: fixed;
    z-index: 100;
    /* background: rgba(0, 0, 0, 0.7); */
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.7) 170px, rgba(26, 40, 42, 0.9) 170px, rgba(0, 0, 0, 0.7) 20%);
}

#main-page .main-wrapper {
    background: rgba(0, 0, 0, 0.7);
}

#main-page .main-content {
  padding-top: 22px;
  position: relative;
  z-index: 10;
  background-color: #fff;
}

声明

作者： liyao

版权：本博客所有文章除特别声明外，均采用CCBY-NC-SA4.O许可协议。转载请注明!

链接： https://xiaoying.org.cn/pages/629249/

最后更新于 2026-03-02 21:54 history