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

最新推荐文章于 2025-05-05 18:20:12 发布

原创

最新推荐文章于 2025-05-05 18:20:12 发布 · 772 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Electron #nodejs

本文介绍了如何使用Electron创建一个快速搜索应用，该应用允许用户通过快捷键呼出搜索窗口，自定义搜索站点，调整按钮顺序，并支持拖动调整位置。内容包括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 呼出窗口,点击选择搜索目标网站

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

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

wadejs

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

C++ 应用软件开发从入门到实战详解

dvlinker的技术专栏

06-21

5万+

本文详细介绍一下Windows平台下用C++开发应用软件的诸多内容，以供大家借鉴或参考。

electron 读取文件夹内容_electron + jQuery +node.js 快速上手之实现写入文件、拖拽打开文件并读取内容的功能...

weixin_39608680的博客

12-22

553

导言近来对electron有点感兴趣，奈何干啃官方文档实在难受，还是直接从demo入手会比较好。受到一两个教程的启发，然后自己瞎捣鼓一下。说明利用Electron.js构建一个有以下功能的桌面端应用：实现简单的获取文本框输入的内容并保存为文件能够通过拖拽文件来读取其中的信息应用界面因为只是demo ，为了方面，就只是加基础样式了，将就着看。应用界面.png输入文字.png结果.png拖拽文件.pn...

参与评论您还未登录，请先登录后发表或查看评论

Electron使用指南——搜索信息

qianfeng_dashuju的博客

09-04

559

搜索信息的思路：在/src/components/Header.vue组件里获取到用户从搜索框里的关键字(keyword)，保存在Store里，再做个getter, 过滤items信息，修改Main.vue组件的渲染信息源。 1、定制 Store 修改src/store/modules/main.js： // ... const state = { // ... keywords: '' } const mutations = { // ... chang...

Electron使用指南 - [16] 搜索信息

sdasadasds的博客

12-07

278

搜索信息的思路：在 /src/components/Header.vue 组件里获取到用户从搜索框里的关键字(keyword)，保存在 Store 里，再做个 getter , 过滤 items 信息，修改 Main.vue 组件的渲染信息源。 1、定制 Store 修改 src/store/modules/main.js： // ... const state = { // ... keywords: '' } const mutations = { // ... changeKey

electron-find:查找网页中文本的所有匹配项

05-05

电子发现 English | 介绍在电子应用程序中查找文本的所有匹配项特征取决于电子的findInPage的API 支持find界面的用户配置界面支持区分大小写用户输入更改时自动查找查找界面与电子视图分开支持电子版本^ 1.8.0，^ 2.0.0，^ 3.0.0，^ 4.0.0 Windows，Linux，Mac的支持平台演示版预设使用者介面自定义用户界面安装 $ npm install electron-find --save 用法 # import module import { remote, ipcRenderer } from 'electron' import { FindInPage } from 'electron-find' # create instance of FindInPage with default config let fin

Electron 开发桌面应用：从入门到发布跨平台应用

最新发布

数字魔方操控师的博客

05-05

1279

一、引言在数字化时代，桌面应用程序依然在企业办公、创意设计、多媒体处理等领域发挥着重要作用。然而，传统桌面应用开发面临着平台差异带来的诸多挑战，如针对 Windows、macOS、Linux 等不同操作系统，需要使用不同的技术栈分别进行开发，这无疑增加了开发成本和周期。Electron 的出现为开发者带来了全新的解决方案，它基于 Web 技术，允许开发者使用 HTML、CSS 和 JavaScript 构建跨平台的桌面应用，极大地降低了开发门槛和成本，提高了开发效率。

快速入门：使用electron-starter构建天气信息应用

1. Electron技术基础： Electron 是一个使用 JavaScript、HTML 和 CSS 等 Web 技术来构建跨平台桌面应用的框架。它允许开发者用前端技术创建既有原生应用体验的软件。 2. 应用程序功能解析：文档描述了一个简单的...

快速入门Electron开发：最小应用实战

Electron框架的出现，使得开发者能够在同一个应用程序中结合Web技术与Node.js，创建跨平台的桌面应用程序。本次分析将着重介绍Electron框架的基本概念、文件结构以及如何快速入门。首先，关于标题“Electron-Test:...

