如何利用 AI 工具快速开发 Chrome 实用插件

松哥最近有个需求，需求很简单：

当我浏览网页的时候，如果感觉这个网页内容不错，我想快速将这个网页的标题和内容链接收集起来，并且将之存为飞书多维表格的一条记录。

这个需求手动实现就是不停的 copy-paste，我想能不能通过 Chrome 插件来实现？但是我之前从来没开发过 Chrome 插件！没关系，不是有 AI 么！那我们今天就看下能不能通过 AI 来帮助我快速开发这样一个内容收集的插件。

一、飞书机器人创建

要将 Chrome 插件采集的内容写入到飞书多维表格，那离不开一个飞书机器人。所以我们需要首先创建一个飞书机器人。

首先在飞书 App 上搜索飞书机器人助手，打开如下页面：

点击新建应用：

创建成功之后，接下来进入到机器人流程设计页面：

点击创建流程，自动进入到流程设计页面：

首先触发器我们选择通过 Webhook 触发：

接下来需要我们配置一下 webhook 所接收的参数：

参数我放在下面，方便大家 copy：

{"content":{"title":"测试title","link":"测试link"}}

接下来在流程的选择操作中，我们选择新增多维表格记录：

由于一个多维表格中可能涉及到多个数据表，因此在选择的时候，需要细化到具体的数据表。

接下来我们还需要配置一下多维表格和 JSON 数据之间的映射关系：

接下来我们继续添加一个新的流程节点，以便在完成采集之后，能够及时收到通知：

新增一个飞书消息节点：

好了，这样我们的流程就设计完了。此时点击右上角的启用按钮。

继续点击右上角的发布按钮：

二、Chrome 插件开发

接下来就可以开发 Chrome 插件了。这个我们让豆包来帮我们完成。

我把提示词放下面，方便大家 copy：

帮我编写一个chrome插件，通过webhook发送消息，webhook地址是 https://www.feishu.cn/flow/api/trigger-webhook/111111，请按照如下格式构建 webhook 发送的参数 {"msg_type":"text","content":{"title":"title-1","link":"link-1"}}

其中 title-1 是抓取的当前网页的 title，link-1 则是抓取的当前网页的 link。

webhook 地址大家根据自己实际情况修改。

现在我们根据豆包给的安装提示，我们首先创建如下结构的文件目录，再把豆包生成的文件分别拷贝进去：

feishu-webhook-plugin/
├── manifest.json
├── popup.html
└── popup.js

另外搞一下应用图标，最终的文件目录如下：

接下来打开 Chrome 插件管理页面，选择加载未打包的程序：

如此，就安装成功了：

随便打开个网页体验一把：

飞书多维表格也有了相关记录：

同时飞书也收到了相关系统通知，点击查看详情可以跳转到飞书多维表格：

感兴趣的小伙伴可以试试～