一个简单的自用浏览器小插件

前言:为什么造这个轮子?

作为一名重度浏览器用户,我每天需要在不同的搜索引擎(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!让我们一起把它打磨得更好。

最后修改:2026 年 01 月 06 日
请我喝杯可乐?