electron 获取PC电脑所有安装的软件

ajiejie66的博客

09-05

2250

electron 获取PC电脑所有安装的软件。

Electron 页内查找模块介绍

weixin_34268310的博客

01-15

722

简介实现Electron app页内按关键字查找匹配文本的功能特征依赖于Electron的findInPage API 支持使用者灵活配置UI界面支持区分大小写当用户输入时自动查找查找输入框文本隔离，不会被匹配到支持以下Electron版本 ^1.8.7, ^2.0.0, ^3.0.0, ^4.0.0 支持以下平台 Windows, Linux, Mac 演示默认UI 定制化...

Electron试水篇（一）

苦作舟的空城机

09-26

474

Electron 序对于Electron，我没有去看vs code的历史时是完全不知道这样一款框架的。首先先从Vs Code说起，总所周知，这是一款非常好用的编辑器（尤其是对于前端开发人员）。一开始我看到Vs Code的全名 —— Visual Studio Code ，以为这也是像VS一般使用后端语言编写出来的编辑器。不过当我知道居然是开发人员使用TypeScript编写的，当时是非常惊讶的。介绍：Visual Studio Code 基于 Electron 开发。Electron 是一个基于

用 Electron 打造 Win/Mac 应用，从「代码」到可下载的「安装包」，可能比你想得麻烦一点...

weixin_34119545的博客

11-08

796

2019独角兽企业重金招聘Python工程师标准>>> ...

vscode+Electron环境搭建 helloword

chduguxue的专栏

10-17

4338

一个基于Chrome+Nodejs的容器，可以用纯前端的方式实现跨平台的桌面应用开发。代码由js，css，html构成，它支持把整个项目编译成exe。由于它支持Nodejs，所以可以引用dll，那么技术上涉及到跟硬件打交道的事情可以用c#，c++来开发，做成dll再有Nodejs去调用。所以我们可以把electron当作一个快速开发业务逻辑和界面逻辑的手段。底层核心可以用c++做，大大提高了开发效率。

Electron框架的简单使用-node.js实现GUI软件开发

咕咕鸡的执着

06-04

5807

基于Node.js的GUI框架 NW.JS (Node-Webkit) Electron 使用HTML、CSS、JavaScript来构建UI、处理与用户的交互、同时不约而同的使用了开源浏览器Chromium。基于这个浏览器做了一系列的软件开发，比如：Vscode、Atome、网易云音乐等。使用Node.js来访问浏览器之外的内容。比如文件系统、文件、网络等，相当于是浏览器与Node.js的结合。安装使用使用npm init -y来初始化项目。安装electron npm i

使用electron来创建属于自己的utools

weixin_44415775的博客

04-02

550

快捷键呼出隐藏界面进行数据查询与密码管理功能的小桌面系统使用electron来创建属于自己的utools

Electron核心：进程通信

小柒的前端之旅

02-10

999

什么是 electron electron是使用JavaScript，HTMl和CSS构建的跨平台的桌面应用。很多应用都在使用electron，比如VSCode、GitHub Desktop等。主进程与渲染进程主进程：可以使用和系统对接的Electron API 创建菜单，上传文件等创建渲染进程全面支持Node.js 只有一个，作为程序的入口点渲染进程：可以有多个，每个对应一...

开源版本的 uTools。可支持 uTools 所有插件生态

nidongla的博客

06-29

1607

话不多说，先放上截图和仓库地址：代码仓库：github 故事背景网上购物优惠券 www.cqfenfa.com 网络抓包之前公司内部因为开发需要，需要和后端进行接口联调，测试环境的时候，经常会涉及到一些状态改变要看交互样式的问题。比如测试需要测商品的待支付、支付中、支付完成等各种节点的交互样式是否符合预期，这种情况测试一般会去造数据或者让后端改数据库接口。有的小伙伴可能会用 Charles 修改返回数据进行测试。但是 Charles 的抓包体验和配置体验感觉有点麻烦，不是很友好，所以我们自己做了个抓.

Electron杂谈 - 以VS Code为例

过客2019

09-20

1550

node，js以及ts对大多数有学习过前端的同学来说都是基本功，不用多说。但还是需要对VSCode使用相关技术框架有所了解。