open-index/open-npm huggingface dataset:
npm package: @squidc/rollup-plugin-crx
Description: rollup plugin chrome extension
Latest version: 2.0.0

# Chrome扩展构建插件 rollup-plugin-crx

[猎豹浏览器扩展集合](https://gitlab.liebaopay.com/ksbrowser/liebao_extensions/tree/master)

Chrome扩展构建插件(rollup-plugin)，将之前散文件开发的扩展项目接入工程化管理开发。

本插件提供以下功能：

1. 扩展开发支持热重载
2. 合并构建多个扩展项目

## 目录

  - [项目背景](#项目背景)
  - [安装依赖](#安装依赖)
  - [使用说明](#使用说明)
  - [构建生产](#构建生产)
  - [项目结构](#项目结构)
  - [注意事项](#注意事项)
  - [维护者](#维护者)

## 项目背景

`rollup-plugin-crx`，让浏览器扩展项目实现工程化。
> 以前的扩展项目是通过散文件的形式开发，项目松散，难以管理。而且开发调试繁琐，需要手动重新加载扩展项目。

## 安装依赖

项目通过 `monorepo` 形式管理代码，依赖安装管理通过 `lerna`，在 `liebao_extensions` 目录执行以下命令：

```sh
npm install
```
## 使用说明
```javascript
// 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()
  ],
});
```
## 构建生产
```sh
npm run build
```

## 项目结构
```bash
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](https://gitlab.liebaopay.com/mojinming)
npm package: @squidcloud/react-chat-widget
Description: 1. Rename `index-template.html` to `index.html` (`index.html` is git-ignored) and make any local modifications. 2. Run `npm run dev`.
Latest version: 1.0.24

# Development Mode

1. Rename `index-template.html` to `index.html` (`index.html` is git-ignored) and make any local modifications.
2. Run `npm run dev`.

# Production Mode

1. Run `npx serve .`.
2. Open `http://localhost:3000/test`.