Save-Image-as-Type 项目教程

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

Save-Image-as-Type/
├── _locales/
│   └── ... (多语言文件)
├── icons/
│   ├── icon-128.png
│   ├── icon-16.png
│   ├── icon-48.png
│   ├── icon-48.svg
│   └── icon-64.svg
├── screenshot-en.jpg
├── screenshot-zh.jpg
├── background.js
├── manifest.json
├── offscreen.html
├── offscreen.js
├── README.md
└── LICENSE

• _locales/: 包含扩展的多语言支持文件。
• icons/: 包含扩展的图标文件。
• screenshot-en.jpg 和 screenshot-zh.jpg: 扩展的截图。
• background.js: 扩展的后台脚本。
• manifest.json: 扩展的配置文件。
• offscreen.html 和 offscreen.js: 离屏页面和脚本。
• README.md: 项目的说明文档。
• LICENSE: 项目的许可证文件。

2. 项目的启动文件介绍

background.js 是扩展的启动文件，它包含了扩展的主要逻辑和功能。这个文件会在扩展安装或者浏览器启动时被加载。

// background.js 示例代码
chrome.contextMenus.create({
    id: "saveAsType",
    title: "Save image as PNG/JPG/WebP",
    contexts: ["image"]
});

chrome.contextMenus.onClicked.addListener((info, tab) => {
    if (info.menuItemId === "saveAsType") {
        // 处理保存图片的逻辑
    }
});

3. 项目的配置文件介绍

manifest.json 是扩展的配置文件，它定义了扩展的基本信息、权限、资源等。

{
    "manifest_version": 2,
    "name": "Save Image as Type",
    "version": "1.0",
    "description": "Add Save as PNG/JPG/WebP to the context menu of image",
    "icons": {
        "16": "icons/icon-16.png",
        "48": "icons/icon-48.png",
        "128": "icons/icon-128.png"
    },
    "background": {
        "scripts": ["background.js"]
    },
    "permissions": [
        "contextMenus",
        "activeTab"
    ],
    "browser_action": {
        "default_icon": {
            "16": "icons/icon-16.png",
            "48": "icons/icon-48.png",
            "128": "icons/icon-128.png"
        }
    }
}

• manifest_version: 指定 manifest 文件的版本。
• name: 扩展的名称。
• version: 扩展的版本号。
• description: 扩展的描述。
• icons: 扩展的图标。
• background: 指定后台脚本。
• permissions: 扩展所需的权限。
• browser_action: 浏览器动作的配置。