美文网首页
2013-04-29 Chrome插件开发: QuickOpen

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

作者: 读书丸子 | 来源:发表于2018-07-19 13:59 被阅读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,其实很简单。 我想程序员的快乐,也许就是把复杂的事情变成简单的事情。有了好点子,然后实现,才会有期望的成就感。

    源代码在这里

    相关文章

      网友评论

          本文标题:2013-04-29 Chrome插件开发: QuickOpen

          本文链接:https://www.haomeiwen.com/subject/ncktmftx.html