微信阅读提效插件
🧠 背景
在微信 PC 版阅读文章、文档或文件时，我喜欢做批注与高亮。但每次切换高亮类型、修改颜色，都要频繁移动鼠标点击，操作非常不流畅。
于是，我写了一段 自定义 JavaScript 脚本，让我可以直接通过快捷键进行这些操作 —— 快速、连续、无打断。
🎯 功能介绍
我们希望实现以下功能：
- 用户按下自定义快捷键（如
z、x、c、a、s等）时 - 自动查找页面上指定 class 的元素
- 并触发该元素的点击操作
例如：
- 按下
z，自动点击.toolbarItem.underlineBg - 按下
a，自动点击.reader_toolbar_color_container .reader_toolbar_color_item:nth-child(1)
所有行为无需鼠标，提升效率和连贯性。
此外，还新增了两个增强功能：
✅ Hover 自动点击（可选）
- 鼠标悬停在某个映射元素上时，可在指定延迟后自动点击
- 支持设置悬停延迟时间，或立即点击
- 可通过变量开关是否启用该功能
🧩 实现方式
我们将这段功能封装成一段浏览器书签代码（bookmark），点击书签后自动在当前页面挂载监听器。
✅ 快捷键绑定脚本如下：
javascript: (function () {
const ENABLE_HOVER_CLICK = true;
const HOVER_DELAY_MS = 100;
const keyMap = {
z: ".toolbarItem.underlineBg",
x: ".toolbarItem.underlineHandWrite",
c: ".toolbarItem.underlineStraight",
v: ".toolbarItem.removeUnderline",
b: ".toolbarItem.wr_copy",
a: ".reader_toolbar_color_container .reader_toolbar_color_item:nth-child(1)",
s: ".reader_toolbar_color_container .reader_toolbar_color_item:nth-child(2)",
d: ".reader_toolbar_color_container .reader_toolbar_color_item:nth-child(3)",
f: ".reader_toolbar_color_container .reader_toolbar_color_item:nth-child(4)",
g: ".reader_toolbar_color_container .reader_toolbar_color_item:nth-child(5)",
};
const hoverTimers = new Map();
function getPressedKeyCombo(e) {
const keys = [];
if (e.ctrlKey) keys.push("ctrl");
if (e.altKey) keys.push("alt");
if (e.shiftKey) keys.push("shift");
if (e.metaKey) keys.push("meta");
keys.push(e.key.toLowerCase());
return keys.join("+");
}
document.addEventListener("keydown", function (e) {
const pressed = getPressedKeyCombo(e);
const keyMatched = Object.keys(keyMap).find((k) => k === pressed);
if (keyMatched) {
const selector = keyMap[keyMatched];
const el = document.querySelector(selector);
if (el) {
el.click();
console.log(`⌨%EF%B8%8F 快捷键 ${pressed} → 点击 ${selector}`);
} else {
console.warn(`❌ 快捷键目标未找到: ${selector}`);
}
e.preventDefault();
}
});
function bindHoverClick(selector) {
if (!ENABLE_HOVER_CLICK) return;
const elements = document.querySelectorAll(selector);
elements.forEach((el) => {
if (el.dataset._hoverBind) return;
el.dataset._hoverBind = "true";
el.addEventListener("mouseover", () => {
console.log(`🟡 Hover 中，准备点击: ${selector}`);
if (HOVER_DELAY_MS === 0) {
el.click();
console.log(`🟢 已立即点击 (Hover): ${selector}`);
return;
}
const timer = setTimeout(() => {
el.click();
console.log(`🟢 已点击 (Hover): ${selector}`);
hoverTimers.delete(el);
}, HOVER_DELAY_MS);
hoverTimers.set(el, timer);
});
el.addEventListener("mouseout", () => {
const timer = hoverTimers.get(el);
if (timer) {
clearTimeout(timer);
hoverTimers.delete(el);
console.log(`🔵 Hover 移出，取消点击: ${selector}`);
}
});
});
}
function bindAll() {
Object.values(keyMap).forEach((selector) => bindHoverClick(selector));
}
bindAll();
if (ENABLE_HOVER_CLICK) {
const observer = new MutationObserver(() => {
bindAll();
});
observer.observe(document.body, { childList: true, subtree: true });
}
console.log("✅ 快捷键功能已启动...");
if (ENABLE_HOVER_CLICK) {
console.log("🟢 悬停自动点击已启用");
} else {
console.log("🛑 悬停自动点击未启用");
}
})();🔧 使用方法
新建书签：
- 打开浏览器书签管理器（Chrome 可按
Cmd+Shift+B显示书签栏） - 创建新书签，名称任意
- 将上述
javascript:(function(){...})();粘贴到“网址/URL”一栏中
- 打开浏览器书签管理器（Chrome 可按
访问目标页面，点击你创建的书签
按下你配置的快捷键，即可自动点击目标元素！
（可选）将
ENABLE_HOVER_CLICK设置为false，关闭悬停自动触发
📌 示例说明
const keyMap = {
z: '.toolbarItem.underlineBg',
a: '.reader_toolbar_color_container .reader_toolbar_color_item:nth-child(1)',
};z→ 点击.toolbarItem.underlineBg（背景高亮）a→ 点击颜色选项第1个按钮
你可以根据自己的偏好修改 keyMap 映射。
🛠️ 控制说明（新功能）
| 配置项 | 说明 |
|---|---|
ENABLE_HOVER_CLICK | 是否开启 hover 自动点击功能 |
HOVER_DELAY_MS | 悬停多久后触发点击，单位毫秒，0 表示立即 |
计划
如果后续功能复杂了，可能会发布到油猴、 chrome 扩展。