创建chrome右键菜单划词搜索扩展

转载请注明出处:http://blog.csdn.net/zhymax/article/details/8552830

      上网时经常在多个搜索引擎间切换，但使用chrome自带的搜索引擎切换比较麻烦，换一个引擎就需要设置一次配置，因此也在chrome应用商店找了多个搜索扩展程序，使用下来都是各有优点，但不能同时具备我想要的功能，例如菜单项分组、划词搜索、添加自定义搜索或是不同电脑间同步配置，多少都有点缺憾，所以决定自己动手丰衣足食，实现一个右键菜单扩展程序，基本特性如下：

•  右键菜单搜索
•  页面划词搜索
•  菜单分组显示
•  自定义添加搜索引擎
•  同步配置

代码下载
  csdn资源：http://download.csdn.net/detail/zhymax/5038605
  github：https://github.com/lo0kup/ContextSearch

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

扩展程序效果图：

下面对代码实现做个介绍

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

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

1) 创建主菜单项    

[javascript] view plain copy

1. var context = "selection";  
2. var id = chrome.contextMenus.create({  
3.             "title" : J.NAME,  
4.             "id" : "c" + context,  
5.             "contexts" :[context]  
6.         });  

"title": 菜单项显示标题
"id": 菜单id
"contexts": 设置菜单对应的操作内容，可以设置一个或多个内容：
                    ["all", "page", "frame", "selection", "link", "editable", "image", "video", "audio"] 
                    本扩展程序使用"selection"，也就是当前选择的文本。
本菜单项不响应操作事件。

2)  创建分组菜单    

[javascript] view plain copy

1. catalogId = chrome.contextMenus.create({  
2.                     "title" : catalog,  
3.                     "id" : "c" + catalog,  
4.                     "contexts" : [context],  
5.                     "parentId" : id  
6.                 });  

parentId: 与创建主菜单方式相比多了一个"parentId"参数，说明父菜单项的id，也就是主菜单项的id；
本菜单项不响应操作事件。

3) 创建子菜单项

[javascript] view plain copy

1. chrome.contextMenus.create({  
2.             "title" : J.SEARCHENGINES[i].ID,  
3.             "id" : i.toString(),  
4.             "contexts" :[context],  
5.             "parentId" : catalogId,  
6.             "enabled" : J.SEARCHENGINES[i].ENABLE,  
7.             "onclick" : onClickMenu  
8.         });  

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

2 页面划词搜索

需要在页面加载时加载context.js，增加鼠标操作的监听。
监视页面鼠标左键点击动作，当鼠标左键mouseup事件产生时显示搜索菜单。

[javascript] view plain copy

1. document.addEventListener("mouseup", function() {  
2.     ...  
3.   
4.     // 只处理鼠标左键，其他键按下时如果有菜单，则删除菜单  
5.     if (event.button != 0)  
6.     {  
7.         if(searchMenu)  
8.         {  
9.             document.body.removeChild(searchMenu);  
10.         }  
11.         return;  
12.     }  
13.     ...  
14.   
15.     // 读取配置，创建菜单  
16.     chrome.extension.sendRequest({cmd: 'get_options'}, function(opts) {  
17.         createSearchMenu(opts, x, y);  
18.     });  
19. });  

菜单动态创建。

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] view plain copy

1. var Storage = chrome.storage.sync;  
2.   
3. // 保存配置到Storage，超过QUOTA_BYTES_PER_ITEM需要进行分片保存。  
4. function setOptions(opts, cb)  
5. {  
6.     var optionStr = JSON.stringify(opts);  
7.     var length = optionStr.length;  
8.     var sliceLength = Storage.QUOTA_BYTES_PER_ITEM / 2; // 简单设置每个分片最大长度，保证能存储  
9.     var optionSlices = {}; // 保存分片数据  
10.     var i = 0; // 分片序号  
11.   
12.     // 分片保存数据  
13.     while (length > 0)  
14.     {  
15.         optionSlices["cs_options_" + i] = optionStr.substr(i * sliceLength, sliceLength);  
16.         length -= sliceLength;  
17.         i++;  
18.     }  
19.   
20.     // 保存分片数量  
21.     optionSlices["cs_options_num"] = i;  
22.   
23.     // 写入Storage  
24.     Storage.set(optionSlices, cb);  
25.   
26.     //console.log(optionSlices);  
27. }