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
是扩展的后台脚本,负责处理扩展的主要逻辑和事件监听。以下