Fokus浏览器扩展实战指南Chrome与Firefox双版本安装、使用与体验增强【免费下载链接】Fokus项目地址: https://gitcode.com/gh_mirrors/fo/FokusFokus 是一款免费的浏览器扩展同时提供 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 文件顶部参数默认值作用PADDING5选区四周的留白像素OPACITY0.75黑色遮罩的不透明度MODIFIERnull需按住哪个修饰键Ctrl/Shift 等才触发比如把MODIFIER改为ctrl就能让 Fokus 变成按住 Ctrl 划词才聚焦避免影响用户正常复制。七、常见问题FAQQ手机上能用吗AFokus 基于鼠标划词与 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 与 LICENSEMIT 协议出发把这套文本聚焦能力快速搬进自己的产品。快去划选第一段文字体验一键聚焦的清爽感吧 ✨【免费下载链接】Fokus项目地址: https://gitcode.com/gh_mirrors/fo/Fokus创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考