【亲测免费】 Zotero Reading List 项目使用教程

1. 项目目录结构及介绍

zotero-reading-list/
├── LICENSE
├── README.md
├── package.json
├── src/
│   ├── background.ts
│   ├── content.ts
│   ├── options.ts
│   └── popup.ts
├── public/
│   ├── icons/
│   ├── options.html
│   └── popup.html
└── dist/
    ├── background.js
    ├── content.js
    ├── options.js
    └── popup.js

目录结构说明

• LICENSE: 项目的开源许可证文件，本项目使用 GPL-3.0 许可证。
• README.md: 项目的介绍文件，包含项目的基本信息、安装方法和使用说明。
• package.json: 项目的依赖管理文件，包含项目的依赖库和脚本命令。
• src/: 项目的源代码目录，包含 TypeScript 文件。
  • background.ts: 后台脚本文件，处理后台任务。
  • content.ts: 内容脚本文件，处理页面内容。
  • options.ts: 选项页面脚本文件，处理用户设置。
  • popup.ts: 弹出窗口脚本文件，处理用户交互。
• public/: 项目的静态资源目录，包含 HTML 文件和图标。
  • icons/: 图标文件夹，包含项目的图标文件。
  • options.html: 选项页面 HTML 文件。
  • popup.html: 弹出窗口 HTML 文件。
• dist/: 项目的构建输出目录，包含编译后的 JavaScript 文件。
  • background.js: 编译后的后台脚本文件。
  • content.js: 编译后的内容脚本文件。
  • options.js: 编译后的选项页面脚本文件。
  • popup.js: 编译后的弹出窗口脚本文件。

2. 项目启动文件介绍

项目的启动文件主要位于 src/ 目录下，包括以下几个关键文件：

• background.ts: 这是项目的后台脚本文件，负责处理后台任务，如数据存储和定时任务。启动项目时，后台脚本会自动加载并运行。
• content.ts: 这是项目的内容脚本文件，负责处理页面内容。启动项目时，内容脚本会注入到网页中，与用户交互。
• popup.ts: 这是项目的弹出窗口脚本文件，负责处理用户在弹出窗口中的操作。启动项目时，弹出窗口会根据用户操作动态加载。

3. 项目的配置文件介绍

项目的配置文件主要包括 package.json 和 tsconfig.json。

package.json

package.json 是项目的依赖管理文件，包含项目的依赖库和脚本命令。以下是关键配置项：

{
  "name": "zotero-reading-list",
  "version": "1.0.0",
  "description": "Keep track of whether you've read items in Zotero",
  "main": "src/background.ts",
  "scripts": {
    "build": "tsc",
    "start": "npm run build && node dist/background.js"
  },
  "dependencies": {
    "typescript": "^4.0.0"
  }
}

• name: 项目名称。
• version: 项目版本号。
• description: 项目描述。
• main: 项目的主入口文件。
• scripts: 项目的脚本命令，如 build 用于编译 TypeScript 文件，start 用于启动项目。
• dependencies: 项目的依赖库，如 typescript。

tsconfig.json

tsconfig.json 是 TypeScript 的配置文件，用于配置 TypeScript 编译器的行为。以下是关键配置项：

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true
  }
}

• target: 指定编译后的 JavaScript 版本。
• module: 指定模块系统。
• outDir: 指定编译输出目录。
• rootDir: 指定源代码目录。
• strict: 启用严格模式。
• esModuleInterop: 启用 ES 模块互操作性。

通过以上配置，项目可以正确编译和运行。