基于 Manifest V3，开源，即装即用
每次截图或录屏前，你是不是也这样：
- 打开 F12，手动给 DOM 加
style="filter: blur(10px)" - 或者截图后拖到 PS 里涂涂抹抹或者剪辑软件里面手动打码
- 再或者……干脆把敏感信息截进去，祈祷没人放大看
太麻烦了。于是我写了个小工具 MosaicElem —— 在网页上悬停点选，一键给任意元素打码。
在线体验： qdabuliuq.github.io/mosaic-elem…
它能做什么？
1. 点选即打码
开启选择模式后，鼠标移到元素上会自动高亮边框，单击即可施加遮挡。再次点击已打码区域可取消。按 Esc 退出选择。
支持多种遮挡样式：
- 高斯模糊 —— 最常用，保留轮廓但看不清内容
- 像素格马赛克 —— 经典方块效果
- 纯色块 —— 彻底遮盖
- 点阵/网点 —— 类似漫画印刷效果
- 斜条纹 —— 醒目的"此处已隐藏"提示
2. 弹窗一键开关
点击扩展图标打开弹窗，选择样式后一键开启/关闭点选模式。支持自定义快捷键（默认 Ctrl+Shift+1 / Cmd+Shift+1）。
3. 样式记忆与多标签同步
选择的遮挡样式会自动保存，切换标签页后无需重新设置。
技术实现上的一些细节
为什么不用 ::after 伪元素？
最初的想法是给目标元素加 ::after 伪元素做遮罩，但很快发现两个问题：
- Tailwind 等框架的冲突：现代 CSS 框架大量使用
::after（如after:bg-gray-200），伪元素冲突会导致样式异常。 - 表单元素的限制：
<textarea>、<select>、文本类<input>属于替换元素，无法使用伪元素。
解决方案：普通元素优先用子节点 em-mosaic-layer 打码（存在时关闭扩展自带的 ::after，减少与 Tailwind after: 等冲突）；textarea / select / 文本类 input 因 replaced 元素无法用可靠伪元素，改用 position: fixed 浮动层对齐打码。
国际化（i18n）
文案统一抽离到 _locales/<语言>/messages.json，通过 chrome.i18n.getMessage() 读取。目前支持英文和简体中文，默认语言在 manifest.json 中配置。
安装方式
方式一：源码加载（开发者）
- 下载插件 github.com/QdabuliuQ/m…
- 打开
chrome://extensions（或edge://extensions） - 开启开发者模式
- 点击加载已解压的扩展程序，选择项目目录
注意：安装或更新后，请刷新已打开的标签页，以便内容脚本重新注入。
适用场景
表格
| 场景 | 用法 |
|---|---|
| 技术博客配图 | 给代码中的 API Key、数据库连接串打码 |
| 产品演示录屏 | 隐藏用户真实数据、内部后台信息 |
| Bug 反馈截图 | 遮盖个人隐私字段，保留错误信息 |
| 设计稿评审 | 对未公开内容做临时隐藏处理 |
项目信息
- 技术栈：原生 JavaScript、Chrome Extension Manifest V3
- 开源地址：GitHub - qdabuliuq/mosaic-elem
- 在线预览：qdabuliuq.github.io/mosaic-elem…
- 许可证：MIT（可自行补充 LICENSE 文件）
最后
这个小工具源于我自己写技术博客时的真实痛点 —— 每次截图都要手动处理敏感信息。如果你也有类似需求，欢迎试用。
有想法或 Bug 反馈，直接在 GitHub 提 Issue，也欢迎 PR。如果对你有帮助，给个 Star 就更好啦 ⭐
