从零开始编写一个浏览器笔记脚本

依靠的是百分比作为位置信息，在js操作中利用的是px，导致操作繁琐。

现在尝试把之前的代码进行一定的修改，在一番折腾后写出了以下代码：

    let offsetX = 0;
    let offsetY = 0;
    let nicoDivX =0;
    let nicoDivY =0;
    let ifDragging = false;
    //充当一个布尔变量，用于判断是否在抓取移动状态,let为局部变量
    nicoNoteDiv.addEventListener("mousedown",(e) => {//"mousedown"即监测鼠标点下的事件。
        ifDragging = true;
        nicoNoteDiv.style.cursor = "move";
        offsetX = e.clientX;
        offsetY = e.clientY;
        //记录初始鼠标坐标(相对于左上角)
        nicoDivY = parseInt(nicoNoteDiv.style.top);
        nicoDivX = parseInt(nicoNoteDiv.style.right);
        //获取div的位置parseInt（）会将字符串转化为数字（忽略最后的非数字部分）
        e.preventDefault();
        //用来禁止鼠标拖拽时选中的功能
        nicoNoteDiv.addEventListener('mousemove',(e)=>{if (ifDragging){nicoDragging(e)}});
        //通过检测是否拖拽来启用拖拽函数
    });
    function nicoDragging(e) {//定义一个Dragging函数 语法：function 函数名(参数) {}
        const { clientX, clientY } = e;
        //获取当前鼠标坐标
        nicoNoteDiv.style.top = `${nicoDivY+clientY-offsetY}px`;
        //${}表示在字符串中插入函数或变量，但要确保使用反引号`Code`
        nicoNoteDiv.addEventListener("mouseup",() =>{ifDragging = false;});
        //松开鼠标，停止拖拽
    };

但是事情并没有那么简单，在松开鼠标后这个玩意还在动，原因如下：

JavaScript 中，监听器（事件监听器）只要没有被明确移除或停止，就会一直监听事件。

当你使用诸如 addEventListener 方法在 DOM 元素上绑定一个事件监听器时，这个监听器会一直处于活动状态，直到满足以下条件之一：

1. 手动移除监听器：
   可以使用 removeEventListener 方法来移除监听器。例如：

const button = document.getElementById('myButton');
function handleClick(event) {
    console.log('Button clicked!');
}
 
// 添加监听器
button.addEventListener('click', handleClick);
 
// 移除监听器
button.removeEventListener('click', handleClick);

2. 元素被移除：
   如果绑定了监听器的 DOM 元素被从 DOM 中移除，监听器也会随之停止。

3. 一次性监听器：
   如果在添加监听器时指定了 { once: true }，监听器会在首次触发后自动移除。例如：

 button.addEventListener('click', handleClick, { once: true });

父监听器与子监听器的关系

如果你指的是在父元素上添加的事件监听器（比如通过事件冒泡机制监听子元素的事件），这种父监听器也会一直监听，除非明确移除。事件冒泡意味着子元素触发的事件会逐层向上传递到父元素，因此父监听器会接收到事件。比如：

const parent = document.getElementById('parent');

// 父元素监听器
parent.addEventListener('click', (event) => {
   console.log('Parent clicked!', event.target);
});

无论是直接点击父元素，还是点击子元素，父元素的监听器都会被触发，除非：

• 你使用 stopPropagation() 来阻止冒泡；
• 或者通过 removeEventListener 手动移除父监听器。

总结

• 监听器会持续监听事件，直到手动移除或绑定的 DOM 元素被移除。
• 如果没有停止或移除，父监听器会一直监听其范围内的事件冒泡。

也就是说，由于mousemove在mousedown内导致mousedmove一直没法停止。把:

nicoNoteDiv.addEventListener('mousemove',(e)=>{if (ifDragging){nicoDragging(e)}});
 nicoNoteDiv.addEventListener("mouseup",() =>{ifDragging = false;});

插在外面就行了。

