Picee 项目教程

Picee 项目教程

picee Using Github as your image hosting service. 项目地址: https://gitcode.com/gh_mirrors/pi/picee

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

Picee 项目的目录结构如下：

picee/
├── .gitignore
├── LICENSE
├── README.md
├── package.json
└── picee/
    ├── background.js
    ├── content.js
    ├── manifest.json
    ├── popup.html
    └── popup.js

目录结构介绍

• .gitignore: 用于指定 Git 版本控制系统忽略的文件和目录。
• LICENSE: 项目的开源许可证文件，Picee 使用 MIT 许可证。
• README.md: 项目的说明文档，包含项目的安装、使用和配置信息。
• package.json: 项目的依赖管理文件，包含项目的依赖包和脚本命令。
• picee/: 项目的核心代码目录。
  • background.js: 扩展的后台脚本，处理后台任务和事件。
  • content.js: 内容脚本，注入到网页中执行的脚本。
  • manifest.json: Chrome 扩展的清单文件，定义扩展的配置和权限。
  • popup.html: 扩展的弹出页面，用户点击扩展图标时显示的页面。
  • popup.js: 弹出页面的脚本文件，处理用户交互和逻辑。

2. 项目的启动文件介绍

Picee 项目的启动文件主要是 background.js 和 popup.js。

background.js

background.js 是 Picee 扩展的后台脚本，负责处理后台任务和事件。它通常用于监听浏览器事件、管理扩展的状态和执行后台操作。

popup.js

popup.js 是 Picee 扩展的弹出页面脚本，负责处理用户在弹出页面上的交互。用户点击扩展图标时，弹出页面会显示，popup.js 会处理用户的操作，如上传图片、显示结果等。

3. 项目的配置文件介绍

Picee 项目的主要配置文件是 manifest.json。

manifest.json

manifest.json 是 Chrome 扩展的清单文件，定义了扩展的配置和权限。以下是 Picee 项目的 manifest.json 文件内容示例：

{
  "manifest_version": 2,
  "name": "Picee",
  "version": "1.0",
  "description": "Using Github as your image hosting service",
  "permissions": [
    "activeTab",
    "storage",
    "https://api.github.com/"
  ],
  "background": {
    "scripts": ["background.js"]
  },
  "browser_action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/icon16.png",
      "48": "images/icon48.png",
      "128": "images/icon128.png"
    }
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ]
}

配置文件介绍

• manifest_version: 指定清单文件的版本，通常为 2 或 3。
• name: 扩展的名称。
• version: 扩展的版本号。
• description: 扩展的描述信息。
• permissions: 扩展所需的权限，如访问当前标签页、存储数据、访问 GitHub API 等。
• background: 定义后台脚本文件。
• browser_action: 定义扩展的浏览器动作，包括弹出页面的 HTML 文件和图标。
• content_scripts: 定义内容脚本，指定注入到网页中的脚本文件和匹配的 URL 模式。

通过以上配置，Picee 扩展能够在浏览器中正常运行，并实现将图片上传到 GitHub 的功能。

picee Using Github as your image hosting service. 项目地址: https://gitcode.com/gh_mirrors/pi/picee