2013-04-29 Chrome插件开发: QuickOpen

2018-07-19  本文已影响0人  读书丸子

此文写的较早,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,其实很简单。 我想程序员的快乐,也许就是把复杂的事情变成简单的事情。有了好点子,然后实现,才会有期望的成就感。

源代码在这里

上一篇下一篇

猜你喜欢

热点阅读