Chrome扩展构建插件 rollup-plugin-crx

猎豹浏览器扩展集合

Chrome扩展构建插件(rollup-plugin)，将之前散文件开发的扩展项目接入工程化管理开发。

本插件提供以下功能：

1. 扩展开发支持热重载
2. 合并构建多个扩展项目

目录

• 项目背景
• 安装依赖
• 使用说明
• 构建生产
• 项目结构
• 注意事项
• 维护者

项目背景

rollup-plugin-crx，让浏览器扩展项目实现工程化。

以前的扩展项目是通过散文件的形式开发，项目松散，难以管理。而且开发调试繁琐，需要手动重新加载扩展项目。

安装依赖

项目通过 monorepo 形式管理代码，依赖安装管理通过 lerna，在 liebao_extensions 目录执行以下命令：

npm install

使用说明

// rollup-config.js
export default crxPlugin({
  isModule: env !== "developement",
  extensionId,
  name: "extension name",
  version: "1.0.0",
  port: 3080,
  publicDir: pathResolve("src/images"),
  background: [
    pathResolve("src/background/index.ts")
  ],
  content: [
    {
      matches: ["<all_urls>"],
      js: [pathResolve("src/content/setup.ts")],
    }
  ],
  permissions: [
    "tabs"
  ],
  plugins: [
    replace({
      'process.env.NODE_ENV': JSON.stringify(env),
      preventAssignment: false
    }),
    nodeResolve(),
    commonjs(),
    esbuild()
  ],
});

构建生产

npm run build

项目结构

src              
├─ index.ts      
├─ merge.ts      // 合并扩展构建逻辑
├─ process.ts    // 进程相关逻辑
├─ reload.ts     // 热重载
├─ type.ts       // 工程类型声明
├─ utils.ts      // 构建工具函数
└─ ws.ts         // web socket

注意事项

1. 构建处理后的background只会是background.html（background只有这样才能实现esm）。
2. content-script实现esm的方式是import()，所以入口setup必须是一个只执行的异步函数。
3. 图片文件夹还没实现监听变动，在dev过程中修改图片资源需要重新执行构建。
4. __images会被替换为项目目录下src/images的路径

维护者

@mojinming