这是「30分钟搞定」栏目第二篇。

上篇我们做了个读书笔记网页，从零搭到能跑。今天步子大一点——做一个能装进浏览器的Chrome插件。

干什么用：你在网上看到一篇好文章、一段有用的话、一个想存的页面，点一下插件的按钮，内容就存下来了。不用复制粘贴、不用新建文档、不用截图。

30分钟，从零到插件装好。打开WorkBuddy，走。

先看一眼成品

做完之后大概这样：

Chrome右上角有一个小图标，点开弹出一个小窗口

窗口里一个按钮「保存当前页面」

点一下，把当前网页的标题、链接、选中的文字存下来

存好的内容在弹出窗口里显示成一张张小卡片

可以搜索、可以删除

数据存在浏览器里，关掉重开也不丢

第1步：搭插件骨架（5分钟）

Chrome插件就是一组文件放在一个文件夹里——manifest.json配置文件、html页面、js脚本。WorkBuddy能帮你全部搭好。

打开WorkBuddy，发这段话：

帮我创建一个Chrome浏览器插件项目。

要求：

1. 包含一个manifest.json（Manifest V3），权限包含storage、activeTab、scripting
2. 包含一个popup.html作为点击图标弹出的小窗口
3. 包含popup.js处理弹出窗口的逻辑
4. 包含一个content.js用来读取当前网页的内容
5. popup.html里面要有这些元素：
• 一个「保存当前页面」按钮
• 一个搜索框
• 一个列表区域，用来展示已保存的页面
6. 风格：简洁、白底、移动端风格，宽350px

帮我把所有文件创建在一个叫chrome-save-plugin的文件夹里。

等它生成完，你会看到一个文件夹，里面四个文件。这是插件的基础骨架。（其他文件说明：.py的2个文件上workbuddy用来生成文件的；README.md是项目说明文件；test-page.html是一个测试网页；icons是图标文件）

第2步：实现保存功能（5分钟）

骨架有了，但保存按钮还没实际功能。接着发：

实现保存功能：

1. 当用户点击「保存当前页面」按钮时，通过content.js获取当前页面的标题（document.title）、URL（window.location.href），以及用户选中的文字（window.getSelection().toString()）

2. 把获取到的内容保存到chrome.storage.local。数据格式：每条记录包含 title、url、text、time（保存时间）

3. content.js通过chrome.runtime.sendMessage把数据传给popup.js，popup.js负责存储

4. popup.js收到数据后存进storage，然后刷新列表显示

这里面几个关键动作：注入content script读页面内容 → 发消息给popup → popup存数据。第一次可能不完全对，没关系，看下面。

第3步：让列表和按钮真正联动（5分钟）

上面那步通常要做两次——第一次大概率只是「按钮能点了」，但数据没存进去或列表没更新。接着调试：

检查一下：

1. popup.html里的按钮有没有绑定点击事件
2. content.js是否通过chrome.scripting.executeScript正确注入到当前页面
3. popup.js里的消息监听chrome.runtime.onMessage是否写对了
4. 保存成功后列表有没有重新从storage读取并渲染

帮我修复所有问题。

这一步完成后，你应该能：打开任意网页 → 选中一段文字 → 点插件按钮 → 点「保存当前页面」 → 列表里出现刚才的内容。

第4步：加搜索和删除（5分钟）

能存了，现在让管理方便一点：

加两个功能：

1. 搜索：搜索框输入关键字，实时筛选已保存的列表。匹配标题和正文内容，不区分大小写
2. 删除：每张卡片右侧加一个删除按钮（一个小×），点击删除对应记录。删除后更新storage和列表
3. 额外优化：列表为空时显示一句提示「还没有保存的内容，去网页上选一段文字试试～」

第5步：装到Chrome里（5分钟）

文件都写好了。现在把它装进浏览器：

打开Chrome，地址栏输入chrome://extensions

右上角打开「开发者模式」

点「加载未打包的扩展程序」

选你的chrome-save-plugin文件夹

右上角会出现插件图标

点一下图钉把图标固定到工具栏（见下方截图）。然后随便打开一个网页，选中一段文字，点插件图标，点保存。

成了。

第6步：润色一下（5分钟）

插件能跑了，现在让界面好看一点：

优化popup的样式：

1. 整体背景用浅灰（#f5f5f5），卡片用白色，带圆角8px和轻微阴影
2. 标题字号大一点，用深灰色
3. URL显示截断，超过一行用省略号
4. 标签用小徽章形式显示来源域名（提取URL的域名部分）
5. 搜索框圆角、浅灰边框，聚焦时边框变蓝
6. 整体字体用系统默认无衬线字体

最终效果图。

另外需要注意，在修改插件后可能报错，需要在插件管理页面重载，如果重载还是不行就删除插件了重新加载未打包的扩展程序。

你刚刚做了什么

回顾一下，大概六七段对话，你做出了一个Chrome插件。而且不是你想象中那种「Hello World」的演示版——是真的能用、能存、能搜、能删的完整工具。

这个插件现在是你的了。以后网上看到任何想存的内容，选中文字，点一下，永久保存。

拆开来看，这个项目涉及了：Chrome Extension API、消息通信、本地存储、DOM操作、事件监听。如果按传统路子走，先学JavaScript基础再学Chrome API，没有一两周下不来。

你用了30分钟。还是老规矩——每一行代码都跟你提的需求一一对应。

还可以加什么

如果玩上瘾了，试试这些：

导出功能：加一个「导出全部」按钮，把所有保存的内容导出成Markdown文件

标签分类：保存的时候加一个标签输入框，按标签筛选

一键复制：每张卡片加一个复制按钮，点一下内容进剪贴板

同步到云端：用chrome.storage.sync替换local，登录Chrome后数据多设备同步

右键菜单：加右键菜单「保存到我的收藏夹」，不用点插件图标也能保存

每个需求一句话，WorkBuddy帮你改。

这是我的，你的呢？

这期跟上次一样——我做出来的版本跟你做的，大概率不一样。你可能改了配色、加了功能、调整了布局。

本期封面由ChatGPT生成

把你的插件截图发到后台。我挑几个下期读者秀里展示出来。

如果这篇帮到了你，转发给一个想学编程但不知道从哪开始的朋友。

关注大叔，每天动手30分钟，一个月你也能用AI写出自己的应用。