chrome javascript程序拓展(自动订餐插件)

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/nice_xp/article/details/65937630

背景：公司加班第二天可以有免费加班餐，但是很多同学总是忘记去订餐页面订餐。

内容是想写一个脚本，在进入公司OA网站时脚本开始运行，将后台的加班餐数据在首页中图形化方便订餐。

脚本写好后上网查找通过什么方式可以在访问OA首页时自动运行我写的脚本。之前模糊的听说过浏览器插件是用来做类似功能的，就上网查了许多关于浏览器插件的问题。最后找到了chrome浏览器中程序拓展中content_scripts可以实现，相关教程:操作用户正在浏览的界面，Content Scripts-拓展开发教程

按照教程中配置了manifest.json，但是遇到了一些问题，chrome的程序拓展是不允许访问正在运行页面的全局变量的。之前在控制台中可以运行的脚本中使用了jquery库，因为oa页面加载时就加载了jquery库，所以要想在程序拓展中使用jquery库就需要下载个本地的jquery库，并加入到content_scripts中的js属性中，放到订餐脚本之前加载。

manifest.json文件内容：

{
    "manifest_version": 2,
    "name": "订餐",
    "version": "1.0",
    "description": "自动订餐",
	"content_scripts": [
        {
            "matches": ["*://xxxxxxxxxxxxxxx/default/index.aspx"],
            "js": ["js/jquery-3.2.0.min.js", "js/dinner.js"]
        }
    ]
}

最后使用chrome浏览器将含有manifest.json和js代码打包，最后一个后缀为.crv的程序拓展就做好了。

效果图：

源码：

//////////////
//author:nicexp
//////////////

function attachHtml(data)
{
	var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
	var month_day = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
	
	var html_src = '<div class="date">'
	
	var date = new Date();
	var cur_month = date.getMonth();
	var cur_year = date.getFullYear();
	var cur_date = date.getDate();
	var cur_day = date.getDay();
	var init_day = (cur_day + 7 - (cur_date - 1) % 7) % 7;
	var reserve_day = 0;
	var reserve_month = 0;
	var is_reserve = false;

	if(data.TakeMealDate != null)
	{
		reserve_day = parseInt(data.TakeMealDate.substr(-2, 2));
		reserve_month = parseInt(data.TakeMealDate.substr(-5, 2));
	}

	for(k in data.OvertimeMeals)
	{
		var v = data.OvertimeMeals[k];
		//已经定餐
		if(v.Cancel == 1)
		{
			is_reserve = true;
		}
	}
	//show continer
	html_src = html_src + '<div class="date-continer">';
	//month
	html_src = html_src + '<div class="month"><ul><li class="prev"><</li><li class="next">></li><li style="text-align:center">' + months[cur_month] + '<br><span style="font-size:18px">' + cur_year + '</span></li></ul></div>';
	//weekday
	html_src = html_src + '<ul class="weekdays"><li class="weekend">Su</li> <li>Mo</li> <li>Tu</li> <li>We</li> <li>Th</li> <li>Fr</li> <li class="weekend">Sa</li></ul>';
	//day
	html_src = html_src + '<ul class="days">';

	for (var i = 0; i < init_day; i++)
	{ 
	    html_src = html_src + '<li></li>' + ' ';
	}

	for (var i = 0; i < month_day[cur_month]; i++)
	{ 
		if(i + 1 == cur_date)
		{
			if(data.TakeMealToday == 1 || data.TakeMealToday == "1")
			{
				var mealType = getDinnerAorB(data);
				html_src = html_src + '<li><span class="today todayok">可领' + mealType + '</span></li>' + ' ';
			}
			else
			{
				html_src = html_src + '<li><span class="today todaynotok">不可领</span></li>' + ' ';
			}
		}
		else if(i + 1 == reserve_day && reserve_month == cur_month+1)
		{
			if(is_reserve)
			{
				html_src = html_src + '<li><span class="dinner todayok">已预定</span></li>' + ' ';
			}
			else
			{
				html_src = html_src + '<li><span class="dinner todaynotok">未预定</span></li>' + ' ';
			}
		}
		else
		{
			html_src = html_src + '<li>' + (i+1) +'</li>' + ' ';
		}
	}

	html_src = html_src + '</ul>';
	//buttons
	html_src = html_src +'<div class="buttons"><div class="button"><button id="dinner-a">A餐</button></div><div class="button"><button id="dinner-b">B餐</button></div></div>'
	html_src = html_src + '</div>';
	//detail A and B
	html_src = html_src + '<div><span class="detail-dinner-a"></span><span class="detail-dinner-b"></span></div>'

	html_src = html_src + '</div>';
	//attach body
	$("body").append(html_src);
	//attach css
	attachCss();
	//attach btn view
	attachBtnOper();
	//attach move
	attachMoveOper();
	//attach submit
	attachBtnCommit(data);
	//attach pos
	attachPos();
}

