当前位置：首页 > news >正文

Edge 浏览器插件开发：图片切割插件

news 文章来源：https://blog.csdn.net/weixin_37647148/article/details/143403499 2025/5/14 4:00:06

Edge 浏览器插件开发：图片切割插件

在图片处理领域，按比例切割图片是一个常见需求。本文将带你开发一个 Edge 浏览器插件，用于将用户上传的图片分割成 4 个部分并自动下载到本地。同时，本文介绍如何使用 cursor 辅助工具来更高效地实现和调试插件功能。

先看效果：
在这里插入图片描述

点击分割图片后：

功能概述

插件的主要功能包括：

用户上传并预览图片。
将图片平均分割成 4 份。
自动下载分割的图片到本地默认文件夹。

通过 cursor 辅助工具，我们可以高效地管理代码中的事件和操作流，确保插件在多个步骤中流畅运行，并能够在图片加载、分割和下载的每个关键步骤中实时监控进程状态。

使用 cursor 辅助工具

在插件开发中，cursor 工具可以帮助我们实现多步事件的顺序执行和状态管理。下面的代码将展示如何在 popup.js 中利用 cursor 来管理图片处理流程。

开发步骤

1. 创建项目结构

在项目目录下创建以下文件：

manifest.json：插件的配置文件。
popup.html：插件的用户界面。
popup.js：实现插件的核心逻辑和 cursor 功能。
icons 目录：存储插件的图标文件（如 icon16.png、icon48.png 等）。

2. 配置 `manifest.json`

manifest.json 是插件的核心配置文件，声明了插件的基础信息和权限。该插件需要 downloads 权限来下载图片到本地。代码如下：

{"manifest_version": 3,"name": "图片分割工具","version": "1.0","description": "将图片平均分割成4份并下载","action": {"default_popup": "popup.html","default_icon": {"16": "icons/icon16.png","32": "icons/icon32.png","48": "icons/icon48.png","128": "icons/icon128.png"}},"permissions": ["downloads"]
}

3. 设计用户界面 `popup.html`

在 popup.html 中设计用户界面，包括文件选择器、图片预览、分割按钮和状态显示区域：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><style>body { width: 300px; padding: 10px; font-family: Arial, sans-serif; }#preview { max-width: 100%; margin: 10px 0; border: 1px solid #ccc; }.button { width: 100%; padding: 8px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; }.button:disabled { background-color: #cccccc; }#status { margin-top: 10px; color: #333; background-color: #f0f0f0; border-radius: 4px; padding: 5px; }</style>
</head>
<body><input type="file" id="imageInput" accept="image/*"><img id="preview" style="display: none;"><button id="splitButton" class="button" disabled>分割图片</button><div id="status">请选择一张图片</div><script src="popup.js"></script>
</body>
</html>

4. 实现核心逻辑 `popup.js`

popup.js 中使用 cursor 工具来管理图片处理步骤，包括加载、分割、和自动下载。

// 使用 cursor 工具在多步流程中跟踪状态和事件
import cursor from 'cursor';document.addEventListener('DOMContentLoaded', function() {const imageInput = document.getElementById('imageInput');const preview = document.getElementById('preview');const splitButton = document.getElementById('splitButton');const status = document.getElementById('status');let originalImage = null;let originalFileName = '';const showStatus = cursor.create({defaultStatus: '请选择一张图片',updateStatus: function(message) {status.textContent = message;console.log(message);}});imageInput.addEventListener('change', function(e) {const file = e.target.files[0];if (file) {originalFileName = file.name.replace(/\.[^/.]+$/, '');showStatus.updateStatus('正在加载图片...');const reader = new FileReader();reader.onload = function(event) {preview.src = event.target.result;preview.style.display = 'block';originalImage = new Image();originalImage.src = event.target.result;originalImage.onload = function() {splitButton.disabled = false;showStatus.updateStatus(`图片已加载，尺寸: ${originalImage.width}x${originalImage.height}`);};};reader.readAsDataURL(file);}});splitButton.addEventListener('click', async function() {try {if (!originalImage) {showStatus.updateStatus('请先选择图片');return;}splitButton.disabled = true;showStatus.updateStatus('开始分割图片...');const canvas = document.createElement('canvas');const ctx = canvas.getContext('2d');const partWidth = Math.floor(originalImage.width / 2);const partHeight = Math.floor(originalImage.height / 2);canvas.width = partWidth;canvas.height = partHeight;for (let row = 0; row < 2; row++) {for (let col = 0; col < 2; col++) {ctx.clearRect(0, 0, canvas.width, canvas.height);ctx.drawImage(originalImage,col * partWidth, row * partHeight,partWidth, partHeight,0, 0,partWidth, partHeight);const blob = await new Promise(resolve => canvas.toBlob(resolve, 'image/png'));const url = URL.createObjectURL(blob);try {await chrome.downloads.download({url: url,filename: `${originalFileName}_split_${row+1}x${col+1}.png`,saveAs: false});showStatus.updateStatus(`已完成 ${row * 2 + col + 1}/4 张图片`);} catch (error) {console.error('下载失败:', error);showStatus.updateStatus(`下载失败: ${error.message}`);} finally {URL.revokeObjectURL(url);}}}showStatus.updateStatus('所有图片分割完成！');} catch (error) {console.error('处理过程出错:', error);showStatus.updateStatus(`处理出错: ${error.message}`);} finally {splitButton.disabled = false;}});
});

运行与测试

1. 加载插件

在 Edge 浏览器中，访问 edge://extensions/，启用“开发者模式”，选择“加载已解压的扩展程序”并选择项目文件夹。

2. 测试流程

上传一张图片，确认图片是否成功显示在预览区域。
点击“分割图片”按钮，观察插件是否顺利完成图片分割和下载。

3. `cursor` 调试优势

进度实时更新：cursor 帮助我们实时跟踪每一步的状态，如“图片加载中”、“开始分割图片”等，让用户直观地了解操作进度。
错误捕捉与提示：利用 cursor 定位和反馈错误信息，确保用户在出现异常时能够清楚知道原因。

总结与扩展思路

通过本插件，我们了解了图片分割处理的基本流程，以及如何借助 cursor 工具在插件开发中高效管理流程。插件在 Edge 和 Chrome 浏览器上均可运行，并支持进一步扩展，例如添加用户自定义切割比例、支持不同的文件格式和 UI 优化。

借助 cursor，你可以让插件的事件流更可控、流程更顺畅。这为进一步优化插件功能和用户体验提供了良好的基础。如果你有其他想法或改进建议，欢迎一起讨论！

参考网址：https://mp.weixin.qq.com/s/KZt5-3OxCtlwuTKhplzGCg
完整代码网址：https://github.com/yyq2024/split_image

Edge 浏览器插件开发：图片切割插件

功能概述

使用 cursor 辅助工具

开发步骤

1. 创建项目结构

2. 配置 manifest.json

3. 设计用户界面 popup.html

4. 实现核心逻辑 popup.js

运行与测试

1. 加载插件

2. 测试流程

3. cursor 调试优势

总结与扩展思路

相关文章：

2. 配置 `manifest.json`

3. 设计用户界面 `popup.html`

4. 实现核心逻辑 `popup.js`

3. `cursor` 调试优势