Overgrown：让荒废的浏览器标签页长满藤蔓的 Chrome 扩展

前两天我围绕 "Overgrowth（植物疯长）" 这个词做了点创意练习。第一个浮现在脑海里的，是末日场景，就像《行尸走肉》或《最后生还者》里那样，植物爬满废弃的建筑。 然后我想把这个概念搬到数字世界，"废弃"这个词让我想到了浏览器的标签页……如果我搁置不看的标签页会随着时间慢慢被植物占领呢？如果必须清掉这些入侵的植物才能重新访问标签页呢？有点像推开一扇被藤蔓缠死的门…… 于是我做了这个有趣的小 Chrome 扩展来实现这个想法。它不一定能让我更勤快地阅读标签页，但没关系。

演示

仓库地址

设计思路

• 每个标签页都有一个"疏于照看"计时器：标签页不在视野内时计时，你正在看时暂停。
• 搁置得越久，植物就长得越多，从边缘向中间蔓延。
• 一旦覆盖率超过 5%，藤蔓后面的页面就会被"封锁"：你可以滚动，但无法点击、选中或拖动任何东西。
• 想解锁，就得用鼠标划过藤蔓把它们斩断。砍到 5% 以下，残余的部分会自动脱落。如果你再次弃置标签页，丛林会重新生长。
• 纯粹为了好玩，你可以从生锈砍刀、链锯和火焰喷射器中挑选武器。
• 你还可以调整标签页长满植物所需的时间。

一开始，我曾考虑阻止用户关闭长满植物的标签页，直到他们清完所有植物，但转念一想这实在太烦人了…… 😅

扩展实现

代码分为 3 个主要部分：后台逻辑、负责在标签页上展示植物和动画的 content script，以及处理扩展自身界面的 popup 目录。

Background worker

background.js 文件会在每个打开的标签页上启动丛林效果，标签页关闭时随之清除。

Popup

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

Overlay

content 文件夹里存放着植物和武器的 SVG 文件、控制群落定位与生长的逻辑代码，以及“被遗忘计时器”和音效。

---

我早就想重拾“动手做东西”的感觉了，这个项目正好算个轻松有趣的切入点。我最近换了台新电脑，目前“才”开了 22 个标签页，但其中 14 个已经被植物彻底长满了……😂 我可能不太会因为这事去点进那些页面，但砍断藤蔓的过程，确实让重新打开它们变得更有趣了！🪚🌿