标签：文件框架 electron 应用程序 js Electron 测试我们

免责声明

⽂中所涉及的技术、思路和⼯具仅供以安全为⽬的的学习交流使⽤，任何⼈不得将其⽤于⾮法⽤途以及盈利等⽬的，否则后果⾃⾏承担。所有渗透都需获取授权！

一、引言

跨平台桌面应用开发的演进带来了一系列独特的挑战，主要体现在如何确保在 Windows、macOS 和基于 Linux 的系统等不同操作系统上功能和用户体验的一致性。从技术角度来看，实现这种一致性是保持应用平稳和令人满意的用户体验的关键，这自然需要开发者掌握多种技术并为每个平台维护独立的代码库。
随着时间的推移，出现了多种框架来帮助开发者克服这些挑战。其中一个值得关注的解决方案是 Electron 框架。它为简化跨平台开发流程并解决多样化运行环境固有的复杂性提供了灵活的平台。
近年来，Electron 框架的流行度显著上升，其被广泛应用于各种知名应用程序中，如 Notion、Microsoft Teams 和 Slack 等。这种广泛的使用间接证明了 Electron 在简化跨平台开发工作流程以及应对多种操作环境挑战方面的高效性。

1.1 什么是 Electron

那么，什么是 Electron？简单来说，Electron 是一个开源框架，专为构建桌面应用而设计。它允许开发者使用常见的 Web 技术（如 JavaScript、HTML 和 CSS）来创建桌面应用，而无需学习新的编程语言。这意味着已经熟悉 Web 开发的开发者可以无缝过渡到使用 Electron 构建桌面应用程序。

1.2 它是如何工作的？

基本上，Electron 应用的流程始于主进程（Main Process），该进程由 Node.js 运行时启动，通常基于 package.json 文件中的配置开始运行。主进程负责应用的后端操作，例如创建窗口和管理系统级交互。

随后，主进程会创建渲染进程，每个渲染进程都会运行一个 Chromium 实例。这些进程负责前端工作，渲染 HTML、CSS 和 JavaScript 等网页内容，用于显示应用的用户界面。
为了实现主进程与渲染进程之间的通信，Electron 使用了进程间通信 (IPC)。在这一阶段，渲染进程可以请求主进程执行需要与操作系统原生集成的操作，而出于安全原因，渲染进程本身被限制无法直接执行这些操作。
注意：想要全面了解和探索 Electron 框架，可以访问以下链接：Electron 官方文档[1]。
现在，在了解了 Electron 框架的基本概念之后，让我们继续下一部分，构建第一个简单的“Hello-World”应用程序。

二、构建第一个简单的“Hello-World”应用程序

正如我们所知，为了能够进行高效的安全测试，我们需要对测试对象的基本原理有深入的了解。因此，在本节中，我们将尝试使用 Electron 创建一个简单的“Hello-World”应用程序（它将显示一个一级标题大小的简单文本，并弹出一个简单的警告对话框）。

2.1 准备开发环境

1、安装 Node.js

首先，我们需要在开发环境中安装 Node.js。

为什么需要安装 Node.js 呢❓简单来说，Electron 框架依赖于 Node.js，这是一个 JavaScript 运行时环境，允许我们在服务器端运行 JavaScript。通过 Node.js，我们可以编写不仅在浏览器环境中运行的 JavaScript 代码，还可以在服务器端运行的代码。这使得我们能够创建支持多种功能的服务器端应用，比如文件管理、访问数据库以及处理 HTTP 请求。
在 Electron 的上下文中，Node.js 用于运行主应用进程。这使我们能够访问操作系统功能，从而使用 Web 技术创建功能强大的桌面应用程序。

要下载 Node.js，可以访问其官方网站：https://nodejs.org[2]。在那里，我们可以下载适合自己操作系统的安装程序。下载完成后，按照提供的安装说明，即可在计算机上完成 Node.js 的安装。
为了确保 Node.js 已成功安装，可以通过终端/命令提示符执行以下命令：

2、设置项目目录

与创建任何应用程序一样，在第二步中，我们需要为我们的 Electron 项目创建一个新的目录。

