油猴脚本初涉---动漫花园魔改

暗色主题的初衷是：在不改变原来的功能的情况下，去除广告，实现暗色主题，都是一些主观上的美化，适用于动漫花园（dmhy）及相关镜像站，脚本地址 : 动漫花园魔改，当然要使用这个脚本，前提你需要安装Tampermonkey(油猴)，另外你可以在Greasy Fork上找寻自己想要的脚本进行安装🚀️ 。

脚本代码

脚本主要功能只是实现暗色的主题，所以整体逻辑非常简单，完整代码如下：

// ==UserScript==
// @name         动漫花园魔改
// @namespace    https://greasyfork.org/zh-CN/scripts/474065
// @version      1.1.2
// @license      MIT
// @description  在不改变原来的功能的情况下，去除广告，实现暗色主题，都是一些主观上的美化，适用于动漫花园（dmhy）及相关镜像站，如果你也喜欢，欢迎使用~
// @author       kasuie
// @include     http://share.dmhy.org/*
// @include     https://share.dmhy.org/*
// @include     https://dmhy.org/*
// @include     https://dmhy.anoneko.com/*
// @include     https://www.dmhy.org/*
// @resource css https://cdn.jsdelivr.net/gh/kasuie/web-static@v1.1.1/web-dmhy/index.min.css
// @icon         https://www.google.com/s2/favicons?sz=64&domain=dmhy.org
// @run-at       document-start
// @grant        GM_addStyle
// @grant        GM_getResourceText
// ==/UserScript==
(function() {
    'use strict';
    if (typeof GM_addStyle != "undefined" && typeof GM_getResourceText != "undefined") {
        GM_addStyle(GM_getResourceText("css"));
    } else {
        var linkElement = document.createElement('link');
        linkElement.rel = 'stylesheet';
        linkElement.type = 'text/css';
        linkElement.href = 'https://cdn.jsdelivr.net/gh/kasuie/web-static@v1.1.1/web-dmhy/index.css';
        var head = document.head || document.getElementsByTagName('head')[0];
        head.insertBefore(linkElement, head.firstChild);
    }
})();

当然这里并不包括css的部分，这里是把css的代码抽离放在了github仓库并做了cnd加速，应用css的代码就只有上面的几十行的代码了，而关键的核心代码其实更少可以看到代码分为两部分，一部分是被==UserScript==标签包裹的，后面部分可以看出是javascript代码部分，先看前面部分。

元数据

其实这部分被称为元数据，通常放置在整个脚本的开头，主要起到对脚本的一些描述，参数设定，声明，包括脚本名称、简介、作者、版本号、运行方式、所依赖的库文件声明等。那我们来逐步了解一下这些分别代表些什么，前面几行是脚本的基本信息，包括脚本名称，脚本的命名空间（唯一），脚本介绍，脚本协议以及脚本的作者，这些都不用多说，重点看下面的：

@include: 是脚本需要应用的网站
@resource <name> <url>: 是该脚本执行需要依赖的一些资源文件，如css,文本，图片资源等，name作为接受资源的变量名，url为资源的地址，可多行声明
@icon: 脚本显示在脚本列表以及浏览器扩展菜单中的图标，非必填
@run-at: 是指定脚本的执行时机
@grant: 声明需要使用那些油猴提供的API函数

解释了这些参数是不是就很容易理解了，这里是需要应用到动漫花园以及镜像站，所以@include声明了应用到https://share.dmhy.org，https://dmhy.org，https://dmhy.org，https://dmhy.anoneko.co等几个站点及下面的子目录，@resource声明了从https://cdn.jsdelivr.net/gh/kasuie/web-static@v1.1.1/web-dmhy/index.min.css引入的外部资源文件，并命名为css，@icon声明的是脚本的图标不用多说，后面一个图片，不用多说，而@run-at它的取值一共有六个：

document-start	#指定脚本在DOM树开始的时候执行，需要脚本尽早执行的时候添加此声明。
document-end	#指定脚本在DOM数据加载完毕的时候执行
document-idle	#页面加载完毕的时候执行。当元数据没有@run-at声明时，脚本默认在此时机执行
main-menu	#X浏览器的扩展声明，表示此脚本不自动执行，用户通过主菜单扩展选项手动执行。
context-menu	#X浏览器扩展声明,表示此脚本不自动执行，用户通过长按菜单的扩展选项执行
tool-menu	#X浏览器扩展声明，表示此脚本不自动执行，用户通过页面工具菜单的扩展选项执行

因为我们要加载外部的css，是应用在dom上的，而DOM树和CSSOM树的构建是并行的，而由于浏览器会尝试尽快展示内容，所以我们的样式如果是在他们DOM数据都加载完之后再引入，页面势必会有明显的白色到黑色的过程，这个过程就是应用外部css到dom上的过程，所以这里是声明为document-start，在dom树开始时，连同引入的css一起参与构建，极大程度上避免产生这样的问题（其他因素也有影响），而@grant个人感觉更是一个比较重要的参数了，他可以使你将你声明的元数据应用到javascript代码中去，它的取值有GM_addStyle，GM_addElement，GM_setValue，GM_getValue，GM_deleteValue，GM_listValues，GM_setClipboard，GM_download，GM_getResourceText，GM_getResourceURL，GM_xmlhttpRequest，GM_info，GM_openInTab，GM_unregisterMenuCommand，GM_registerMenuCommand，GM_notification，由于篇幅和自己其实也只实际用过其中几个，所以我只讲讲我使用到的：

GM_addStyle         #为页面添加样式一段CSS样式，用法：GM_addStyle (cssString)，cssString为字符串样式表
GM_getResourceText  #获取元数据标记@resource指向资源的文本内容，用法： GM_getResourceText(name)，name为标记@resource 定义的用于引用资源的变量名称

至此元数据就是这些了，知道了元数据代表的是什么了，相信后面的javascript的代码部分就很浅显易懂了。