2013-04-29 Chrome插件开发: QuickOpen
此文写的较早,copy到简书,留个纪念。
此文主要介绍的是我最近开发的一个Chrome的小Addon,叫做QuickOpen。主要用途是可以帮助Chrome浏览器用户
快速的打开想要打开的网站。例如查看网页的时候,看到“github”这样的词语,如果没有记住网站地址的话,
可以直接选择这个词语,然后直接按Shift+k,或者右键选择菜单,直接打开github对应的网站。
第一次开发Chrome的插件,其实也不算很难。chrome的API在Google的网站上都有详细的介绍,还有很多sample。
相对来说,我要做的这个addon,已经很简单了。
初始的想法,是在想patent的时候,想出来的,但感觉没多少创意,只是用起来方便。因此,三下五除二就实现了
至少自己用着还比较顺手。
这个Addon主要分为以下几个部分
添加鼠标右键支持
使用chrome对象的contextMenus.create来创建右键菜单,并且支持的context只有selection,即只在有选中文字的时候出现。
//quickopen.js
var child1 = chrome.contextMenus.create(
{"title": "Quick open for: %s (Shift+k)",
"contexts": ["selection"],
"onclick": genericOnClick}
);
处理右键菜单项的事件实现, 其实很简单,直接转到google的I'm feeling lucky的地址就可以了。
以后如果有需要,再使用XMLHttpRequest请求其他搜索引擎,并解析内容。
//quickopen.js
function genericOnClick(info, tab) {
var selectionText = info.selectionText;
var link = 'http://www.google.com/search?q=' + selectionText + '&btnI';
chrome.tabs.create({url:link, active:false});
}
支持内容页面快捷键支持
需要给Content页面inject内容,来支持自定义快捷键的支持。
如下,给页面添加keyup事件,并传递消息到chrome的backgroud页面处理(content页面只能访问chrome.extension对象,无法访问
其他的chrome.*对象)。
//content.js
window.addEventListener('keyup', doKeyPress, false); //add the keyboard handler
var trigger_key = 75; // shift+K
function doKeyPress(e){
if (e.keyCode == trigger_key) //if press shift+K
{
var selectionText = window.getSelection().toString();
if(selectionText.length > 0)
{
var link = 'http://www.google.com/search?q=' + selectionText + '&btnI';
//send message to backgroud javascript to open the link
chrome.extension.sendMessage({action:'openlink', link:link}, function(){});
}
}
}
在backgroud页面的js文件里面,添加message的处理
//quickopen.js
chrome.extension.onMessage.addListener(function(msg, sender, sendResponse) {
if (msg.action == 'openlink') {
chrome.tabs.create({url:msg.link, active:false});
}
});
OK,其实很简单。 我想程序员的快乐,也许就是把复杂的事情变成简单的事情。有了好点子,然后实现,才会有期望的成就感。
源代码在这里