[js] 连续点击 openAny，小代码，大作用，让一切触手可达

字母键

包含从 A 到 Z 的所有英文字母键：

• A, B, C, D, E, F, G, H, I, J, K, L, M, N, O, P, Q, R, S, T, U, V, W, X, Y, Z

数字键（主键盘区）

包含主键盘上的数字键：

• 0, 1, 2, 3, 4, 5, 6, 7, 8, 9

功能键

包含键盘顶部的功能键：

• F1, F2, F3, F4, F5, F6, F7, F8, F9, F10, F11, F12

方向键

用于控制方向的按键：

• 上箭头 (ArrowUp), 下箭头 (ArrowDown), 左箭头 (ArrowLeft), 右箭头 (ArrowRight)

特殊键

包括常用的特殊功能键：

• Backspace（退格键）, Tab（制表键）, Enter（回车键）, Shift（左 Shift 键）, Control（左 Ctrl 键）, Alt（左 Alt 键）
• CapsLock（大写锁定键）, Escape（Esc 键）, Space（空格键）
• PageUp（向上翻页键）, PageDown（向下翻页键）, End（结束键）, Home（首页键）
• Insert（插入键）, Delete（删除键）

数字小键盘

位于键盘右侧的小键盘区域：

• 数字键：Numpad0, Numpad1, Numpad2, Numpad3, Numpad4, Numpad5, Numpad6, Numpad7, Numpad8, Numpad9
• 运算符键：NumpadAdd（加号）, NumpadSubtract（减号）, NumpadMultiply（乘号）, NumpadDivide（除号）
• 小数点键：NumpadDecimal
• 回车键：NumpadEnter

标点符号键

主键盘上的标点符号键：

