LibRedirect 浏览器扩展项目教程

LibRedirect 浏览器扩展项目教程

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

LibRedirect 浏览器扩展项目的目录结构如下：

libredirect/
├── _locales/
├── assets/
├── src/
│   ├── background/
│   ├── content_scripts/
│   ├── options/
│   ├── popup/
│   ├── utils/
│   └── manifest.json
├── .gitignore
├── LICENSE
├── README.md
└── package.json

目录介绍

• _locales/: 存放多语言支持的文件。
• assets/: 存放静态资源文件，如图片等。
• src/: 项目的源代码目录。
  • background/: 存放后台脚本文件。
  • content_scripts/: 存放内容脚本文件。
  • options/: 存放选项页面的文件。
  • popup/: 存放弹出窗口的文件。
  • utils/: 存放工具函数和辅助文件。
  • manifest.json: 项目的配置文件。
• .gitignore: Git 忽略文件配置。
• LICENSE: 项目的开源许可证。
• README.md: 项目的说明文档。
• package.json: 项目的依赖和脚本配置文件。

2. 项目的启动文件介绍

LibRedirect 浏览器扩展项目的启动文件主要是 manifest.json 文件。这个文件定义了扩展的基本信息和启动配置。

manifest.json 文件示例

{
  "manifest_version": 3,
  "name": "LibRedirect",
  "version": "1.0",
  "description": "A browser extension to redirect links to alternative services.",
  "permissions": [
    "webRequest",
    "webRequestBlocking",
    "storage"
  ],
  "background": {
    "service_worker": "src/background/index.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["src/content_scripts/index.js"]
    }
  ],
  "options_ui": {
    "page": "src/options/index.html",
    "open_in_tab": true
  },
  "action": {
    "default_popup": "src/popup/index.html",
    "default_icon": {
      "16": "assets/icon16.png",
      "48": "assets/icon48.png",
      "128": "assets/icon128.png"
    }
  },
  "icons": {
    "16": "assets/icon16.png",
    "48": "assets/icon48.png",
    "128": "assets/icon128.png"
  }
}

启动文件介绍

• background.service_worker: 指定后台服务工作者的脚本文件路径。
• content_scripts: 指定内容脚本的匹配规则和脚本文件路径。
• options_ui: 指定选项页面的 HTML 文件路径。
• action: 指定扩展图标和弹出窗口的 HTML 文件路径。

3. 项目的配置文件介绍

LibRedirect 浏览器扩展项目的配置文件主要是 manifest.json 文件。这个文件包含了扩展的所有配置信息。

配置文件介绍

• manifest_version: 指定 manifest 文件的版本，当前为 3。
• name: 扩展的名称。
• version: 扩展的版本号。
• description: 扩展的描述信息。
• permissions: 扩展所需的权限列表。
• background: 后台服务工作者的配置。
• content_scripts: 内容脚本的配置。
• options_ui: 选项页面的配置。
• action: 扩展图标和弹出窗口的配置。
• icons: 扩展图标的配置。

通过这些配置，可以定义扩展的行为、权限和界面。