在之前的文章中，我们已经详细介绍过如何从零开始开发一个浏览器插件。然而，如果你已经拥有一个成熟的工具或网页，那么就没有必要重新开始，可以直接在此基础上进行修改，将其转化为插件。
在着手进行这项工作之前，我们有必要简要回顾一下浏览器插件的基本结构。一个最简单的插件包只需要包含三个基本文件：manifest.json、icon.png 和 popup.html。
-
manifest.json 文件用于定义插件的基本信息，如名称、版本、权限请求以及各个文件的路径；
-
icon.png 是插件的图标，展示给用户；
-
popup.html 为用户提供了一个直观的操作界面，通过它可以触发插件的各种功能。
这样，插件就可以直接在浏览器的 extensions 中加载试用了。
开始
前段时间，我发现了一个非常实用的工具网页，它可以为图片添加水印，从而帮助我们保护版权和隐私。这个工具的网址是 jiashuiyin.com/ ，感兴趣的朋友可以点击链接进行体验。值得一提的是，这个工具的代码已经在 github 上开源，地址是 github.com/pdmaker/wat… 。
它的功能完全是用 JavaScript 实现的，没有远程交互，因此非常适合将其制作成浏览器插件。
接下来，我们将以这个工具为例，将其转换为一个浏览器插件。首先，我们需要将代码克隆到本地。通过查看代码，我们可以很容易地发现 UI 是在 index.html 文件中实现的，处理逻辑则在 script.js 文件中，网站的图标也已经准备好，存放在 images 文件夹中。接下来，我们在项目的根目录下添加一个 manifest.json 文件，并补充相关内容，如下所示：
{
"manifest_version": 3,
"name": "Watermark",
"description": "A Chrome extension to quickly add watermark on images.",
"version": "1.0.0",
"icons": {
"16": "images/favicon-16x16.png",
"32": "images/favicon-32x32.png",
"48": "images/favicon-48x48.png",
"96": "images/favicon-96x96.png",
"128": "images/favicon-128x128.png"
},
"author": "liukai",
"action": {
"default_title": "Default Popup Title",
"default_popup": "index.html"
}
}
完成上述步骤后，一个基本的浏览器插件就已经生成了。然而，当我们在浏览器的 extensions 中尝试加载并体验这个插件时，却发现出现了错误。
经过检查，我们发现问题出在 script.js 文件中引用了远程的脚本：
import JSZip from ‘https://jspm.dev/jszip’;
import FileSaver from ‘https://jspm.dev/file-saver’;
这两个脚本是用来模拟生成文件并保存文件的。为了修复这个问题，我们可以采用另一种思路：生成虚拟的 a 标签并手动模拟点击下载，这样就可以删除这两个远程文件了。
修改后的代码如下：
// 依次下载每个图片
for (let i = 0; i < imageUrls.length; i++) {
const link = document.createElement('a');
link.href = imageUrls[i];
link.download = image-${i + 1}.png; // 设置下载文件名
document.body.appendChild(link);
link.click(); // 模拟点击以触发下载
document.body.removeChild(link); // 下载后移除元素
}
此外，为了进一步提升插件的性能，我们还需要尽量将需要远程加载的内容都本地化。在这个项目中，有两处地方引用了远程资源：
- style.css 文件中依赖了 tailwindcss，并且是直接 import 远程地址；
- index.html 文件中集成了数据分析的脚本 data.tuocibao.com/js/script.j… 。实际上，这个脚本不加载也可以正常使用，但为了保持项目的完整性，我们还是将其下载到本地，并修改为本地相对引用。
经过上述修改后，我们的插件终于可以正常运行了！不过，由于插件的 UI 是直接沿用网页的，因此不太适合作为插件使用。于是，我们针对其 UI 进行了修改和优化，使界面更加精简、符合插件的使用习惯。最终，我们的插件呈现出了全新的面貌。
总结
通过这个实例，我们学习了如何将一个现有的网页工具转化为浏览器插件。在这个过程中，我们不仅掌握了插件开发的基本流程和技术要点，还学会了如何优化插件的性能和用户体验。希望这些经验能对你未来的插件开发工作有所帮助。
