零基础开始学JavaScript,写chrome扩展程序

端午节最后一天假花了一下午终于写出来一个自己的chrome扩展程序,六个小时在看开发文档,代码敲得也就几十行就实现了……

 

先谈背景,再谈搜集的资料,最后讲怎么实现。

背景是大家有算平均绩点和加权平均分的需要。绩点高于2.0才能拿学位证,高于1.0才有毕业证,出国申请学校都要用这个。加权平均分则用于每学年评奖学金的排名。

同学拿Python写了一个脚本,但是对于广大同学来说不方便使用,不可能人人都有Python环境,而且还用了第三方的库,更不能指望大家用pip指令安装库了吧。

那么写安卓程序怎么样呢?没意义,首先iPhone用户用不了,其次这玩意不像之前写的查宽带使用时长,这个一学期你也查不了几次啊。

在自己的服务器上搭建一个网站,然后微信公众号里面添加链接怎么样!好主意,但是我发现写网站太麻烦了,光配置LAMP环境都要折腾死了。

最后突然今天看到了一个推送讲怎么写chrome扩展,不得不承认那篇文章写的简直屎一般,让人完全没有想看的欲望。所以链接都不想贴给大家了。

既然决定写浏览器的扩展程序,那么就开始动手了。

 

 

首先先查一下chrome的扩展程序都是怎么写的。

主要是JavaScript和html。Html就不用说了随手写一个能用的就行,JavaScript还要先学一下,之前也就做CTF知道有这么个东西,从来都没用过,我们先看看有谁的教程最适合入门。

http://javascript.ruanyifeng.com/这个看了一下概述就看不下去,发现很适合完整的学习但是我用不上里面的几个功能。所以了解一下大致语法和标记一下一会可能用到的API就可以进行下一步了。

直接Google写chrome插件,看了两个别人入门用的极其简单的例子,发现了没什么用,还是应该看chrome的开发文档。全英文,很蛋疼,怎么办呢,搜一下知乎上有人推荐360给翻译的文档http://open.chrome.360.cn/extension_dev/devguide.html。感谢360。(后来发现有点老了,但是对这个简单的插件完全够用了)

在了解了大概所有的插件的实现方式之后,我就知道要怎么做了。

两个方案,XMLHttpRequest,在用户登录之后拿cookies去请求数据。这个想想就麻烦,而且都有浏览器了干嘛不直接让浏览器访问好我们在处理呢。方案二是直接用js处理页面上的elements,怎么简单怎么来,所以就决定用这个了。

 

查看页面元素,发现是个table,那就查怎么处理table,一下子就找到目标了。

http://blog.csdn.net/itmyhome1990/article/details/7005784

试验一下,

var el=document.getElementById("Datagrid1").rows[1].cells[4].innerHTML; 
alert(el);

效果图


完美,记下来要用的,列里面5能判断是不是公选,7是学分,8是绩点,13是成绩。(程序从0开始数)

但是按这个写了JavaScript后怎么显示找不到对象呢?

还好我机智找来了写Python脚本的同学问了下!

神特么里面嵌套frame框架。查了好久在发现问题,这个大家要注意了!

http://www.cnblogs.com/rainman/archive/2011/02/16/1956431.html#m1

知道了怎么操作frame框架。


找到框架id="iframeautoheight"


还学会了如何调试JavaScript,直接在chrome中就可以打断点

http://wiki.jikexueyuan.com/project/chrome-devtools/debugging-javascript.html

讲真,第一次拿浏览器当IDE调试程序,发现JavaScript真方便…

 

说真的我们已经完成了全部的内容了,最后把代码全都写出来就30来行。。。

var doc= document.getElementById('iframeautoheight').contentDocument;
var tb=doc.getElementById('Datagrid1'); 

