前阵子工作需要做一份英语展示的 PPT，除了要翻译巨量的文字资料，还要处理里面夹杂的图片、动画，让人头大。而我们的软件 DEMO 演示只有中文版，如何将动态的网页快速截取、录制成英文材料成了最大的难题。
好在我经常倒腾 WordPress，熟悉浏览器开发者工具，知道可以按 Ctrl + Shift + C 打开元素选择器，手动修改网页文字，但即便如此效率依然很慢。但无奈，我也只能这样，一口气肝了十几个小时才搞定，老腰都快断了😭。
过了一段时间，我才发现可以直接往浏览器控制台里写脚本，直接实现网页文字的编辑功能。此后我又把它封装成了油猴脚本，绑定了快捷键，现如今已测试稳定了，分享给大家，希望能用的上。
🐵 油猴（Tampermonkey）
不会有人不知道油猴（Tampermonkey）吧…？Tampermonkey 是一款功能强大的浏览器扩展，支持在网页上运行自定义 JavaScript 脚本。它的作用是让用户根据自己的需求“定制”网页行为，比如屏蔽广告、自动填表、批量下载、修改界面元素等，极大地提升了网页使用效率与自由度。
对开发者和进阶用户来说，Tampermonkey 更像是一个轻量级的网页自动化平台。只要写好脚本，就能实现很多原本需要手动完成的操作。而且它支持跨网站通配、自定义快捷键、权限控制等功能，用起来既灵活又强大。
📜 一键开关网页编辑脚本
本文 Kevin 分享的这个油猴（Tampermonkey）脚本的核心功能 & 安装方法如下：
- 脚本主要功能
- 关闭编辑后，自动清理事件监听器与状态
- 页面上的段落、标题、列表、表格等常见元素都可以被点击编辑
- 自动移除默认的点击边框样式
- 脚本安装简介
- 浏览器安装 Tampermonkey 扩展
- 点击扩展-新建脚本，把以下代码粘贴进去保存即可：
// ==UserScript==
// @name 可编辑文字快捷启用与关闭
// @namespace https://www.shephe.com/
// @version 1.1
// @description Ctrl+Shift+E 开关页面文字编辑功能，点击元素后可编辑文字，再次按关闭，避免边框和全选
// @match *://*/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
let isEnabled = false;
let cleanupFns = [];
document.addEventListener('keydown', function(e) {
if (e.ctrlKey && e.shiftKey && e.key.toLowerCase() === 'e') {
isEnabled = !isEnabled;
if (isEnabled) {
enableEditing();
console.log('[已启用] 可编辑文字');
} else {
disableEditing();
console.log('[已关闭] 可编辑文字');
}
}
});
function enableEditing() {
const elements = document.querySelectorAll('p, span, div, a, h1, h2, h3, h4, h5, h6, li, td');
elements.forEach(el => {
el.style.userSelect = 'text';
el.style.outline = 'none'; // 避免编辑边框
const clickHandler = (e) => {
e.preventDefault();
e.stopPropagation();
if (el.isContentEditable) return;
el.contentEditable = true;
el.focus();
// ❌ 不再自动全选
};
const blurHandler = () => {
if (isEnabled) return; // 若处于启用状态，失焦不取消编辑
el.contentEditable = false;
};
el.addEventListener('click', clickHandler, true);
el.addEventListener('blur', blurHandler);
// 回车不再取消编辑状态（移除原逻辑）
// 保存清理函数
cleanupFns.push(() => {
el.removeEventListener('click', clickHandler, true);
el.removeEventListener('blur', blurHandler);
el.contentEditable = false;
});
});
}
function disableEditing() {
// 调用所有解绑函数
cleanupFns.forEach(fn => fn());
cleanupFns = [];
}
})();🧪 网页编辑脚本使用示例
这个脚本特别适合在多个场景中使用，比如页面文案的预览与校对、教学演示中临时修改内容、Mock 数据展示，或者在交互设计中快速替换文本进行视觉模拟，都能大大提升效率，减少繁琐操作。
实际使用时打开任意网页，按下 Ctrl + Shift + E：
- 页面中的文字内容立即可编辑；
- 点击任意段落或标题即可修改；
- 不需要开发者工具；
- 再按一次快捷键即可关闭，状态自动恢复。
🔚 写在最后
这段脚本其实还可以进一步限定作用域，比如只在特定域名启用，以减少资源消耗——虽然目前影响也很小。正是这些灵活的小工具，让日常工作变得更高效也更有趣。你有啥有用有趣的脚本分享没？😉
尼玛，这个功能太实用了