function attachCss()
{
	$(".date").css({
		"width": "400px",
		"box-sizing": "border-box",
		"font-family": "Verdana,sans-serif",
		"position": "relative",
    	"z-index": "41",
    	// "top": "200px",
    	// "left": "800px",
    	"transform": "scale(0.8,0.8)",
	});

	$(".date-continer").css({
		"box-shadow": "10px 10px 5px rgba(0,0,0,0.5)",
	});

	$(".date ul").css({
		"list-style-type": "none",
	});

	$(".month").css({
		"padding": "10px 20px",
		"background": "#1abc9c",
	});

	$(".month ul").css({
		"margin": "0",
		"padding": "0",
	});

	$(".month ul li").css({
		"color": "white",
		"font-size": "20px",
		"text-transform": "uppercase",
		"letter-spacing": "3px",
	});

	$(".month .prev").css({
		"float": "left",
		"padding-top": "10px",
	});

	$(".month .next").css({
		"float": "right",
		"padding-top": "10px",
	});

	$(".weekdays").css({
		"margin": "0",
		"padding": "10px 0",
		"background-color": "#ddd",
	});

	$(".weekdays li").css({
		"display": "inline-block",
		"width": "12.5%",
		"color": "#666",
		"text-align": "center",
		"font-size": "15px",
	});

	$(".weekend").css({
		"color": "#f43",
	});

	$(".days").css({
		"padding": "10px 0",
		"background": "rgb(230, 230, 230)",
		"margin": "0",
	});

	$(".days li").css({
		"list-style-type": "none",
		"display": "inline-block",
		"width": "12.5%",
		"text-align": "center",
		"margin-bottom": "10px",
		"font-size": "12px",
		"color": "#777",
	});

	$(".today").css({
		"padding": "5px",
		"color": "white",
	});

	$(".dinner").css({
		"padding": "5px",
		"color": "white",
	});

	$(".todayok").css({
		"background": "#1abc9c",
	});

	$(".todaynotok").css({
		"background": "#f43",
	});

	$(".buttons").css({
		"position": "relative",
		"overflow": "hidden",
		"background-color": "rgb(230, 230, 230)",
		"display": "block",
		"padding": "10px 50px",
	});

	$(".button").css({
		"display": "block",
		"float": "left",
	});

	$("#dinner-a").css({
		"background-color": "rgb(250, 56, 56)",
		"color": "#fff",
		"border": "0",
		"box-shadow": "none",
		"font-size": "17px",
		"font-weight": "500",
		"border-radius": "5px",
		"padding": "10px 32px",
		"margin": "0 35px",
		"cursor": "pointer",
	});

	$("#dinner-b").css({
		"display": "inline-block",
		"background-color": "rgb(30, 144, 255)",
		"color": "#fff",
		"border": "0",
		"box-shadow": "none",
		"font-size": "17px",
		"font-weight": "500",
		"border-radius": "5px",
		"padding": "10px 32px",
		"margin": "0 5px",
		"cursor": "pointer",
	});

	$("#dinner-a:hover").css({
		"background-color": "rgb(247, 40, 40)",
	});

	$("#dinner-b:hover").css({
		"background-color": "rgb(27, 130, 230)",
	});

	$(".detail-dinner-a").css({
		"display": "none",
		"width": "120px",
		"background-color": "rgba(0,0,0,0.8)",
		"color": "#fff",
		"text-align": "center",
		"border-radius": "6px",
		"padding": "5px 0",
		"position": "relative",
		"z-index": "1",
		"left": "70px",
		"float": "left",
	});

	$(".detail-dinner-b").css({
		"display": "none",
		"width": "120px",
		"background-color": "rgba(0,0,0,0.8)",
		"color": "#fff",
		"text-align": "center",
		"border-radius": "6px",
		"padding": "5px 0",
		"position": "relative",
		"z-index": "1",
		"left": "80px",
		"float": "left",
	});

	var style = document.createElement("style"); 
	document.head.appendChild(style); 
	sheet = style.sheet; 
	sheet.addRule('.red::before','color: green'); // 兼容IE浏览器
	sheet.insertRule('.detail-dinner-a::after { content: "";position: absolute;bottom: 100%;left: 50%;margin-left: -5px;border-width: 10px;border-style: solid;border-color: transparent transparent rgba(0,0,0,0.8) transparent; }', 0);
	sheet.insertRule('.detail-dinner-b::after { content: "";position: absolute;bottom: 100%;left: 50%;margin-left: -5px;border-width: 10px;border-style: solid;border-color: transparent transparent rgba(0,0,0,0.8) transparent; }', 0);
}

