Cursor案例分享，探索无需代码的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

图片切分器 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; }

图片切分器

上传图片 切分并下载

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分钟，这效率真的是刚刚的。