键页通支持为不同网页（URL）独立配置按键策略与翻页按钮定位规则。自动识别当前访问网址，精准匹配预设的自定义按键及翻页按钮CSS选择器，实现一键翻页的个性化操控体验。
右键菜单提供了一个配置界面，允许用户查看和修改当前网站的键盘导航设置。用户可以添加、编辑或删除特定网站的导航规则，并保存这些配置。该菜单导入导出使用的是JSON格式，便于用户备份和共享配置。导入时候会合并配置到现有的配置中，只会覆盖相同键值。
A context menu provides a configuration interface that allows users to view and modify keyboard navigation settings for the current website. Users can add, edit, or delete navigation rules for specific sites and save these configurations. The menu uses JSON format for import and export, making it easy for users to back up and share their settings. When importing, the configuration will be merged into the existing settings, only overwriting keys with the same name.
下面的 Typescript 代码演示了如何通过灵活的数据结构为不同网站配置键盘导航选项。它定义了按键映射、导航选择器和配置项的类型，并提供了一个示例配置对象。 这种结构允许你为不同的网站定义自定义的键盘快捷键和导航逻辑，支持简单和多层嵌套的选择器。你可以将打印的配置对象复制后通过右键菜单导入到配置中。
This Typescript code demonstrates how to configure keyboard navigation options for different websites using a flexible data structure. It defines types for key mappings, pilot selectors, and options, and provides a sample configuration object． This structure allows you to define custom keyboard shortcuts and navigation logic for different websites, supporting both simple and deeply nested selectors. You can copy the printed configuration object and import it into the configuration using the context menu.
const options: PilotOptions = {
globalKeys: {
// 绑定名称的通用按键，所有网站的元素根据名称自动绑定到这些按键上
// Common keys bound by name, elements on all sites will be automatically bound to these keys
prev: { code: ["ArrowUp", "PageUp", "KeyP", "KeyD"] },
next: { code: ["ArrowDown", "PageDown", "KeyN", "KeyF"] },
top: { code: ["Home", "KeyT"] },
bottom: { code: ["End", "KeyB"] },
},
pilots: {
// 站点正则 => 元素选择器或按键
// site regex => element selector or key
"http://example1.com(/.*)?": {
// 当点击元素对应的按键时候，触发元素的点击事件: PageUp => querySelector('.pg .prev_btn').click()
// When the corresponding key is pressed, trigger the element's click event: PageUp => querySelector('.pg .prev_btn').click()
prev: ".pg .prev_btn",
next: ".pg .next_btn",
},
// 通过当前页元素的兄弟来定位翻页按钮
// locate the page-turning buttons by the siblings of the current page element
"https://(.*\.)?example2.org(/.*)?": { cur: "#cur_page" },
// 通过当前页元素的兄弟的子孙来定位翻页按钮
// locate the page-turning buttons by the descendants of the siblings of the current page element
"https?://(.*\.)?example3.org(/.*)?": {
cur: "#cur_page",
prev: "a", // querySelector('#cur_page').prevElment.querySelector(a).click()
next: "a", // querySelector('#cur_page').nextElment.querySelector(a).click()
},
"https?://(.*\.)?example4.org(/.*)?": {
// 多层级子孙、兄弟的翻页按钮的定位规则： querySelector('.nav .pg').prevE.prevE.prevE.querySelector(a).click()
// multi-level descendants and siblings page button location rules (): querySelector('.nav .pg').prevE.prevE.prevE.querySelector(a).click()
prev: {
child: ".nav",
deep: {
child: ".pg",
sibling: -3,
deep: {
child: "a",
},
},
},
next: {
child: ".nav",
deep: {
child: ".pg",
sibling: 5, // querySelector('.nav .pg') .nextE x5 .querySelector(a).click()
deep: {
child: "a",
},
},
},
// 定义翻页以外的任意按钮
// define any buttons other than page turning
other: {
// 显示指定绑定或者禁用全局按键
// Explicitly bind or disable global keys
top: "#top",
bottom: {
// 显示指定绑定或者禁用全局按键
// Explicitly bind or disable global keys
globalKeys: false, // disable
child: "#bottomBtn",
// 指定只对该网站生效的按键
// Specify keys that only take effect on this site
keys: { code: ["KeyN"] },
},
close: {
child: "#closeBtn",
keys: { code: ["KeyC"] },
},
},
},
},
};
// 你可以将打印的配置对象复制后通过上面的右键菜单导入到配置中
// You can copy the printed configuration object and import it into the configuration using the context menu above
console.log(JSON.stringify(options));
// Typescript 类型定义
// Typescript definitions
export type PilotKey = { key?: string[]; code?: string[] };
export type PilotType = "prev" | "next";
export type Pilot = {
cur?: string;
prev?: PilotSel;
next?: PilotSel;
other?: { [k in string]: PilotSel };
};
export type PilotSel = string | PilotSelKey;
export interface PilotDeep {
sibling?: number;
child?: string;
deep?: PilotDeep;
}
export interface PilotSelKey extends PilotDeep {
globalKeys?: string | boolean;
keys?: PilotKey;
}
export type PilotOptions = {
globalKeys: { [k in string]: PilotKey };
pilots: {
[url in string]: Pilot;
};
};