HTML&JAVASCRIPT&CSS.png

I. 主理人说

通过QuantumultX 提供的方法将 JavaScript 脚本嵌入 HTML 文档中 HEAD元素BODY元素 内实现去广告;油猴脚本管理器也是通过一样的原理实现其功能的,将 JavaScript 脚本函数嵌入 网页之中。

II. 背景资料

通过连续多月断断续续的学习,前端各方面知识基本上了解;(仅限于三剑客)

III. 使用到的工具

知其然,知其所以然。

油猴脚本管理器

安装油猴脚本管理器(Tampermonkey),大名鼎鼎的油猴;下面是一些关于油猴的介绍,所谓用户脚本,脚本管理器,以及油猴实现的一些功能(约等于JavaScript所能实现的)。

Tampermonkey is the most popular userscript manager, with over 10 million users. It's available for Chrome, Microsoft Edge, Safari, Opera Next, and Firefox.

A userscript (or user script) is a program, usually written in JavaScript, for modifying web pages1 to augment browsing. On desktop browsers such as Firefox, they are enabled by use of a userscript manager browser extension such as Greasemonkey. The Presto-based Opera-browser-supported userscripts (referred to as User JavaScript2) are placed in a designated directory. Userscripts are often referred to as Greasemonkey scripts, named after the original userscript manager for Firefox. via 维基百科

新建油猴脚本

打开油猴脚本管理器,新增脚本;

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://www.google.com.hk/search?q=%E6%B2%B9%E7%8C%B4&oq=%E6%B2%B9%E7%8C%B4&aqs=chrome..69i57j69i59l2j0l2j69i61l2j69i60.916j0j1&sourceid=chrome&ie=UTF-8
// @icon         https://www.google.com/s2/favicons?domain=google.com.hk
// @grant        none
// ==/UserScript==

需要注意的是:这一段是一段注释,油猴是完全能读取的,脚本的一些相关配置:包括脚本名称,版本,脚本功能描述,脚本作者,本脚本会在哪个域名下进行匹配应用,以及本脚本是在 head 元素部分加载执行 或是在 body 结束前执行;具体使用说明可参阅:https://www.tampermonkey.net/documentation.php

JavaScript介绍

JavaScript.png

JavaScript 是世界上最流行的脚本语言。 JavaScript 是属于 web 的语言,它适用于 PC、笔记本电脑、平板电脑和移动电话。 JavaScript 被设计为向 HTML 页面增加交互性。 许多 HTML 开发者都不是程序员,但是 JavaScript 却拥有非常简单的语法。几乎每个人都有能力将小的 JavaScript 片段添加到网页中学习JavaScript

特性:JavaScript 能够改变 HTML 内容;JavaScript 能够改变 HTML 属性;JavaScript 能够改变 HTML 样式 (CSS)
1.在网页中添加新的 HTML,修改网页已有内容和网页的样式。
2.响应用户的行为,响应鼠标的点击,指针的移动,按键的按动。
3.向远程服务器发送网络请求,下载和上传文件(所谓的 AJAX 和 COMET 技术)。
4.获取或设置 cookie,向访问者提出问题或发送消息。
5.记住客户端的数据(“本地存储”)。

via 浏览器中的 JavaScript 能做什么?

IV. 油猴脚本使用示例

无一例外,都是 JavaScript 脚本;

片库网实战示例(自定义Cookie以及修改样式)

片库网域名:https://www.pianku.li/

// ==UserScript==
// @name         片库网去广告
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       limbopro
// @match        https://www.pianku.li/*
// @include      https://m.pianku.li/*
// @icon         https://www.google.com/s2/favicons?domain=pianku.li
// @grant        none
// @run-at document-end
// ==/UserScript==

document.cookie = "pyad=30";

var brdex = document.querySelectorAll("brde");
var i;
for (i = 0; i < brdex.length; i++) {
brdex[i].style.display = "none";
}

var divx = document.querySelectorAll("div[id][classname][class]");
var x;
for (x = 0; x < divx.length; x++) {
divx[x].style.display = "none";
}

哔嘀影视(播放页广告加速/禁止新标签页打开链接)

哔嘀影视域名:https://www.bde4.cc/

去图片广告油猴脚本

// ==UserScript==
// @name         哔滴影视去图片广告
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://www.bde4.cc/*
// @grant        none
// @run-at document-start
// ==/UserScript==

var newstyle="img[src*='U6ffd737a75c5'],[src*='JAj77YtKOt'],[src*='6f624c25H']{display:none !important;}";
var creatcss=document.createElement("style");
creatcss.innerHTML=newstyle;
document.getElementsByTagName('head')[0].appendChild(creatcss)

视频播放页加速油猴脚本

// ==UserScript==
// @name         哔滴影视视频广告加速
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://www.bde4.cc/*
// @icon         https://www.google.com/s2/favicons?domain=bde4.cc
// @grant        none
// @run-at document-start
// ==/UserScript==

