kasuie page cover

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

发表于

浏览量892

评论数0

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

暗色主题的初衷是:在不改变原来的功能的情况下,去除广告,实现暗色主题,都是一些主观上的美化,适用于动漫花园(dmhy)及相关镜像站, 脚本地址 : 动漫花园魔改动漫花园魔改,当然要使用这个脚本,前提你需要安装Tampermonkey(油猴)Tampermonkey(油猴),另外你可以在Greasy ForkGreasy 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.orghttps://dmhy.orghttps://dmhy.orghttps://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_addStyleGM_addElementGM_setValueGM_getValueGM_deleteValueGM_listValuesGM_setClipboardGM_downloadGM_getResourceTextGM_getResourceURLGM_xmlhttpRequestGM_infoGM_openInTabGM_unregisterMenuCommandGM_registerMenuCommandGM_notification,由于篇幅和自己其实也只实际用过其中几个,所以我只讲讲我使用到的:

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

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

js代码

这部分主要就是干一个事情,就是在页面加载的时候,读取外部css文件的样式,并应用到页面上,简单的做了一个容错处理,这样就算是大功告成了🎉️ 。

芙宁娜+心海

维护

更新脚本,只需要在css文件的仓库调试好之后,打个tag,然后在脚本代码里更改一下css引用的版本和脚本的版本信息发布即可了。

样式代码

可以在web-staticweb-static这里找到,其实在时候脚本之前,我还用过一种方案,就是采用StylusStylus这个插件,可以直接使用样式,这个插件只是针对于样式,还是蛮不错的,你可以在UserStylesUserStyles找寻不同网站的美化主题,我的样式文件也分享到了该平台:动漫花园魔改动漫花园魔改,感兴趣可以尝试一下。

写在最后

芙宁娜+心海

真的现在看上去非常简单,但其实我还是踩了不少坑,最终诞生了这个脚本

  • 地点: 成都(摸鱼ing
  • 时间: 2023-11-21 00:10:00
  • 心情:不好说,有点复杂.gif
最后修改:2023年11月21日

留下你的评论吧

http(s)://

回到顶部