最终成品：

        let offsetX = 0;
        let offsetY = 0;
        let nicoDivX =0;
        let nicoDivY =0;
        let ifDragging = false;
        //充当一个布尔变量，用于判断是否在抓取移动状态,let为局部变量
        nicoNoteDiv.addEventListener("mousedown",(e) => {//"mousedown"即监测鼠标点下的事件。
            ifDragging = true;
            offsetX = e.clientX;
            offsetY = e.clientY;
            //记录初始鼠标坐标(相对于左上角)
            nicoDivY = parseInt(nicoNoteDiv.style.top);
            nicoDivX = parseInt(nicoNoteDiv.style.right);
            //获取div的位置parseInt（）会将字符串转化为数字（忽略最后的非数字部分）
            e.preventDefault();
            //用来禁止鼠标拖拽时选中的功能
        });
        nicoNoteDiv.addEventListener('mousemove',(e)=>{
            if(ifDragging){
                const { clientX, clientY } = e;
                //获取当前鼠标坐标
                nicoNoteDiv.style.top = `${nicoDivY+clientY-offsetY}px`;
                nicoNoteDiv.style.right = `${nicoDivX-clientX+offsetX}px`;
                //${}表示在字符串中插入函数或变量，但要确保使用反引号`Code `
            }
         });
        nicoNoteDiv.addEventListener("mouseup",() =>{ifDragging = false;});
        //松开鼠标，停止拖拽

考虑到这个玩意可以应用到之前那个图标上，我们把它封装成一个函数。

由于光标太快会划出element，有时候mousedown事件会停止监听，改变策略把mousemove和mouseup监听对象改为document，即： document.addEventListener()。

这里有个新问题：

Q.7如何在拖拽的同时不触发点击？

方法一：通过 mousemove 判断是否发生拖拽

可以在 mousedown 和 mousemove 中记录鼠标的移动距离，并在 mouseup 时判断是否是一次有效的拖拽操作。如果移动的距离超过一定阈值，就认为是拖拽而非点击。

let isDragging = false;

const element = document.querySelector("#draggable");

element.addEventListener("mousedown", (e) => {
 isDragging = false; // 重置拖拽状态
 const startX = e.clientX;
 const startY = e.clientY;

 const onMouseMove = (e) => {
     if (Math.abs(e.clientX - startX) > 5 || Math.abs(e.clientY - startY) > 5) {
         isDragging = true;
     }
 };

 const onMouseUp = () => {
     document.removeEventListener("mousemove", onMouseMove);
     document.removeEventListener("mouseup", onMouseUp);
 };

 document.addEventListener("mousemove", onMouseMove);
 document.addEventListener("mouseup", onMouseUp);
});

element.addEventListener("click", (e) => {
 if (isDragging) {
     e.preventDefault(); // 如果是拖拽，不触发点击
 }
});

方法二：使用 drag 和 dragstart 事件

如果使用 HTML5 的拖放 API，可以利用 drag 和 dragstart 来区分拖拽和点击。

let isDragging = false;

const element = document.querySelector("#draggable");

element.addEventListener("dragstart", () => {
 isDragging = true; // 标记为拖拽
});

element.addEventListener("click", (e) => {
 if (isDragging) {
     e.preventDefault(); // 阻止点击事件
     isDragging = false; // 重置状态
 }
});

方法三：直接在 click 中判断拖拽状态

如果你的拖拽实现中没有其他复杂的状态，也可以简单地在 click 事件中检查。

let isDragging = false;

element.addEventListener("mousedown", () => {
 isDragging = false;
});

element.addEventListener("mousemove", () => {
 isDragging = true; // 如果发生移动，标记为拖拽
});

element.addEventListener("mouseup", () => {
 setTimeout(() => (isDragging = false), 0); // 延迟重置状态
});

element.addEventListener("click", (e) => {
 if (isDragging) {
     e.preventDefault();
 }
});

方法四：CSS pointer-events 阻止点击

如果拖拽操作是通过 CSS 结合 JavaScript 实现，可以在拖拽时临时禁用 pointer-events。

const element = document.querySelector("#draggable");

element.addEventListener("mousedown", () => {
 element.style.pointerEvents = "none"; // 禁止点击
});

element.addEventListener("mouseup", () => {
 setTimeout(() => {
     element.style.pointerEvents = "auto"; // 恢复点击
 }, 0);
});

总结

