如何开发一个chrome 扩展

BabyShell
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…

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

avatar
文章
阅读
粉丝