为此，我们只需创建一个目录，并为我们的项目命名（例如：my-electron-app），然后进入该目录。
3、初始化项目
在设置项目目录之后，下一步是通过创建一个 package.json 文件来初始化项目。该文件实际上是项目的清单，包含重要的元数据和配置。
实际上，我们可以通过在项目目录中的终端或命令提示符运行以下命令生成此文件：npm init -y。
执行该命令后，将自动生成一个带有大多数参数默认值的 package.json 文件，如下所示：

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "",
  "main": "app/main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

以下是每个参数的通用说明：
name: 代表我们的项目或包的名称，它在 npm 注册表中唯一标识我们的项目。在此示例中，项目名称为 “my-electron-app”。

version: 项目或包的版本号。它有助于跟踪项目的更改，并确保可以管理和下载不同版本。

description：项目或包的简短描述。它可以帮助其他人了解项目的目的和功能。

main: 项目的主文件或入口点。它是项目启动时首先执行的 JavaScript 文件。在本示例中，主文件设置为 “main.js”，位于 app 目录中。需要注意的是，app 目录并不是必须的，它只是为了更好地组织项目结构的推荐做法。实际上，我们可以根据自己的喜好使用不同的目录名称。

scripts: 一个可以通过 npm 执行的脚本列表，通常用于运行测试、构建或启动应用程序等任务。
但是，对于 Electron 应用程序来说，主入口点通常是一个名为 “main.js” 的文件，因此我们需要调整此值以匹配 Electron 项目的结构。

在这种情况下，scripts 的值需要更改为：

"scripts": {
"start": "electron ."
},

通过这一调整，我们之后可以通过运行 npm start 命令启动应用程序，该命令将以 main.js 文件作为主入口点启动 Electron 应用程序。
keywords（关键字）: 关键字主要用于对项目或包进行分类，方便他人轻松找到该项目。

author（作者）: 项目作者的姓名或身份，可以是个人的名字，也可以是负责该项目的组织名称。

license（许可证）: 项目所使用的许可证，规定了他人如何使用、修改和分发该项目。
总结来说，这些参数的值并不是固定的，而是可以根据我们的开发需求进行调整。
以下是修改后的 package.json 示例，其中调整了 scripts 部分：

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "",
  "main": "app/main.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^29.1.2"
  }
}

4、安装 Electron

在安装了 Node.js 并创建了项目目录后，下一步就是安装 Electron。如前所述，Electron 是一个框架，它允许我们使用 HTML、CSS 和 JavaScript 等 Web 技术构建跨平台桌面应用程序。
因此，要安装 Electron，我们可以通过终端使用 npm（Node Package Manager），它随 Node.js 一起捆绑提供。在安装时，我们有几种选择，但这里将重点介绍两种常见的安装方式：
A、全局安装（Global installation）: 如果我们希望 Electron 在整个系统范围内可用，并能从任何目录中访问，可以执行以下命令：

npm install electron -g

此命令将 Electron 全局安装在我们的操作系统上，使我们可以从任何位置访问 Electron CLI（命令行界面）。全局安装确保我们能够创建新的 Electron 项目并运行其他与 Electron 相关的命令，而不受特定项目目录的限制。
B、本地安装（Local installation）: 然而，如果我们希望 Electron 仅在特定的项目目录中可用，并将其作为开发依赖项对待，可以使用以下安装命令：

npm install electron - save-dev

这个命令将 Electron 安装为我们项目的开发依赖。这意味着 Electron 将被包含在项目的 package.json 文件中的“devDependencies”部分。采用这种方式，当应用程序发布时，Electron 会自动被排除，确保仅在需要开发时才安装。
简而言之，通过将 Electron 作为开发依赖进行管理，我们可以简化部署过程，并确保我们的应用程序可以轻松地分发并在其他机器上运行，而无需单独安装 Electron。
总结一下，以下是两种安装模式的区别：

无论根据现有考虑选择哪个选项，在这一步中，重要的是确保 Electron 已经被安装。
【注意】：在这个流程中，我们将使用 --save-dev 标志来安装 Electron。如果仔细观察，采用这种方式安装 Electron 会将 devDependencies 参数添加到 package.json 文件中。

2.2 创建应用程序

