Cursor案例分享，探索无需代码的Chrome插件创作之路
1.chrome浏览器制作一个分割图片为四等份
1. 使用cursor工具生成代码
点击桌面cursor（关于cursor工具的安装这里就不做详细展开）
cursor 下载地址
https://www.cursor.com/
我们打开cursor开发工具
我们使用ctrl+i 打开composer组件
接下来我们输入我们的需求
请你帮我开发一个谷歌插件，用于将用户上传的图片，平均切分为4张图片，并自动下载到本地电脑上。注意使用 manifest v3 版本开发, 注意按钮中文编码的问题。这里模型选择我们选择claude3.5-sonnet模型，接下来会自动生成我们要的代码
生成好后，我们点击接受就可以让左边窗体生成代码目录结构
生成的代码background.js
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
if (request.action === 'downloadImage') {
chrome.downloads.download({
url: request.dataUrl,
filename: request.filename,
saveAs: false
});
}
});
manifest.json
{
"manifest_version": 3,
"name": "图片切分器",
"version": "1.0",
"description": "将图片平均切分为4张并下载",
"permissions": ["activeTab", "downloads"],
"action": {
"default_popup": "popup.html"
},
"background": {
"service_worker": "background.js"
}
}
popup.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>图片切分器</title>
<style>
body {
width: 300px;
padding: 10px;
font-family: Arial, sans-serif;
}
#uploadBtn, #splitBtn {
margin-top: 10px;
padding: 5px 10px;
}
#preview {
max-width: 100%;
margin-top: 10px;
}
</style>
</head>
<body>
<h2>图片切分器</h2>
<input type="file" id="fileInput" accept="image/*">
<button id="uploadBtn">上传图片</button>
<img id="preview" style="display: none;">
<button id="splitBtn" style="display: none;">切分并下载</button>
<script src="popup.js"></script>
</body>
</html>
popup.js
let uploadedImage = null;
document.getElementById('uploadBtn').addEventListener('click', () => {
document.getElementById('fileInput').click();
});
document.getElementById('fileInput').addEventListener('change', (event) => {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = (e) => {
uploadedImage = new Image();
uploadedImage.onload = () => {
document.getElementById('preview').src = e.target.result;
document.getElementById('preview').style.display = 'block';
document.getElementById('splitBtn').style.display = 'block';
};
uploadedImage.src = e.target.result;
};
reader.readAsDataURL(file);
}
});
document.getElementById('splitBtn').addEventListener('click', () => {
if (uploadedImage) {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const partWidth = uploadedImage.width / 2;
const partHeight = uploadedImage.height / 2;
for (let i = 0; i < 2; i++) {
for (let j = 0; j < 2; j++) {
canvas.width = partWidth;
canvas.height = partHeight;
ctx.drawImage(
uploadedImage,
i * partWidth, j * partHeight, partWidth, partHeight,
0, 0, partWidth, partHeight
);
const partDataUrl = canvas.toDataURL('image/png');
chrome.runtime.sendMessage({
action: 'downloadImage',
dataUrl: partDataUrl,
filename: `split_image_${i}_${j}.png`
});
}
}
}
});
生成完成后代码，它还挺友好的告诉你如何使用这个工具
使用说明：
创建一个新文件夹，将上述所有文件放入其中。
打开 Chrome 浏览器，进入扩展程序页面（chrome://extensions/）。
开启"开发者模式"。
点击"加载已解压的扩展程序"，选择包含这些文件的文件夹。
这个插件使用了 Manifest V3，并且注意了按钮中文编码的问题。如果您需要任何修改或有任何问题，请随时告诉我我们可以将该说明复制到reademe.md文件中
我们在登录cursor 官方网站可以查看请求模型次数使用量
简单解释一下，以上代码我只做了一次请求就生成了上面4个代码。500次请求使用还是够用的。
2.测试验证
打开chrome浏览器，打开扩展程序。
点击加载已经解压的扩展程序
选择我们刚才代码生成好的文件夹，比如我的是D:\tmp\cursorexample2024\ChromePlugin
我们点击chrome浏览器右上角扩展程序将这个插件显示出来
点开这个图片切分器
3.总结
我们通过cursor工具一行代码没有写就完成了chrome浏览器插件工具的开发，前后不到5分钟，这效率真的是刚刚的。