前端音视频【免费下载链接】Bilibili-Evolved强大的哔哩哔哩增强脚本项目地址https://gitcode.com/gh_mirrors/bi/Bilibili-Evolved点击查看免费下载导读本文围绕 Bilibili-Evolved 仓库中的快捷键扩展插件keymap-dark-mode位于 registry/lib/plugins/utils/keymap-dark-mode展开它以一行描述定义了核心功能——在快捷键的动作列表里添加一个夜间模式可以通过快捷键切换夜间模式。文章将完整解析该插件的源码实现并顺藤摸瓜深入讲解其背后的两套关键机制keymap快捷键扩展组件的动作注册与键位预设体系以及 darkMode夜间模式组件的开关切换原理。读完本文你不仅能复现并配置这个快捷键动作还能理解 Bilibili-Evolved 插件如何通过addData/registerAndGetData数据槽向既有组件注入扩展能力从而照葫芦画瓢编写属于自己的快捷键动作。一、插件概览做什么、依赖什么keymap-dark-mode是一个标准的 Bilibili-Evolved 插件Plugin官方描述非常简短在快捷键的动作列表里添加一个 夜间模式, 可以通过快捷键切换夜间模式拆解这句话可以提炼出它的三个职责向快捷键动作列表注入新动作在快捷键扩展keymap组件的动作列表里新增一个名为夜间模式的动作动作执行切换逻辑该动作被触发时切换夜间模式组件的启用状态不默认占用按键为这个动作预留一个空的默认键位由用户自行绑定。它依赖两个既有的核心组件快捷键扩展keymap负责键盘事件监听、键位解析与动作调度位于 registry/lib/components/utils/keymap夜间模式darkMode负责页面.dark样式的应用与移除位于 registry/lib/components/style/dark-mode。插件本身只做接线工作把按键和切换夜间模式这两件事连接起来。二、插件源码逐段解析插件全部源码仅一个文件 registry/lib/plugins/utils/keymap-dark-mode/index.ts完整内容如下import { PluginMetadata } from /plugins/plugin import type { KeyBindingAction } from ../../../components/utils/keymap/bindings export const plugin: PluginMetadata { name: keymap.actions.darkMode, displayName: 快捷键扩展 - 夜间模式, setup: ({ addData, coreApis: { settings } }) { addData(keymap.actions, (actions: Recordstring, KeyBindingAction) { actions.darkMode { displayName: 夜间模式, run: () { const darkMode settings.getComponentSettings(darkMode) darkMode.enabled !darkMode.enabled }, } }) addData(keymap.presets, (presetBase: Recordstring, string) { presetBase.darkMode }) }, }下面逐部分讲解。2.1 插件元数据PluginMetadataname: keymap.actions.darkMode, displayName: 快捷键扩展 - 夜间模式,name是插件的唯一标识。这里的命名keymap.actions.darkMode直接体现了它的挂载点keymap组件下的actions数据槽动作名为darkModedisplayName是展示给用户的名称快捷键扩展 - 夜间模式出现在设置面板的插件列表中。2.2 向动作数据槽注入新动作setup: ({ addData, coreApis: { settings } }) { addData(keymap.actions, (actions: Recordstring, KeyBindingAction) { actions.darkMode { ... } }) }setup是插件被加载时的入口参数解构出addData与coreApis.settingsaddData是 Bilibili-Evolved 插件体系提供的数据注入 API用于向全局数据槽追加/修改数据这里向名为keymap.actions的数据槽注册了一个动作对象键名为darkModeKeyBindingAction类型定义在 registry/lib/components/utils/keymap/bindings.ts是快捷键动作的统一接口。注入的动作对象结构{ displayName: 夜间模式, run: () { const darkMode settings.getComponentSettings(darkMode) darkMode.enabled !darkMode.enabled }, }displayName: 夜间模式动作在设置界面中显示的名称用户靠它识别该动作run动作被触发时执行的回调。它先通过settings.getComponentSettings(darkMode)拿到夜间模式组件的设置对象再把enabled取反——也就是说每触发一次夜间模式就在开启/关闭之间切换一次。注意这里特意没有设置prevent、ignoreTyping、ignoreFocus等可选字段说明它使用全部默认行为详见下文 3.2 节的接口字段说明。2.3 预留空键位addData(keymap.presets, (presetBase: Recordstring, string) { presetBase.darkMode })第二个addData向keymap.presets数据槽的基础预设presetBase中追加了一项darkMode: 。键位字符串为空字符串的含义是该动作默认不绑定任何按键。这样设计的好处是插件不会与用户已有的自定义键位冲突用户需要主动在快捷键设置中为该动作指定按键后才可使用详见第五节。三、底层机制一keymap 快捷键动作扩展体系理解这个插件首先要理解 keymap 组件如何组织动作与键位。3.1 动作数据槽 keymap.actionskeymap 组件在内置动作列表builtInActions之上通过 registerAndGetData 注册了keymap.actions数据槽见 registry/lib/components/utils/keymap/actions.tsexport const [actions] registerAndGetData(keymap.actions, builtInActions)内置动作包括fullscreen全屏、webFullscreen网页全屏、wideScreen宽屏、volumeUp增加音量、mute静音、coin投币、favorite收藏、pause暂停/播放、like点赞、danmaku弹幕开关、sendComment发送评论以及seekBegin、seekProgress10seekProgress90按百分比跳转等。关键点registerAndGetData返回的actions对象是可变的引用。插件通过addData(keymap.actions, fn)拿到同一个对象并追加darkMode动作因此 keymap 组件在解析键位时能立刻看到这个新增动作。这就是插件扩展内置组件能力的典型模式——数据槽机制让插件无需修改 keymap 源码即可为其增加动作。3.2 KeyBindingAction 接口字段动作对象必须满足 KeyBindingAction 接口字段类型说明displayNamestring动作的展示名称出现在设置界面run(context) unknown动作执行的回调返回非空值表示执行成功会阻止浏览器默认行为prevent?boolean是否总是阻止事件默认行为缺省时仅在run返回成功时阻止ignoreTyping?boolean默认在打字输入时忽略快捷键设为false可在输入时也允许触发ignoreFocus?boolean默认聚焦在可聚焦元素时不忽略设为true可在聚焦时禁止触发从 bindings.ts 的键盘事件处理逻辑 可以看到每次keydown事件都会经历启用状态检查 → 打字状态检查 → 焦点元素检查 → 修饰键shift/alt/ctrl/meta匹配 → 主键匹配全部通过后才执行run。因此一个仅含displayName与run的动作如本插件会采用打字时忽略、聚焦可聚焦元素时忽略的默认行为这是最安全的选择——不会在你输入弹幕或评论时误触发夜间模式。3.3 键位预设数据槽 keymap.presets与动作类似keymap 组件还注册了keymap.presets数据槽见 registry/lib/components/utils/keymap/presets.tsexport const [, presets] registerAndGetData(keymap.presets, presetBase, builtInPresets)presetBase基础预设为所有动作提供了默认键位keymap 组件在 index.ts 的 parseBindings 中会把基础预设 所选预设 用户自定义键位三层合并后再绑定。基础预设的部分默认键位如下完整定义见 presets.ts动作默认键位动作默认键位fullscreenfmutemwebFullscreenwdanmakudwideScreentcoincvolumeUparrowUpfavoritesvolumeDownarrowDownlikelpausespaceseekBegin0longJumpForwardjseekProgress10~901~9longJumpBackwardshift jsendCommentctrl enter插件通过第二个addData向这个presetBase追加darkMode: 即夜间模式动作的默认键位为空。builtInPresets还提供了多套一键切换的键位方案Default、YouTube、HTML5Player、PotPlayer分别模拟主流播放器的快捷键习惯。用户可在快捷键扩展的预设选项中选择。四、底层机制二夜间模式组件的开关原理run里切换的enabled字段是 Bilibili-Evolved 所有组件设置的基础结构。src/core/settings/types.ts 中定义export interface ComponentSettingsO extends UnknownOptions UnknownOptions { /** 是否启用此组件 */ enabled: boolean /** 组件选项 */ options: O Recordstring, unknown }enabled为true时组件处于启用状态。因此darkMode.enabled !darkMode.enabled本质上是反转夜间模式组件的启用开关——这与用户在设置面板中手动拨动夜间模式开关是同一个动作只不过触发方式从鼠标点击换成了快捷键。4.1 启用/停用时发生了什么夜间模式组件 registry/lib/components/style/dark-mode/index.ts 的核心逻辑启用add向document.body添加darkclass向localStorage写入pbp_theme_v4 b把页面meta nametheme-color改为深色#111meta namecolor-scheme改为dark停用remove移除body上的darkclass并还原上述两个 meta 标签切换过程带有 200ms 的延迟changeDelay保证样式过渡自然。.darkclass 配合 dark-mode.scss、dark-mode.important.scssimportant模式以及dark-shadow-dom.scssShadow DOM 样式等大量切片样式将哔哩哔哩各页面元素渲染为暗色主题。另外夜间模式组件还内置了一个提前注入插件见 dark-mode/index.ts 的 plugin 字段在页面内容加载完成时若检测到组件处于启用状态就提前给body添加darkclass以减少首屏白屏/颜色抖动问题。这意味着通过快捷键瞬间开启夜间模式后新加载的页面区域也会沿用暗色样式。4.2 组件未启用时的边界行为从源码逻辑看run只是无条件翻转enabled布尔值不判断组件当前是否加载。因此若夜间模式组件已启用按下快捷键即关闭夜间模式若未启用按下快捷键会先将其enabled置为true随后设置系统触发组件加载与样式应用即一键打开夜间模式。也就是说这个快捷键动作与设置面板里的开关状态始终保持同步、可双向切换。这也解释了为什么使用该插件前需要先安装夜间模式组件——动作操作的正是这个组件的设置对象。五、安装与配置把夜间模式绑到你的按键上该插件随仓库源码分发位于registry/lib/plugins/utils/keymap-dark-mode可通过 Bilibili-Evolved 的在线组件库/插件管理入口安装。完整使用流程如下启用基础组件在设置面板中启用**快捷键扩展keymap**组件启用**夜间模式darkMode**组件若你希望快捷键能直接打开它。安装并启用本插件在设置面板的插件管理中启用快捷键扩展 - 夜间模式。为动作绑定按键打开快捷键扩展的设置界面keymap 组件的自定义键位选项找到动作夜间模式为其指定一个你喜欢的键位组合例如n、d或ctrl shift d。由于插件注入的默认键位为空字符串这一步是必需的。使用在任何页面按下已绑定的组合键即可即时切换夜间模式再次按下则恢复浅色模式。5.1 相关配置项keymap 组件还提供若干影响使用体验的选项定义于 registry/lib/components/utils/keymap/index.ts选项默认值说明longJumpSeconds85长跳跃前进/后退的秒数volumeStep10音量调整幅度1~100showSeekShortcutstrue是否显示跳转快捷键提示customKeyBindings{}自定义键位映射隐藏选项presetDefault键位预设方案自定义键位采用空格分隔的按键序列语法见 index.ts 的 parseBindings支持shift、ctrl、alt、meta修饰键以及space、arrowUp、enter等按键名。六、扩展思路仿照本插件编写更多快捷键动作keymap-dark-mode是理解 Bilibili-Evolved 插件扩展机制的最佳范例之一。它的整个实现只做两件事向keymap.actions加动作、向keymap.presets加空键位。基于同样的模式你可以轻松扩展出更多通过快捷键控制组件开关的动作例如addData(keymap.actions, (actions: Recordstring, KeyBindingAction) { actions.toggleMyComponent { displayName: 切换我的组件, run: () { const settings getComponentSettings(myComponent) settings.enabled !settings.enabled }, } }) addData(keymap.presets, (presetBase: Recordstring, string) { presetBase.toggleMyComponent // 由用户自行绑定 })从源码结构看只要动作名不与内置动作冲突避免覆盖fullscreen、pause等且目标组件存在这套动作 键位的双数据槽注入模式即可通用。更进一步你还可以利用KeyBindingActionContext中提供的clickElement、changeVideoTime、showTip等工具见 actions.ts编写面向播放器控制、页面点击等更复杂的快捷键动作并在run返回非空值以阻止浏览器默认行为。七、小结要素内容插件位置registry/lib/plugins/utils/keymap-dark-mode插件名称keymap.actions.darkMode快捷键扩展 - 夜间模式注入的数据槽keymap.actions动作、keymap.presets预设键位动作行为翻转getComponentSettings(darkMode).enabled即时切换夜间模式默认键位空需用户在快捷键设置中自行绑定依赖组件快捷键扩展keymap、夜间模式darkMode一句话总结keymap-dark-mode插件通过 Bilibili-Evolved 的数据槽扩展机制把夜间模式组件变成快捷键动作列表中的一等公民让你摆脱每次都要打开设置面板的麻烦实现一键切换明暗主题。掌握它的实现也就掌握了该项目用插件扩展组件能力的核心方法论。赞分享前端音视频【免费下载链接】Bilibili-Evolved强大的哔哩哔哩增强脚本项目地址https://gitcode.com/gh_mirrors/bi/Bilibili-Evolved点击查看免费下载相关推荐Bilibili-Evolved 快捷键扩展插件实战「开关弹幕列表」动作的实现与按键体系解析Bilibili Evolved 快捷键扩展插件实战「开关弹幕列表」动作的实现与按键体系解析 本文以 Bilibili Evolved 仓库中 registr前端音视频Bilibili-Evolved 快捷键扩展keymap完整指南按键语法、预设切换与自定义动作开发Bilibili Evolved 快捷键扩展keymap完整指南按键语法、预设切换与自定义动作开发 Bilibili Evolved 的「快捷键扩展」组前端音视频Bilibili-Evolved 快捷键扩展keymap完全指南三套按键体系、自定义语法与插件扩展 APIBilibili Evolved 快捷键扩展keymap完全指南三套按键体系、自定义语法与插件扩展 API 导读 「快捷键扩展keymap」是 Bil前端音视频创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 前端音视频【免费下载链接】Bilibili-Evolved强大的哔哩哔哩增强脚本项目地址https://gitcode.com/gh_mirrors/bi/Bilibili-Evolved点击查看免费下载导读本文围绕 Bilibili-Evolved 仓库中的快捷键扩展插件keymap-dark-mode位于 registry/lib/plugins/utils/keymap-dark-mode展开它以一行描述定义了核心功能——在快捷键的动作列表里添加一个夜间模式可以通过快捷键切换夜间模式。文章将完整解析该插件的源码实现并顺藤摸瓜深入讲解其背后的两套关键机制keymap快捷键扩展组件的动作注册与键位预设体系以及 darkMode夜间模式组件的开关切换原理。读完本文你不仅能复现并配置这个快捷键动作还能理解 Bilibili-Evolved 插件如何通过addData/registerAndGetData数据槽向既有组件注入扩展能力从而照葫芦画瓢编写属于自己的快捷键动作。一、插件概览做什么、依赖什么keymap-dark-mode是一个标准的 Bilibili-Evolved 插件Plugin官方描述非常简短在快捷键的动作列表里添加一个 夜间模式, 可以通过快捷键切换夜间模式拆解这句话可以提炼出它的三个职责向快捷键动作列表注入新动作在快捷键扩展keymap组件的动作列表里新增一个名为夜间模式的动作动作执行切换逻辑该动作被触发时切换夜间模式组件的启用状态不默认占用按键为这个动作预留一个空的默认键位由用户自行绑定。它依赖两个既有的核心组件快捷键扩展keymap负责键盘事件监听、键位解析与动作调度位于 registry/lib/components/utils/keymap夜间模式darkMode负责页面.dark样式的应用与移除位于 registry/lib/components/style/dark-mode。插件本身只做接线工作把按键和切换夜间模式这两件事连接起来。二、插件源码逐段解析插件全部源码仅一个文件 registry/lib/plugins/utils/keymap-dark-mode/index.ts完整内容如下import { PluginMetadata } from /plugins/plugin import type { KeyBindingAction } from ../../../components/utils/keymap/bindings export const plugin: PluginMetadata { name: keymap.actions.darkMode, displayName: 快捷键扩展 - 夜间模式, setup: ({ addData, coreApis: { settings } }) { addData(keymap.actions, (actions: Recordstring, KeyBindingAction) { actions.darkMode { displayName: 夜间模式, run: () { const darkMode settings.getComponentSettings(darkMode) darkMode.enabled !darkMode.enabled }, } }) addData(keymap.presets, (presetBase: Recordstring, string) { presetBase.darkMode }) }, }下面逐部分讲解。2.1 插件元数据PluginMetadataname: keymap.actions.darkMode, displayName: 快捷键扩展 - 夜间模式,name是插件的唯一标识。这里的命名keymap.actions.darkMode直接体现了它的挂载点keymap组件下的actions数据槽动作名为darkModedisplayName是展示给用户的名称快捷键扩展 - 夜间模式出现在设置面板的插件列表中。2.2 向动作数据槽注入新动作setup: ({ addData, coreApis: { settings } }) { addData(keymap.actions, (actions: Recordstring, KeyBindingAction) { actions.darkMode { ... } }) }setup是插件被加载时的入口参数解构出addData与coreApis.settingsaddData是 Bilibili-Evolved 插件体系提供的数据注入 API用于向全局数据槽追加/修改数据这里向名为keymap.actions的数据槽注册了一个动作对象键名为darkModeKeyBindingAction类型定义在 registry/lib/components/utils/keymap/bindings.ts是快捷键动作的统一接口。注入的动作对象结构{ displayName: 夜间模式, run: () { const darkMode settings.getComponentSettings(darkMode) darkMode.enabled !darkMode.enabled }, }displayName: 夜间模式动作在设置界面中显示的名称用户靠它识别该动作run动作被触发时执行的回调。它先通过settings.getComponentSettings(darkMode)拿到夜间模式组件的设置对象再把enabled取反——也就是说每触发一次夜间模式就在开启/关闭之间切换一次。注意这里特意没有设置prevent、ignoreTyping、ignoreFocus等可选字段说明它使用全部默认行为详见下文 3.2 节的接口字段说明。2.3 预留空键位addData(keymap.presets, (presetBase: Recordstring, string) { presetBase.darkMode })第二个addData向keymap.presets数据槽的基础预设presetBase中追加了一项darkMode: 。键位字符串为空字符串的含义是该动作默认不绑定任何按键。这样设计的好处是插件不会与用户已有的自定义键位冲突用户需要主动在快捷键设置中为该动作指定按键后才可使用详见第五节。三、底层机制一keymap 快捷键动作扩展体系理解这个插件首先要理解 keymap 组件如何组织动作与键位。3.1 动作数据槽 keymap.actionskeymap 组件在内置动作列表builtInActions之上通过 registerAndGetData 注册了keymap.actions数据槽见 registry/lib/components/utils/keymap/actions.tsexport const [actions] registerAndGetData(keymap.actions, builtInActions)内置动作包括fullscreen全屏、webFullscreen网页全屏、wideScreen宽屏、volumeUp增加音量、mute静音、coin投币、favorite收藏、pause暂停/播放、like点赞、danmaku弹幕开关、sendComment发送评论以及seekBegin、seekProgress10seekProgress90按百分比跳转等。关键点registerAndGetData返回的actions对象是可变的引用。插件通过addData(keymap.actions, fn)拿到同一个对象并追加darkMode动作因此 keymap 组件在解析键位时能立刻看到这个新增动作。这就是插件扩展内置组件能力的典型模式——数据槽机制让插件无需修改 keymap 源码即可为其增加动作。3.2 KeyBindingAction 接口字段动作对象必须满足 KeyBindingAction 接口字段类型说明displayNamestring动作的展示名称出现在设置界面run(context) unknown动作执行的回调返回非空值表示执行成功会阻止浏览器默认行为prevent?boolean是否总是阻止事件默认行为缺省时仅在run返回成功时阻止ignoreTyping?boolean默认在打字输入时忽略快捷键设为false可在输入时也允许触发ignoreFocus?boolean默认聚焦在可聚焦元素时不忽略设为true可在聚焦时禁止触发从 bindings.ts 的键盘事件处理逻辑 可以看到每次keydown事件都会经历启用状态检查 → 打字状态检查 → 焦点元素检查 → 修饰键shift/alt/ctrl/meta匹配 → 主键匹配全部通过后才执行run。因此一个仅含displayName与run的动作如本插件会采用打字时忽略、聚焦可聚焦元素时忽略的默认行为这是最安全的选择——不会在你输入弹幕或评论时误触发夜间模式。3.3 键位预设数据槽 keymap.presets与动作类似keymap 组件还注册了keymap.presets数据槽见 registry/lib/components/utils/keymap/presets.tsexport const [, presets] registerAndGetData(keymap.presets, presetBase, builtInPresets)presetBase基础预设为所有动作提供了默认键位keymap 组件在 index.ts 的 parseBindings 中会把基础预设 所选预设 用户自定义键位三层合并后再绑定。基础预设的部分默认键位如下完整定义见 presets.ts动作默认键位动作默认键位fullscreenfmutemwebFullscreenwdanmakudwideScreentcoincvolumeUparrowUpfavoritesvolumeDownarrowDownlikelpausespaceseekBegin0longJumpForwardjseekProgress10~901~9longJumpBackwardshift jsendCommentctrl enter插件通过第二个addData向这个presetBase追加darkMode: 即夜间模式动作的默认键位为空。builtInPresets还提供了多套一键切换的键位方案Default、YouTube、HTML5Player、PotPlayer分别模拟主流播放器的快捷键习惯。用户可在快捷键扩展的预设选项中选择。四、底层机制二夜间模式组件的开关原理run里切换的enabled字段是 Bilibili-Evolved 所有组件设置的基础结构。src/core/settings/types.ts 中定义export interface ComponentSettingsO extends UnknownOptions UnknownOptions { /** 是否启用此组件 */ enabled: boolean /** 组件选项 */ options: O Recordstring, unknown }enabled为true时组件处于启用状态。因此darkMode.enabled !darkMode.enabled本质上是反转夜间模式组件的启用开关——这与用户在设置面板中手动拨动夜间模式开关是同一个动作只不过触发方式从鼠标点击换成了快捷键。4.1 启用/停用时发生了什么夜间模式组件 registry/lib/components/style/dark-mode/index.ts 的核心逻辑启用add向document.body添加darkclass向localStorage写入pbp_theme_v4 b把页面meta nametheme-color改为深色#111meta namecolor-scheme改为dark停用remove移除body上的darkclass并还原上述两个 meta 标签切换过程带有 200ms 的延迟changeDelay保证样式过渡自然。.darkclass 配合 dark-mode.scss、dark-mode.important.scssimportant模式以及dark-shadow-dom.scssShadow DOM 样式等大量切片样式将哔哩哔哩各页面元素渲染为暗色主题。另外夜间模式组件还内置了一个提前注入插件见 dark-mode/index.ts 的 plugin 字段在页面内容加载完成时若检测到组件处于启用状态就提前给body添加darkclass以减少首屏白屏/颜色抖动问题。这意味着通过快捷键瞬间开启夜间模式后新加载的页面区域也会沿用暗色样式。4.2 组件未启用时的边界行为从源码逻辑看run只是无条件翻转enabled布尔值不判断组件当前是否加载。因此若夜间模式组件已启用按下快捷键即关闭夜间模式若未启用按下快捷键会先将其enabled置为true随后设置系统触发组件加载与样式应用即一键打开夜间模式。也就是说这个快捷键动作与设置面板里的开关状态始终保持同步、可双向切换。这也解释了为什么使用该插件前需要先安装夜间模式组件——动作操作的正是这个组件的设置对象。五、安装与配置把夜间模式绑到你的按键上该插件随仓库源码分发位于registry/lib/plugins/utils/keymap-dark-mode可通过 Bilibili-Evolved 的在线组件库/插件管理入口安装。完整使用流程如下启用基础组件在设置面板中启用**快捷键扩展keymap**组件启用**夜间模式darkMode**组件若你希望快捷键能直接打开它。安装并启用本插件在设置面板的插件管理中启用快捷键扩展 - 夜间模式。为动作绑定按键打开快捷键扩展的设置界面keymap 组件的自定义键位选项找到动作夜间模式为其指定一个你喜欢的键位组合例如n、d或ctrl shift d。由于插件注入的默认键位为空字符串这一步是必需的。使用在任何页面按下已绑定的组合键即可即时切换夜间模式再次按下则恢复浅色模式。5.1 相关配置项keymap 组件还提供若干影响使用体验的选项定义于 registry/lib/components/utils/keymap/index.ts选项默认值说明longJumpSeconds85长跳跃前进/后退的秒数volumeStep10音量调整幅度1~100showSeekShortcutstrue是否显示跳转快捷键提示customKeyBindings{}自定义键位映射隐藏选项presetDefault键位预设方案自定义键位采用空格分隔的按键序列语法见 index.ts 的 parseBindings支持shift、ctrl、alt、meta修饰键以及space、arrowUp、enter等按键名。六、扩展思路仿照本插件编写更多快捷键动作keymap-dark-mode是理解 Bilibili-Evolved 插件扩展机制的最佳范例之一。它的整个实现只做两件事向keymap.actions加动作、向keymap.presets加空键位。基于同样的模式你可以轻松扩展出更多通过快捷键控制组件开关的动作例如addData(keymap.actions, (actions: Recordstring, KeyBindingAction) { actions.toggleMyComponent { displayName: 切换我的组件, run: () { const settings getComponentSettings(myComponent) settings.enabled !settings.enabled }, } }) addData(keymap.presets, (presetBase: Recordstring, string) { presetBase.toggleMyComponent // 由用户自行绑定 })从源码结构看只要动作名不与内置动作冲突避免覆盖fullscreen、pause等且目标组件存在这套动作 键位的双数据槽注入模式即可通用。更进一步你还可以利用KeyBindingActionContext中提供的clickElement、changeVideoTime、showTip等工具见 actions.ts编写面向播放器控制、页面点击等更复杂的快捷键动作并在run返回非空值以阻止浏览器默认行为。七、小结要素内容插件位置registry/lib/plugins/utils/keymap-dark-mode插件名称keymap.actions.darkMode快捷键扩展 - 夜间模式注入的数据槽keymap.actions动作、keymap.presets预设键位动作行为翻转getComponentSettings(darkMode).enabled即时切换夜间模式默认键位空需用户在快捷键设置中自行绑定依赖组件快捷键扩展keymap、夜间模式darkMode一句话总结keymap-dark-mode插件通过 Bilibili-Evolved 的数据槽扩展机制把夜间模式组件变成快捷键动作列表中的一等公民让你摆脱每次都要打开设置面板的麻烦实现一键切换明暗主题。掌握它的实现也就掌握了该项目用插件扩展组件能力的核心方法论。赞分享前端音视频【免费下载链接】Bilibili-Evolved强大的哔哩哔哩增强脚本项目地址https://gitcode.com/gh_mirrors/bi/Bilibili-Evolved点击查看免费下载相关推荐Bilibili-Evolved 快捷键扩展插件实战「开关弹幕列表」动作的实现与按键体系解析Bilibili Evolved 快捷键扩展插件实战「开关弹幕列表」动作的实现与按键体系解析 本文以 Bilibili Evolved 仓库中 registr前端音视频Bilibili-Evolved 快捷键扩展keymap完整指南按键语法、预设切换与自定义动作开发Bilibili Evolved 快捷键扩展keymap完整指南按键语法、预设切换与自定义动作开发 Bilibili Evolved 的「快捷键扩展」组前端音视频Bilibili-Evolved 快捷键扩展keymap完全指南三套按键体系、自定义语法与插件扩展 APIBilibili Evolved 快捷键扩展keymap完全指南三套按键体系、自定义语法与插件扩展 API 导读 「快捷键扩展keymap」是 Bil前端音视频创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考