1、创建主应用程序
在配置好必要的设置后，下一步是为我们的 Electron 项目创建主应用程序文件。这个文件作为我们 Electron 应用程序的入口点，在这里我们定义应用程序的行为和功能。
那么，我们该如何操作呢？首先，我们需要创建一个名为“main.js”的文件，如子节 2.1.3 中所提到的，并将其放置在“app”目录下。

之后，我们可以使用喜欢的文本编辑器打开 main.js 文件，并开始编写简单的代码来创建将加载 index.html 文件的应用程序窗口。
【注意】：这段 main.js 代码通常包括 Electron 的初始化、创建窗口、处理事件和其他应用程序逻辑。

const { app, BrowserWindow } = require('electron');
const path = require('path');

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  win.loadFile(path.join(__dirname, '../index.html'));
}

app.whenReady().then(createWindow);

那么，这段代码是什么意思呢？
首先，我们从 Electron 中导入了必要的模块，包括 app 和 BrowserWindow。
接下来，我们尝试定义一个函数 createWindow()，用于为我们的 Electron 应用程序创建一个新的浏览器窗口。
在 createWindow() 函数中，我们创建了一个新的 BrowserWindow 实例，并指定了窗口的宽度、高度和网页偏好设置。
最后，我们尝试使用 loadFile() 方法将一个 HTML 文件（例如：index.html）加载到新创建的窗口中。
确保我们也在项目目录中创建了 index.html 文件，因为它在上述代码中被引用。
因此，随着 main.js 文件的创建和初始应用程序逻辑的定义（例如：浏览器窗口和加载文件），我们已经为 Electron 应用程序奠定了基础。我们现在可以继续编写额外的代码，以根据需要构建应用程序的功能。

2、创建并编写 index.html 内容
最后，我们到达了构建这个简单 hello world 项目的最后一步，即添加 index.html 文件中的内容。这个 HTML 文件将作为我们 Electron 应用程序的用户界面，定义用户看到的内容以及与之交互的部分。
注意：我们还会看到这一步如何展示 Electron 如何利用常见的 Web 技术，如 JavaScript 和 HTML，来创建桌面应用程序，而不需要开发者学习新的编程语言。
为了实现这一点，简单地创建一个名为 index.html 的新文件，并将其放置在项目的根目录中（而不是放在 app 目录中）。
在我们的例子中，目录将是 “my-electron-app”。

<!DOCTYPE html>
<html>
<head>
  <title>Example of Electron App</title>
  <script>
    window.onload = function() {
     alert("Hello World");
    };
  </script>
</head>
<body>
  <h1>Welcome in our first Electron App!</h1>
  <p>This is just a sample paragraph.</p>
</body>
</html>

在这个例子中，我们提供了一个基本的 HTML 结构，包含一个标题和一个段落。此外，我们还包含了一个 JavaScript 函数，当文档加载时触发一个警告消息，简单地演示了 JavaScript 如何与 Electron 环境进行交互。是的，我们可以根据应用程序的具体需求修改 HTML 文件的内容。
一旦我们在 "index.html" 文件中创建了内容，我们就完成了简单 Electron hello world 应用程序的设置。随着 Node.js 安装、项目目录配置、package.json 初始化、Electron 安装以及主应用程序文件的创建，我们现在准备执行我们的 Electron 应用程序，并在 Electron 窗口中查看显示的 hello world 消息。

2.3、运行和构建应用程序

1、运行 Electron 应用程序
要运行我们的 Electron 应用程序，我们需要确保仍然在项目目录中（在本例中是 my-electron-app）。
之后，我们执行以下命令：

npm start

这个命令将根据 package.json 文件中指定的配置启动 Electron 应用程序。默认情况下，npm start 命令将在 package.json 文件的“scripts”部分中查找一个名为 “start” 的脚本（回顾一下我们在子节 2.1.3 中调整的参数），并执行它。
如果之前的步骤都已正确执行，我们现在应该能够看到 Electron 应用程序正在运行，并且应用程序窗口显示了 index.html 文件中指定的内容，如下图所示：

