Chrome 扩展开发指南

项目目录结构及介绍

chrome-extension-book/
├── README.md
├── bbx_cover.png
├── manifest.json
├── src/
│   ├── background.js
│   ├── content.js
│   ├── options.html
│   ├── popup.html
│   └── styles.css
└── webpack.config.js

• README.md: 项目说明文档。
• bbx_cover.png: 项目封面图片。
• manifest.json: Chrome 扩展的配置文件。
• src/: 源代码目录。
  • background.js: 后台脚本文件。
  • content.js: 内容脚本文件。
  • options.html: 选项页面。
  • popup.html: 弹出页面。
  • styles.css: 样式文件。
• webpack.config.js: Webpack 配置文件。

项目的启动文件介绍

• manifest.json: 这是 Chrome 扩展的入口文件，定义了扩展的基本信息、权限、以及启动的脚本和页面。
• background.js: 后台脚本，负责处理扩展的后台逻辑。
• popup.html: 弹出页面，用户点击扩展图标时显示的页面。

项目的配置文件介绍

• manifest.json:

  {
    "manifest_version": 2,
    "name": "Chrome Extension Book",
    "version": "1.0",
    "description": "A guide to building modern Chrome extensions.",
    "permissions": [
      "activeTab",
      "storage"
    ],
    "background": {
      "scripts": ["src/background.js"],
      "persistent": false
    },
    "browser_action": {
      "default_popup": "src/popup.html",
      "default_icon": {
        "16": "bbx_cover.png",
        "48": "bbx_cover.png",
        "128": "bbx_cover.png"
      }
    },
    "options_page": "src/options.html"
  }
  

• webpack.config.js:

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

以上是 Chrome 扩展开发指南的基本内容，涵盖了项目的目录结构、启动文件和配置文件的介绍。希望这些信息能帮助你更好地理解和开发 Chrome 扩展。