第一个Chrome应用
她有以下特点:
- 大部分代码,使用最新ES6标准编写(因此仅保证支持最新版Chrome浏览器)
- 结构化代码,清晰可描述
- 使用HTML5中的LocalStorage存储您的数据
- 代码简单、开源,可按照需要修改成您自己的扩展
- 大概就上面这几个…
上个图…
嗯~实现了大概就是上面这个样子…
我为什么要了解Chrome扩展?
Chrome扩展可以直接调用Chrome浏览器提供的API(官网),可无障碍操作网页内容以及提示用户等等。
如果安装过百度翻译扩展(官网),就会明白其对网页内容进行划词翻译是如何实现的了.
当你想做一些事情来方便自己,就可以了解一下Chrome扩展开发了.
上面其实是废话…
IWarn简单说下
每一个Chrome扩展,都一定会有一个文件(manifest.json),这个文件相当于一个清单文件.它会告诉Chrome你使用了什么权限,引用了那些资源,叫什么名字等等.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | //manifest.json { "name": "IWarn", # 名字 "version": "0.9.0", # 版本 "permissions":["contentSettings","tabs","notifications"], # 需要的权限:["内容设置","标签控制","系统通知(浏览器层级)"] "content_scripts":[{ # 扩展访问用户正在浏览网页 "matches":["<all_urls>"], # 针对所有网页,此处可以配置单独的url "js":["js/jquery.min.js","js/json2.js","js/content.js"], # 将这三个JS注入用户正在浏览的网页中.. "all_frames": true, # 顶层使用 "run_at":"document_end" # 浏览器DOM加载完成后启动.. }], "manifest_version":2, "description": "当访问指定网页,通知一个消息给自己", # 扩展应用描述. "browser_action": { # Chrome浏览器右侧的图标控制 "default_icon": "image/icon.png" , # 扩展应用的图标 "default_title": "点击新增一个网址,通知给自己.", # 默认标题 "default_popup": "popup.html" # 点击图标之后,访问的HTML. }, "background":{ # 常驻后台的JavaScript文件,用于给content_scripts中的content.js提供数据 "scripts":["js/background.js"] # 监听来自content.js的请求 }, "optional_permissions": ["notifications"], # 右键图标之后,选项页面需要的权限.. "options_page": "options.html" # 选项页面地址. } |
好了,大概就是上面酱紫.
更多可以看下官网的定义(Google官方,360中文翻译).
因国内很多浏览器已经改用Google内核进行开发,所以开发的Chrome扩展可以直接应用于国内部分浏览器(360极速是其中之一).
对于新动向,建议关注官方文档.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | // background.js /* -- 我是 常驻在后台的JavaScript文件. -- 也就是你看不见、看不见我操作界面.. -- 其实是这样的: -- 随时在后台准备着,如果有请求过来,来自[content.js]我就会去查询LocalStorage.然后返回结果. -- 更多 - 请看到底部. */ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => { // 监听事件. if (request.method == "getLocalStorage"){ // 如果是指定的请求.. 不明白去看看[content.js]哈. sendResponse({data: localStorage[request.key]}); // 发送指定的查询数据呢.即使没有...也要发送 } else{ sendResponse({}); // 如果不是...就随便返回个空...... } }); // -- by PRD 2016-06-18. // -- CODE IS POETRY. // -- WWW.07Q.NET |
上面是驻留后台的JavaScript文件,其中的chrome.runtime.onMessage.addListener是用于监听来自content.js的请求.然后去LocalStorage中查询相关数据并返回(关于LocalStorage).
简单介绍如上..更多可以看源码.
关于ES6
开发这个扩展的时候,Chrome已经支持大部分ES6标准的新特性.
因此……..我果断选择了ES6进行开发,简单介绍如下:
ES6:定义变量
ES6之前:
1 2 3 | var a = "a"; var b = "b"; var c = "c"; |
ES6:
1 | let {a,b,c} = JSON.parse({"a":"a","b":"b","c":"c"}); |
函数定义
ES6之前:
1 | function add(data,value,isclose){} |
ES6:
1 | (data,value,isclose)=>{} |
更多的ES6新标准,可以参考:ES6中文翻译
源码
已将所有文件都开源了.可以访问Github进行下载.(地址)
如需帮助可通过上述网页中的邮件地址联系我..
这段时间…
看各种乱七八糟的,随便看.偶然看到Chrome扩展,就想起要不写一个吧.花了几天时间写出来了,并且进行了十分详细的注释.然后扔到Github.继续去学各种乱七八糟的了..
加油.
不忘初心,方得始终.