• 分号 (;) - Semicolon
• 等号 (=) - Equal
• 逗号 (,) - Comma
• 减号 (-) - Minus
• 句号 (.) - Period
• 斜杠 (/) - Slash
• 反引号 (`) - Backquote
• 左方括号 ([) - BracketLeft
• 反斜杠 () - Backslash
• 右方括号 (]) - BracketRight
• 单引号 (') - Quote

鼠标键

mouseleft mousemiddle mouseright mouseover

其他键

一些额外的特殊功能键：

• ContextMenu（右键菜单键）, NumLock（数字锁定键）, ScrollLock（滚动锁定键）
• Pause（暂停键）, PrintScreen（打印屏幕键）

OpenAny 是一个用于模拟用户操作（如点击、输入、快捷键等）的工具类。它支持链式调用，能够实现复杂的自动化操作，同时提供了错误处理和快捷键注册功能。以下是详细的使用说明。

1. 初始化与基本调用

初始化实例

推荐通过 new OpenAny() 创建新实例：

const openAny = new OpenAny();
​

也可以直接使用全局实例：

openAny.click('#selector');
​

链式调用

所有方法均支持链式调用，例如：

openAny.click('#selector1')
      .click('#selector2')
      .input('Hello World', '#inputSelector')
      .press('Enter');
​

2. 核心方法

2.1 模拟点击

方法：click(selector, parentElement)

• 参数：
  • selector：CSS 选择器或 DOM 元素。
  • parentElement（可选）：父级元素范围。
• 示例：

openAny.click('#button'); // 点击指定按钮
​

方法：clicks(...selectors)

• 支持批量点击多个元素。
• 参数：
  • selectors：选择器数组或多个字符串参数。
• 示例：

openAny.clicks('#button1', '#button2', '#button3');
​

2.2 输入与文本操作

方法：input(text, selector)

• 在指定输入框中输入文本。
• 参数：
  • text：要输入的文本。
  • selector：目标输入框的选择器。
• 示例：

openAny.input('Hello World', '#inputField');
​

方法：sendText(text, selector)

• 向可编辑区域发送文本。
• 示例：

openAny.sendText('Hello World', '.editableArea');
​

方法：clear(selector)

• 清空指定输入框的内容。
• 示例：

openAny.clear('#inputField');
​

2.3 快捷键模拟

方法：press(keys, element)

• 模拟按键操作。
• 参数：
  • keys：按键组合，如 'Ctrl+A' 或 'Meta+Z'。
  • element（可选）：目标元素。
• 示例：

openAny.press('Ctrl+S'); // 保存操作
​

具体键盘名可参考 [js] 连续点击 openAny，小代码，大作用，让一切触手可达

另外，鼠标键有 mouseleft, mouseclick，mousemiddle，mouseright，mouseover。

方法：pressByKeymap(fnName)

• 根据思源笔记的快捷键配置触发操作。
• 参数：
  • fnName：快捷键名称。
• 示例：

openAny.pressByKeymap('general.config'); // 打开设置窗口
​

2.4 延迟与等待

方法：sleep(delay)

• 添加延迟。
• 参数：
  • delay：延迟时间（毫秒）。
• 示例：

openAny.sleep(1000); // 延迟1秒
​

方法：el(selector)

• 等待指定元素加载完成。
• 参数：
  • selector：目标元素的选择器。
• 示例：

openAny.el('#dynamicElement').sendText('someText');
​

2.5 自定义逻辑

方法：invoke(callback)

• 执行自定义逻辑。
• 参数：
  • callback：回调函数，接收上下文参数。
  • callback 的参数有：
  • prev, // 上一个调用的元素或返回值
    sleep,
    whenElementExist,
    showMessage,
    showErrorMessage,
    querySql,
    fetchSyncPost,
    fetchSyncGet,
    requestApi,
    getProtyle,
    getCurrentDocId,
    getCurrentNotebookId,
    newSetStyle,
    onProtyleLoad,
    onToolbarShow,
    getCharsBeforeCursor,
    showInputBox,
    showOptionsMenu,
    selectText,
• 示例：

openAny.invoke({}) => {
    console.log('Custom logic executed.');
});
​

这些函数也可以通过 openAny.fn.xxx() 或 openAny.functions.xxx()直接调用。

【注意】 invoke 中使用 openAny.xx()前面不能用 await，需要 await 的需用 new OpenAny().xx()代替，因为 await 会与上层链相互等待造成死锁

2.6 快捷键注册

方法：addKeymap(keys, callback, node, options)

• 注册全局快捷键。这些代码放到代码片段中即可。
• 参数：
  • keys：快捷键组合，如 'Alt+Z'。
  • callback：触发时执行的回调函数。
  • node 在哪个元素上绑定
  • options addEventListener 的选项
• 示例：

openAny.addKeymap('Alt+Z', (event) => {
    event.preventDefault();
    openAny.click('#button');
});
​

2.7 快捷键删除

方法：removeKeymap(keys, callback)

• 注册全局快捷键。这些代码放到代码片段中即可。

• 参数：

  • keys：快捷键组合，如 'Alt+Z'。
  • callback：触发时执行的回调函数。
  • node 在哪个元素上绑定
  • options addEventListener 的选项

• 示例：

openAny.addKeymap('Alt+Z', (event) => {
    event.preventDefault();
    openAny.click('#button');
});
​

注意，callback 也必须完全一样才行，与 js 自带的事件删除不一样，这里只要求，callback.toString()完全一致就行，如果有 node 和 options 的，也要加上。

注意，如果删除时不填写 callback，node，options 参数则会把所有同名的快捷键都删除，但只会删除通过 openAny 添加的快捷键。尽量提供完整参数，防止误删除。

另外，如果使用了不同的实例注册的快捷键，也仅删除相同实例下注册的快捷键。

3. 错误处理

错误捕获

建议使用 try...catch 捕获异常：

try {
    await openAny.click('#valid1').click('#invalid');
} catch (e) {
    console.error("捕获错误:", e);
}
​

显示错误消息

启用错误消息通知：

openAny.showMessage().click('#invalid');
​

参数 true 显示消息，false 不显示消息，默认 true （但未调用此方法时，openAny 默认是 false）

4. 高级用法

4.1 多步骤操作

将多个操作组合在一起：

await openAny
    .el('#inputField')
    .input('Hello World')
    .press('Enter')
    .click('#submitButton');
​

4.2 invoke 函数

通过函数处理那些模拟点击无法实现的操作：

openAny.invoke({}) => {
    console.log('Custom logic executed.');
});
​

4.3 快捷键转移

将一个快捷键映射到另一个操作：

openAny.addKeymap('Alt+X', (event) => {
    event.preventDefault();
    openAny.press('Ctrl+S');
});
​

5. 注意事项

1. 选择器唯一性：选择符不一定要全局唯一，但需确保不会产生歧义或副作用。
2. 异步操作：链式调用时无需手动处理异步，OpenAny 内部已封装 Promise。
3. 分开调用：如果需要分开调用方法，切勿混合其他代码，除非你能清晰知道执行顺序。
4. 异常恢复：若出现未知异常导致假死状态，可通过 resetChain() 恢复。

6. 实例说明

1: 如何打开设置窗口？

openAny.click('#barWorkspace').click('[data-id="config"]');
​

2: 如何快速切换预览模式和编辑模式？

openAny.addKeymap('Alt+Meta+0', (event) => {
    event.preventDefault();
    const isPreview = document.querySelector('.protyle-preview:not(.fn__none) .protyle-preview__action');
    if (!isPreview) openAny.press('Alt+Meta+9');
    else openAny.press('Alt+Meta+7');
});
​

3: 如何给文字添加颜色和背景色？

openAny.addKeymap('Alt+Z', (event) => {
    event.preventDefault();
    openAny.press('Meta+Alt+X', document.activeElement)
          .clicks('.protyle-util [style="color:var(--b3-font-color9)"]', 
                  '.protyle-util [style="background-color:var(--b3-font-background6)"]')
          .invoke(() => document.querySelector('.protyle-util:not(.fn__none)').classList.add('fn__none'));
});
​

新增函数

这些函数都可以用在 openAny.invoke 函数回调中。

以下是对您提供的几个函数的使用教程，包含每个函数的功能描述、使用场景以及代码示例。

1. showOptionsMenu 弹出选项菜单

功能描述：

showOptionsMenu 是一个异步函数，用于弹出一个选项菜单供用户选择。它接收一个选项数组，并返回用户选择的值。如果用户取消选择，则返回 null。

参数

showOptionsMenu(options, title = '')

使用场景：

• 用户需要从多个选项中选择一个（例如：跳转到不同的搜索引擎或 AI 工具）。
• 需要动态生成选项列表并获取用户的选择结果。

使用示例：

async function demo() {
    // 定义选项列表
    const options = [
        { label: 'Google 搜索', value: 'https://www.google.com' },
        { label: 'Bing 搜索', value: 'https://www.bing.com' },
        { label: '百度搜索', value: 'https://www.baidu.com' }
    ];

    // 调用 showOptionsMenu 显示选项菜单
    const selectedValue = await showOptionsMenu(options);

    if (selectedValue === null) {
        console.log('用户取消了选择');
    } else {
        console.log(`用户选择了：${selectedValue}`);
        window.location.href = selectedValue; // 跳转到用户选择的搜索引擎
    }
}
​

2. showInputBox 弹出输入框

功能描述：

showInputBox 是一个异步函数，用于弹出一个输入框，允许用户输入内容。如果用户点击确认按钮，则返回输入的内容；如果用户取消输入，则返回 null。

参数

showInputBox(defaultText = '', title = '', placeholder = '');

使用场景：

• 获取用户的自定义输入（例如：提交表单、设置标题等）。
• 需要动态处理用户输入内容。

使用示例：

async function inputDemo() {
    // 弹出输入框，默认内容为 "默认内容"
    const result = await showInputBox('请输入您的名字');

    if (result !== null) {
        console.log('用户输入:', result);
        alert(`你好, ${result}! 欢迎使用本系统。`);
    } else {
        console.log('用户取消了输入');
    }
}
​

3. onToolbarShow 监听工具栏显示事件

功能描述：

onToolbarShow 是一个回调函数，当工具栏显示时触发。它接收三个参数：

• selection：当前选中的内容。
• toolbar：工具栏对象。
• protyle：与编辑器相关的上下文信息。

使用场景：

• 动态调整工具栏的行为或样式。
• 根据用户选中的内容，动态更新工具栏的选项。

使用示例：

// 监听工具栏显示事件
onToolbarShow((selection, toolbar, protyle) => {
    console.log('当前选中内容:', selection);
    console.log('工具栏对象:', toolbar);
    console.log('编辑器上下文:', protyle);

    // 示例：打印选中文本
    if (selection && selection.length > 0) {
        console.log('选中文本是：'+selection);
    }
});
​

4. getCharsBeforeCursor 获取光标前的字符

功能描述：

getCharsBeforeCursor 是一个同步函数，用于获取光标前指定数量的字符。它接收一个参数 count，表示需要获取的字符数。

使用场景：

• 文字补全功能（例如：根据光标前的字符预测下一个单词）。
• 分析用户当前输入上下文。

使用示例：

function autoCompleteExample() {
    // 获取光标前 5 个字符
    const charsBeforeCursor = getCharsBeforeCursor(5);
    console.log('光标前的字符:', charsBeforeCursor);

    // 示例：简单文字补全逻辑
    if (charsBeforeCursor.endsWith('hel')) {
        console.log('建议补全为: hello');
    } else if (charsBeforeCursor.endsWith('wor')) {
        console.log('建议补全为: world');
    }
}
​

5. newSetStyle 动态设置样式

功能描述：

newSetStyle 是一个函数，用于创建一个动态样式设置器。调用该函数后，会返回一个新的函数（例如：setStyle），该函数可以接收 CSS 样式字符串作为参数，并将其应用到目标元素或全局样式中。

使用场景：

• 动态调整页面样式（例如：根据用户偏好更改主题颜色）。
• 实现运行时的样式定制（例如：在特定条件下修改菜单、按钮或其他组件的样式）。
• 开发可复用的样式管理工具。

使用教程

1. 初始化 newSetStyle

首先，调用 newSetStyle 创建一个样式设置器实例（如 setStyle）。这个实例可以用来动态注入 CSS 样式。

// 初始化样式设置器
const setStyle = newSetStyle();
​

2. 应用样式

通过 setStyle 函数，您可以传入一段 CSS 样式字符串，这些样式会被动态注入到页面中。

示例 1：设置全局样式

// 定义新的全局样式
setStyle(`
    body {
        background-color: #f8f9fa;
        font-family: Arial, sans-serif;
        color: #333;
    }
    button {
        background-color: #007bff;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
        cursor: pointer;
    }
    button:hover {
        background-color: #0056b3;
    }
`);

console.log('全局样式已更新');
​

示例 2：设置特定组件样式

// 定义菜单的样式
setStyle(`
    .custom-menu {
        background-color: #ffffff;
        border: 1px solid #ddd;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        padding: 10px;
    }
    .custom-menu-item {
        padding: 8px 16px;
        cursor: pointer;
    }
    .custom-menu-item:hover {
        background-color: #f0f0f0;
    }
`);

console.log('菜单样式已更新');
​

3. 动态切换样式

您可以多次调用 setStyle 来动态切换样式，从而实现主题切换或条件样式调整。

示例：根据用户选择切换主题

function switchTheme(theme) {
    if (theme === 'dark') {
        setStyle(`
            body {
                background-color: #121212;
                color: #e0e0e0;
            }
            button {
                background-color: #bb86fc;
                color: #121212;
            }
        `);
        console.log('切换到深色主题');
    } else {
        setStyle(`
            body {
                background-color: #ffffff;
                color: #333;
            }
            button {
                background-color: #007bff;
                color: white;
            }
        `);
        console.log('切换到浅色主题');
    }
}

// 调用示例
switchTheme('dark'); // 切换到深色主题
setTimeout(() => switchTheme('light'), 3000); // 3秒后切换到浅色主题
​

4. 清除样式

如果需要清除之前注入的样式，可以在实现 newSetStyle 的底层逻辑时添加清除功能（假设有 clearStyles 方法）。

示例：清除所有动态样式

// 假设 newSetStyle 返回的对象包含 clearStyles 方法
setStyle.clearStyles();
console.log('所有动态样式已清除');
​

总结

newSetStyle 是一个强大的工具，允许开发者动态地注入和管理 CSS 样式。通过它，您可以轻松实现以下功能：

1. 动态样式调整：根据用户交互或系统状态实时更新样式。
2. 主题切换：支持深色模式、浅色模式等多主题切换。
3. 组件样式隔离：为特定组件或模块定义独立的样式规则。

6. selectText 触发选中文本

功能描述：

selectText 可以触发选中编辑器文本，配合按钮操作，可以对编辑器进行一定的编辑操作。

使用场景：

• 选中文本添加样式等。
• 选中文本搜索等。

使用示例：

openAny.selectText('some text', document.activeElement).press('meta+b', document.activeElement);
​

7. openFile 打开本地文件

功能描述：

openFile 可以打开本地文件，支持各种类型，用默认程序打开。

使用场景：

• 打开本地文件

使用示例：

openAny.openFile('/yourpath/yourfile.txt');

8. showFileInFolder 定位文件或文件夹的

功能描述：

showFileInFolder 在系统资源管理器中定位文件或文件夹的位置。

使用场景：

• 定位文件或文件夹的位置

使用示例：

openAny.showFileInFolder('/yourpath/yourfile.txt');

9. runCmd 运行本地命令

功能描述：

runCmd 可以执行本地命令，并等待返回结果。

使用场景：

• 与本地脚本交互

使用示例：

// mac
openAny.runCmd('open -a /path/some.app'); //运行指定app
//windows
openAny.runCmd('start calc'); // 打开计算器
​

也可以把这些函数与其他函数相结合实现与本地文件或应用的交互。