微信读书评论插件项目教程

1. 项目的目录结构及介绍

微信读书评论插件项目的目录结构如下：

wx-read-comment-extension/
├── .babelrc
├── .eslintrc
├── .gitignore
├── .npmrc
├── .prettierrc
├── LICENSE
├── README.md
├── package-lock.json
├── package.json
├── tsconfig.json
├── webpack.config.js
├── src/
│   ├── utils/
│   ├── index.ts
│   ├── background.ts
│   ├── contentScript.ts
│   └── popup.ts
└──dist/

• .babelrc: Babel 配置文件，用于设置JavaScript的转译规则。
• .eslintrc: ESLint 配置文件，用于设置代码风格检查的规则。
• .gitignore: Git 忽略文件，用于指定哪些文件和目录不应该被 Git 跟踪。
• .npmrc: npm 配置文件，用于设置npm的运行参数。
• .prettierrc: Prettier 配置文件，用于统一代码格式。
• LICENSE: 项目的许可证文件，本项目使用MIT许可证。
• README.md: 项目说明文件，包含了项目的介绍、使用方法和功能规划等信息。
• package-lock.json: npm依赖锁定文件，用于确保安装的依赖版本一致。
• package.json: npm包配置文件，定义了项目的依赖、脚本和元数据。
• tsconfig.json: TypeScript配置文件，用于指定TypeScript编译器的选项。
• webpack.config.js: Webpack配置文件，用于配置Webpack打包过程。
• src/: 源代码目录。
  • utils/: 存放工具类代码的目录。
  • index.ts: 插件的主入口文件。
  • background.ts: 后台脚本文件，负责插件的背景任务。
  • contentScript.ts: 注入到网页中的脚本文件，负责操作网页内容。
  • popup.ts: 弹出窗口的脚本文件。
• dist/: 构建目录，存放构建后的文件。

2. 项目的启动文件介绍

项目的启动文件是index.ts。此文件负责初始化插件，并设置插件的主要逻辑。以下是启动文件的基本结构：

// 引入需要的类型和函数
import { Browser, Background } from 'some-types';

// 定义插件背景页
const background: Background = {
  // 背景页逻辑
};

// 插件安装或更新时执行的操作
chrome.runtime.onInstalled.addListener(() => {
  // 安装或更新逻辑
});

// 插件其他逻辑

3. 项目的配置文件介绍

项目的配置文件包括.babelrc、.eslintrc、.prettierrc、tsconfig.json和webpack.config.js。

• .babelrc: 设置Babel的转译规则，例如：

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-typescript"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties"
  ]
}

• .eslintrc: 设置ESLint的检查规则，例如：

{
  "extends": "eslint:recommended",
  "rules": {
    "indent": ["error", 2],
    "linebreak-style": ["error", "unix"],
    "quotes": ["error", "double"],
    "semi": ["error", "always"],
    "no-unused-vars": ["warn"]
  }
}

• .prettierrc: 设置Prettier的代码格式化规则，例如：

{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2
}

• tsconfig.json: 设置TypeScript编译器的选项，例如：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

• webpack.config.js: 设置Webpack的打包配置，例如：

const path = require('path');

module.exports = {
  entry: './src/index.ts',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  resolve: {
    extensions: ['.ts', '.js']
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  }
};