GitHub Material Icons 扩展项目教程

GitHub Material Icons 扩展项目教程

github-material-icons-extension项目地址:https://gitcode.com/gh_mirrors/gi/github-material-icons-extension

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

github-material-icons-extension/
├── assets/
│   ├── icons/
│   └── styles/
├── dist/
├── src/
│   ├── background/
│   ├── content/
│   ├── options/
│   └── popup/
├── .gitignore
├── LICENSE
├── README.md
├── package.json
├── webpack.config.js
└── yarn.lock

• assets/: 包含项目的图标和样式文件。
  • icons/: 存放扩展使用的图标文件。
  • styles/: 存放样式文件。
• dist/: 构建输出目录，包含最终打包的扩展文件。
• src/: 源代码目录。
  • background/: 存放后台脚本。
  • content/: 存放内容脚本。
  • options/: 存放选项页面脚本。
  • popup/: 存放弹出页面脚本。
• .gitignore: Git 忽略文件配置。
• LICENSE: 项目许可证。
• README.md: 项目说明文档。
• package.json: 项目依赖和脚本配置。
• webpack.config.js: Webpack 配置文件。
• yarn.lock: Yarn 依赖锁定文件。

2. 项目的启动文件介绍

项目的启动文件主要位于 src/ 目录下：

• background/index.js: 后台脚本，负责扩展的后台逻辑。
• content/index.js: 内容脚本，注入到 GitHub 页面中，用于修改页面内容。
• options/index.js: 选项页面脚本，用于配置扩展的选项。
• popup/index.js: 弹出页面脚本，用户点击扩展图标时显示的页面。

3. 项目的配置文件介绍

• package.json: 包含项目的依赖、脚本和其他元数据。

  {
    "name": "github-material-icons-extension",
    "version": "1.0.0",
    "description": "Material Icons for GitHub",
    "scripts": {
      "build": "webpack",
      "watch": "webpack --watch"
    },
    "dependencies": {
      "react": "^17.0.2",
      "react-dom": "^17.0.2"
    },
    "devDependencies": {
      "webpack": "^5.0.0",
      "webpack-cli": "^4.0.0"
    }
  }
  

• webpack.config.js: Webpack 配置文件，用于构建和打包扩展。

  const path = require('path');
  
  module.exports = {
    entry: {
      background: './src/background/index.js',
      content: './src/content/index.js',
      options: './src/options/index.js',
      popup: './src/popup/index.js'
    },
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: '[name].js'
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader'
          }
        }
      ]
    }
  };
  

通过以上配置，可以构建和运行 github-material-icons-extension 扩展项目。

github-material-icons-extension项目地址:https://gitcode.com/gh_mirrors/gi/github-material-icons-extension