欢迎来到NiceSpace!祝大家开心每一天!
  • javascript
chrome javascript程序拓展(订餐插件)

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

内容是想写一个脚本,在进入公司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++)
	{