油猴脚本初涉---动漫花园魔改
发表于
浏览量892
评论数0
油猴脚本初涉---动漫花园魔改
暗色主题的初衷是:在不改变原来的功能的情况下,去除广告,实现暗色主题,都是一些主观上的美化,适用于动漫花园(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的代码部分就很浅显易懂了。
js代码
这部分主要就是干一个事情,就是在页面加载的时候,读取外部css文件的样式,并应用到页面上,简单的做了一个容错处理,这样就算是大功告成了🎉️ 。
维护
更新脚本,只需要在css文件的仓库调试好之后,打个tag,然后在脚本代码里更改一下css引用的版本和脚本的版本信息发布即可了。
样式代码
可以在web-static这里找到,其实在时候脚本之前,我还用过一种方案,就是采用Stylus这个插件,可以直接使用样式,这个插件只是针对于样式,还是蛮不错的,你可以在UserStyles找寻不同网站的美化主题,我的样式文件也分享到了该平台:动漫花园魔改,感兴趣可以尝试一下。
写在最后
真的现在看上去非常简单,
但其实我还是踩了不少坑,最终诞生了这个脚本
- 地点: 成都(
摸鱼ing)- 时间: 2023-11-21 00:10:00
- 心情:不好说,有点复杂.gif