function removeHtml(types)
{
	if(types == "root")
	{
		$(".date").remove();
	}
	else if(types == "button")
	{
		$(".buttons").remove();
	}
	
}

function getDinnerData()
{
	$.ajax({
		url: 'http://web.oa.zulong.com/C6/ZuLongFlowModule.Web/Ajax/OvertimeMeal.aspx',
		data: "<root><Data><Module>GetData</Module><Date></Date></Data></root>",
		type: "post",
		async: 'false',
		dataType: 'json',
		success: function (data){
			if(data.ReturnMessage.Status == "outclass" || data.ReturnMessage.Status == "error")
			{
				return;
			}

			//atach view
			removeHtml("root");
			attachHtml(data);

			//已经没有订餐次数
			if(data.AvailableCount <= 0)
			{
				removeHtml("button");
				return;
			}
			//有订餐次数,遍历加班数据,看是否已经订过餐
			for(k in data.OvertimeMeals)
			{
				v = data.OvertimeMeals[k];
				//已经定餐
				if(v.Cancel == 1)
				{
					removeHtml("button");
					return;
				}
			}

			getABData();
        },
		error: function ()
		{
			alert("get data error");
		}
    })
}

function getABData()
{
	$.ajax({
        url: 'http://web.oa.zulong.com/C6/ZuLongFlowModule.Web/Ajax/OvertimeMeal.aspx',
        data: '<root><Data><Module>GetABData</Module><Date></Date></Data></root>',
        type: "post",
        async: 'false',
        dataType: 'json',
        success: function (data) {
            loadAB(data);
        }
    })
}

function loadAB(data)
{
	var strA = "";
	var strB = "";
	for(k in data)
	{
		var v = data[k];
		if(k == 0)
		{
			strA = strA + v.A;
			strB = strB + v.B;
		}
		else
		{
			strA = strA + '<br>' + v.A;
			strB = strB + '<br>' + v.B;
		}
	}

	$(".detail-dinner-a").html(strA);
	$(".detail-dinner-b").html(strB);
}