(function() {
    // Based on uAssets
    // License: https://github.com/uBlockOrigin/uAssets/blob/master/LICENSE
    var z = window.setInterval,
        needle = '{{1}}',
        delay = parseInt('{{2}}', 10),
        boost = parseFloat('{{3}}');
    if ( needle === '' || needle === '{{1}}' ) {
        needle = '.?';
    } else if ( needle.charAt(0) === '/' && needle.slice(-1) === '/' ) {
        needle = needle.slice(1, -1);
    } else {
        needle = needle.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
    }
    needle = new RegExp(needle);
    if ( isNaN(delay) || !isFinite(delay) ) {
        delay = 1000;
    }
    if ( isNaN(boost) || !isFinite(boost) ) {
        boost = 0.05;
    }
    if ( boost < 0.02 ) {
        boost = 0.02;
    }
    if ( boost > 50 ) {
        boost = 50;
    }
    window.setInterval = function(a, b) {
        if ( b === delay && needle.test(a.toString()) ) {
            b *= boost;
        }
        return z.apply(this, arguments);
    }.bind(window);
})();

修改元素 a 的[target]属性值为"_self",使得任意链接都在当前页面打开(每点击一个链接都在新标签页打开实在是太影响使用体验了,AdGuard 上竟然没有人提交这点!);
// ==UserScript==
// @name         哔滴影视禁止新页面跳转
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://www.bde4.cc/*
// @grant        none
// @run-at document-end
// ==/UserScript==

/* 禁止新页面跳转 */
var _self = document.querySelectorAll("a");
var i;
for (i = 0; i < _self.length; i++) {
_self[i].target = "_self";
}

/* 禁止新页面跳转 全文替换的方法 */
/*
document.body.innerHTML = document.body.innerHTML.replace(/_self/gi, "_self");
*/

innerHTML 替换字符串

document.body.innerHTML = document.body.innerHTML.replace(/_self/gi, "_self");

V. 去网页广告原理(JavaScript/CSS)

参阅背景资料部分;

VI. CSS 示例

通过使用CSS选择器定位广告元素位置,并配合使用 !important 参数使该广告元素被强制隐藏 display:none
brde{display: none !important;}
div[id][classname][class]{display: none !important;}

VII. JavaScript 示例

片库网视频播放页广告截图示例

document.cookie = "pyad=22"; // 设置 Cookie 免除视频播放页广告
// https://raw.githubusercontent.com/limbopro/Adblock4limbo/main/Adguard/pianku.js
// 如果仅需脚本完全去除广告可参考上述链接

我们从片库网播放页源码找到了 Cookie 的相关代码,Cookie 的名字为:pyad,默认 Cookie 的值为 1,即当你第一次载入视频播放页时,名为 pyad 的Cookie的值自动+1,当你刷新大于4次时,在下一次播放时则 pycount=0(视频播放页广告倒计时);
if(getCookie('pyad')){
if(getCookie('pyad')>4){pycount=0;}
var pynum=getCookie('pyad');pynum++;
}else{
var pynum=1;
}

而 Cookie 是可以由 JavaScript 进行设置的;

document.cookie = "pyad=22"; 

以上。

VIII. 附注

一些摘抄示例,正则表达式的妙用,RefExp;如果是该浏览器,则执行XX操作;在下方示例中,当浏览器UA满足条件时是跳出警告。
<script type="text/javascript">
var reg = RegExp(/iPhone/);
var reg1 = RegExp(/Safari/);
var reg2 = RegExp(/MQQ/);
if(ua.match(reg) && ua.match(reg1) && ua.match(reg2) == null)
{
    alert('目前美剧h5端在safari浏览器存在兼容问题,请更换其他浏览器看美剧');
}
</script>

querySelectorAll 以及 for 循环的运用,数组等等;
<script>
var xr=document.querySelectorAll("p#demo");
var i;
for (i=0;i < xr.length; i++){
document.querySelectorAll("p#demo")[i].innerHTML="段落已修改。";
}
</script>

IX. 加速跳过倒计时广告

来自 Ublock origin,nano-setInterval-booster.js;
(function() {
    // Based on uAssets
    // License: https://github.com/uBlockOrigin/uAssets/blob/master/LICENSE
        // https://firmware.koolshare.cn/binary/swf/
    var z = window.setInterval,
        needle = '{{1}}',
        delay = parseInt('{{2}}', 10),
        boost = parseFloat('{{3}}');
    if ( needle === '' || needle === '{{1}}' ) {
        needle = '.?';
    } else if ( needle.charAt(0) === '/' && needle.slice(-1) === '/' ) {
        needle = needle.slice(1, -1);
    } else {
        needle = needle.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
    }
    needle = new RegExp(needle);
    if ( isNaN(delay) || !isFinite(delay) ) {
        delay = 1000;
    }
    if ( isNaN(boost) || !isFinite(boost) ) {
        boost = 0.05;
    }
    if ( boost < 0.02 ) {
        boost = 0.02;
    }
    if ( boost > 50 ) {
        boost = 50;
    }
    window.setInterval = function(a, b) {
        if ( b === delay && needle.test(a.toString()) ) {
            b *= boost;
        }
        return z.apply(this, arguments);
    }.bind(window);
})();
最后修改:2021 年 05 月 05 日 11 : 12 AM