最推荐的方法是 方法一，结合鼠标的移动距离判断是否是拖拽，因为它适用于大多数拖拽实现场景，且与 HTML5 拖放 API 或 CSS 的依赖性较低。

这里采用方法四，而 mouseup 的监听对象一定为 document 才有效，最后将right改为更易操作的的left，封装后的函数如下：

    function letWeDrag(dragDiv){
        let offsetX = 0;
        let offsetY = 0;
        let nicoDivX =0;
        let nicoDivY =0;
        let ifDragging = false;
        //充当一个布尔变量，用于判断是否在抓取移动状态,let为局部变量
        dragDiv.addEventListener("mousedown",(e) => {//"mousedown"即监测鼠标点下的事件。
            ifDragging = true;
            offsetX = e.clientX;
            offsetY = e.clientY;
            //记录初始鼠标坐标(相对于左上角)
            nicoDivY = parseInt(dragDiv.style.top);
            nicoDivX = parseInt(dragDiv.style.left);
            //获取div的位置parseInt（）会将字符串转化为数字（忽略最后的非数字部分）
            e.preventDefault();
            //用来禁止鼠标拖拽时选中的功能
        });
        document.addEventListener('mousemove',(e)=>{
            if(ifDragging){
                const { clientX, clientY } = e;
                //获取当前鼠标坐标
                dragDiv.style.top = `${nicoDivY+clientY-offsetY}px`;
                dragDiv.style.left = `${nicoDivX+clientX-offsetX}px`;
                //${}表示在字符串中插入函数或变量，但要确保使用反引号`Code`
                dragDiv.style.pointerEvents = "none";
                //禁止单击，防止拖拽同时点击。
            }
        });
        document.addEventListener("mouseup",() =>{
            ifDragging = false;
            dragDiv.style.pointerEvents = "auto"; // 恢复点击
        });
        //松开鼠标，停止拖拽
    }

由于将right换用left，为了使图标继续在右侧，我们应该获取屏幕的宽度。

Q.8：如何获取屏幕的宽度？

在 JavaScript 中，可以使用以下方法获取屏幕的 像素信息：

1. 获取屏幕的宽度和高度（window.screen）

通过 window.screen 对象，可以获取屏幕的物理分辨率：

console.log("屏幕宽度：" + window.screen.width + "px");
console.log("屏幕高度：" + window.screen.height + "px");

• window.screen.width：屏幕的宽度（像素）。
• window.screen.height：屏幕的高度（像素）。

2. 获取可用工作区域的尺寸

window.screen.availWidth 和 window.screen.availHeight 用于获取屏幕除去任务栏或工具栏后的可用尺寸：

javascript复制代码console.log("可用宽度：" + window.screen.availWidth + "px");
console.log("可用高度：" + window.screen.availHeight + "px");

3. 获取浏览器窗口的尺寸

通过 window.innerWidth 和 window.innerHeight 可以获取浏览器窗口的内容区域大小（不包含工具栏或边框）：

javascript复制代码console.log("窗口宽度：" + window.innerWidth + "px");
console.log("窗口高度：" + window.innerHeight + "px");

4. 获取设备像素比（devicePixelRatio）

window.devicePixelRatio 返回设备像素比（DPR），表示物理像素与 CSS 像素的比值：

console.log("设备像素比：" + window.devicePixelRatio);

例如：

• 如果 devicePixelRatio = 2，表示 1 个 CSS 像素对应 2 个物理像素。
• 通常高分辨率设备（如 Retina 屏幕）会有较高的 DPR 值。

5. 获取页面滚动的像素位置

通过 window.scrollX 和 window.scrollY 可以获取页面的水平和垂直滚动位置：

console.log("水平滚动位置：" + window.scrollX + "px");
console.log("垂直滚动位置：" + window.scrollY + "px");

6. 获取元素的大小和位置

如果要获取某个 HTML 元素的宽度和高度，可以使用 getBoundingClientRect()：

const element = document.querySelector("#myElement");
const rect = element.getBoundingClientRect();
console.log(`元素宽度：${rect.width}px, 高度：${rect.height}px`);
console.log(`元素位置：左=${rect.left}px, 上=${rect.top}px`);

