FakeFiller 扩展项目教程

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

FakeFiller 扩展项目的目录结构如下：

fake-filler-extension/
├── assets/
│   ├── icons/
│   └── logo.png
├── dist/
├── src/
│   ├── content.js
│   ├── background.js
│   ├── options.js
│   ├── popup.js
│   ├── options.html
│   ├── popup.html
│   └── styles/
├── .gitignore
├── manifest.json
├── package.json
├── README.md
└── webpack.config.js

目录介绍

• assets/: 包含项目的图标和logo图片。
• dist/: 构建后的文件存放目录。
• src/: 源代码目录，包含内容脚本、背景脚本、选项页面、弹出页面和样式文件。
• .gitignore: Git忽略文件配置。
• manifest.json: 扩展的配置文件。
• package.json: 项目的依赖和脚本配置。
• README.md: 项目说明文档。
• webpack.config.js: Webpack配置文件。

2. 项目的启动文件介绍

项目的启动文件主要包括 manifest.json 和 src/ 目录下的几个关键脚本文件。

manifest.json

manifest.json 是扩展的配置文件，定义了扩展的基本信息、权限、启动文件等。关键配置如下：

{
  "manifest_version": 2,
  "name": "Fake Filler",
  "version": "2.3.0",
  "description": "A browser extension that fills all input fields on a page with fake/dummy data.",
  "permissions": [
    "activeTab",
    "storage"
  ],
  "background": {
    "scripts": ["src/background.js"],
    "persistent": false
  },
  "browser_action": {
    "default_icon": {
      "16": "assets/icons/icon16.png",
      "48": "assets/icons/icon48.png",
      "128": "assets/icons/icon128.png"
    },
    "default_popup": "src/popup.html"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["src/content.js"],
      "run_at": "document_end"
    }
  ],
  "options_ui": {
    "page": "src/options.html",
    "open_in_tab": true
  }
}

关键脚本文件

• src/background.js: 背景脚本，处理扩展的后台逻辑。
• src/content.js: 内容脚本，注入到网页中，负责填充假数据。
• src/popup.js: 弹出页面的脚本，处理用户与弹出页面的交互。
• src/options.js: 选项页面的脚本，处理用户自定义设置。

3. 项目的配置文件介绍

package.json

package.json 文件定义了项目的依赖和脚本配置。关键配置如下：

{
  "name": "fake-filler-extension",
  "version": "2.3.0",
  "description": "A browser extension that fills all input fields on a page with fake/dummy data.",
  "scripts": {
    "build": "webpack",
    "watch": "webpack --watch",
    "lint": "eslint src --ext .js",
    "lint:fix": "eslint src --ext .js --fix"
  },
  "dependencies": {
    "faker": "^5.5.3"
  },
  "devDependencies": {
    "eslint": "^7.29.0",
    "webpack": "^5.38.1",
    "webpack-cli": "^4.7.2"
  }
}

webpack.config.js

webpack.config.js 文件是 Webpack 的配置文件，定义了如何打包项目。关键配置如下：

const path = require('path');

module.exports = {
  entry: {