原文链接:http://www.nicemxp.com/articles/3
背景:公司加班第二天可以有免费加班餐,但是很多同学总是忘记去订餐页面订餐。
内容是想写一个脚本,在进入公司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浏览器的工具选项新加一个选项,点击该选项时可以运行脚本