TabsAsideExtension 项目安装与使用教程

1. 项目目录结构及介绍

TabsAsideExtension 项目的目录结构如下所示：

TabsAsideExtension/
├── LICENSE           # 项目许可证文件
├── README.md         # 项目说明文件
├── manifest.json     # 插件元数据文件
├── background/       # 后台脚本目录
│   ├── background.js # 后台脚本文件
│   └── ...
├── content/          # 内容脚本目录
│   ├── content.js    # 内容脚本文件
│   └── ...
├── images/           # 图片资源目录
│   ├── icon.png      # 插件图标
│   └── ...
├── popup/            # 弹窗界面目录
│   ├── popup.html    # 弹窗界面文件
│   ├── popup.js      # 弹窗脚本文件
│   └── ...
├── options/          # 选项界面目录
│   ├── options.html  # 选项界面文件
│   └── options.js    # 选项脚本文件
└── ...

• LICENSE：项目的许可证文件，通常为开源协议，如GPL、MIT等。
• README.md：项目的说明文件，包含项目的基本信息和如何使用项目的说明。
• manifest.json：Chrome插件的元数据文件，定义了插件的基本信息和权限。
• background/：包含后台脚本的目录，负责处理插件后台任务。
• content/：包含内容脚本的目录，用于在页面中注入自定义脚本。
• images/：包含插件所需的图片资源，如图标等。
• popup/：包含弹窗界面的目录，包括HTML和JavaScript文件。
• options/：包含选项界面的目录，用户可以通过这个界面来配置插件的选项。

2. 项目的启动文件介绍

项目的启动文件是 manifest.json，它定义了插件的基本信息和权限。以下是一个示例内容：

{
  "manifest_version": 2,
  "name": "TabsAsideExtension",
  "version": "1.0",
  "description": "一个将标签页侧边化的Chrome扩展",
  "permissions": [
    "tabs",
    "activeTab"
  ],
  "background": {
    "scripts": ["background/background.js"],
    "persistent": false
  },
  "browser_action": {
    "default_popup": "popup/popup.html",
    "default_icon": {
      "16": "images/icon.png",
      "48": "images/icon.png",
      "128": "images/icon.png"
    }
  },
  "options_page": "options/options.html"
}

在这个文件中，我们定义了插件的名称、版本、描述、所需权限、后台脚本、浏览器动作（包括弹出窗口和图标）以及选项页。

3. 项目的配置文件介绍

在本项目中，配置文件主要指 options/ 目录下的 options.js 文件。这个文件用于处理用户在选项界面上的操作，例如保存用户设置的偏好。

以下是一个简单的 options.js 示例：

// 保存用户设置的选项
function save_options() {
  var options = {
    // 假设我们有一个名为 "showTabList" 的设置
    showTabList: document.getElementById('showTabList').checked
  };
  chrome.storage.sync.set(options, function() {
    // 更新状态
    var status = document.getElementById('status');
    status.textContent = '选项已保存';
    setTimeout(function() {
      status.textContent = '';
    }, 750);
  });
}

// 当选项界面加载时，恢复之前的选项
document.addEventListener('DOMContentLoaded', restore_options);

function restore_options() {
  chrome.storage.sync.get({
    showTabList: true
  }, function(items) {
    document.getElementById('showTabList').checked = items.showTabList;
  });
}

这个文件包含了保存和恢复用户设置的函数，确保用户的偏好能够在插件中持久化。