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&#;: &#;&#;,
  &#;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: %;
      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个代码。次请求使用还是够用的。

2.测试验证

打开chrome浏览器，打开扩展程序。

点击加载已经解压的扩展程序

选择我们刚才代码生成好的文件夹，比如我的是D:\tmp\cursorexample2024\ChromePlugin

我们点击chrome浏览器右上角扩展程序将这个插件显示出来

点开这个图片切分器

3.总结

我们通过cursor工具一行代码没有写就完成了chrome浏览器插件工具的开发，前后不到5分钟，这效率真的是刚刚的。

七桃资源网

cursor_CSS 3 中文手册

1.chrome浏览器制作一个分割图片为四等份

1. 使用cursor工具生成代码

2.测试验证

3.总结