extension.js 项目快速入门指南

extension.js 项目快速入门指南

extension.js🧩 Plug-and-play, zero-config, cross-browser extension development tool. 项目地址:https://gitcode.com/gh_mirrors/ext/extension.js

1. 项目目录结构及介绍

当你创建一个新的扩展项目时，extension.js 会生成一个默认的目录结构。以下是基本布局：

your-extension-name/
├── manifest.json         # 扩展的清单文件，定义了扩展的基本信息和权限
├── src/                  # 源代码目录
│   ├── background.js     # 背景脚本，用于处理持久化逻辑或事件监听
│   └── popup.html        # 弹出窗口的HTML文件
│   └── popup.js          # 弹出窗口的JavaScript文件
│   └── icons/            # 图标资源
└── node_modules/         # 依赖包
└── package.json          # npm配置文件，包含了开发脚本
└── .gitignore             # Git忽略文件列表

• manifest.json: 必要的浏览器扩展配置文件。
• src/: 存放源代码的地方，包括背景脚本、弹窗页面和其他资源。
• background.js: 扩展在后台运行的逻辑代码。
• popup.html/js: 扩展弹出界面的HTML和JavaScript文件。
• icons/: 存放扩展图标的所有尺寸版本。
• node_modules/: 安装的npm包。
• package.json: 包含项目元数据和npm脚本。

2. 项目的启动文件介绍

在extension.js项目中，主要的启动文件有以下几个：

• manifest.json: 这是浏览器扩展的核心配置文件，它指定了扩展的名字、描述、版本等信息，以及必要的权限和内容脚本设置。

• background.js: 背景脚本是扩展的起点，常用于处理持续运行的任务或者监听浏览器事件。在manifest.json中通过"background"字段指定此文件。

• popup.js: 当用户点击扩展图标时，popup.html会被打开，与其关联的popup.js将执行，提供弹出窗口的功能。

3. 项目的配置文件介绍

manifest.json

manifest.json是浏览器识别和管理扩展的关键文件，它包含了如下重要字段：

• "name": 扩展的名称。
• "version": 扩展的版本号。
• "description": 扩展的简短描述。
• "permissions": 需要获取的浏览器权限。
• "browser_action" 或 "page_action": 设置扩展按钮的行为。
• "background": 定义背景脚本的配置。
• "content_scripts": 注册要在网页上下文中运行的脚本。

package.json

package.json 文件用于npm包管理和脚本设置，通常包含以下关键字段：

• "name": 你的npm包名。
• "version": 版本号。
• "scripts": 开发相关的命令，如 "dev" (运行开发服务器) 和 "build" (编译生产代码)。
• "dependencies" 和 "devDependencies": 项目的依赖库。

例如：

{
  "name": "my-extension",
  "version": "1.0.0",
  "scripts": {
    "dev": "extension dev",
    "build": "extension build"
  },
  "devDependencies": {
    "extension": "^latest"
  }
}

这些脚本可以通过npm run命令来调用，比如npm run dev来启动开发服务器。

现在你已经对extension.js项目的基础架构有了了解，可以开始使用这个工具创建并开发你的浏览器扩展了。祝你好运！

extension.js🧩 Plug-and-play, zero-config, cross-browser extension development tool. 项目地址:https://gitcode.com/gh_mirrors/ext/extension.js