使用Electron制作一个快速搜索应用（入门向）

最新推荐文章于 2025-07-23 15:02:45 发布

转载最新推荐文章于 2025-07-23 15:02:45 发布 · 164 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5bfc9dd26fb9a049cb186dbe

文章标签：

#git #javascript #操作系统 #ViewUI

利用Electron框架，结合Chromium和Node.js，创建跨平台桌面应用示例。介绍如何使用Electron构建个性化搜索工具，包括快捷呼出、自定义搜索站点等功能。

什么是Electron

Electron是由Github开发，用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将Chromium和Node.js合并到同一个运行时环境中，并将其打包为Mac，Windows和Linux系统下的应用来实现这一目的。

由于平常去不同的站点搜索进行代码搬运时要经常切换不同的网站再进行搜索，本来想做一个整合搜索的站点方便自己平常搜索用；后来看到vscode忽然觉得可以使用它的爸爸——Electron来做一个试试，顺便练练手入门一下Electron，而且还可以使用快捷键呼出窗口来搜索，比用网站做更快。

想做的功能有：

平常隐藏在系统托盘，使用时用快捷键Alt+ s呼出搜索窗口
可以拖动搜索按钮，调整顺序
可以自定义搜索站点，增加删除修改
可设置开机启动

项目地址 可以下载DEMO玩玩，直接解压缩就可以了demo.zip

应用GIF

Alt + s 呼出窗口,点击选择搜索目标网站

直接回车相当于点击第一个按钮

翻译

拖动调整位置

设置

添加网站

删除网站

拖动调整位置

使用

# Clone this repository
git clonehttps://github.com/wadejs/W-SEARCH.git
# Install dependencies
npm install
# Run the app
npm start
复制代码

打包

这里使用electron-builder进行打包在package.json中加入以下代码

"scripts": {
    "dist": "electron-builder --win --x64"
  },
"build": {
    "appId": "searchApp",
    "productName": "W-SEARCH",
    "mac": {
      "target": [
        "dmg",
        "zip"
      ]
    },
    "win": {
      "target": [
        "nsis",
        "zip"
      ],
     }
  }
复制代码