HTML5 Outliner Chrome 扩展项目教程

HTML5 Outliner Chrome 扩展项目教程

h5o-chromeHTML5 outliner (Chrome extension)项目地址:https://gitcode.com/gh_mirrors/h5/h5o-chrome

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

HTML5 Outliner Chrome 扩展项目的目录结构如下：

h5o-chrome/
├── dist/
│   └── extension/
├── src/
│   ├── background.js
│   ├── content.js
│   ├── manifest.json
│   └── popup.html
├── .gitignore
├── LICENSE
├── README.md
└── package.json

目录介绍

• dist/extension/: 编译后的扩展程序文件。
• src/: 源代码目录。
  • background.js: 后台脚本文件。
  • content.js: 内容脚本文件。
  • manifest.json: 扩展程序的配置文件。
  • popup.html: 扩展程序的弹出页面。
• .gitignore: Git 忽略文件配置。
• LICENSE: 项目许可证文件。
• README.md: 项目说明文档。
• package.json: 项目依赖和脚本配置文件。

2. 项目的启动文件介绍

HTML5 Outliner Chrome 扩展项目的启动文件主要包括：

• manifest.json: 这是 Chrome 扩展程序的核心配置文件，定义了扩展程序的基本信息、权限、启动文件等。

manifest.json 示例

{
  "manifest_version": 2,
  "name": "HTML5 Outliner",
  "version": "0.8.14",
  "description": "Generates a navigable page outline with heading and sectioning elements",
  "permissions": [
    "activeTab"
  ],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "browser_action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ]
}

3. 项目的配置文件介绍

HTML5 Outliner Chrome 扩展项目的主要配置文件是 manifest.json，它包含了扩展程序的所有配置信息。

manifest.json 配置项介绍

• manifest_version: 指定 manifest 文件的版本，目前为 2。
• name: 扩展程序的名称。
• version: 扩展程序的版本号。
• description: 扩展程序的描述。
• permissions: 扩展程序所需的权限，例如 activeTab 表示当前活动标签页的访问权限。
• background: 后台脚本的配置，包括脚本文件和是否持久化。
• browser_action: 浏览器动作的配置，包括弹出页面的 HTML 文件和图标。
• content_scripts: 内容脚本的配置，包括匹配的 URL 和注入的脚本文件。

通过以上配置，HTML5 Outliner 扩展程序能够在浏览器中生成并显示页面的导航结构。

h5o-chromeHTML5 outliner (Chrome extension)项目地址:https://gitcode.com/gh_mirrors/h5/h5o-chrome