Minimal Notes 开源项目使用教程

Minimal Notes 开源项目使用教程

Minimal-NotesMinimal Notes web app build with Vue.js项目地址:https://gitcode.com/gh_mirrors/mi/Minimal-Notes

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

Minimal Notes 项目的目录结构相对简单，主要包含以下几个部分：

Minimal-Notes/
├── css/
│   └── style.css
├── js/
│   └── script.js
├── manifest.json
├── README.md
└── icons/
    ├── icon16.png
    ├── icon48.png
    └── icon128.png

• css/ 目录：包含项目的样式文件 style.css。
• js/ 目录：包含项目的脚本文件 script.js。
• manifest.json 文件：项目的配置文件，定义了扩展的基本信息和权限。
• README.md 文件：项目的说明文档。
• icons/ 目录：包含扩展图标，分别是 icon16.png、icon48.png 和 icon128.png。

2. 项目的启动文件介绍

Minimal Notes 的启动文件主要是 manifest.json 文件。这个文件定义了扩展的基本信息、权限和启动方式。以下是 manifest.json 文件的主要内容：

{
  "manifest_version": 3,
  "name": "Minimal Notes",
  "version": "1.0.4",
  "description": "A simple, free, open-source and offline note-taking extension.",
  "permissions": [
    "contextMenus",
    "storage"
  ],
  "background": {
    "service_worker": "js/script.js"
  },
  "action": {
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  },
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  }
}

• manifest_version：指定 manifest 文件的版本，这里是版本 3。
• name：扩展的名称。
• version：扩展的版本号。
• description：扩展的描述。
• permissions：扩展所需的权限，包括 contextMenus 和 storage。
• background：指定后台服务工作文件 js/script.js。
• action 和 icons：定义扩展的图标。

3. 项目的配置文件介绍

Minimal Notes 的配置文件是 manifest.json。这个文件不仅定义了扩展的基本信息，还包含了权限和启动方式的配置。以下是一些关键配置项的介绍：

• permissions：定义了扩展所需的权限，包括 contextMenus（上下文菜单）和 storage（存储）。
• background：指定后台服务工作文件 js/script.js，这是扩展的主要逻辑文件。
• action 和 icons：定义了扩展的图标，这些图标会在浏览器的工具栏中显示。

通过这些配置，Minimal Notes 能够在用户选择文本后，通过右键菜单快速进行笔记记录，并将笔记存储在本地。

Minimal-NotesMinimal Notes web app build with Vue.js项目地址:https://gitcode.com/gh_mirrors/mi/Minimal-Notes