豆包在任意程序中对选中的文本都会弹出自定义组件这个是怎么做到的,有做过的大佬们提点提点
main.js
// 从 Electron 中引入 app、BrowserWindow 和 ipcMain 模块
const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');
// 用于存储主窗口的引用
let mainWindow;
// 创建主窗口的函数
function createWindow() {
// 创建一个新的浏览器窗口
mainWindow = new BrowserWindow({
width: 300, // 设置窗口宽度
height: 200, // 设置窗口高度
frame: true, // 窗口没有边框
transparent: false, // 窗口背景透明
alwaysOnTop: true, // 窗口总在最前
show: true, // 初始不显示窗口
webPreferences: {
nodeIntegration: true, // 启用 Node.js 集成
contextIsolation: false, // 禁用上下文隔离
},
});
// 加载 index.html 文件到窗口中
mainWindow.loadFile('index.html');
}
// 针对不同平台的文本选择检测逻辑
if (process.platform === 'win32') {
// 如果是 Windows 平台,加载 windows.js 模块
require('./platforms/windows')(mainWindow);
} else if (process.platform === 'darwin') {
// 如果是 macOS 平台,加载 macos.js 模块
require('./platforms/macos')(mainWindow);
} else if (process.platform === 'linux') {
// 如果是 Linux 平台,加载 linux.js 模块
require('./platforms/linux')(mainWindow);
}
// 当应用程序准备好时,创建主窗口
app.whenReady().then(createWindow);
ipcMain.on('text-selected', (event, text) => {
console.log('Text selected in main process:', text);
// 这里可以处理显示组件的逻辑
});
// 当所有窗口都关闭时退出应用程序(除非是 macOS)
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
// 当应用程序被激活(在 macOS 上当应用程序图标被点击)时重新创建窗口
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
macos.js
const { app, BrowserWindow } = require('electron');
const { requestAccessibilityAccess, isAccessible, onTextChange } = require('node-mac-accessibility');
function init(mainWindow) {
// 请求辅助功能权限
requestAccessibilityAccess(() => {
if (isAccessible()) {
console.log('Accessibility access granted');
// 开始监听文本选择事件
onTextChange((text) => {
console.log('Text selected:', text);
mainWindow.webContents.send('text-selected', text);
showPopup(text);
});
} else {
console.log('Accessibility access denied');
}
});
}
function showPopup(text) {
let popup = new BrowserWindow({
width: 300,
height: 200,
show: false,
webPreferences: {
nodeIntegration: true,
},
});
popup.loadURL(`data:text/html,<h1>${text}</h1>`);
popup.once('ready-to-show', () => {
popup.show();
});
}
module.exports = {
init,
};
renderer.js
// 在 Electron 渲染进程中
const { ipcRenderer } = require('electron');
// 显示 AI 搜索组件的函数
function showSearchComponent(selectedText) {
// 这里可以是弹出一个模态框或者侧边栏等
console.log('Selected text for search:', selectedText);
// 实现 AI 搜索组件的逻辑
}
// 监听 IPC 消息
ipcRenderer.on('show-search', (event, selectedText) => {
showSearchComponent(selectedText);
});
electron小白,之前没接触过突然写有点蒙无从下手 让AI写了写 一直写不对,有明白原理的大佬还请麻指点一二,
使用了windows API 全局钩子做的