总结

• 屏幕尺寸：window.screen.width 和 window.screen.height
• 可用区域：window.screen.availWidth 和 window.screen.availHeight
• 浏览器窗口：window.innerWidth 和 window.innerHeight
• DPR：window.devicePixelRatio
• 滚动位置：window.scrollX 和 window.scrollY

这里我们用到window.innerWidth就可以了。

这里我们还要保证窗口调节时，它的位置能一同调节，用以下函数，达到这一效果：

window.top.addEventListener('resize', () => {//监听顶层窗口调节大小事件
    const element = document.getElementById("nicoBt");
    const elementWidth = element.offsetWidth;
    const viewportWidth = window.innerWidth;
    element.style.left = (viewportWidth - elementWidth-10) + "px";
    nicoNoteDiv.style.top = `${parseInt(nicoButton.style.top)}px`;
    nicoNoteDiv.style.left = `${parseInt(nicoButton.style.left)-parseInt(nicoNoteDiv.style.width)}px`;
});

2024/12/12

---

②拖拽调节大小

只需要在CSS中添加：

resize: both;/*允许元素在x、y两个方向上调整大小*/
overflow: auto;/*显示滚动条*/

就可以实现简单的调整大小,参考css resize-CSDN博客。

注意的是，能正常调整的条件是：CSS样式中，元素的位置描述使用 top 与 left。

但是我们要让它有最大最小的限制，思路是通过监听鼠标，通过JS来限制大小。

document.addEventListener("mouseup",()=>{
    if(parseInt(nicoNoteDiv.style.width)<200){ nicoNoteDiv.style.width="200px";};
    if(parseInt(nicoNoteDiv.style.height)<40){ nicoNoteDiv.style.height="40px";}
});

③组合起来！

由于这两者判定位置重合，因此我们应该使用一定的嵌套。

这时我们就要对 UI 进行一定的规划：也就是流出上方一条允许拖拽，其余部分无法拖拽。

让外层元素调节大小，内层元素负责拖动，这样一个东西就做好了！

8、引入 Vditor

JS 与 CSS 的引入

终于捣鼓完这个框框了，接下来我们要在这个容器中引入文本编辑器。

使用开源项目 Vditor 来作为文本编辑器 ,根据开发者文档尝试在 HTML 中引入 vditor 的 JS 与 CSS 。

<!-- ⚠️生产环境请指定版本号，如 https://unpkg.com/vditor@x.x.x/dist... -->
<link rel="stylesheet" href="https://unpkg.com/vditor/dist/index.css" />
<script src="https://unpkg.com/vditor/dist/index.min.js"></script>

把这行代码写入中：

    document.querySelector("head").insertAdjacentHTML("afterbegin",headVditorCode);

Q.9：之前讲过用@require加载脚本，这里可以那样做吗？

可以，且更推荐使用@require的方式，因为如果你在插入资源后立即使用 Vditor，可能会因为资源未加载完成而报错，并且动态插入 HTML 字符串不够直观，可能会增加代码阅读和维护的难度。

但是**@require只能用来加载 JS 而不能用于 CSS **使用GM_addStyle可以解决这一问题。

// ==UserScript==
// @name         Vditor Integration with CSS
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Integrate Vditor
// @author       Your Name
// @match        *://*/*
// @require      https://cdn.jsdelivr.net/npm/vditor/dist/index.min.js
// @grant        GM_addStyle
// ==/UserScript==

// 使用 GM_addStyle 插入 CSS 样式
GM_addStyle(`
@import url('https://cdn.jsdelivr.net/npm/vditor/dist/index.css');
`);

如果你坚持使用动态插入方式，建议优化为分步加载，避免时序问题：

// 动态加载 CSS
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'https://unpkg.com/vditor/dist/index.css';
document.head.appendChild(link);

// 动态加载 JS
var script = document.createElement('script');
script.src = 'https://unpkg.com/vditor/dist/index.min.js';
script.onload = function () {
// 确保 Vditor 加载完成后再初始化
new Vditor('editor', {
  height: 300,
  placeholder: 'Write something...',
});
};
document.head.appendChild(script);

