JavaScript编写浏览器脚本

JavaScript之浏览器脚本

前言：

       现在这个时代，是看剧的时代，但是现在的视频网站对用户都有vip的要求。对于我个人来讲，不是经常看剧，所以我没有一个视频网站的vip，但是难免一两次需要vip，所以打算写一个JavaScript脚本，实现免费直接观看vip视频。（本着学习js的心态）

提醒：

       如果你爱看剧，喜欢看剧，请支持正版！!

在浏览器上安装：暴力猴插件，或者油猴插件

在暴力猴上编辑脚本

// ==UserScript==
// @icon         http://www.kutx.cn/xiaotupian/icons/png/200811/20081114122646255.png
// @name     VIP视频解析工具
// @namespace    [email protected]
// @author   lailai
// @description 直接播放vip视频
// @match        *://*.iqiyi.com/v_*
// @match        *://*.iqiyi.com/dianying/*
// @require      http://code.jquery.com/jquery-1.8.0.min.js
// @version      1.0.0
// @grant        GM_addStyle
// ==/UserScript==

以上是一个脚本需要的 ，在此对几个api解释

@icon 图标，可显示

@name 脚本名称

@namespace 命名空间（学过编程都应该了解）

@author       作者

@description 描述

@match                （我也不懂是不是正则，在这的意思是爱奇艺的播放网址）

@version       版本

@grant         GM_addStyle  

将在脚本运行前即决定脚本将是否在安全沙盒中运行、将要用到哪些API

（这个的介绍，可参考：http://g.mozest.com/thread-42139-1-1）

原理部分:

其实就是使用某个网址的的解析接口，我使用过好多的插件，脚本，其实都是使用这个方式（印象中，有一个网址被限制提供视频解析的服务）

       在此我举一个例子，某部vip视频的网址为http://www.iqiyi.com/v_19rr7plelw.html#vfrm=19-9-0-1

只需要将解析网址的后面的参数url添加http://www.82190555.com/index/iqiyi.php?url=http://www.iqiyi.com/v_19rr7plelw.html

这样就可以实现免vip观看（画质一般，没有强迫症的话还是可以接受的）

地址：

目前亲测两个站点：

		{"name":"无名小站","url":"http://www.wmxz.wang/video.php?url=","title":"www.wmxz.wang"},
		{"name":"迷失之梦","url":"http://mt2t.com/yun?url=","title":"mt2t.com"}

思路部分：

      我们可以通过获取现在使用的视频播放器标识，判断是哪个网址。接着对页面进行分析，选择合适的位置（用于添加我们设计的一些可视化的标记，作为用户操作区），关键是，使用浏览器的开发者模式，对web页面进行分析，获得Element节点。设计界面，只需要懂得一些html，css就可。最后就是将设计的操作区，绑定之前选择的节点上以及一些js事件的设计（主要是点击）。

下面贴上，一段代码， 用于观看爱奇艺vip视频

（这是学习过程中的一个demo，参考一个不知道多久以前下载的js脚本，好像能够兼容多个站点）

// ==UserScript==
// @icon         http://www.kutx.cn/xiaotupian/icons/png/200811/20081114122646255.png
// @name		     VIP视频解析工具
// @namespace    [email protected]
// @author		   lailai
// @description	 直接播放vip视频
// @match        *://*.iqiyi.com/v_*
// @match        *://*.iqiyi.com/dianying/*
// @require      http://code.jquery.com/jquery-1.8.0.min.js
// @version      1.0.0
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';
	//样式添加
	GM_addStyle('#jxPanel{position:absolute;z-index:9999;text-align:center;border-radius:5px;background-color:#A94442;}' +
				'.toggleClass_opacity{opacity:0;}' +
				'#jxPanel>ul>li:not(:last-child){border-bottom:1px solid #bdbcbc;}' + 
				'#jxPanel>ul>li{line-height:25px;list-style:none;font-size: 24px;}' +
				'#jxPanel>ul>li>a{color:black;}');	

	var InterfaceJSON=[
		{"name":"无名小站","url":"http://www.wmxz.wang/video.php?url=","title":"www.wmxz.wang"},
		{"name":"迷失之梦","url":"http://mt2t.com/yun?url=","title":"mt2t.com"}
	];

	
	var currentSite = null;
	var videoSite = window.location.href;
  var reAqy = /iqiyi/i;
  
  var vipBtn = '
';
	vipBtn += 'vip在线解析';
	vipBtn += '
';
  vipBtn += '
';
	var jxPanel = '
 
';
	$.each(InterfaceJSON,function(index,value){
		jxPanel += '
' + value.name + '
';
	});
	jxPanel += '
';
	vipBtn += jxPanel;
	vipBtn += "
"
   
    // 爱奇艺
    if(reAqy.test(videoSite)){
		currentSite = "iqiyi";
        var iqiyiTitle = $('#widget-videotitle');
        iqiyiTitle.parent('.mod-play-tit').append(vipBtn);
	    	$("#ul_div").css("margin-top","-10px");
        $('#btn_vip').css({'font-size':'20px','display':'inline-block','height':'24px','line-height':'24px','margin':'0 5px'});
    }
	   
	$("#jxPanel").css("width",$("#btn_vip").parent().width());
	
	//展开解析地址列表
	$("#btn_vip").click(function(){
		$("#jxPanel").toggleClass("toggleClass_opacity");
	});
	//解析地址列表单击事件
	$("#jxPanel").on("click","a.jx_",function(){
		var decode_url = $(this).attr("data-jx-site");
		videoSite = window.location.href; //获取最新地址
		window.open((decode_url + videoSite));		
	});
})();

对于有html，css，js基础的朋友，理解这些代码很是简单，（没有这些基础的话，解释也看不懂），所以我在此不解释。

重要的事说三遍：

如果你喜欢看剧，请支持正版！

如果你喜欢看剧，请支持正版！

如果你喜欢看剧，请支持正版！