修改当前页面加载的js的方法
首先 我们刷新一下页面 通过 NETWORK选项卡 可以看到 当前页面加载了那些js 文件
点击任意一个 js 文件可以看到这个js文件的内容
此处 我们选择 areacode.js 这个文件 作为我们修改的 文件 （为什么选择他呢，因为该js文件 内容少 ，实际上你可以选择任意一个js文件 ）
我们来看下这个js文件的 内容
var AreaCode = [
[
{name: "中国澳门", code: "853"},
{name: "中国*", code: "886"},
{name: "中国香港", code: "852"},
{name: "*", code: "86"},
{name: "美国", code: "1"},
{name: "加拿大", code: "1"},
{name: "日本", code: "81"},
{name: "韩国", code: "82"},
{name: "新西兰", code: "64"},
{name: "马来西亚", code: "60"},
{name: "英国", code: "44"}
],
[
{name: "奥地利", code: "43"},
{name: "阿联酋", code: "971"},
{name: "阿富汗", code: "93"},
{name: "阿尔巴尼亚", code: "355"},
{name: "安哥拉", code: "244"},
{name: "安提瓜和巴布达", code: "1268"},
{name: "阿根廷", code: "54"},
{name: "阿鲁巴", code: "297"},
{name: "澳大利亚", code: "61"},
{name: "阿塞拜疆", code: "994"},
{name: "埃及", code: "20"},
{name: "埃塞俄比亚", code: "251"},
{name: "阿曼", code: "968"}
],
[
{name: "波兰", code: "48"},
{name: "比利时", code: "32"},
{name: "巴哈马", code: "1242"},
{name: "巴林", code: "973"},
{name: "巴巴多斯", code: "1246"},
{name: "伯利兹", code: "501"},
{name: "贝宁", code: "229"},
{name: "不丹", code: "975"},
{name: "玻利维亚", code: "591"},
{name: "巴西", code: "55"},
{name: "布基纳法索", code: "226"},
{name: "布隆迪", code: "257"},
{name: "白俄罗斯", code: "375"},
{name: "巴基斯坦", code: "970"},
{name: "*", code: "507"},
{name: "巴布亚新几内亚", code: "675"},
{name: "巴拉圭", code: "595"}
],
[
{name: "赤道几内亚", code: "240"}
],
[
{name: "丹麦", code: "45"},
{name: "德国", code: "49"},
{name: "东帝汶", code: "670"},
{name: "多哥", code: "228"}
],
[
{name: "俄罗斯", code: "7"}
],
[
{name: "法国", code: "33"},
{name: "佛得角", code: "238"},
{name: "法罗群岛", code: "298"},
{name: "斐济", code: "679"},
{name: "法属波利尼西亚", code: "689"},
{name: "菲律宾", code: "63"}
],
[
{name: "古巴", code: "53"},
{name: "哥伦比亚", code: "57"},
{name: "哥斯达黎加", code: "506"},
{name: "刚果*", code: "243"},
{name: "冈比亚", code: "220"},
{name: "格鲁吉亚", code: "995"},
{name: "格陵兰岛", code: "299"},
{name: "关岛", code: "1671"},
{name: "圭亚那", code: "592"},
{name: "格林纳达", code: "1473"}
],
[
{name: "荷兰", code: "31"},
{name: "海地", code: "509"},
{name: "洪都拉斯", code: "504"},
{name: "韩国", code: "82"}
],
[
{name: "柬埔寨", code: "855"},
{name: "加拿大", code: "1"},
{name: "吉布提", code: "253"},
{name: "加蓬", code: "241"},
{name: "几内亚", code: "224"},
{name: "几内亚比绍", code: "245"},
{name: "吉尔吉斯坦", code: "996"},
{name: "津巴布韦", code: "263"}
],
[
{name: "喀麦隆", code: "237"},
{name: "科摩罗", code: "269"},
{name: "库克群岛", code: "682"},
{name: "开曼群岛", code: "1345"},
{name: "肯尼亚", code: "254"},
{name: "科威特", code: "965"},
{name: "卡塔尔", code: "974"},
],
[
{name: "罗马尼亚", code: "40"},
{name: "黎巴嫩", code: "961"},
{name: "莱索托", code: "266"},
{name: "利比里亚", code: "231"},
{name: "利比亚", code: "218"},
{name: "老挝", code: "856"},
{name: "卢旺达", code: "250"}
],
[
{name: "摩洛哥", code: "212"},
{name: "马其顿", code: "389"},
{name: "马达加斯加", code: "261"},
{name: "马拉维", code: "265"},
{name: "马尔代夫", code: "960"},
{name: "马里", code: "223"},
{name: "毛里塔尼亚", code: "222"},
{name: "毛里求斯", code: "230"},
{name: "密克罗尼西亚", code: "691"},
{name: "蒙古", code: "976"},
{name: "摩尔多瓦", code: "373"},
{name: "摩纳哥", code: "377"},
{name: "莫桑比克", code: "258"},
{name: "墨西哥", code: "52"},
{name: "马来西亚", code: "60"},
{name: "缅甸", code: "95"},
{name: "秘鲁", code: "51"},
{name: "美国", code: "1"}
],
[
{name: "挪威", code: "47"},
{name: "纳米比亚", code: "264"},
{name: "尼泊尔", code: "977"},
{name: "尼日利亚", code: "234"},
{name: "尼加拉瓜", code: "505"},
{name: "尼日尔", code: "227"},
{name: "南非", code: "27"}
],
[
{name: "帕劳", code: "680"}
],
[
{name: "瑞典", code: "46"},
{name: "瑞士", code: "41"},
{name: "日本", code: "81"}
],
[
{name: "萨尔瓦多", code: "503"},
{name: "斯里兰卡", code: "94"},
{name: "塞尔维亚", code: "381"},
{name: "沙特阿拉伯", code: "966"},
{name: "圣马力诺", code: "378"},
{name: "塞内加尔", code: "221"},
{name: "塞舌尔", code: "248"},
{name: "塞拉利昂", code: "232"},
{name: "所罗门群岛", code: "677"},
{name: "索马里", code: "252"},
{name: "苏里南", code: "597"},
{name: "斯威士兰", code: "268"},
{name: "萨摩亚", code: "685"}
],
[
{name: "塔吉克斯坦", code: "992"},
{name: "坦桑尼亚", code: "255"},
{name: "泰国", code: "66"},
{name: "突尼斯", code: "216"},
{name: "汤加", code: "676"},
{name: "土耳其", code: "90"},
{name: "特立尼达和多巴哥", code: "1868"},
{name: "土库曼斯坦", code: "993"}
],
[
{name: "文莱", code: "673"},
{name: "危地马拉", code: "502"},
{name: "乌克兰", code: "380"},
{name: "乌干达", code: "256"},
{name: "乌拉圭", code: "598"},
{name: "乌兹别克斯坦", code: "998"},
{name: "委内瑞拉", code: "58"}
],
[
{name: "西班牙", code: "34"},
{name: "匈牙利", code: "36"},
{name: "新西兰", code: "64"},
{name: "新加坡", code: "65"}
],
[
{name: "意大利", code: "39"},
{name: "印度尼西亚", code: "62"},
{name: "以色列", code: "972"},
{name: "印度", code: "91"},
{name: "牙买加", code: "1876"},
{name: "约旦", code: "962"},
{name: "英属维尔京群岛", code: "1284"},
{name: "越南", code: "84"},
{name: "印尼", code: "62"},
{name: "也门", code: "967"}
],
[
{name: "乍得", code: "235"},
{name: "智利", code: "56"},
{name: "直布罗陀", code: "350"},
{name: "赞比亚", code: "260"}
]
];通过 文件名和 文件内容 我们可以知道 这个文件 实际上是 国家代码对照数据
接下来 我们把 我们的js代码 附加到 这个 文件的最下面
附加的js代码如下
本帖隐藏的内容
try {
OP_CONFIG.userInfo.uid = 6666;
} catch (e) {
console.error(e);
}
如何 让页面加载我们修改以后的js文件呢？
恩，that's a great question
在浏览器中 有一款插件 叫做 AdBlock 也就是大家常用的UC或者360浏览器内置的网页去广告插件
它的作用就是判断 当前页面加载的js文件或者加载的图片是否属于广告，如果是就不加载这个文件
那么同样的原理 它能判断js文件是不是属于广告 肯定就会读取 这个文件的内容来判断 并且 既然能读取这个文件来，那么咋可能不能修改这个文件呢？
所以接下来我们写一款属于我们自己的浏览器插件
嗨起来 写一个我们自己的 chrome 插件
首先感谢 360 汉化了chrome 的开发文档（因为360浏览器本身就使用了[color=#333333][font=arial][size=13px]webkit的内核也就是我们chrome的内核，同样的道理 chrome 的插件 360浏览器 UC浏览器都是可以用的[/size][/font][/color]）
chrome 插件开发文档 ： http://open.chrome.360.cn/extension_dev/overview.html
通过阅读文档 我们创建一下几个文件 文件中的代码 有标识的 就不再赘述
插件编写完毕以后的 目录截图
manifest.json
本帖隐藏的内容
{
"background": {
"scripts": [ "sample.js" ]
},
"browser_action": {
"default_icon": "icon.png"
},
"description": "233333我是描述",
"icons": {
"16": "java.png"
},
"manifest_version": 2,
"name": "justDoIt",
"permissions": [ "contextMenus", "tabs", "webRequest", "webRequestBlocking", "http://*/", "https://*/", "storage" ],
"version": "0.1"
}
background 插件附加的js文件
browser_action 在你浏览器右上角显示的插件的图标
description 安装插件的时候 浏览器上面显示插件的描述信息
icons 插件图标
manifest_version 指定此扩展名使用的manifest.json的版本
name 插件名字 （justDoIt 中文翻译 就是干 ）
permissions 本插件需要用到的 权限 其中最重要的就是 webRequest 和 webRequestBlocking
version 插件版本
sample.js
本帖隐藏的内容
// 点击事件
function genericOnClick(info, tab) {
alert("我被点了!")
}
var context = "page";
var title = "我是按钮";
//创建按钮
var id = chrome.contextMenus.create(
{"title": title, "contexts": [context], "onclick": genericOnClick}
);
// 当前页面发起请求的时候 拦截请求 进入本方法
chrome.webRequest.onBeforeRequest.addListener(function (details) {
var url = details.url;
//当页面请求的 url地址中 包含 areacode.js这个文件的时候
if (url.indexOf("areacode.js?")>0) {
// 重定向 请求地址 到 http://127.0.0.1/areacode.js
return {redirectUrl: "http://127.0.0.1/areacode.js"};
} else {
return true;
}
},
{urls: ["<all_urls>"]},
["blocking"]
)
图标文件我就不上传了 你们可以使用任意一个图片做图标 只要图片大小尺寸是 16X16 即可
代码编写完毕以后 我们加载到 浏览器中
如何加载到浏览器中呢？
在chrome 浏览器 点击 最后上角的菜单->更多工具 ->扩展程序
点击 加载已解压的扩展程序 选择你编写的插件的目录
即可看到 本插件已经安装
部署本地服务器提供 areacode.js 的访问支持
在上一步中，我们成功的 把 网页中只要是访问 areacode.js 的地址 都重定向到 我们本地的 http://127.0.0.1/areacode.js
所以现在我们本地需要部署一个 简单的http服务器支持
此处 使用nginx 提供 （无他，楼主独爱nginx）
访问 http://101.96.10.45/nginx.org/download/nginx-1.15.6.zip
下载 nginx 下载完毕 解压到 C 盘
解压完毕 目录结构应该是这样
进入 conf 文件夹 修改 nginx.conf 的内容为
如下
#user nobody;
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 80;
server_name localhost;
root C:/nginx-1.14.0/myweb;
location / {
root C:/nginx-1.14.0/myweb;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
然后 把我们之前写好的 areacode.js 复制到 myweb 目录下面
复制完毕以后 运行 nginx目录下面的 nginx.exe
打开浏览器 访问 http://127.0.0.1/areacode.js 即可看到我们成功修改了内容的 areacode.js 的 文件内容
接下来再去 访问 慕课网 的任意收费 视频
你会发现 所有的 视频上面显示的 UID 已经成功的变成了 6666
以下代码再加入 areacode.js 可以实现 视频播放完毕 自动点击下一课 自动播放
try {
setInterval(function () {
if($("#next-mask").attr("class")=="next-mask in"){
$("#next-mask a")[1].click()
}
},1000)
}catch (e){
console.error(e);
}
总结
本文实际上原理很简单 使用 chrome插件提供的api 重新向 areacode.js 文件为 我们改好的js文件 实现注入 OP_CONFIG.userInfo.uid
难点在于思维的扩展，也就是 从页面分析 联想到可以通过 chrome插件 实现 本需求