function attachBtnOper()
{
	$(".buttons").on({
		mouseenter:function(e){
			$(".detail-dinner-a").show();
			$(".detail-dinner-b").show();
		},
		mouseleave:function(e){
			$(".detail-dinner-a").hide();
			$(".detail-dinner-b").hide();
		}
	});
}

var bMouseDown = false;
var pageX = 0;
var pageY = 0;
var attachPosX = 880;
var attachPosY = 135;

function attachMoveOper()
{
	$(".month").on({
		mousedown:function(e){
			bMouseDown = true;
			pageX = e.pageX;
			pageY = e.pageY;
		},
	});
	$("*").on({
		mousemove:function(e){
			if(bMouseDown)
			{
				var obj = document.getElementsByClassName("date");
				var diffX = e.pageX - pageX;
				var diffY = e.pageY - pageY;
				var topY = obj[0].style.top.replace("px", "");
				obj[0].style.top = parseInt(topY) + diffY + "px";
				var leftX = obj[0].style.left.replace("px", "");
				obj[0].style.left = parseInt(leftX) + diffX + "px";
				pageY = e.pageY;
				pageX = e.pageX;
				attachPosX = parseInt(leftX) + diffX;
				attachPosY = parseInt(topY) + diffY;
			}
		},
		mouseup:function(e){
			bMouseDown = false;
			pageX = 0;
			pageY = 0;
		},
	});
}

function submitMsg(time, type) {
    $.ajax({
        url: 'http://web.oa.zulong.com/C6/ZuLongFlowModule.Web/Ajax/OvertimeMeal.aspx',
        data: '<root><Data><Module>Receive</Module><Date>' + time + '</Date><Type>' + type + '</Type></Data></root>',
        type: "post",
        async: 'false',
        dataType: 'json',
        success: function (data) {
            if (data.Status == "ok") {
            	getDinnerData();
            	alert("申请成功");
            } else {
            	alert("申请失败");
            }
        },
        error: function () {
        	alert("申请失败");
        }
    })
}

function attachBtnCommit(data)
{
	var datetime = "";
	var committime = "";
	//已经没有订餐次数
	if(data.AvailableCount <= 0)
	{
		return;
	}
	//有订餐次数,遍历加班数据
	for(k in data.OvertimeMeals)
	{
		v = data.OvertimeMeals[k];
		//找到没有订餐的日期
		if(v.Receive == 0)
		{
			datetime = v.Class_DateTime;
			break;
		}
	}
	if(datetime == "")
	{
		return;
	}
	//构建提交日期
	committime = "<td>"+datetime+"</td>";

	$("#dinner-a").on({
		mousedown:function(e){
			submitMsg(committime, "A");
		},
	});
	$("#dinner-b").on({
		mousedown:function(e){
			submitMsg(committime, "B");
		},
	});
}

function getDinnerAorB(data)
{
	var date = new Date();
	var cur_year = date.getFullYear();
	var cur_month = date.getMonth() + 1;
	var cur_date = date.getDate();

	for(k in data.OvertimeMeals)
	{
		v = data.OvertimeMeals[k];
		if(v.TakeMealTime != null)
		{
			var re = /\d+/g;
			var res = v.TakeMealTime.match(re);
			if(cur_year == res[0] && cur_month == res[1] && cur_date == res[2])
			{
				return v.MealType;
			}
		}
	}

	return ""
}

function attachPos()
{
	var obj = document.getElementsByClassName("date");
	obj[0].style.top = parseInt(attachPosY) + "px";
	obj[0].style.left = parseInt(attachPosX) + "px";
}

$(document).ready(function () {
	getDinnerData();
})

在查找资料过程中发现E浏览器也可以实现一个类似的程序拓展，但是并没有找到IE如何自动加载js脚本

IE相关：JS开发IE浏览器本地插件

大概就是可以通过注册表的方式为IE浏览器的工具选项新加一个选项，点击该选项时可以运行脚本