标签页放久了会长满藤蔓，得拖着鼠标砍开才能用

前几天我围绕“Overgrowth”这个词做了个小创意练习。最先想到的是末日场景，类似《行尸走肉》或《最后生还者》里那样，植物慢慢爬满废弃的建筑。

接着我想把这个概念搬到数字世界。“废弃”这个词让我想到了浏览器标签页……如果标签页越久没人看，就越会被植物慢慢占据呢？如果我必须清掉这些疯长的植物，才能重新打开标签页呢？有点像想推开一扇已经被植物爬满的门……

于是我做了个好玩的小 Chrome 扩展，干的就是这件事。它未必能让我多读标签页，不过也没关系。

演示

仓库链接

思路

• 每个标签页都有一个“冷落计时器”。标签页不在视野里时它开始走，你盯着它看时它就停。
• 标签页被冷落得越久，植物就长得越多，从边缘向中间蔓延。
• 一旦某个标签页被植物覆盖超过 5%，藤蔓后面的页面就被封死了：你可以滚动，但点不了、选不了、也拖不动任何东西。
• 想把这一页拿回来，就得用鼠标在藤蔓上划过去把它们砍掉。砍到 5% 以下，剩下的部分会自动脱落。如果你再次冷落这个标签页，丛林又会重新长起来。
• 纯属好玩，武器可以在生锈的砍刀、电锯和火焰喷射器之间任选。
• 你也可以调整标签页被完全覆盖所需的时间。

最初我想过，在用户砍光所有植物之前不许关闭被覆盖的标签页，但想想这未免太烦人了……😅

扩展

代码分为三个主要部分：后台逻辑、负责在标签页上显示植物和动画的 content script，以及处理扩展自身 UI 的 popup 文件夹。

后台 worker

background.js 文件会在每个打开的标签页上启动丛林，并在标签页关闭时将其遗忘。

popup

这个文件夹负责扩展的 UI，包含几个小组件：时间设置、武器选择、标签页列表及其当前状态。

覆盖层

content 文件夹里放着植物和武器的 SVG、定位并生长植物簇的逻辑、neglect clock 以及音效。

---

我想重新动手做点东西已经有一阵子了，这个项目算是个小而有趣的起点。这篇文字是在一台新电脑上写的，所以目前“只”开了 22 个标签页，但其中 14 个已经完全被植物覆盖了……😂 它也许不会让我多读几篇，但挥刀砍开藤蔓确实让回到这些标签页变得更有意思了！🪚🌿