写废了一个浏览器插件
写废了一个浏览器插件
怒发冲冠，凭栏处，潇潇雨歇。抬望眼，仰天长啸，壮怀激烈。三十功名尘与土，八千里路云和月。莫等闲，白了少年头，空悲切。靖康耻，犹未雪。臣子恨，何时灭？驾车长破，贺兰山缺。壮志饥餐胡虏肉，笑谈渴饮匈奴血。待从头，收拾旧河山，朝天阙! 《满江红》
高中的时候背过三十功名尘与土，八千里路云和月以及莫等闲，白了少年头，空悲切这两句，都是只知其句，不知其意。现在重读这首诗，只能用其中的一个词形容------壮怀激烈。
关于浏览器插件
浏览器插件的开发理论上应该是只针对chorme, 而且按照文档开发一个插件非常简单。主要就是一个manifest.json配置文件。
{
"manifest_version": 2,
"name": "邮箱助手",
"description": "邮箱助手.",
"version": "1.0",
"devtools_page": "devtools.html",
"browser_action": {
"default_icon": "./imgs/logo.png",
"default_popup": "popup.html"
},
"options_page": "pop.html",
"content_scripts": [
{
"matches": ["https://mail.**.com/*"],
"js": ["./js/style.js"],
"css": ["./css/style.css"],
"run_at":"document_idle"
}
]
}
等到功能开发完成后，通过浏览器的扩展程序选项加载新的扩展程序就可以了。
简单解释下配置项信息，版本号什么的就不多说了。
browser actions
可以在chrome主工具条的地址栏右侧增加一个图标。作为这个图标的延展，一个browser action图标还可以有tooltip、badge和popup。
options_page
为了让用户设定你的扩展功能，你可能需要提供一个选项页。如果你提供了选项页，在扩展管理页面 chrome://extensions上会提供一个链接。点击选项链接就可以打开你的选项页。
当然，如果想要在popup.html中直接打开这个options_page，需要如下代码
chrome.runtime.openOptionsPage(function callback(res) {
console.log(res)
})
content_scripts
Content scripts是在Web页面内运行的javascript脚本。通过使用标准的DOM，它们可以获取浏览器所访问页面的详细信息，并可以修改这些信息。
这三个配置应该时比较常用的，如果想要开发更复杂的插件，那么需要更多的配置，查文档呗
邮箱助手
折腾这个一是因为平时工作需要发周报，用的邮箱的富文本编辑器比较丑，写出来的内容格式没法控制。
然后想着干脆搞个插件，在插件中写周报或者日志，然后整两个按钮，创建新邮件，生成主题，添加收件人，添加抄送，发送邮件完事儿。
当然，主要还是内容的编辑。内容编辑将markdown转为html直接放到邮件的内容部分。这个部分直接使用codemirror和marked这连个npm包。codemirror负责创建markdown编辑区域，marked负责将markdowm文本转为html,当然这个转换过程我们也可以自己去转，然后我们自定义一套皮肤就可以了。
效果如下:
似乎一切都是那么完美。。。
重点来了，一般的浏览器插件都是直接用原生JS或者JQUERY+html直接进行。我一直有个疑问，如果我用webpack+vue开发将打包后的静态文件直接配置上去利论上似乎也是可以的。然后上面的界面其实是build的静态页面。当我配置好manifest.json文件后，重新加载插件，神奇的事情发生了。。。
dom里的<div id="app"></div> 消失了。。。
控制台给了几个提醒。。。。
DevTools failed to load SourceMap: Could not load content for chrome-extension://jngnfehmjaphcbodabiadlldoolclbfl/static/js/manifest.2ae2e69a05c33dfc65f8.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
废了？？？然后找了半天原因也没找到，然后这个事儿就先这样吧，等我有时间了在重新整一个呗。。。
关于抢票软件
今年的车票似乎真的是不好买，然后我也琢磨了是不是自己也写个抢票软件，给自己抢个火车票?
说干就干，理论都是一样的，登录12306-->抓包-->拿到接口,分析参数-->发送请求--购票成功。
然后就打开了控制台，看看查询车次列表都返回了什么数据,查询车次的接口返回了99条如下的数据:
//
aYt2cLvmWFQv%2BDF7gJq62EkyOi7Gj6z1ootJ5UW2OwcxdTo1ncevHsINM83Ks0%2BqCS%2BjZEntIPEZ%0A%2FdKAiiY%2F9iCLsTyAPPtBvv3wy9Zy4CN3ayIWTVl%2FwGNjrI9c5hNqNDMMuzukNna5MH0hzuXiJBjB%0Am%2BBFteNYIh6HUBXEuOfHuASw80qJKgg%2BTvtn8mNXy0LV%2FRc8F3V9tAFQxSGITi6yUQWf161uwXuu%0AHovlh0Ye5CXJU4aZaQMLpsmGGWwiuAtmXqEZSq%2FCVBoheZefbFvGyIKVFK9UbeWXRjGUCJhAoL0U%0AnXjRKnRsRoqt2NZ8|预订|330000K59818|K599|BTC|GZQ|BXP|ZZF|05:14|13:53|08:39|Y|DiCNDjGKyG9I9PM5DXLmzup6ISCgORBTA4w%2FA3pbUPljHatqi5LkY5hFeRY%3D|20210610|3|C1|10|18|1|0||||12|||无||有|有|||||103040W0|1341|1|0||1009300021301630002140251000121009303000|0|||||1|#0#0|
然后可以从里面解析处出来车次，发车时间等信息
["aYt2cLvmWFQv%2BDF7gJq62EkyOi7Gj6z1ootJ5UW2OwcxdTo1…efbFvGyIKVFK9UbeWXRjGUCJhAoL0U%0AnXjRKnRsRoqt2NZ8",
"预订",
"330000K59818",
"K599",
"BTC", "GZQ", "BXP", "ZZF", "05:14", "13:53", "08:39", "Y",
"DiCNDjGKyG9I9PM5DXLmzup6ISCgORBTA4w%2FA3pbUPljHatqi5LkY5hFeRY%3D",
"20210610", "3", "C1", "10", "18", "1", "0", "", "", "", "12", "", "",
"无", "", "有", "有", "", "", "", "", "103040W0", "1341", "1", "0", "",
"1009300021301630002140251000121009303000", "0", "", "", "", "", "1", "#0#0", ""]
然后我对那几个加密的字符串产生了兴趣,一般的加密都是各种加密算法依次执行几遍，有的需要密钥，这个我试了试，结果肯定解不出来的，但是最后找到了一个sm4.js----国密算法，顺带了解一下这个概念如下:
SM4.0（原名SMS4.0）是中华人民共和国政府采用的一种分组密码标准，由国家密码管理局于2012年3月21日发布。相关标准为“GM/T 0002-2012《SM4分组密码算法》（原SMS4分组密码算法）。
然后发现一个问题，我们在添加常用购票人的时候，如果这个购票人没有通过验证，getPassengerDTOs这个接口竟然会将这个人的身份证号明文返回。
这个有点?啊。
我有时候觉得抢票软件这个东西其实收的就是个智商税。调用的接口又不是自己的，搞个界面写个正在加速中...,然后就天真的付款，等着收票，你知道我是真的在帮你抢票吗？还是我只是写了个假的界面放在那里，使了个障眼法？
折腾那个加密字符串的时候已经没心思写抢票插件了，找时间再整吧。。。
总结
浏览器插件的开发，总体上很简单，功能复杂的除外。
javascript基础知识总结
本文分享自 JavaScript高级程序设计 微信公众号，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文参与?腾讯云自媒体分享计划? ，欢迎热爱写作的你一起参与！