一个简单的自用浏览器小插件
前言:为什么造这个轮子?
作为一名重度浏览器用户,我每天需要在不同的搜索引擎(Google, Baidu, Bing)之间切换。这大部分要归功于bing rewards计划,我也甚至在我的clash规则中进行了单独设置。不过,有时候国内bing的确体验很烂,而浏览器自身的切换搜索引擎又很繁琐。
我想要的是一种纯粹、无感的体验:
它应该是一个悬浮的胶囊,平时半透明,不打扰阅读。
它必须支持跨页面位置同步——我在这个页面把它拖顺手的位置,下一个页面它还得在那里。
零隐私泄露,无需复杂的权限。
最重要的是,为了上网的效率,它一定要能够拖拽进行搜索!
于是,我借助ai工具和一些简单的前端知识,基于 Manifest V3 开发了 Floating Drag Search。
它是做什么的?
简单来说,它在你的网页上悬浮一个极简的“搜索胶囊”。
极简交互:选中网页上的任何文字 -> 拖拽到悬浮胶囊中 -> 松手即搜。
多引擎切换:鼠标悬停在胶囊上,即可在 Google、Baidu、Bing 之间快速切换默认引擎。
位置记忆(核心亮点):你可以把这个悬浮球拖拽到屏幕的任何角落(比如左下角或右上角),插件会利用 Chrome Storage API 记住这个坐标。打开新网页时,它依然会在你最熟悉的地方等你。
技术实现 (Under the Hood)
这个插件非常轻量,完全基于原生 JavaScript (Vanilla JS) 和 Chrome Manifest V3 标准开发。
Manifest V3:符合 Chrome 最新的安全规范,无后台常驻进程,省电且安全。
Shadow DOM (概念):为了不影响网页原本的样式,悬浮框的层级被设定为极高 (z-index: 2147483647)。
Chrome Storage:利用 storage.local 实现了毫秒级的坐标读写,保证了“位置记忆”的丝滑体验。
如何安装与使用?
目前插件已在 GitHub 开源,您可以直接下载体验:
📥 GitHub 传送门: https://github.com/SherlockChiang/Floating-Drag-Search
由于还在快速迭代中,暂未上架 Web Store,你可以通过“开发者模式”安装:
Clone 项目到本地。
打开 chrome://extensions/ 开启开发者模式。
点击“加载已解压的扩展程序”并选择文件夹即可。
参与贡献
这是一个开源项目,目前功能已经完备,但还有很多想象空间(比如自定义搜索引擎 URL、暗黑模式适配等)。
如果你也对浏览器插件开发感兴趣,欢迎 Star 或提交 PR!让我们一起把它打磨得更好。