feat(docs): add docs (#12)

* feat(docs): add docs

* feat(files): add config files

* fix config

---------

Co-authored-by: raojinlin <raojinlin302@gmail.com>

README.md

@@ -29,9 +29,6 @@ $ cd my-extension
 $ npm run build
 ```
 
-![](./screenshot/npx-create-chrome-extension.png)
-
-
 1. 克隆本项目
 ```shell
 git clone https://github.com/raojinlin/chrome-extension-react-antd-template.git
@@ -43,7 +40,24 @@ npm install
 npm run build
 ```
 
-3. 构建后会在```extension```生成相应的文件。在浏览器加载插件就可以运行了。
+3. 插件开发
+
+自动编译代码。编译完成后需要重新加载插件。
+
+![Alt text](./screenshot/image.png)
+
+- Linux或Mac
+```bash
+npm run start
+```
+
+- Windows
+```cmd
+start.bat
+```
+
+
+4. 构建后会在```extension```生成相应的文件。在浏览器加载插件就可以运行了。
 
 ![](./screenshot/install.png)
 
@@ -64,24 +78,25 @@ Popup
 
 ## 项目布局
 
+### ```src/manifest.development.js```
+开发环境的manifest配置
+
+### ```src/manifest.production.js```
+生产环境的manifest配置
+
 ### ```/src/backgorund.js```
 后台脚本入口
 
-
 ### ```/src/content-scripts.js```
-
 内容脚本入口
 
 ### ```/src/content-options.js```
-
 插件配置入口
 
 ### ```/src/components/```
-
 一些通用的react组件
 
 ### ```/src/lib```
-
 一些通用的库，如日志、消息通信、浏览器接口相关的函数
 
 #### ```/src/lib/message.js```
@@ -129,6 +144,18 @@ consoleLogger.info('message to console');
 
 ```
 
+### ```src/config.[test|prod|local].js```
+这个目录放置了插件的配置文件，test、prod、local分别表示三个不同的环境。默认使用local(development)环境。
+
+其中，default配置表示全局配置，在test或者prod环境下可以覆盖default的配置。
+
+#### 获取配置
+```js
+import { getConfig } from './lib/config';
+
+const config = getConfig(process.env.NODE_ENV); 
+```
+
 ### 在content-script使用插件内的资源（文件、html、css等）
 
 ```js

package.json

@@ -19,7 +19,6 @@
     "browserslist": "^4.22.2",
     "core-js": "^3.9.1",
     "date-fns": "^3.0.6",
-    "exceljs": "^4.4.0",
     "lodash": "^4.17.11",
     "luxon": "^3.4.4",
     "mem": "^9.0.1",

src/config/config.default.js

@@ -0,0 +1,10 @@
+export default {
+    logger: {
+        handler: 'http',
+        options: {
+            url: 'https://api.mywebsite.com/api/v1/clientlogs', 
+            method: 'POST',
+            formatter: 'json',
+        },
+    }
+}

src/config/config.local.js

@@ -0,0 +1,2 @@
+export default {
+}

src/config/config.prod.js

@@ -0,0 +1 @@
+export default {}

src/config/config.test.js

@@ -0,0 +1 @@
+export default {}

src/content-script.js

@@ -4,8 +4,10 @@ import { getURL } from "./lib/brower";
 import Message from "./lib/message";
 import {Logger, ConsoleHandler} from "./lib/logger";
 import Example from './components/Example';
+import { getConfig } from './lib/config';
 
-const logger = new Logger('ContentScript', new ConsoleHandler());
+const config = getConfig(process.env.NODE_ENV);
+const logger = Logger.createLogger('ContentScript', config.logger.handler, config.logger.options);
 
 function ContentScript({ }) {
   return (

src/lib/config.js

@@ -0,0 +1,23 @@
+const envNames = {
+    development: 'local',
+    test: 'test',
+    production: 'prod',
+    prod: 'prod',
+    default: 'default',
+};
+
+
+const getEnvConfig = env => {
+    return require(`../config/config.${envNames[env] || 'prod'}`).default;
+}
+
+/**
+ * 获取环境配置，使用传入的env配置覆盖default中已有的配置
+ * @param {string} env 
+ * @returns 
+ */
+export function getConfig(env) {
+    const envConfig = getEnvConfig(env);
+    const defaultConfig = getEnvConfig('default');
+    return Object.assign({}, defaultConfig, envConfig);
+}

src/lib/logger.js

@@ -1,3 +1,4 @@
+import { extend } from "lodash";
 import moment from "moment";
 
 const LOG_LEVEL_INFO = 'INFO';
@@ -13,6 +14,10 @@ export class AbstractLoggerHandler {
 
 
 export class ConsoleHandler extends AbstractLoggerHandler {
+  constructor(options) {
+    super(options);
+  }
+
   emit(msg, level='INFO') {
     switch (level) {
       case LOG_LEVEL_INFO:
@@ -31,18 +36,52 @@ export class ConsoleHandler extends AbstractLoggerHandler {
   }
 }
 
+
+class LoggerFormatter {
+  format(loggerName, level, msg) {}
+}
+
+
+class DefaultFormatter extends LoggerFormatter {
+  format(loggerName, msg, level) {
+    return `${moment().format()} ${loggerName} [${level}]: ${msg}`;
+  }
+}
+
+
+class JSONFormatter extends LoggerFormatter {
+  format(loggerName, msg, level) {
+    return {
+      time: moment().format(),
+      name: loggerName,
+      level,
+      msg
+    }
+  }
+}
+
+
 export class HttpHandler extends AbstractLoggerHandler {
-  constructor(url) {
-    super();
-    this.url = url;
+  constructor(options) {
+    super(options);
+    this.options = options;
+    if (this.options.format === 'json') {
+      this.formatter = new JSONFormatter();
+    }
   }
 
   emit(msg, level) {
     if (!level) {
       level = 'INFO';
     }
 
-    fetch(`${this.url}/${level}?message=${encodeURIComponent(msg)}`);
+    fetch(this.options.url, {
+      method: this.options.method || 'POST',
+      body: JSON.stringify(msg),
+      headers: {
+        'content-type': 'application/json',
+      }
+    })
   }
 }
 
@@ -61,6 +100,7 @@ export class Logger {
     this.loggerName = name;
     this.handler = handler;
     this._debug = false;
+    this.formatter = new DefaultFormatter();
   }
 
   setDebug(debug) {
@@ -77,7 +117,7 @@ export class Logger {
     return `${moment().format()} ${loggerName} [${level}]: ${msg}`;
   }
 
-  static messagesToString(...msg) {
+  static messageStringify(...msg) {
     return msg.map(item => {
       if (item instanceof Error) {
         return item;
@@ -88,22 +128,32 @@ export class Logger {
   }
 
   info(...msg) {
-    this.handler.emit(Logger.getFormattedMessage(this.loggerName, Logger.messagesToString(...msg), Logger.INFO), 'INFO');
+    this.handler.emit(this.formatter.format(this.loggerName, Logger.messageStringify(...msg), Logger.INFO), 'INFO');
   }
 
   debug(...msg) {
     if (!this._debug) {
       return;
     }
 
-    this.handler.emit(Logger.getFormattedMessage(this.loggerName, Logger.messagesToString(...msg), Logger.DEBUG), 'DEBUG');
+    this.handler.emit(this.formatter.format(this.loggerName, Logger.messageStringify(...msg), Logger.DEBUG), 'DEBUG');
   }
 
   error(...msg) {
-    this.handler.emit(Logger.getFormattedMessage(this.loggerName, Logger.messagesToString(...msg), Logger.ERROR), 'ERROR');
+    this.handler.emit(this.formatter.format(this.loggerName, Logger.messageStringify(...msg), Logger.ERROR), 'ERROR');
   }
 
-  static createLogger(loggerName) {
-    return new Logger(loggerName, new ConsoleHandler());
+  static createLogger(loggerName, handlerName, handlerOptions) {
+    const handlers = {console: ConsoleHandler, http: HttpHandler};
+    if (!handlerName) {
+      handlerName = 'console';
+    }
+
+    const logger = new Logger(loggerName, new handlers[handlerName](handlerOptions));
+    if (handlerOptions.formatter === 'json') {
+      logger.formatter = new JSONFormatter();
+    }
+
+    return logger;
   }
 }

start.bat

@@ -0,0 +1,5 @@
+@REM set NODE_OPTIONS=--openssl-legacy-provider
+set ENV=development
+
+
+npx webpack watch --config webpack.config.js