周末，写了一个 Chrome 插件

周一要交物理卷子，数学的错题本还空着两页，但在这个周日下午，我花了三个小时写了一个 Chrome 插件。

不是因为作业写完了——正相反——而是因为我真的需要它。

起因

事情是这样的。我在网上看教程学 React 的时候，总是会打开几十个 tab。教程一个 tab、文档一个 tab、Stack Overflow 三五个 tab、还要开个 tab 看效果。一上午下来，浏览器 tab 栏长得像梳子。

每次想找回之前看过的那个页面，就要一个个翻。很烦。

于是我想：为什么不自己写个东西，能把所有 tab 整理到侧边栏里？

Chrome 插件开发比我想象中简单。Manifest V3 的文档其实写得不错，就是有些 API 的权限要求藏得很深，你得踩了坑才知道。

最基础的部分，声明权限和背景脚本。我用到了 tabs 和 sidePanel 两个权限。

用 Vue 3 写的，因为快。侧边栏里把所有打开的 tab 按域名分组成几组，这样找东西就不用在一堆标题里肉眼搜索了。

核心逻辑其实很简单——chrome.tabs.query({}, tabs) 拿到所有 tab，然后用一个 computed 按 hostname 分组。

每个 tab 显示 favicon 和标题，点一下就跳转过去。

有个坑折腾了我二十分钟：chrome.tabs.query 在 sidepanel 里默认只能拿到当前窗口的 tab。我想要所有窗口的 tab，得换成 chrome.tabs.query({ currentWindow: false }) 然后再合并。

还有个坑：Manifest V3 不再支持远程代码，所以 Vue 必须打包到本地。用 Vite 打包的话，chrome-extension:// 协议的 CSP 会让内联样式报错，得把样式也打包进去。

花了三个小时，写了不到 300 行代码（不算 node_modules），最终效果：

功能很基础，但对现在的我来说刚刚好。0.1.0 嘛，本来就是先用起来，后面慢慢加功能。

写这个插件的过程中，我发现自己最喜欢的编程状态就是这样——解决一个自己真正遇到的问题。不是为了刷题，不是为了面试，不是为了交作业，就是觉得"这个东西如果有就好了"，然后动手做出来。

高中生活被各种卷子、考试、排名填满。但每当周末抽出几个小时，写一些自己想做的小东西，就觉得这些时间花得值。代码不会管你月考第几名，它只管跑不跑得通。

跑通了，就是爽。

Tag：Chrome插件 JavaScript 编程周末