Fokus浏览器扩展实战指南：Chrome与Firefox双版本安装、使用与体验增强
【免费下载链接】Fokus项目地址: https://gitcode.com/gh_mirrors/fo/Fokus
Fokus 是一款免费的浏览器扩展（同时提供 Chrome 与 Firefox 两个版本），只需选中网页上的任意文字，页面其余部分就会淡出为半透明黑色，让你瞬间聚焦于选中的内容。整个库仅约 3KB、零依赖，还能让开发者一行脚本集成到自己的网站。本文带来完整的安装、使用与体验增强指南。
一、Fokus 是什么？为什么值得装？
日常浏览网页时，你有没有被这些问题困扰：
- 长文章里侧边栏、广告、推荐位不停"抢注意力"
- 想给别人讲解某段文字，投影屏幕上信息太杂
- 摘抄金句前，想先看清上下文的完整排版
Fokus 的解法非常直接：你选中什么，什么就保持原样；其余一切，全部变暗。选中内容周围还会保留 5px 的呼吸边距，淡出/浮现都带有平滑动画，阅读体验相当优雅。
| 特性 | 说明 |
|---|---|
| 体积 | 约 3KB，加载几乎无感 |
| 依赖 | 零依赖，单文件即可运行 |
| 实现原理 | 用<canvas>绘制覆盖全屏的半透明遮罩并"挖出"选中区域 |
| 适用场景 | 长文阅读、资料研读、演讲讲解、摘抄整理 |
| 浏览器支持 | 主流现代浏览器（不支持 IE 与纯触屏设备） |
| 授权协议 | MIT，可放心商用 |
小提示：Fokus 既是一个 JavaScript 文本高亮库，也是 Chrome / Firefox 双端扩展，普通用户装扩展即可，开发者可直接引用脚本。
二、Chrome 版 Fokus 扩展：一键安装步骤
- 打开 Chrome 浏览器扩展商店，在搜索框输入
Fokus - 找到由原作者发布的 Fokus 扩展，点击"添加至 Chrome"
- 安装完成后，扩展图标会出现在地址栏右侧
- 建议右键图标选择"固定"，方便随时查看状态
安装全程无需注册、无需登录、无需付费，30 秒即可完成。
三、Firefox 版 Fokus 扩展：最快配置方法
Firefox 用户同样拥有官方版：
- 打开 Firefox 附加组件商店，搜索
Fokus - 选择由社区开发者发布的 Fokus 扩展，点击"添加到 Firefox"
- 在弹出的确认框中点击"添加"，扩展即刻生效
两个版本功能一致，都是选中即聚焦、取消选中即恢复，可以按你日常主力浏览器二选一安装。
四、Fokus 使用方法：3 步开启专注模式
第 1 步：打开任意一篇长文（新闻、论文、博客均可）。
第 2 步：用鼠标按住并拖拽，划选你想阅读的那段文字。
第 3 步：松开鼠标，整页会瞬间淡出为深色，只有你选中的区域保持明亮；重新点击页面其他位置取消选中，遮罩会自动淡出，页面恢复原样。
几个容易忽略的细节（都写进了 js/fokus.js 的核心逻辑中）：
- 🎯动画跟随：选中区域会平滑"动画到位"，切换选区时遮罩无缝移动，不闪烁
- 📜滚动不丢焦：聚焦状态下滚动页面，遮罩实时更新，选中位置始终精确
- ⌨️键盘也支持：用 Shift + 方向键做键盘选区时同样生效
- 🚫右键不触发：避免菜单操作误触遮罩
- 🔲窗口自适应：调整浏览器窗口大小时遮罩自动重绘
- 📏忽略无效元素：零宽高元素和
<br>节点不会被误选
五、4 个高频实战场景
- 沉浸式读长文：划选正文主体，侧边栏、评论区、推荐位全部隐去，专注力拉满
- 论文/文档研读：只保留公式段落或关键图表，背景干扰归零
- 演讲与教学：投屏时选中要讲解的段落，观众的视线会被"强制引导"
- 摘抄前预览：先看清一段话在原文中的完整上下文，再决定要不要引用
六、开发者进阶：把文本聚焦效果集成到你的网站
如果你的网站也需要"选中即高亮聚焦"的交互，Fokus 库开箱即用：
- 核心脚本：js/fokus.min.js（压缩版，生产环境直接用）
- 完整源码：js/fokus.js（可读性好，适合二次改造）
- 演示页面：index.html，可在本地打开直接体验效果
- 演示样式：css/demo.css
三个最常改的参数集中在 js/fokus.js 文件顶部：
| 参数 | 默认值 | 作用 |
|---|---|---|
PADDING | 5 | 选区四周的留白像素 |
OPACITY | 0.75 | 黑色遮罩的不透明度 |
MODIFIER | null | 需按住哪个修饰键（Ctrl/Shift 等）才触发 |
比如把MODIFIER改为'ctrl'，就能让 Fokus 变成"按住 Ctrl 划词才聚焦"，避免影响用户正常复制。
七、常见问题（FAQ）
Q：手机上能用吗？A：Fokus 基于鼠标划词与 Canvas 遮罩，支持大多数现代桌面浏览器，但不支持 IE 与触屏设备，手机浏览器上不会生效。
Q：为什么我划词后遮罩没出现？A：检查是否选中了零宽高元素或<br>（会被自动忽略），或页面已引入过两次脚本（源码中有重复初始化保护，见 js/fokus.js）。
Q：会影响页面性能吗？A：几乎不会。遮罩通过requestAnimationFrame按需重绘，无选区时画布直接从 DOM 移除，3KB 脚本对首屏加载无感。
八、版本更新记录
| 版本 | 更新内容 |
|---|---|
| 0.5（当前） | 选区动画更快；支持偏移根元素；滚动时选区立即更新 |
| 0.4 | 右键点击不再触发选中 |
| 0.3 | 忽略零宽高元素与<br>节点 |
| 0.2 | 清除区域动画过渡；支持键盘选中 |
| 0.1 | 首次发布 |
写在最后
Fokus 用不到 3KB 的代码解决了一个真实存在的小痛点：让注意力回到你真正想读的地方。普通用户装上 Chrome / Firefox 扩展即可享受；开发者则可以从 README.md 与 LICENSE（MIT 协议）出发，把这套文本聚焦能力快速搬进自己的产品。快去划选第一段文字，体验"一键聚焦"的清爽感吧 ✨
【免费下载链接】Fokus项目地址: https://gitcode.com/gh_mirrors/fo/Fokus
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