这种方式更易维护，且避免 HTML 字符串操作的潜在问题。

Vditor 的初始化

为了理解如何引入 Vditor ，我需要花一点时间来对文档进行理解：

首先，Vditor 定义了一个名为 Vditor 的类。

这个类包含若干属性，最主要的是 id 和 options。

我们首先要创建一个这个”类“的”实例“，可以理解为所谓”实例“就是一个这个”类“的变量。

创建实例的语法为： new 类名(参数1，参数2。。。)

在这个Vditor就应该写成：new Vditor(id,options,....)

这个id是一个字符串，而这个 options 里面包含了许多属性，我们把这些属性用大括号括起来。

另外 options 还有诸如 options.toolbar options.counter 的子属性他们的书写方式文档中也有写。

此外，我们这个类中还有一些”方法“methods供我们操作这些实例。

第一次尝试引入：

    const vditor = new Vditor("nicoVditor",{
        placeholder: 'Write something here...',
        toolbar: ['emoji', 'headings', 'bold', 'italic', 'strike', 'link', 'list'],
    })

显示 nicoVditor Not found ，推断是初始化代码在 nicoVditor 被添加之前就已经运行，通过调整代码逻辑，成功解决该问题。

再次运行显示：GET https://unpkg.com/vditor@3.10.8/dist/js/i18n/zh_CN.js net::ERR_ABORTED 404 (Not Found)

怀疑是脚本无权访问此文件，在元属性中添加// @require https://unpkg.com/vditor@3.10.8/dist/js/i18n/zh_CN.js成功运行。

接下来就是简单的调试一下！

2024/12/13

---

9、尝试与修复 CDN 被 CSP 拦截的问题(待解决)

发现无法在 Github 中初始化，询问AI后得到以下解答：

这个错误消息表示，浏览器拒绝加载样式表 https://cdn.jsdelivr.net/npm/vditor/dist/index.css，因为它违反了当前页面的内容安全策略（Content Security Policy，CSP）指令。具体来说，CSP 指令 style-src 'unsafe-inline' github.githubassets.com 限制了可以加载样式表的来源，而 jsdelivr.net 不在允许的来源列表中。

可能导致该错误的原因

1. 严格的内容安全策略：GitHub 页面设置了严格的 CSP，限制了可以加载样式表的来源，以提高安全性。
2. 外部样式表来源不被允许：当前 CSP 只允许从 github.githubassets.com 加载样式表，而不允许从 jsdelivr.net 加载。

搜索方案，发现某些项目可以绕过这一限制：guansss/webpack-monkey：一个 webpack 插件，用于使用现代工作流程开发您的用户脚本，具有 HMR、元生成等功能。

使用 webpack-monkey

用 npm 或 yarn（install 替换为 add） 均可。（超时挂梯子，给命令台走代理）

对该项目进行安装与初始化：

npm init -y
npm install webpack webpack-cli webpack-dev-server webpack-monkey  --save-dev

创建以下目录：

.
├── dist
│   └── hello.user.js
├── src
│   ├── index.js
│   └── meta.js
├── webpack.config.js
└── package.json

编写脚本：

• 在 src/index.js 中编写脚本逻辑（不包含元数据）

GM_log("Hello world!");

if (module.hot) {
  module.hot.monkeyReload();
}

• 在 src/meta.js 中定义脚本的元数据

module.exports = {
  name: "Hello world",
  version: "1.0.0",
  match: ["*://example.com/"],
};

• 在 webpack.config.js 中配置 webpack-monkey

const path = require("path")
const { monkey } = require("webpack-monkey")
//
module.exports = monkey({
  entry: './src/index.js',//输入文件
  output: {
    path: path.resolve(__dirname, "dist"),//输出目录
  },
})

配置构建脚本

在 package.json 中添加构建脚本，相当于添加了命令台指令：

{
  "scripts": {
    "dev": "webpack serve --mode development",//调试工具
    "build": "webpack --mode production"//生成工具
  }
}

生成用户脚本

npm build

会在 dist 中生成用户脚本。

尝试绕过CSP

webpack-monkey 的原理是：通过将需要外部加载的脚本与CSS样表与油猴脚本一起打包到一个文件，从而解决了 CSP 的问题。

