Tab Stash 项目使用教程

2024-08-18 11:51:59作者：伍霜盼Ellen

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

Tab Stash 是一个用于保存和恢复标签页的 Firefox 扩展。以下是其主要目录结构及介绍：

tab-stash/
├── _locales/          # 多语言支持文件
├── icons/             # 扩展图标
├── src/               # 源代码目录
│   ├── background/    # 后台脚本
│   ├── content/       # 内容脚本
│   ├── sidebar/       # 侧边栏脚本
│   ├── options/       # 选项页面
│   └── popup/         # 弹出窗口
├── manifest.json      # 扩展配置文件
└── README.md          # 项目说明文档

1.1 _locales 目录

该目录包含扩展的多语言支持文件，每个子目录对应一种语言，如 en 表示英语。

1.2 icons 目录

存放扩展的图标文件，包括不同尺寸的图标。

1.3 src 目录

源代码目录，包含扩展的主要功能实现：

background/: 后台脚本，处理扩展的后台逻辑。
content/: 内容脚本，与网页内容交互的脚本。
sidebar/: 侧边栏脚本，实现侧边栏功能。
options/: 选项页面脚本，处理用户设置。
popup/: 弹出窗口脚本，实现弹出窗口功能。

1.4 manifest.json 文件

扩展的配置文件，定义了扩展的基本信息、权限、脚本入口等。

1.5 README.md 文件

项目的说明文档，包含项目的基本介绍、安装和使用说明。

2. 项目的启动文件介绍

Tab Stash 的启动文件主要是 manifest.json 和 background/background.js。

2.1 manifest.json

该文件是扩展的配置文件，定义了扩展的基本信息、权限、脚本入口等。以下是部分关键配置：

{
  "manifest_version": 2,
  "name": "Tab Stash",
  "version": "1.0",
  "background": {
    "scripts": ["background/background.js"]
  },
  "browser_action": {
    "default_popup": "popup/popup.html"
  },
  "sidebar_action": {
    "default_panel": "sidebar/sidebar.html"
  },
  "permissions": [
    "tabs",
    "storage"
  ]
}

2.2 background/background.js

后台脚本，处理扩展的后台逻辑，如标签页的保存和恢复功能。

3. 项目的配置文件介绍

Tab Stash 的配置文件主要是 manifest.json 和 options/options.html。

3.1 manifest.json

如前所述，该文件定义了扩展的基本信息、权限、脚本入口等。

3.2 options/options.html

选项页面，允许用户进行扩展的个性化设置，如保存路径、自动保存间隔等。

<!DOCTYPE html>
<html>
<head>
  <title>Tab Stash Options</title>
</head>
<body>
  <h1>Tab Stash Options</h1>
  <form id="options-form">
    <label for="save-path">Save Path:</label>
    <input type="text" id="save-path" name="save-path"><br>
    <label for="auto-save-interval">Auto Save Interval:</label>
    <input type="number" id="auto-save-interval" name="auto-save-interval"><br>
    <button type="submit">Save</button>
  </form>
  <script src="options.js"></script>
</body>
</html>