为 “ctext.org" 添加下载按钮：让文化书籍下载更轻松

2024-01-26 03:27:05

在浩瀚的网络世界中，时常会有那么一些网站以其独特的风格和内容吸引着用户的目光。“ctext.org" 就是这样一个网站。这个网站的名字叫做：“中国哲学书电子化计划”，顾名思义，这个网站上收藏了大量中国哲学书籍的电子版，为用户提供了一个便捷的学习和研究中国哲学的平台。

然而，在 “ctext.org" 网站上浏览书籍时，用户可能会遇到一个问题：网站上没有提供下载按钮。这意味着，用户想要下载某本书时，只能手动复制书籍的内容，然后粘贴到自己的电脑上。这样的操作方式不仅繁琐，而且容易出错。

为了解决这个问题，今天我们就要来为 “ctext.org" 网站添加一个下载按钮，让用户可以轻松下载网站上的文化书籍。

首先，我们需要了解一下 “ctext.org" 网站的页面结构。我们可以打开网站的任意一本书籍页面，然后使用浏览器的开发者工具来查看页面的源代码。通过观察源代码，我们可以发现，每本书籍的内容都是存储在一个名为 “正文" 的 <div> 标签中。这个 <div> 标签的 id 属性值为 “content"。

现在，我们就可以开始编写脚本代码了。我们可以使用 Tampermonkey 插件来管理我们的脚本。在 Tampermonkey 的编辑器中，我们可以输入以下代码：

// ==UserScript==
// @name         ctext.org 添加下载按钮
// @namespace    https://github.com/YourUsername/ctext-download-button
// @version      0.1
// @description  为 “ctext.org" 网站添加下载按钮，方便用户下载网站上的文化书籍。
// @author       YourUsername
// @match        https://ctext.org/*
// @grant        none
// ==/UserScript==

(function() {
  // 在 “正文" `<div>` 标签中添加一个下载按钮
  const contentDiv = document.getElementById("content");
  const downloadButton = document.createElement("button");
  downloadButton.innerHTML = "下载";
  downloadButton.style.cssText = "position: fixed; top: 10px; right: 10px; z-index: 9999;";
  downloadButton.addEventListener("click", function() {
    // 获取书籍内容
    const content = contentDiv.innerHTML;

    // 创建一个 Blob 对象，其中包含书籍内容
    const blob = new Blob([content], { type: "text/plain" });

    // 创建一个指向 Blob 对象的 URL
    const url = URL.createObjectURL(blob);

    // 创建一个 `<a>` 标签，用于下载书籍
    const link = document.createElement("a");
    link.href = url;
    link.download = "书籍.txt";

    // 点击 `<a>` 标签，触发下载
    link.click();

    // 撤销 Blob 对象的 URL
    URL.revokeObjectURL(url);
  });
  contentDiv.parentNode.insertBefore(downloadButton, contentDiv);
})();