从 Electron 应用中使用 macOS Apple Intelligence 写作工具
Back to Top
为了覆盖更广泛的受众，这篇文章已从日语翻译而来。
您可以在这里找到原始版本。
简介
#在上月底发布了 Electron 36.0.0。
作为主要功能，可以通过上下文菜单使用 macOS 的 Apple Intelligence 写作工具。
后面会提到，通过菜单栏的应用程序菜单而不是上下文菜单来使用写作工具，在之前版本的 Electron 也可以实现。只要启用 Apple Intelligence，就无需对应用进行任何修改。
什么是 Apple Intelligence
#Apple Intelligence 是 Apple 设备上提供的 AI 平台，在 iOS 18.1、iPadOS 18.1、macOS Sequoia 15.1 及更高版本中可用，并支持日语。启用 Apple Intelligence 后，可以使用图像生成应用，Siri 也能与 ChatGPT 联动变得更智能，作为通用功能，还可在普通应用内使用写作工具[1]。
启用可在设置的「Apple Intelligence 与 Siri」中进行[2]。
启用 Apple Intelligence 后，在所有可显示和编辑文本的原生应用中，只要选中文本，就可以通过应用的“编辑”菜单以及上下文菜单调用写作工具功能，对文本内容进行摘要或校对。
在文本编辑应用中调用写作工具。可从上下文菜单的「作文ツール」子菜单中选择所需功能。
在 Electron 的上下文菜单中支持写作工具
#关于在上下文菜单中使用写作工具的功能请求，在以下 issue 中进行了讨论。
在 Electron v36 中发布的功能，似乎是通过以下向 OS 级别添加菜单项支持的 PR 实现的。
这通过在构建菜单时接收 WebFrameMain 类实例的选项来启用。
如文章开头所述，只要启用 Apple Intelligence，即使是现有的 Electron 应用，也无需进行特别的修改，就可以通过菜单栏使用写作工具。此次支持的用例，是希望对 TextArea 等中选中的文本通过上下文菜单使用写作工具。
在 Electron 应用的上下文菜单中启用写作工具
#下面示例演示如何在一个只加载 Web 内容的基础 Electron 应用的上下文菜单中启用写作工具。
关于在 Electron 应用中显示上下文菜单的方法，请参阅以下文章。
所做的工作，就是在正常显示上下文菜单时，获取 WebContents 的 focusedFrame 属性（WebFrameMain 的实例），并将其作为 frame 选项传递给 contextMenu.popup。详情请参阅代码中的注释。
import { app, BrowserWindow, Menu } from 'electron';
import path from 'node:path';
const __dirname = path.dirname(fileURLToPath(import.meta.url));
let mainWindow;
app.whenReady().then(() => {
createWindow(); // 创建主窗口
// 处理上下文菜单
mainWindow.webContents.on('context-menu', (e, params) => {
// 获取主窗口的 WebFrameMain 实例
const focusedFrame = mainWindow.webContents.focusedFrame;
// 创建菜单模板
const menuTemplate = buildMenuTemplate(params);
// 本应由 Electron 处理 visible 属性，但最近未处理，所以在此自行过滤
const visibleItems = menuTemplate.filter(item => item.visible);
// 创建上下文菜单
const contextMenu = Menu.buildFromTemplate(visibleItems);
contextMenu.popup({
window: mainWindow.webContents,
frame: focusedFrame, // 设置 WebFrameMain 实例
});
});
});
// 创建主窗口
function createWindow() {
mainWindow = new BrowserWindow({
width: 800, height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
}
});
mainWindow.loadFile('index.html');
}
// 构建菜单模板
function buildMenuTemplate(params) {
const menuTemplete = [
{
label: 'Copy', // 文本复制（使用 role）
role: 'copy',
visible: params.selectionText.trim().length > 0
}
];
return menuTemplete;
}
运行结果。可以从“作文ツール”菜单将应用程序的文本数据传递给写作工具并获取结果。在文本区域中使用效果很好。
如果在 Windows 上运行上述代码，除了显示代码中指定的菜单外不会有其他操作，所以似乎无需判断平台来分支编写代码。
我还将其集成到了我自己写的 Scrapbox 应用程序中。
由于 Scrapbox 的编辑界面与普通文本区域不同，“替换”功能未能正常工作[3]。
结语
#Electron 可以创建跨平台的应用，但能够将操作系统原生的便捷功能集成到应用中真是一件好事。各操作系统与生成式 AI 的融合今后还会继续推进，Electron 应用的便捷性也将随着平台的演进而提升。
