1. 从「嘴搓插件」说起：为什么图片分割这件事值得用 Cursor 干一遍
图片分割插件，说白了就是把一张图按 2x2 平均切成四块，然后自动下载到本地。听起来简单，但真让你手写 manifest v3、popup 页面、拖拽上传、剪贴板粘贴、预览确认、水印编号这一整套，没个半天搞不定。我这次的做法是：一行代码不写，全程用 Cursor 对话生成，1 小时跑通。核心检索词就三个：Cursor、manifest v3、图片分割插件。
适合谁看？如果你会用浏览器开发者模式加载插件，懂一点点 HTML/JS，但不想从零抠 manifest 字段和 CSP 报错，这篇就是给你准备的。我会把 Cursor 接入 TaoToken 统一 Key 的配置骨架、manifest.json、settings.json 全部贴出来，你复制就能跑。
先说清楚整体链路：Cursor 负责生成代码，TaoToken 负责提供统一的 API 通道（一个 Key 走多家模型），插件本身跑在 Chrome 的 manifest v3 环境里，UI 用 Bootstrap 快速搭。三者互不干扰，但配置要对齐。
我试过直接让 Cursor 裸写，结果卡在 CSP 和外部 CDN 引用上，后来把 API 通道统一到 TaoToken，模型切换和 Key 管理都省事了，才把精力放回插件逻辑本身。
2. TaoToken 前置：统一 Key 与 Cursor 接入配置骨架
TaoToken 是什么？简单讲，它是一个统一的模型 API 通道，你拿一个 Key 就能在 Cursor 里切换不同模型，不用每个模型单独配一套环境。官网入口在 https://taotoken.net/?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= ，API 地址是 https://taotoken.net/api （这个不加 UTM）。
适合谁？适合像我这样不想在多个模型平台之间反复注册、反复换 Key 的人。Cursor 里配置自定义模型时，把 Base URL 指向 TaoToken 的 API 地址，Key 填你申请的那一个，就能跑。
2.1 拿 Key 与配置 Cursor 的 settings.json
先去控制台创建 API Key，入口：https://taotoken.net/console?utm_source=taotoken_aicg_blog_end&utm_content=console&utm_campaign=rewrite 。创建完复制出来，别丢。
Cursor 的模型配置在 settings.json 里，路径一般是~/.cursor/settings.json（Windows 在%APPDATA%\Cursor\settings.json）。下面是我实测能用的骨架，你按自己情况改 model 名：
{ "cursor.aiProvider": "openai", "cursor.openaiApiKey": "sk-你的TaoTokenKey", "cursor.openaiBaseUrl": "https://taotoken.net/api", "cursor.models": [ { "name": "claude-sonnet", "provider": "openai", "model": "claude-3-5-sonnet", "baseUrl": "https://taotoken.net/api" }, { "name": "gpt-4o", "provider": "openai", "model": "gpt-4o", "baseUrl": "https://taotoken.net/api" } ], "cursor.chat.defaultModel": "claude-sonnet" }注意：不同 Cursor 版本字段名可能略有差异，如果
cursor.openaiBaseUrl不生效，试试在 Cursor 设置界面里找「Custom API Base」手动填https://taotoken.net/api。Key 只填一次，模型名按 TaoToken 文档里支持的写。
2.2 验证 Key 是否通
配置完别急着写插件，先验证。在 Cursor 里新建一个空文件，输入一句「用一句话解释 manifest v3 的 service worker 和 background page 的区别」，看它能不能正常回。能回，说明 Key 和 Base URL 都对。
如果报 401，检查 Key 有没有多余空格；如果报 404，检查 Base URL 是不是写成了带/v1的路径——TaoToken 的 API 根地址就是https://taotoken.net/api，具体路径由 Cursor 自己拼。
3. 可复制配置：manifest.json 与插件骨架
插件目录结构先定下来，后面所有文件都往这个骨架里塞：
image-splitter/ ├── manifest.json ├── popup.html ├── popup.js ├── background.js ├── content.js └── icons/ ├── icon16.png ├── icon48.png └── icon128.png3.1 manifest.json（manifest v3）
这是整个插件的入口，字段一个都不能错。下面这份是我跑通的版本，直接复制：
{ "manifest_version": 3, "name": "图片分割助手", "version": "1.0.0", "description": "将图片平均切分为4张并自动下载，支持拖拽与剪贴板粘贴", "permissions": [ "downloads", "storage", "clipboardRead" ], "action": { "default_popup": "popup.html", "default_icon": { "16": "icons/icon16.png", "48": "icons/icon48.png", "128": "icons/icon128.png" } }, "background": { "service_worker": "background.js" }, "content_scripts": [ { "matches": ["<all_urls>"], "js": ["content.js"] } ], "content_security_policy": { "extension_pages": "script-src 'self'; object-src 'self'" }, "icons": { "16": "icons/icon16.png", "48": "icons/icon48.png", "128": "icons/icon128.png" } }关键点：content_security_policy.extension_pages必须写script-src 'self'，不能带任何外部域名。这就是为什么后面 Bootstrap 不能直接用 CDN，得把文件下到本地。
3.2 popup.html 用 Bootstrap 本地文件
因为 CSP 限制，Bootstrap 的 CSS 和 JS 必须放本地。去 Bootstrap 官网下bootstrap.min.css和bootstrap.bundle.min.js，放到插件目录的lib/下：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="lib/bootstrap.min.css"> <style> body { width: 420px; padding: 16px; } #dropZone { border: 2px dashed #0d6efd; border-radius: 8px; padding: 32px; text-align: center; cursor: pointer; } #dropZone.dragover { background: #e7f1ff; } #preview img { max-width: 100%; margin-top: 12px; } </style> </head> <body> <h5 class="mb-3">图片分割助手</h5> <div id="dropZone"> <p class="mb-1">拖拽图片到这里，或点击选择</p> <p class="text-muted small mb-0">也支持 Ctrl+V 粘贴剪贴板图片</p> <input type="file" id="fileInput" accept="image/*" hidden> </div> <div id="preview"></div> <button id="splitBtn" class="btn btn-primary w-100 mt-3" disabled>确认分割并下载</button> <p class="text-muted small mt-2 mb-0">已使用 <span id="useCount">0</span> 次</p> <script src="lib/bootstrap.bundle.min.js"></script> <script src="popup.js"></script> </body> </html>3.3 background.js 常用 API 示例
manifest v3 里 background 变成了 service worker，没有 DOM，但下载、存储这些 API 照样能用：
// background.js chrome.runtime.onInstalled.addListener(() => { console.log('插件已安装'); chrome.storage.local.set({ useCount: 0 }); }); // 监听下载请求 chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => { if (msg.type === 'DOWNLOAD_IMAGE') { chrome.downloads.download({ url: msg.url, filename: msg.filename, saveAs: false }, (downloadId) => { sendResponse({ ok: true, downloadId }); }); return true; } if (msg.type === 'GET_COUNT') { chrome.storage.local.get(['useCount'], (res) => { sendResponse({ count: res.useCount || 0 }); }); return true; } });chrome.downloads.download负责把分割后的图存到本地，chrome.storage.local负责记使用次数。这两个是插件里最常用的。
4. 验证请求与成功结果：加载插件、分割、下载全流程
配置写完了，接下来是动作清单。你按顺序做，每一步都有预期结果。
4.1 加载插件到 Chrome
打开chrome://extensions/，右上角打开「开发者模式」，点「加载已解压的扩展程序」，选中image-splitter目录。加载成功后，工具栏会出现插件图标，点开就是 popup 页面。
如果加载报错，看错误信息里有没有content_security_policy字样，有的话回去检查 manifest 里那行是不是写成了script-src 'self' https://cdn.jsdelivr.net——带了外部域名就会报Insecure CSP value。
4.2 分割逻辑与预览
popup.js 里核心是 canvas 切割。用户选图后，先画到 canvas 上，再按 2x2 切四块，每块生成一个 dataURL 用于预览：
function splitImage(img) { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); const w = Math.floor(img.width / 2); const h = Math.floor(img.height / 2); canvas.width = w; canvas.height = h; const parts = []; for (let row = 0; row < 2; row++) { for (let col = 0; col < 2; col++) { ctx.clearRect(0, 0, w, h); ctx.drawImage(img, col * w, row * h, w, h, 0, 0, w, h); // 加水印编号 ctx.fillStyle = 'rgba(255,255,255,0.6)'; ctx.beginPath(); ctx.arc(w / 2, h / 2, 40, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = '#000'; ctx.font = '32px sans-serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(String(row * 2 + col + 1), w / 2, h / 2); parts.push(canvas.toDataURL('image/png')); } } return parts; }预览区把四张图渲染出来，用户点「确认分割并下载」后，再通过chrome.runtime.sendMessage发给 background 触发下载。
4.3 剪贴板粘贴支持
在 popup.js 里监听paste事件，从clipboardData.items里找图片：
document.addEventListener('paste', (e) => { const items = e.clipboardData.items; for (const item of items) { if (item.type.indexOf('image') === 0) { const blob = item.getAsFile(); const url = URL.createObjectURL(blob); loadImage(url); } } });这样用户截图后直接 Ctrl+V 就能上传，不用先存文件。
4.4 成功结果长什么样
分割完成后，本地下载文件夹里会出现四张图，命名类似split_1.png到split_4.png，每张左上角有白色半透明圆形背景的数字编号，居中显示，32px 字号。popup 里的使用次数 +1，下次打开还在。
5. 本篇常见错排查
5.1 CSP 报错：Refused to load the script
报错原文：Refused to load the script 'https://cdn.jsdelivr.net/...' because it violates the following Content Security Policy directive: "script-src 'self'"。
原因：manifest v3 默认只允许加载插件包内的脚本，任何外部 CDN 都会被拦。解决办法就一个：把 Bootstrap 的 js/css 下载到本地lib/目录，HTML 里改成相对路径引用。别想着在 CSP 里加白名单，加了会报Insecure CSP value。
5.2 预览空白
预览区显示空白，通常是 canvas 还没画完就去取toDataURL，或者图片跨域。检查两点：一是img.onload之后再执行分割；二是如果图片来自网络，加img.crossOrigin = 'anonymous'。本地文件和剪贴板图片一般没这问题。
5.3 使用次数不更新
chrome.storage.local.get是异步的，如果你在 popup 打开时直接读，可能拿到旧值。正确做法是在chrome.runtime.onMessage回调里sendResponse，popup 端用chrome.runtime.sendMessage拿返回值再更新 DOM。别用全局变量存次数，service worker 会休眠。
5.4 popup 窗口居中与独立窗口
想让 popup 在独立窗口居中，用chrome.windows.create：
chrome.windows.create({ url: 'popup.html', type: 'popup', width: 460, height: 620, left: Math.round((screen.width - 460) / 2), top: Math.round((screen.height - 620) / 2) });注意screen在 service worker 里不可用，这段要放在 popup 或 content script 里执行。
6. 继续用 Cursor 迭代：把 Key 和插件开发串起来
插件跑通后，后面想加功能——比如支持 3x3 分割、加水印文字、批量处理——继续在 Cursor 里对话就行。模型切换通过 TaoToken 统一 Key 完成，不用重新配环境。如果你要长期做编码和 Agent 类任务，可以看下 Coding Plan：https://taotoken.net/coding-plan?utm_source=taotoken_aicg_blog_end&utm_content=coding-plan&utm_campaign=rewrite ，接入文档在 https://taotoken.net/doc?utm_source=taotoken_aicg_blog_end&utm_content=doc&utm_campaign=rewrite ，API Key 管理在 https://taotoken.net/api-keys?utm_source=taotoken_aicg_blog_end&utm_content=api-keys&utm_campaign=rewrite 。想直接试模型对话效果，入口是 https://taotoken.net/chat?utm_source=taotoken_aicg_blog_end&utm_content=model-chat&utm_campaign=rewrite 。
最后留个实用技巧：manifest v3 的 service worker 会休眠，所有状态别放内存，统一走chrome.storage。我踩过的坑就是次数存在变量里，窗口一关就归零，改成 storage 后稳了。
