FoxyProxy Firefox 扩展项目教程

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

FoxyProxy Firefox 扩展项目的目录结构如下：

/firefox-extension
├── .github
│   └── workflows
│       └── ci.yml
├── _locales
│   ├── en
│   │   └── messages.json
│   └── zh_CN
│       └── messages.json
├── data
│   └── icons
│       ├── foxyproxy-icon-16.png
│       ├── foxyproxy-icon-32.png
│       └── foxyproxy-icon-64.png
├── doc
│   └── images
│       └── screenshot.png
├── lib
│   ├── background.js
│   ├── content.js
│   └── options.js
├── skin
│   ├── foxyproxy.css
│   └── images
│       ├── foxyproxy-icon-16.png
│       ├── foxyproxy-icon-32.png
│       └── foxyproxy-icon-64.png
├── test
│   ├── background.test.js
│   ├── content.test.js
│   └── options.test.js
├── .eslintrc.json
├── .gitignore
├── .prettierrc
├── LICENSE
├── README.md
├── package.json
├── webpack.config.js
└── manifest.json

目录结构介绍

• .github/workflows/ci.yml: GitHub Actions 的持续集成配置文件。
• _locales/: 存放多语言支持的文件夹，每个子文件夹代表一种语言，如 en 表示英文，zh_CN 表示中文。
• data/icons/: 存放扩展图标的文件夹。
• doc/images/: 存放文档图片的文件夹。
• lib/: 存放主要的 JavaScript 文件，包括后台脚本 (background.js)、内容脚本 (content.js) 和选项页面脚本 (options.js)。
• skin/: 存放样式文件 (foxyproxy.css) 和图片资源。
• test/: 存放测试脚本。
• .eslintrc.json: ESLint 配置文件。
• .gitignore: Git 忽略文件配置。
• .prettierrc: Prettier 代码格式化配置。
• LICENSE: 项目许可证。
• README.md: 项目说明文档。
• package.json: 项目依赖和脚本配置。
• webpack.config.js: Webpack 配置文件。
• manifest.json: Firefox 扩展的清单文件。

2. 项目的启动文件介绍

FoxyProxy Firefox 扩展的启动文件主要是 manifest.json 和 background.js。

manifest.json

manifest.json 是 Firefox 扩展的清单文件，包含了扩展的基本信息和配置，例如扩展的名称、版本、权限、启动脚本等。以下是 manifest.json 的部分内容：

{
  "manifest_version": 2,
  "name": "FoxyProxy",
  "version": "8.0.0",
  "description": "Advanced proxy management tool for Firefox",
  "icons": {
    "16": "data/icons/foxyproxy-icon-16.png",
    "32": "data/icons/foxyproxy-icon-32.png",
    "64": "data/icons/foxyproxy-icon-64.png"
  },
  "background": {
    "scripts": ["lib/background.js"]
  },
  "permissions": [
    "proxy",
    "storage",
    "tabs",
    "webRequest",
    "webRequestBlocking",
    "<all_urls>"
  ],
  "browser_action": {
    "default_icon": {
      "16": "data/icons/foxyproxy-icon-16.png",
      "32": "data/icons/foxyproxy-icon-32.png",
      "64": "data/icons/foxyproxy-icon-64.png"
    },
    "default_title": "FoxyProxy"
  }
}

background.js

background.js 是扩展的后台脚本，负责处理扩展的主要逻辑和事件监听。以下