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

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

内容是想写一个脚本，在进入公司OA网站时脚本开始运行，监听打卡按钮，打卡时同时后台提交订餐请求。

开始看了下oa的源码，取到打卡按钮的元素，使用jquery库，提取按钮元素，并为该按钮添加点击事件。然后进入到订餐页面看点击订餐按钮时的操作，是向后台发送了当前选择订餐的加班日期用ajax post的形式通知服务器，这样重新修改下操作接口并加入到之前的打卡点击事件响应中。最后将写好的代码放到控制台中测试下。中间遇到了一些小问题。post服务器时url没写对，因为oa首页和订餐首页的路径不同，因此在订餐首页的订餐请求中的url是针对订餐首页的路径的相对路径，在oa首页需要转换下相对路径。还有提交时在oa首页并没有加班的数据，因此向服务器请求时填写的加班日期就不知道，但是考虑到公司996的状态，直接默认提交前一天的日期，如果前一天不加班就失败了。最后在控制台中测试，打卡时成功订餐。

脚本写好后上网查找通过什么方式可以在访问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的程序拓展就做好了。

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

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

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