萌娘百科歌词提取助手

⚠️重要：由于后续我使用 Vue 重构了此工具，但是在 TamperMonkey 无法直接使用 Vue 进行开发 (使用 @require 直接引入 Vue 的源代码会报错提示“Vue is not defined”, 再加上 TamperMonkey 不支持 ES6 模块)，所以我已经将本工具的逻辑代码转移到了我的 GitHub 个人主页中，此脚本的作用只是将逻辑代码和样式表添加到网页的 DOM 树中。若需查看萌娘百科相关辅助脚本的逻辑代码，请点击这里。

一键提取萌娘百科中使用 {{LyricsKai}} 模板显示的歌词，将原文和译文分开呈现在文本框中，可一键复制。

项目背景

在进行动漫相关话题的写作时，我有时会需要从萌百上引用一些动漫音乐的歌词，但是萌百的歌词出现原文和译文对照的时候使用的 {{LyricsKai}} 模板并不方便将原文和译文分开复制。常见的复制方式有在网页上直接复制以及进入编辑界面复制页面的 WikiText 源码——

• 如果直接复制，得到的结果是一行原文一行译文夹杂在一起，中间带空行，最后还会出现一段萌百添加的附加内容。我在写作引用歌词的时候会希望把原文和译文分开复制。
• 复制歌词对应的页面源代码虽然在某些情况下也可以实现复制歌词内容的目的，但前提是歌词中没有使用其他模板。如果歌词中有使用其他模板，例如为日文歌词标注振假名的 {{Photrans}} 模板，复制的内容会含有模板的源代码，不是纯文本的歌词。

而此脚本能够自动找到页面上所有使用 {{LyricsKai}} 及相关模板书写的歌词，将原文和译文以纯文本的形式提取出来，方便用户一键复制。

脚本的添加和运行

你可以通过复制脚本全文，在 TamperMonkey 中新建用户脚本然后粘贴的方法来添加此脚本。

脚本运行后，“歌词提取助手”的选项会被添加到萌娘百科的菜单栏中。此操作在 Vector 皮肤和 MoeSkin 皮肤下的运行结果略有差异——

• 若使用 Vector 皮肤，菜单栏是在页面左侧，脚本运行后，“歌词提取助手”会被添加到“工具”子栏目下。同时为了方便操作，脚本会将“工具”子栏目从原来的最下方移动到第二个子栏目的位置。
• 若使用 MoeSkin 皮肤，菜单栏在页面右下方固定位置，“歌词提取助手”会被添加到最后一项。

使用方法

首先进入你想要提取歌词的条目，然后点击“歌词提取助手”，就会弹出一个对话框。对话框里包含每一段歌词的原文和译文，点击歌词框右上角的“复制”按钮即可一键复制歌词全文。当然你也可以直接在文本框中选中自己需要的歌词段落来复制。

如果有多段歌词，则可以通过滚动整个对话框页面的方式来向上或向下翻页，访问其他段歌词。

已知问题

• 在处理使用 {{Utawari}} 模板创建的歌词时，输出结果可能会包含不必要的空行。
• 对话框的拖拽还不能完全实现，我测试的拖拽代码会发生拖拽偏移量不准确的问题，暂时无法解决。

待增加功能

• 提取到多个歌词时，在对话框上方显示标签页，来帮助用户快速切换到想要的歌词