2、构建和分发应用程序
在经历了各种步骤之后，有些人可能会想知道这个应用程序是如何分发的，以及它是如何到达最终用户的。
当涉及到分发 Electron 应用程序时，我们需要确保应用程序为不同的操作系统和架构正确打包。这当然是为了确保用户可以轻松地在他们的设备上安装和运行应用程序，而不管他们的操作系统是什么。
例如，在 Windows 上，Electron 应用程序通常打包为可执行安装文件（例如 .exe 或 .msi）。对于 Linux 发行版，Electron 应用程序可能会根据使用的包管理器打包为不同的格式（如 .deb 或 .rpm 包）。与此同时，在 macOS 上，它们通常会打包成 macOS 应用程序包——通常是 .dmg 文件格式。
请注意，在本文中，我们将重点讨论为 macOS 构建应用程序。然而，在 Windows 或 Linux 上构建时生成的输出不会有显著区别。
那么，如何实现呢？为了创建这个 macOS（或任何其他操作系统）应用程序包，我们需要使用 Electron Builder，这是一个用于打包和分发 Electron 应用程序的工具。通过 Electron Builder，我们可以配置应用程序打包过程的各个方面，例如应用程序名称、版本、图标和分发格式。
首先，我们需要在项目中将 Electron Builder 安装为开发依赖。我们可以通过在终端或命令提示符中运行以下命令来完成：

npm install electron-builder --save-dev

【注意】：运行命令后，electron-builder 参数将自动出现在 package.json 文件的“devDependencies”部分。

一旦安装了 electron-builder，我们需要通过在 “scripts” 部分下添加 “package-mac” 和 “build” 脚本来重新配置 package.json 文件。基本上，这个脚本定义了我们 Electron 应用程序的构建配置选项。
以下是我们最终 package.json 文件的示例：

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "A simple Hello-World application",
  "main": "app/main.js",
  "scripts": {
    "start": "electron .",
    "package-mac": "electron-builder --mac"
  },
  "keywords": [],
  "author": "YoKo Kho from HakTrak Cybersecurity Squad",
  "license": "ISC",
  "devDependencies": {
    "electron": "^29.1.4",
    "electron-builder": "^24.13.3"
  },
  "build": {
    "appId": "com.yoko.my-electron-app",
    "productName": "My Electron App",
    "directories": {
      "output": "dist"
    }
  }
}

关于现有参数的其他说明如下：

“appId”指定应用程序的唯一标识符。

“productName”定义应用程序的显示名称。

“directories”部分指定了打包后的应用程序将放置的输出目录。
配置好 electron-builder 后，我们可以通过运行以下命令启动打包过程：

npm run package-mac

这个命令将根据 package.json 文件中指定的配置，启动专门针对 macOS 的打包过程。打包过程完成后，我们将会在指定的输出目录（在本例中是“dist”）中找到打包后的应用程序文件。

随着 Electron 应用程序成功打包，我们现在拥有了一个可执行文件，可以分发给用户。用户可以在他们的设备上安装并运行该应用程序，从而享受应用程序的功能。
好了，我们几乎已经完成了这一部分。希望到目前为止，读者们已经对基于 Electron 的应用程序有了一个大致的了解。在下一部分，我们将开始探讨如何检测 Electron 应用程序的技术讨论，并概述常见的测试方法，这些方法通常用于测试这些 Electron 应用程序。

References

[1] Electron 官方文档: https://www.electronjs.org/docs
[2] https://nodejs.org: https://nodejs.org/

原创白帽子左一

标签：文件,框架,electron,应用程序,js,Electron,测试,我们
From： https://www.cnblogs.com/o-O-oO/p/18671433

【Electron 应用安全测试基础】Electron 框架介绍

免责声明

一、引言

1.1 什么是 Electron

1.2 它是如何工作的？

二、构建第一个简单的“Hello-World”应用程序

2.1 准备开发环境

2.2 创建应用程序

2.3、运行和构建应用程序

References

相关文章

赞助商

阅读排行

【Electron 应用安全测试基础】Electron 框架介绍

免责声明

一、引言

1.1 什么是 Electron

1.2 它是如何工作的？

二、 构建第一个简单的“Hello-World”应用程序

2.1 准备开发环境

2.2 创建应用程序

2.3、 运行和构建应用程序

References

相关文章

赞助商

阅读排行

二、构建第一个简单的“Hello-World”应用程序

2.3、运行和构建应用程序