var Credit=0;//学分
var GPA=0;//绩点
var Grade=0;//成绩
var type;
var sumCredit=0;
var sumGPA=0;
var sumMul=0;
var sumGrade=0;
for (var i=1;i<tb.rows.length;i++){
	Credit=parseFloat(tb.rows[i].cells[6].innerHTML);
	GPA=parseFloat(tb.rows[i].cells[7].innerHTML);
	type=tb.rows[i].cells[5].innerHTML;
	if(type===' '){//若不是这个,说明是通识选修课,不计入
		sumGPA=sumGPA+GPA;
		sumMul=sumMul+(Credit*GPA);
		type=tb.rows[i].cells[12].innerHTML;
		if(!isNaN(parseFloat(type))){//如果是认知实习成绩为良好,则不计入,良好的parseInt结果为NaN
			Grade=parseFloat(type);
			sumCredit=sumCredit+Credit;
			sumGrade=sumGrade+(Grade*Credit);
		}
	}
	
}
var avg=sumMul/sumCredit;
var avg1=sumGrade/sumCredit;
avg = avg.toFixed(3);//保留三位小数
avg1=avg1.toFixed(3);
var s="您的平均GPA为"+avg+'\n 加权平均分为'+avg1;
alert(s);

而且大家要用的话完全只拿这个代码就可以了,真的,弄到最后发现完全没有打包成chrome扩展程序的必要,而且就算打包成.crx,在国内大家也都是用的搜狗360腾讯,根本安装不上扩展。

下面是正确用法!

所以各位同学请将上面的JavaScript代码复制,然后进到你的教务系统,

如果查询到目前为止的所有成绩


等页面加载完,按F12调出开发者工具,在console(命令行)里面粘贴上面的JavaScript代码,回车,就会像这样


如果需要查某学期或者某学年,选择好学期或者学年后单击 按学期查询。

等页面加载完之后执行步骤和上面一样。


注:平均绩点算法(Σ学分*绩点)/(Σ学分)

       加权平均分(Σ学分*期末成绩)/(Σ学分)

       两个均未计入公选课成绩,且加权平均分没有计算认知实习,因为期末成绩评定是良好。


接下来是重头戏,就是我查了六个小时文档的扯淡玩意……

怎么建立一个扩展程序。

第一步新建一个文件夹,命名为你扩展程序的名字。

第二步在里面新建一些文件,具体可参考谷歌的文档

比如我的总共就这些

接下来讲一讲每个是干嘛的,以及怎么连接js脚本的(我查文档就是为了实现这个!)

manifest.json是必须要有的,具体属性自己查文档。

 "name": "GPAcal", 

 "version": "0.1.0", 

 "manifest_version": 2,

 "description": "Management your grade and calculateGPA", 

 

 "permissions": [

       "tabs", 

   "http://*.cumt.edu.cn/*",

       "http://202.119.206.61/*"

  ],

 

 "browser_action": { 

   "default_icon": "icon.png" ,

   "default_title": "GPAcal",

   "default_popup": "popup.html"

 } 

}

 

popup.html

是你点开浏览器状态栏的按钮后弹出来的那个小页面的html,真正的大坑在这个地方。

我放一下我最开始最简洁的html

<html>

 

<head>

<title>绩点计算</title>

<scriptsrc="popup.js"></script>

</head>

 

<body>

<p>等待页面加载完成</p>

<p>单击下面按钮</p>

 

<form>

<input type="button"value="点我!"id="bn">

</form>

 

</body>

 

</html>

 

注意我查了好久文档才解决的问题,你不能在html里面写script,会被谷歌禁用

使用教程,http://open.chrome.360.cn/extension_dev/contentSecurityPolicy.html

请大家认真观看!

请大家认真观看!

请大家认真观看!

我就在这里浪费了很多时间。

你不能在button中直接指定onclick="run()",会因为Content Security Policy (CSP)策略禁止执行。

正确的做法是像我上面那样写,然后再写popup.js(多读读官方给的文档就理解什么意思了,我还是看了官方给的其他的demo才明白到底要怎么调用脚本。)

function run(){

       chrome.tabs.executeScript(null,{file: "GPAcal.js"})//调用脚本

}

 document.addEventListener('DOMContentLoaded',function () {

        var bn=document.getElementById('bn');

    bn.addEventListener('click', run);

       });//官方规定必须这么写,不能在html里直接写onclick,这段目的是等DOM加载完后执行脚本找到按钮绑定监听器。官方文档意思和这个一样,只是匹配element的方法不同。


最终你就可以在扩展工具里面打包,拖进浏览器安装了。


写到这里就差不多,反正给大家的建议就是认真看文档,我的问题都是因为不符合文档上写的东西才造成的。

希望大家能从中收获一些东西。


猜你喜欢

转载自blog.csdn.net/sinat_18497785/article/details/51656898
0条评论
添加一条新回复