如何开发一个chrome 扩展

前言

最近开发一个涉及到很多颜色转换的工作，每次都搜索打开一个新页面在线转换，十分麻烦，于是想着开发一个颜色转换的浏览器插件，每次点击即可使用。

查看Chrome插件开发的文档developer.chrome.com/docs/extens… ，从头开始开发一个插件还是比较麻烦且原始的。搜索网上资料，发现了2个工具

最后选择了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…