写在开头: 相当有意思的UI界面,编码实现,浏览速度.对于一天浏览器使用超过10个小时的人来说,能够定制自己的浏览器,是相当的具有诱惑力.
Getting Started
1:目前不支持标准发布版本的Chrome插件扩展,不过也有消息马上就开发了,对于我们这个不是问题.4.0使用中
2:创建一个所必要的文件夹,名字任意,用于存放所需文件,开发后,可以通过Chrome打包提交
3:manifest.json文件,存放描述信息,也可以理解为插件运行的总入口,使用JSON的格式进行定义
{
"name": "My First Extension", //程序名称
"version": "1.0", //版本
"description": "The first extension that I made.",//描述
"browser_action": {//对浏览器的操作
"default_icon": "icon.png"//图标
},
"permissions": [ //权限,用于定义所需的网络资源
"http://api.flickr.com/"
]
}
4:可以在browser_action中对功能进行添加
"popup": "popup.html"//指定点击按钮后触发的行为,
5:弹出的html扩展名文件,进行编写弹出窗编写,允许使用Js and css,使用的时候注意HTML必须包含在文件夹内
尤其指出,其中可以使用HTML5标准的元素
插件包含的文件
1:manifest 文件,2:任意个HTML文件,3:JavaScript文件,4:图片Image文件
打包后会被压缩成特殊格式的zip文件,扩展名为.crx
background page :用于保存插件的主要逻辑,
插件的逻辑分为: page action,browser action两种,,background.html文件的js同时控制两种action
action,可以理解为动作,也就是浏览器表现出来的行为,如弹出窗一样
browser_action 包括 a tooltip, a badge, and a popup.
可以在Manifest文件中注册所需的browser action,其中default_icon为必须的,其他均为可选(or)
UI部分
Icon:大多图片格式都可以,推荐使用19像素的正方形图片,设置的方式分为两种,manifest文件内的default_icon,或者调用setIcon()方法
Tooltip:设置manifest的default_title属性,或调用setTitle()方法
Badge:用于在图标下显示的字符,字数限制在4个字符一下,可以通过setBadgeText() and setBadgeBackgroundColor()设置内容和背景色
Popup:点击后弹出的窗口.定义在manifest文件中,browser_action的popup属性
chrome.browserAction的常用方法,其中参数使用json对象,具体查看对应的API查询key
setBadgeBackgroundColor: 设置Badge背景色
chrome.browserAction.setBadgeBackgroundColor(object details);
setBadgeText:Badge内容
chrome.browserAction.setBadgeText(object details)
setIcon:设置图标
chrome.browserAction.setIcon(object details)
shetTitle:设置Tooltip
chrome.browserAction.setTitle(object details)
browserAction的事件
chrome.browserAction.onClicked.addListener(function(Tab tab) {...}); //将会在点击图标后触发
//这里的参数,比Js多了一种类型
2:为插件提供对应的options选项页面,在manifest文件中添加对应的options_page:选项,使用HTML
"options_page": "options.html",
所需的HTML可以为一个完整格式的HTML文档,包含所需的html元素
Override界面: 用于替换新tab界面,区别于默认的界面,在manifest文件中进行注册
"chrome_url_overrides": {
"newtab": "newtab.html"
},
Page Actions: 用于出现在指定页面中的图标
"page_action": {
"default_icon": "icons/foo.png", // required
"default_title": "Do action", // optional; shown in tooltip
"popup": "popup.html" // optional
},
区别Browser action,page action并不包含badges,但是可以控制page action是否显示,通过调用 show() and hide() methods
同样对browser的建议也适用与page action;
一些常见Page action的方法
hide;
chrome.pageAction.hide(integer tabId)
setIcon
chrome.pageAction.setIcon(object details)
setTitle
chrome.pageAction.setTitle(object details)
show
chrome.pageAction.show(integer tabId)
事件,类似browser action的事件
onClicked
chrome.pageAction.onClicked.addListener(function(tab) {...});
Themes皮肤
也是打包成标准的扩展组件,但是并不包含对应的JS和HTML代码,只用主要的manifest.json文件进行设置
{
"version": "2.6",
"name": "camo theme",
"theme": {
"images" : {
"theme_frame" : "images/theme_frame_camo.png",
"theme_frame_overlay" : "images/theme_frame_stripe.png",
"theme_toolbar" : "images/theme_toolbar_camo.png",
"theme_ntp_background" : "images/theme_ntp_background_norepeat.png",
"theme_ntp_attribution" : "images/attribution.png"
},
"colors" : {
"frame" : [71, 105, 91],
"toolbar" : [207, 221, 192],
"ntp_text" : [20, 40, 0],
"ntp_link" : [36, 70, 0],
"ntp_section" : [207, 221, 192],
"button_background" : [255, 255, 255]
},
"tints" : {
"buttons" : [0.33, 0.5, 0.47]
},
"properties" : {
"ntp_background_alignment" : "bottom"
}
}
}
默认皮肤,可以通过下面的链接进行查看
http://src.chromium.org/viewvc/chrome/trunk/src/chrome/browser/browser_theme_provider.cc
其中tints中,使用 Hue-Saturation-Lightness 灰度 饱和 亮度进行设置,值都是在0-1之间
浏览器交互: Browser Interaction
Bookmarks,Events,Tabs,Windows等
Bookmarks,收藏夹,可以创建,组织和管理收藏夹
设置权限: manifest文件中
"permissions": [
"bookmarks"
],
收藏夹使用tree的形式保存对象,其中主要使用 BookmarkTreeNode对象进行访问,常用的属性有:index, title, and url.
注:树结构本身比较繁琐一些,可以使用下面方法参考进行访问
function btnclick(){
chrome.bookmarks.getTree(function(ass){
console.log(ass[0].children[0]);
for(obj in ass[0].children[0].children){
console.log(ass[0].children[0].children[obj].title);
}
})
}
建议先查看debug方法(ps:比较繁琐,但是配合console.log比较方便查看对象结构)
其中的id使用的也是自增,由0开始
常见的方法
create , get getChildren getTree move remove removeTree search update
常见的事件
常见的事件
onChanged onChildrenReordered onCreated onMoved onRemoved
使用的例子:
chrome.bookmarks.onMoved.addListener(...)
chrome.bookmarks.getTree(...) //具体请查看API
Event事件的使用例子
chrome.tabs.onCreated.addListener(function(tab) {
appendToLog('tabs.onCreated --'
+ ' window: ' + tab.windowId
+ ' tab: ' + tab.id
+ ' index: ' + tab.index
+ ' url: ' + tab.url);
});
注意加载对应的permissions权限 tabs
事件的全部操作方法:
void addListener(function callback(...))
void removeListener(function callback(...))
bool hasListener(function callback(...))
Tabs 用于控制每个标签 , 调用时为chrome.tabs
常见的方法:
captureVisibleTab connect create detectLanguage executeScript get getAllInWindow getSelected insertCSS move remove sendRequest update
常见的事件:
onAttached onCreated onDetached onMoved onRemoved onSelectionChanged onUpdated
Windows Chrome中的多窗口
方法调用中可选的windowId参数,默认为当前窗口
调用对象: chrome.windows
常见的方法: create get getAll getCurrent getLastFocused remove update
常见的事件:onCreated onFocusChanged onRemoved
Background Pages, 注册在manifest文件中,用于保存长时间运行的脚本,运行在插件所在的进程中,多用于类似守护线程一样的作用,用于状态的更新
获取页面的方式:
var views = chrome.extension.getViews(); //获取到的数组,通过循环或者索引得到指定的view也就是js的windows对象,不过这里只局限配置在manifest中的html元素
"background_page": "background.html",
Content Scripts 用于对指定页面的内容进行脚本调用
同样 需要在manifest文件中进行注册
"content_scripts": [
{
"matches": ["http://www.google.com/*"],
"css": ["mystyles.css"],
"js": ["jquery.js", "myscript.js"]
}
],
常见的属性:
matches, 字符串数组,根据制定的匹配模式进行对指定URL页面的注入
js:指定的脚本文件将会被注入到符合的页面中去 可选
css:需要被嵌入的css,可选
run_at:用于设置何时进行注入,默认为document_idle,还有其他的:document_start,document_end,
all_frames:boolean 默认为false
使用的方式可以参考官方文档,不过注意并不能简单的替换同名function来达到注入替换事件的效果,不过可以直接使用document.getElementById获取指定的dom组件,并进行修改.
作用域的问题上: 对于原有的变量并不能访问到,如果需要进行替换,需要进行完整的事件,变量进行重新声明替换
比较特殊的作用域:对于注入的代码,将会有一个封闭的作用域,并不会与原有的进行冲突,当却可以修改页面的DOM元素
Content script是在一个特殊环境中运行的，这个环境成为isolated world（隔离环境）。它们可以访问所注入页面的DOM,但是不能访问里面的任何javascript变量和函数。 对每个content script来说，就像除了它自己之外再没有其它脚本在运行。 反过来也是成立的： 页面里的javascript也不能访问content script中的任何变量和函数。
为页面元素添加插件内图片的例子
var imgURL = chrome.extension.getURL("images/myimage.png");
document.getElementById("someImage").src = imgURL;
Cross-Origin XMLHttpRequest 跨站点的异步调用,用于使用插件访问其他网站的API
分为本地与外部数据两种方面
本地插件内数据:不需要设置权限
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = handleStateChange; // Implemented elsewhere.
xhr.open("GET", chrome.extension.getURL('/config_resources/config.json'), true);
xhr.send();
注:0表示本地请求成功
外部网站,需要设置manifest文件中permissions,添加对应的网站地址,更多使用在插件内部功能上
"permissions": [
"http://www.google.com/"
],
对于匹配的URL也可以使用模糊匹配
"http://*.google.com/"
"http://*/" 表示允许访问所有的网站 ,这里注意对https也要独立的编写
内置的json转换 JSON.parse(....);可以用于将制定的字符串,转换成所需的js对象
再次提示,如果需要访问其他网站,一定注意添加权限permissions
Message Passing 消息传递
Simple one-time requests:发送一个简单的json数据从一个content script发送到插件的background.html文件中,反之亦然
chrome.extension.sendRequest() 或 chrome.tabs.sendRequest() methods
可选的一个回调函数,可以用于接收返回的内容
如:定义在content script文件中
chrome.extension.sendRequest({greeting: "hello"}, function(response) {
console.log(response.farewell);
});
在background发送使用特殊一些,需要使用getSelected获取选中的tab后,然后发送请求
chrome.tabs.getSelected(null, function(tab) {
chrome.tabs.sendRequest(tab.id, {greeting: "hello"}, function(response) {
console.log(response.farewell);
});
});
接收的代码为:
chrome.extension.onRequest.addListener(
function(request, sender, sendResponse) {
console.log(sender.tab ?
"from a content script:" + sender.tab.url :
"from the extension");
if (request.greeting == "hello")
sendResponse({farewell: "goodbye"});
else
sendResponse({}); // snub them.
});
Long-lived connections 长周期连接
能够保持连接,持续的进行数据收发
从content script 连接到background(插件)的代码
var port = chrome.extension.connect({name: "knockknock"});
port.postMessage({joke: "Knock knock"});
port.onMessage.addListener(function(msg) {
if (msg.question == "Who's there?")
port.postMessage({answer: "Madame"});
else if (msg.question == "Madame who?")
port.postMessage({answer: "Madame... Bovary");
});
如果要从background插件处发起连接,需要稍作修改,去获取指定的id
chrome.tabs.connect(tabId, {name: "knockknock"}).
设置监听连接的监听器
chrome.extension.onConnect.addListener(function(port) {
console.assert(port.name == "knockknock");
port.onMessage.addListener(function(msg) {
if (msg.joke == "Knock knock")
port.postMessage({question: "Who's there?"});
else if (msg.answer == "Madame")
port.postMessage({question: "Madame who?"});
else if (msg.answer == "Madame... Bovary")
port.postMessage({question: "I don't get it."});
});
});
对应的监听断开方法Port.disconnect(),和对应的事件Port.onDisconnect
Cross-extension messaging 跨插件消息
主要使用chrome.extension.onRequestExternal or chrome.extension.onConnectExternal
方法的细节与上述的连接事件一致
这里还是提到一下跨站点Js攻击的问题,少使用eval转换返回的字符串,而建议使用专门的JSON.parse方法
NPAPI Plugins 用于提供Js调用本地二进制代码 ,建议最后使用,也许功能很强大.
Autoupdating和Packaging章节略过
因为Chrome开发自WebKit,所以可以调用其特有的API
V8 Js引擎也为chrome提供了JSON对象
可以在插件内部集成所需的JS插件,如jQuery
暂时结束,有空再研究...开始GWT2.0