频道栏目
首页 > 程序开发 > web前端 > JavaScript > 正文
创建chrome右键菜单划词搜索扩展
2013-01-30 09:04:56           
收藏   我要投稿
上网时经常在多个搜索引擎间切换,但使用chrome自带的搜索引擎切换比较麻烦,换一个引擎就需要设置一次配置,因此也在chrome应用商店找了多个搜索扩展程序,使用下来都是各有优点,但不能同时具备我想要的功能,例如菜单项分组、划词搜索、添加自定义搜索或是不同电脑间同步配置,多少都有点缺憾,所以决定自己动手丰衣足食,实现一个右键菜单扩展程序,基本特性如下:

 右键菜单搜索

 页面划词搜索

 菜单分组显示

 自定义添加搜索引擎

 同步配置

 

 

chrome应用商城扩展地址,欢迎大家安装试用:  Context Search

 

扩展程序效果图:

下面对代码实现做个介绍

 

1 在chrome右键上下文菜单增加自定义菜单项

使用chrome.contextMenus.create创建上下文菜单。

1) 创建主菜单项    

[javascript] 

var context = "selection";  

var id = chrome.contextMenus.create({  

            "title" : J.NAME,  

            "id" : "c" + context,  

            "contexts" :[context]  

        });  

"title": 菜单项显示标题

"id": 菜单id

"contexts": 设置菜单对应的操作内容,可以设置一个或多个内容:

                    ["all", "page", "frame", "selection", "link", "editable", "image", "video", "audio"] 

                    本扩展程序使用"selection",也就是当前选择的文本。

本菜单项不响应操作事件。

 

2)  创建分组菜单    

[javascript]  

catalogId = chrome.contextMenus.create({  

                    "title" : catalog,  

                    "id" : "c" + catalog,  

                    "contexts" : [context],  

                    "parentId" : id  

                });  

parentId: 与创建主菜单方式相比多了一个"parentId"参数,说明父菜单项的id,也就是主菜单项的id;

本菜单项不响应操作事件。

3) 创建子菜单项

[javascript]  

chrome.contextMenus.create({  

            "title" : J.SEARCHENGINES[i].ID,  

            "id" : i.toString(),  

            "contexts" :[context],  

            "parentId" : catalogId,  

            "enabled" : J.SEARCHENGINES[i].ENABLE,  

            "onclick" : onClickMenu  

        });  

"enabled": 表示菜单项是否可用;

"onclick": 表示该菜单项的点击事件处理函数,当该子菜单项点击时onClickMenu()函数被调用。

2 页面划词搜索

需要在页面加载时加载context.js,增加鼠标操作的监听。

监视页面鼠标左键点击动作,当鼠标左键mouseup事件产生时显示搜索菜单。

[javascript]  

document.addEventListener("mouseup", function() {  

    ...  

  

    // 只处理鼠标左键,其他键按下时如果有菜单,则删除菜单  

    if (event.button != 0)  

    {  

        if(searchMenu)  

        {  

            document.body.removeChild(searchMenu);  

        }  

        return;  

    }  

    ...  

  

    // 读取配置,创建菜单  

    chrome.extension.sendRequest({cmd: 'get_options'}, function(opts) {  

        createSearchMenu(opts, x, y);  

    });  

});  

菜单动态创建。

3 菜单分组

扩展程序使用JSON格式的配置:

{"CATALOG":"","ID":"Google(安全)","URL":"https://www.google.com.hk/search?q=%s","ENCODE":false,"ENABLE":true}

CATALOG 类型说明菜单分组,包含以下项:

空字符: 表示不分组,直接是主菜单的子项;

 -:  表示菜单分隔符;

 字符串: 表示分组名称;

4 同步配置

使用sync同步到服务器,需要gmail帐号登录同步。

另外保存配置时如果长度超出QUOTA_BYTES_PER_ITEM限制,需要分片保存。

[javascript]  

var Storage = chrome.storage.sync;  

  

// 保存配置到Storage,超过QUOTA_BYTES_PER_ITEM需要进行分片保存。  

function setOptions(opts, cb)  

{  

    var optionStr = JSON.stringify(opts);  

    var length = optionStr.length;  

    var sliceLength = Storage.QUOTA_BYTES_PER_ITEM / 2; // 简单设置每个分片最大长度,保证能存储  

    var optionSlices = {}; // 保存分片数据  

    var i = 0; // 分片序号  

  

    // 分片保存数据  

    while (length > 0)  

    {  

        optionSlices["cs_options_" + i] = optionStr.substr(i * sliceLength, sliceLength);  

        length -= sliceLength;  

        i++;  

    }  

  

    // 保存分片数量  

    optionSlices["cs_options_num"] = i;  

  

    // 写入Storage  

    Storage.set(optionSlices, cb);  

  

    //console.log(optionSlices);  

}  

 

点击复制链接 与好友分享!回本站首页
相关TAG标签 菜单
上一篇:javascript 可以全选反选删除的表格(比较全面的操作了表格)
下一篇:Node.js and MongoDB – Getting started with MongoJS
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站