【亲测免费】 Markdown Viewer 安装及使用教程

本教程将引导您了解并使用 Markdown Viewer 这个开源项目。该项目是用于在 Chrome 浏览器中查看和预览 Markdown 文件的一个扩展。

1. 项目目录结构及介绍

Markdown Viewer 的主要目录结构如下：

.
├── README.md        # 项目说明文件
├── assets/          # 存放静态资源，如主题文件
├── background.js    # 扩展的背景脚本，处理文件加载等操作
├── manifest.json     # Chrome 扩展的清单文件，定义扩展的基本信息和权限
├── popup.html       # 预览弹窗的 HTML 结构
├── popup.js         # 弹窗的 JavaScript 控制逻辑
└── stylesheets/      # CSS 样式表

• assets/: 包含各种主题和其他资源。
• background.js: 负责扩展的后台逻辑，如监听事件、处理文件加载等。
• manifest.json: Chrome 扩展的配置文件，定义了扩展的名称、版本、权限以及入口点等信息。
• popup.html/popup.js: 提供用户界面的弹出窗口，允许用户配置和预览 Markdown 内容。
• stylesheets/: 存储扩展样式，可能包括自定义主题。

2. 项目的启动文件介绍

manifest.json 是 Markdown Viewer 的核心配置文件，它包含了以下关键部分：

{
  "name": "Markdown Viewer",
  "version": "5.3",
  ...
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  ...
  "browser_action": {
    "default_popup": "popup.html",
    "default_icon": {
      ...
    }
  },
  ...
}

• background: 指定 background.js 作为扩展的后台脚本，当用户点击浏览器图标时，该脚本会被执行。
• browser_action: 配置浏览器动作，设置弹出窗口的HTML（popup.html）和图标。

通过修改这个文件，您可以调整扩展的行为，例如添加新的功能或者修改默认设置。

3. 项目的配置文件介绍

Markdown Viewer 的配置主要是通过用户在弹出窗口进行的，例如选择主题、开启自动刷新等。这些配置并未存储在一个单独的配置文件中，而是保存在用户的本地存储(localStorage)中。

在 popup.js 中，你可以找到读取和更新配置的部分，例如：

chrome.storage.local.get(['theme'], function(data) {
  // 使用获取到的主题来设置CSS
});

// 更新配置
function saveOptions() {
  var theme = document.getElementById('theme').value;
  chrome.storage.local.set({ theme: theme });
  // 提示保存成功
}

chrome.storage API 用于在浏览器中持久化存储数据，这里用于存储用户自定义的主题。在需要时，如弹出窗口打开时，可以读取这些配置，以适应用户的个性化设置。

希望这篇教程能帮助您更好地理解和使用 Markdown Viewer。要深入了解项目，建议直接查看项目的源代码和文档。