上網時經常在多個搜索引擎間切換，但使用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);
}