首先，安装用于打包 CSS 与 JS 的 loader：

npm install css-loader style-loader --save-dev#用于加载CSS
npm install script-loader --save-dev#用于加载JS

在 Webpack 配置中，添加相关配置：

const path = require("path");
const { monkey } = require("webpack-monkey");
const TerserPlugin = require("terser-webpack-plugin"); // 引入 terser-webpack-plugin

module.exports = monkey({
  entry: './src/index.js',//输入文件
  output: {
    path: path.resolve(__dirname, "dist"),//输出目录
  },
  module: {
    rules: [
      {
        test: /\.css$/i, // 匹配所有 .css 文件
        use: ["style-loader", "css-loader"], // 使用 style-loader 和 css-loader 处理
      },
      {
        test: /external-script\.js$/,  // 匹配外部 JS 脚本
        use: "script-loader",  // 使用 script-loader 打包
      },
    ],
  },
});

将脚本和CSS下载到本地后，在 index.js 文件中引入本地的脚本：

import "./CSS/index.css";
import "./JS/index.min.js";

运行后生成了打包后的脚本，但无法运行，反思后认为原因如下：

webpack打包的js中又通过字符串操作引用了新的URL，而新的URL仍然不能绕过CSP。

并且不同的 JS 之间的相互依赖限制了运行顺序，运行顺序不当也会出现这种情况。

替代的解决方案

1. 手动追踪所有的URL将他们修改并打包。缺点是耗时长且可维护性极低。（不可行）
2. 使用拓展程序来手动禁用 CSP。

无法加载的其他未知原因与局限性分析

在某些页面不是因为 CSP 而无法初始化 Vditor (经过测试，所有搜索引擎的“搜索结果”页面都不能正常载入)原因暂时未知。

这类问题暴露出了油猴作为脚本运行器的局限性，或许我们可以开发浏览器插件，而不是油猴脚本。

总结就是，关于这个问题：

2024/12/13

---

10、储存编辑的文本

参考：HTML5 Web IndexedDB 数据库 | 菜鸟教程

Vditor 提供了把文件导出到本地的功能，但不能实现将笔记保存在当前网页的功能。

由于浏览器的网页存在严格的沙箱机制，因此我们无法利用浏览器脚本操作本地文件，自然也就不能利用脚本把文件保存在本地。

但是浏览器提供了 IndexedDB 这一机制，允许我们储大量结构化数据。它是异步的，可以存储较大的数据对象，适合需要存储大量数据或进行复杂查询的场景。因此我们甚至可以实现自动保存，历史版本管理的功能。

获取文本内容

Vditor 提供的工具中为我们提供了获取文本内容的 API：

方法	说明
exportJSON(markdown: string)	根据 Markdown 获取对应 JSON
getValue()	获取 Markdown 内容
getHTML()	获取 HTML 内容

创建 IndexedDB

const request = indexedDB.open("VditorHistoryDB", 1);//创建版本号为1的IndexedDB
let db;

初始化：

request.onupgradeneeded = e => {
    db = e.target.result;
    //表示成功打开的数据库实例。
    if (!db.objectStoreNames.contains("history")) {
        db.createObjectStore("history", { keyPath: "id" });
        //如果没有创建对象储存，则创建一个"history"对象储存。
        //而每一条主字段的标识为id，也就是我们可以在之后给每个字段添加id，作为标识。IndexedDB 会根据这个属性对记录进行索引。
    }
};

这里的onupgradeneeded代表数据库初次创建或版本号更新时执行函数。

**db.objectStoreNames**：一个类似数组的对象，列出了当前数据库中所有已存在的对象存储（表）。

而**contains("history")**：检查是否已存在名为 "history" 的对象存储。

如果数据库已经创建了，则：

request.onsuccess = e => {
    db = e.target.result;
};

onsuccess表示成功加载执行函数。

出现的问题：onsuccess无法正确触发

既不出发onsuccess也不触发onerror，只能触发onupgradeneeded，且控制台没有输出，原因暂时未知，所以无法修复。

这里采用替代方案每次进入都改变版本号来触发onupgradeneeded。

将内容保存至数据库

这里使用数据库实例的 transaction() 方法创建一个事务：

const transaction = db.transaction(storeNames, mode);

**storeNames**：

• 可以是一个字符串（单个对象存储的名称）或数组（多个对象存储的名称）。
• 决定事务可以操作哪些对象存储。例如，"history" 表示事务将操作名为 "history" 的存储。

**mode**：

• 事务的模式，定义了可以执行的操作：
  • "readonly"：只读事务，只允许读取数据。
  • "readwrite"：读写事务，允许读取和修改数据。

通过 transaction.objectStore() 获取特定的存储，操作其中的数据。

function saveContent() {
    const content = nicoVditor.getValue();//获取 Markdown 内容
    const timestamp = Date.now(); // 时间戳作为 ID
    const transaction = db.transaction("history", "readwrite");//创建一个操作 "history" 存储的读写事务。
    const store = transaction.objectStore("history");// 获取 "history" 对象存储
    store.put({ id: timestamp, content: content, savedAt: new Date().toLocaleString() });
//向"history" 存储中放入一个id为时间戳，内容为 Markdown 内容，保存的时间为当前时间的内容。
//savedAt 是一个字段，用于记录保存的时间。而new Date().toLocaleString() 是 JavaScript 的方法，返回当前时间的本地化格式（例如 2024/12/15 10:30:45）
    transaction.oncomplete = () => {
        alert("内容已保存！");
    };
    transaction.onerror = (event) => {
        console.error("保存失败", event.target.error);
    };
}

最后在工具栏插入一个按钮：

{
 name: 'nicoSave',
 tipPosition: 's',
 tip: '保存到浏览器',
 className: 'right',
 icon: ``,
 click () {saveContent()},}

出现的问题：getValue()未定义（已解决）

原因是无法引入method脚本文件，引入后问题依旧存在，替代方案：

document.querySelector("#nicoVditor > div.vditor-content > div.vditor-ir").innerHTML;//获取 HTML 内容

出错原因：在 saveContent() 函数中 Vditor 未被定义

解决方法：将 Vditor 作为参数传入函数中

返回历史版本

    function showHistory(ifFirst) {
        const transaction = db.transaction("history", "readonly");//创建读取事务的实例
        const store = transaction.objectStore("history");//获取对象储存的实例
        const request = store.getAll(); 
        request.onsuccess = (event) => { 
            const history = event.target.result; // 确保在请求成功后访问 result 属性 
            };
        history.sort((a, b) => b.id - a.id);// 按 ID（即时间戳）降序排序
        if(ifFirst){document.querySelector("#nicoVditor > div.vditor-content > div.vditor-ir").innerHTML = history[0].content;ifFirst=true;}
        else{return history;}
    }

这里直接使用修改.innerHTML导致返回保存后无法被继续编辑，改用setValue()重构代码

点击之后呼出弹窗

    function showHistoryDialog(history) {
        // 如果已有弹窗，先移除
        //const existingDialog = document.querySelector("#history-dialog");
        //if (existingDialog) existingDialog.remove();

        // 创建弹窗容器
        const dialog = document.createElement("div");
        dialog.id = "history-dialog";
        dialog.style.position = "fixed";
        dialog.style.top = "50%";
        dialog.style.left = "50%";
        dialog.style.transform = "translate(-50%, -50%)";
        dialog.style.background = "#fff";
        dialog.style.border = "1px solid #ddd";
        dialog.style.padding = "15px";
        dialog.style.boxShadow = "0px 2px 10px rgba(0, 0, 0, 0.3)";
        dialog.style.zIndex = "1000";
        dialog.style.maxHeight = "300px";
        dialog.style.overflowY = "auto";

        // 弹窗标题
        const title = document.createElement("h3");
        title.innerText = "历史记录";
        title.style.marginTop = "0";
        dialog.appendChild(title);

        // 遍历历史记录，添加按钮
        history.forEach((item, index) => {
            const button = document.createElement("button");
            button.innerText = `${index + 1}. ${item.savedAt}`;
            button.style.display = "block";
            button.style.marginBottom = "10px";
            button.style.width = "100%";

            // 点击按钮时写入内容
            button.onclick = () => {
                document.querySelector("#nicoVditor > div.vditor-content > div.vditor-ir").innerHTML = item.content;
                console.log(`已恢复历史记录: ${item.savedAt}`);
                dialog.remove(); // 关闭弹窗
            };

            dialog.appendChild(button);
        });

        // 关闭按钮
        const closeButton = document.createElement("button");
        closeButton.innerText = "关闭";
        closeButton.style.marginTop = "10px";
        closeButton.style.width = "100%";
        closeButton.onclick = () => dialog.remove();
        dialog.appendChild(closeButton);

        // 将弹窗插入到页面
        document.body.appendChild(dialog);
    }

但是因为 showHistory 函数是异步（允许它之后的代码先运行）的，而你在调用 showHistory 函数时期望立即获得结果。你需要确保在 request.onsuccess 事件处理程序中处理结果。

Q10.异步执行的函数如何获取返回值？

在 JavaScript 中，异步函数的返回值无法直接通过同步方式获取，因为异步操作（如网络请求、定时器等）需要时间完成。因此，需要通过以下几种方法来获取异步函数的返回值：

1. Promise 和 then()

当异步函数返回一个 Promise 对象时，可以通过 .then() 方法来处理返回值。

示例代码

function asyncFunction() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve("异步返回值");
        }, 1000); // 模拟异步操作，1秒后返回
    });
}

// 使用 then() 获取返回值
asyncFunction().then((result) => {
    console.log("获取到的返回值:", result);
});

2. async/await

async/await 是对 Promise 的语法糖，使得异步代码更像同步代码，更易于理解和编写。

示例代码

async function asyncFunction() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve("异步返回值");
        }, 1000); // 模拟异步操作
    });
}

// 使用 async/await 获取返回值
async function getValue() {
    const result = await asyncFunction();
    console.log("获取到的返回值:", result);
}

getValue();

注意：

• await 只能在 async 函数 中使用。
• await 会暂停当前 async 函数的执行，直到异步操作完成。

3. 回调函数

将一个回调函数作为参数传入异步函数，在异步操作完成后调用该回调函数并传入返回值。

示例代码

function asyncFunction(callback) {
    setTimeout(() => {
        const value = "异步返回值";
        callback(value); // 调用回调函数，传入返回值
    }, 1000);
}

// 使用回调函数获取返回值
asyncFunction((result) => {
    console.log("获取到的返回值:", result);
});

4. 结合 async/await 和 Promise 的例子

当你调用一个异步函数，返回的是 Promise，你可以用 async/await 来等待它的完成。

示例代码

function fetchData() {
    return new Promise((resolve) => {
        setTimeout(() => resolve("返回数据成功"), 1000);
    });
}

async function getData() {
    const result = await fetchData();
    console.log("最终获取的数据:", result);
}

getData();

5. 立即执行异步函数 (IIFE)

有时你需要在代码块内立即调用 async 函数，可以使用 **立即执行函数表达式 (IIFE)**。

示例代码

(async () => {
    const result = await asyncFunction();
    console.log("立即执行异步函数的返回值:", result);
})();

删除历史记录

使用 delate 方法删除历史记录：

const request = indexedDB.open("VditorHistoryDB", dbVersion);
request.onsuccess = (event) => {
    const db = event.target.result;
    const transaction = db.transaction("history", "readwrite");
    const store = transaction.objectStore("history");
    const deleteRequest = store.delete(recordId); // 替换 recordId 为你要删除的记录的 ID

    deleteRequest.onsuccess = () => {
        console.log("记录已删除");
    };

    deleteRequest.onerror = (event) => {
        console.error("删除记录失败", event.target.error);
    };
};

2024/12/19

---

三、完成

大概耗时十天时间，我们从无到有完成了这个脚本的编写。

事实上，我认为这次尝试，是利用 AI 进行学习的一种方式。

过去人们大部分情况下只能从前到后，一步步到达想要的结果，但是 AI 让我们可以从后向前，并且在这个过程中一点点弄清楚这个东西的原理，这一点是以往人所达不到的。

最后我希望我自己可以继续维护这个脚本，不断为其添加新的功能。