IWarn:第一个Chrome扩展应用

第一个Chrome应用

她有以下特点:

  1. 大部分代码,使用最新ES6标准编写(因此仅保证支持最新版Chrome浏览器)
  2. 结构化代码,清晰可描述
  3. 使用HTML5中的LocalStorage存储您的数据
  4. 代码简单、开源,可按照需要修改成您自己的扩展
  5. 大概就上面这几个…

上个图…

IWarn效果.
image-2451

嗯~实现了大概就是上面这个样子…

我为什么要了解Chrome扩展?

Chrome扩展可以直接调用Chrome浏览器提供的API(官网),可无障碍操作网页内容以及提示用户等等。

如果安装过百度翻译扩展(官网),就会明白其对网页内容进行划词翻译是如何实现的了.

当你想做一些事情来方便自己,就可以了解一下Chrome扩展开发了.

上面其实是废话…

IWarn简单说下

每一个Chrome扩展,都一定会有一个文件(manifest.json),这个文件相当于一个清单文件.它会告诉Chrome你使用了什么权限,引用了那些资源,叫什么名字等等.

好了,大概就是上面酱紫.

更多可以看下官网的定义(Google官方,360中文翻译).

因国内很多浏览器已经改用Google内核进行开发,所以开发的Chrome扩展可以直接应用于国内部分浏览器(360极速是其中之一).

对于新动向,建议关注官方文档.

上面是驻留后台的JavaScript文件,其中的chrome.runtime.onMessage.addListener是用于监听来自content.js的请求.然后去LocalStorage中查询相关数据并返回(关于LocalStorage).

简单介绍如上..更多可以看源码.

关于ES6

开发这个扩展的时候,Chrome已经支持大部分ES6标准的新特性.

因此……..我果断选择了ES6进行开发,简单介绍如下:

ES6:定义变量

ES6之前:

ES6:

函数定义

ES6之前:

ES6:

更多的ES6新标准,可以参考:ES6中文翻译

源码

已将所有文件都开源了.可以访问Github进行下载.(地址)

如需帮助可通过上述网页中的邮件地址联系我..

这段时间…

看各种乱七八糟的,随便看.偶然看到Chrome扩展,就想起要不写一个吧.花了几天时间写出来了,并且进行了十分详细的注释.然后扔到Github.继续去学各种乱七八糟的了..

加油.

不忘初心,方得始终.

JavaScript:计算数字获得其个位数

问题在此

输入一个数字,计算其中的数的和,直至为个位数.

例如:

计算数字:输入[25251],得到->15,继续获取得到->6.

html

源代码

Java实现

亲测可用.推荐使用Chrome运行.

这是一个疲乏的时代

写在最前面

这一个月变化很大,发生了太多事情,比如最近,人人影视、射手关了。

虽然之前很少接触这两个网站,但是一想到字幕,就一定会想到这两个网站。心痛,震惊,还是有点惋惜。不过好在人人影视勉强还可以访问(xu!)。最近因为各种原因很少上网,倒是通过离线的资料了解(仅限于了解)了一些语言,比如大家都知道的PHP,还有Python(之前通过廖雪峰的教程学习过),以及Node.js,看的挺杂的,但是部分还是记住了。

写了这半天,该说说标题了。为啥会这么说呢?你想想,字幕,每天生活在一张大网里面,当有那么一刻忽然远离,才发现已经不习惯了,甚至都不敢想象。

前几天在网上看到一些话,有个人正在学IOS开发,但还是HTML掌握的不好。看了这段话之后,立刻就去找了些html5+css3的资料关注一下[可以去w3cschool.cc参考,并且有离线版]。

html

我的HTML5和CSS3″学习”

基本上不会刻意去记录每个元素[也可以叫标签],当然除了css3的圆角其他的也很少刻意去记录。下面是我练习的css3界面,可以直接删除部分注释测试效果[浏览器当然要先进的了,比如chrome,firefox,opera的高版本].

jQuery:选择省输出相应市

说明下

部分资料来自网络,有修改.[原文]
只有全国市,具体效果如下:

html效果图
image-2066

源码

在chrome下测试通过.

JavaScript:全国城市数组[升级版]

说明

部分资料来自网上,若自行调用,一定要注意城市数组里面的部分下标为空的元素。

下面是源文件,自己整合测试一下就可以了.

html

queryhotelcitylist.js

城市数组.

queryticketcity.js

城市操作js.