如何开发一个chrome 扩展

861 阅读3分钟

前言

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

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

  1. CRXJS: github.com/crxjs/chrom…
  2. Plasmo: github.com/PlasmoHQ/pl…
  3. 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,生成的工作目录文件如下

image.png

调试运行pnpm dev,WXT直接开了一个无头浏览器,可以实时看到效果

image.png

颜色转换开发

因为我的需求比较简单,实现各种颜色的转换,页面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绑定后,最终实现效果如下:

image.png

在调试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…

现在插件也已经上架了市场,欢迎下载: