NicoNote

从零开始编写的浏览器笔记脚本，使用 Tempmonkey 插件。

编写耗时十天：2024/12/8~2024/12/18

编写过程文档，该文档记录了该脚本如何从零开始被构建。

基本功能

• 能够在网页上编写笔记，并保存在本地。可以在打开网页后显示对应笔记。
• 能够使用 Markdown 语法并实现实时渲染 $\LaTeX$ 。
• 能够导出与导入 Markdown 笔记。
• 能够调整笔记框的大小。

快速开始

在浏览器中安装 Tampermonkey 插件：首页 | Tampermonkey。

在此点击安装脚本进行安装。

功能介绍

点击图标即可呼出笔记本框，内置了 Vditor 文本编辑器，因此支持使用 Markdown 语法，并且兼容 Vditor 大部分功能。

有关 Vditor 的详细功能介绍请看：Demo 示例 - Vditor

关于保存功能

文件会以.md文本的形式被储存在该页面下的 indexDB 的 VditorHistoryDB 储存桶中，也就是说它会储存在你浏览器的本地文件之中。

因此，在清理浏览器数据时，你的保存文件可能会丢失，请保证在导出的情况下再进行对浏览器的清理。

已知问题

1. 某些网站的 CSP（内容安全策略）会禁止外部向其注入脚本，因此 Vditor 将不能在这些网站（如：Github、openAI）加载。

   解决方法：安装外部浏览器插件来禁用 CSP ，启动插件Disable HTTP CSP后若没有生效，请尝试重启浏览器。但为了防止一些攻击行为，请不要长期禁用 CSP。

2. 除第一条所述原因外，仍有未知原因可能会导致 Vditor 在某些网页（如 Bing 搜索页）无法加载，目前已将Bing 搜索页添加到黑名单，如果您知道原因或发现某些新的网页，请及时提交议题。

3. 在某些网页中 Vditor 的渲染会发生错误，大概率时 CSS 与 JS 冲突导致的。目前发现某些搜索引擎的”搜索结果“页面普遍存在该问题，你可以手动将其添加到脚本的黑名单。

4. 某些 Vditor 编辑器原有功能可能无法在本脚本上使用。

关于作者

about | CCR39のLazyNest

🙏 特别鸣谢

Vanessa219/vditor: ♏ 一款浏览器端的 Markdown 编辑器，支持所见即所得（富文本）、即时渲染（类似 Typora）和分屏预览模式。An In-browser Markdown editor, support WYSIWYG (Rich Text), Instant Rendering (Typora-like) and Split View modes.

guansss/webpack-monkey: A webpack plugin for developing your userscripts with a modern workflow, featuring HMR, meta generation, and more.

📄 协议

采用：GPL-3.0 协议