【Cursor实战】实现一个浏览器截图插件

前言

今天继续尝试使用Cursor开发一个浏览器截图插件，对使用Cursor开发感兴趣的小伙伴也可以看往期案例：

使用Cursor Rules

我们新建一个项目，在项目根目录配置 .cursorrules 提示词规则，使用快捷键【Cmd+Shift+P】唤起命令面板，选择【添加Cursor规则文件】回车

选择【Chrome插件】

添加完成后，我们就拥有了一个完整的微信小程序项目的提示词

插件开发

接着使用快捷键【Cmd+I】唤起Composer，输入我们的需求提示词

markdown 复制代码

我现在需要做一个浏览器截图插件，包括两个主要功能，一个是截图，一个是网页长截图
1. 点击插件弹窗页面提供 截图 和 网页长截图 2个菜单选项
2. 截图功能
- 提供截图，可以选择截取的区域，截图窗口固定不随网页滚动
- 选择截图区域后可以移动和调整截图区域大小
- 点击保存按钮保存截图到剪切板并关闭截图窗口
3. 网页长截图
- 滚动页面逐段截取页面内容并最终拼接成一张完整的图片保存到剪切板后并关闭截取窗口

插件代码生成完毕后，Cursor生成了基本的项目结构，并且引入了远程icon，目测应该是不能使用的（根据以往经验Cursor生成的链接多半都是不能直接访问的🤣）

在Chrome浏览器中加载本地插件查看效果，插件加载报错了，果然是有问题的，对浏览器加载本地插件方式不了解的小伙伴可以看往期介绍：【Cursor实战】实现一个爬取Github Trending热榜插件

生成icon

关于icon问题，往期项目Cursor为我们提供过2种方式，一种是 HTML形式的需要手动下载各种尺寸到项目，一种是通过Node脚本直接生成，我们可以查考这两种生成方式，选择一种自己喜欢的方式使用，感兴趣的小伙伴可以看往期：

这里我使用第一种，我们将 icon_maker.html 拷贝到当前项目下的 images 目录下，让Cursor根据当前项目功能生成一个新的icon

生成完成后，双击 icon_maker.html 文件在浏览器中打开，效果如下：

下载生成的4个尺寸icon并拖入到 images 目录下，再次加载插件加载成功

插件问题修复

对于复杂功能，多半都会是有些问题的，运气好的话问题会少点😂。插件加载完成，点击插件可以看到提供了【选区截图】和【长网页截图】两个工具入口

点击【选区截图】截图，点击保存截图时报错了，我们先让Cursor帮我们修复

Cursor思考许久后给出了新的方案，使用了 html2canvas 三方库且覆盖了之前的功能，这点是Cursor目前令人头大的一点

使用 html2canvas 方案过程中，Chrome插件总是提示各种跨域问题，根本无法完成基本的截图功能，最终选择放弃了该方案，建议使用浏览器原生的截图API，让Cursor使用Chrome自带的API重新帮我们完成功能实现。

lua 复制代码

修改方案，使用chrome.tabs.captureVisibleTab(null, {
    format : "png",
    quality : 100
}, function(data) {
});截屏，不使用html2canvas.min

经过多轮调整修复，最终选区截图插件效果如下：

接着看一下网页截长图功能，点击【长网页截图】按钮最终效果如下

发现也是有问题的，每次截图都会带上导航信息，导致长截图效果看着很奇怪，这是HTML页面浮动导航的问题，每次滚动导航都会浮动展示，解决方案就是第一次截屏后将浮动导航进行隐藏，有了思路之后我们让Cursor帮我们处理

又是经过多轮修复，最终实现长截图效果如下：

还是有点问题的，右侧的浮动还没有处理掉，不过这个已经基本上能满足我们的需求了，感兴趣的小伙伴可以自行扩展。

总结

本次使用Cursor整体都是不顺利的，遇到了相当多的问题，比如功能代码覆盖、三方库的异常使用等。Cursor修复问题过程中更改了方案，使用了html2canvas 三方库来实现，还覆盖了原有已完成的功能代码，并没有考虑到三方库在浏览器插件中的限制，导致很多问题的无效修复，最终提醒它使用原生浏览器插件的API才完成了功能。整个插件实现下来使用了不计其数的对话，过程是有些痛苦的。

项目地址

项目放到Github了，感兴趣的小伙伴可以自行玩耍

Github地址：github.com/MisterZhouZ...

友情提示

见原文：【Cursor实战】实现一个浏览器截图插件

本文同步自微信公众号 "程序员小溪" ，这里只是同步，想看及时消息请移步我的公众号，不定时更新我的学习经验。