前言
最近开发一个涉及到很多颜色转换的工作,每次都搜索打开一个新页面在线转换,十分麻烦,于是想着开发一个颜色转换的浏览器插件,每次点击即可使用。
查看Chrome插件开发的文档developer.chrome.com/docs/extens… ,从头开始开发一个插件还是比较麻烦且原始的。搜索网上资料,发现了2个工具
- CRXJS: github.com/crxjs/chrom…
- Plasmo: github.com/PlasmoHQ/pl…
- WXT: github.com/wxt-dev/wxt
最后选择了WXT,因为它用起来更方便,且支持多浏览器。
WXT是什么
WXT号称下一代浏览器扩展开发框架
,免费、开源、易用且支持多种浏览器。
这段文字是关于WXT框架的介绍,它是一个用于构建浏览器扩展的开源框架。下面是对文中提到的几个关键点的解释:
- WXT有自己一套约定的框架,为开发者提供了一套标准化的做法,有助于保持项目的一致性,使得新手能够更容易地理解和接手项目。
- 基于项目文件结构自动生成manifest。manifest是浏览器扩展的配置文件,定义了扩展的名称、版本、权限等信息。WXT框架能够根据项目结构自动创建这个文件,简化开发过程。
- 单文件配置Entrypoint,比如背景脚本或内容脚本,这样可以更直观地管理和维护代码。
- WXT提供了开箱即用的TypeScript支持,并且改进了浏览器API的类型定义。TypeScript是一种强类型语言,它在JavaScript的基础上增加了类型系统,有助于在开发过程中捕捉到潜在的错误。
- 输出文件的路径最小化,这意味着WXT在构建扩展时会优化文件路径,减少runtime的path长度,可以提高扩展的加载速度和性能。
WXT 安装&开发
我们直接脚手架开一个项目
pnpm dlx wxt@latest init wxt-demo
cd wxt-demo
pnpm install
套用官网的一个图
不过我选的react,生成的工作目录文件如下
调试运行pnpm dev
,WXT直接开了一个无头浏览器,可以实时看到效果
颜色转换开发
因为我的需求比较简单,实现各种颜色的转换,页面UI就直接使用antd,样式直接Inline。代码如下:
<>
<header style={pageLayoutStyle}>
<p style={{ fontSize: '1.5rem', textAlign: 'center', fontWeight: 'medium' }}>Color Converter</p>
<p>This tool helps you convert colors between different color formats.</p>
</header>
<main style={pageLayoutStyle}>
<div>
<p style={{ fontSize: '1.2rem', textAlign: 'left' }}>Enter a color:</p>
</div>
<Input
suffix={
<ColorPicker
defaultValue={defaultColor}
value={hex === '' ? defaultColor : hex}
styles={{ popupOverlayInner: { position: 'absolute', left: '50%', transform: 'translate(-100%, -50%)' } }}
onChangeComplete={(color) => {
const str = (color.toRgbString())
}} />
}
placeholder={defaultColor}
autoFocus={true}
onChange={(e) => {
const str = (e.target.value)
}} />
<div>
<p style={{ fontSize: '1.2rem', textAlign: 'left' }}>Results</p>
</div>
{contextHolder}
<Input addonBefore="RGB" value={rgb} suffix={<CopyOutlined onClick={() => { copyToClipboard(rgb) }} />} readOnly={true} defaultValue="" />
<Input addonBefore="HEX" value={hex} suffix={<CopyOutlined onClick={() => { copyToClipboard(hex) }} />} readOnly={true} defaultValue="" style={{ marginTop: '8px' }} />
<Input addonBefore="HSL" value={hsl} suffix={<CopyOutlined onClick={() => { copyToClipboard(hsl) }} />} readOnly={true} defaultValue="" style={{ marginTop: '8px' }} />
<Input addonBefore="HSV" value={hsv} suffix={<CopyOutlined onClick={() => { copyToClipboard(hsv) }} />} readOnly={true} defaultValue="" style={{ marginTop: '8px' }} />
<Input addonBefore="CMYK" value={cmyk} suffix={<CopyOutlined onClick={() => { copyToClipboard(cmyk) }} />} readOnly={true} defaultValue="" style={{ marginTop: '8px' }} />
</main>
</>
新建color.ts,定义几个变量名称和方法名称,一路按tab,AI自动补全了代码。代码太长就不贴出来了,主要是颜色的正则匹配和转换。同上面UI绑定后,最终实现效果如下:
在调试firefox时,遇到一个小坑:content.ts中需要至少有一个匹配matches,否则会直接退出提示插件invalid。
发布
WXT发布也比较简单,直接运行 pnpm zip
就会构建chrome的扩展压缩包,发布firefox只需要pnpm zip:firefox
。在ouput目录下就会生成对应产物。
不过记得在打包前修改wxt.config.ts,添加名称、版本、描述等。如:
export default defineConfig({
modules: ['@wxt-dev/module-react'],
manifest: {
version: '1.0.0',
name: 'color-converter',
description: 'A color converter tool',
}
});
最后完整代码见github: github.com/xckevin/col…
现在插件也已经上架了市场,欢迎下载:
- chrome: chromewebstore.google.com/detail/colo…
- firefox: addons.mozilla.org/en-US/firef…