开源项目 `browser-extension` 使用教程

最新推荐文章于 2024-09-02 08:42:51 发布

卓蔷蓓Mark

最新推荐文章于 2024-09-02 08:42:51 发布

阅读量569

点赞数 14

本文链接：https://blog.csdn.net/gitblog_01101/article/details/141770969

版权

开源项目 `browser-extension` 使用教程

browser-extensionBrowser extension that enhances the FACEIT experience and adds useful features项目地址:https://gitcode.com/gh_mirrors/browserext/browser-extension

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

browser-extension/
├── src/
│   ├── background/
│   │   └── index.js
│   ├── content/
│   │   └── index.js
│   ├── options/
│   │   └── index.html
│   ├── popup/
│   │   └── index.html
│   └── manifest.json
├── dist/
├── package.json
└── README.md

src/: 源代码目录，包含扩展的主要功能代码。
- background/: 后台脚本目录，处理扩展的后台逻辑。
- content/: 内容脚本目录，处理网页内容相关的逻辑。
- options/: 选项页面目录，提供用户自定义设置的界面。
- popup/: 弹出页面目录，用户点击扩展图标时显示的界面。
- manifest.json: 扩展的配置文件，定义扩展的基本信息和权限。
dist/: 构建后的输出目录，包含最终打包的扩展文件。
package.json: 项目的依赖管理文件，定义项目所需的依赖和脚本。
README.md: 项目说明文档，提供项目的概述和使用说明。

2. 项目的启动文件介绍

src/background/index.js: 后台脚本，负责处理扩展的后台逻辑，如监听事件、定时任务等。
src/content/index.js: 内容脚本，注入到网页中执行，处理与网页内容相关的逻辑。
src/options/index.html: 选项页面，提供用户自定义设置的界面。
src/popup/index.html: 弹出页面，用户点击扩展图标时显示的界面。

3. 项目的配置文件介绍

src/manifest.json: 扩展的配置文件，定义扩展的基本信息和权限。

{
  "manifest_version": 2,
  "name": "Browser Extension",
  "version": "1.0",
  "description": "A simple browser extension.",
  "permissions": [
    "activeTab",
    "storage"
  ],
  "background": {
    "scripts": ["background/index.js"],
    "persistent": false
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content/index.js"]
    }
  ],
  "browser_action": {
    "default_popup": "popup/index.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  },
  "options_ui": {
    "page": "options/index.html",
    "open_in_tab": true
  }
}

manifest_version: 指定 manifest 文件的版本，目前为 2。
name: 扩展的名称。
version: 扩展的版本号。
description: 扩展的描述。
permissions: 扩展所需的权限，如 activeTab 和 storage。
background: 后台脚本的配置，指定脚本文件和是否持久化。
content_scripts: 内容脚本的配置，指定匹配的 URL 和脚本文件。
browser_action: 浏览器动作的配置，指定弹出页面的文件和图标。
options_ui: 选项页面的配置，指定选项页面的文件和是否在新标签页中打开。