这是一个基于React和Antd UI库的Chrome插件模板项目。该模板封装了一些常见的基础库，如日志和消息通信，可用于快速构建React插件。

$ npm install $ npm run build

构建后会在extension生成相应的文件。在浏览器加载插件就可以运行了。

Popup

配置页

内容脚本注入

后台脚本入口

内容脚本入口

插件配置入口

一些通用的react组件

一些通用的库，如日志、消息通信、浏览器接口相关的函数

消息类

监听消息：

const message = new Message(); message.addListener('ping', function (request, sender, sendResponse) { sendResponse('pong'); }); import { dispatchMessage } from "./brower"; // 分发消息 dispatchMessage(message);

发送消息:

const message = new Message(); message.sendMessage('ping').then(response => { console.log('pong'); }); /src/lib/logger.js

日志类，支持console和http方式记录日志。

import { Logger, HttpHandler, ConsoleHandler } from "./lib/logger"; // 使用HTTP记录日志到服务器 const logger = new Logger('HTTP', new HttpHandler('https://log.youdomain.com/collect/')); logger.info('some message from client'); // 记录日志到控制台 const consoleLogger = new Logger('CONSOLE', new ConsoleHandler()); consoleLogger.info('message to console'); 在content-script使用插件内的资源（文件、html、css等）

import { getURL } from "./brower"; getURL('/images/chrome-icon.png');