文本選擇和顯示在上下文菜單中鍍鉻擴展

Question

我一直在研究一個小的Chrome擴展，帶來一個問題，我似乎無法得到我的頭，並希望有人以全新的視角看待它。

目標是創建一個Chrome擴展，使您可以選擇任何給定網站上的文本，並顯示一個選項，使用上下文菜單項將選擇發送到另一個網站。

我manifest.json的看起來是這樣的：

{ 
"name": "Context Menu Search", 
"description": "Opens the selected text as keyword in a new window", 
"version": "0.1", 
"permissions": ["contextMenus"], 
"background_page": "background.html" 
} 

然後background.html：

<script src="rightclick.js"></script> 

而且rightclick.js：

var selection_callbacks = []; 
function getSelection(callback) { 
selection_callbacks.push(callback); 
    chrome.tabs.executeScript(null, { file:"selection.js" }); 
    }; 
    chrome.extension.onRequest.addListener(function (request) { 
    var callback = selection_callbacks.shift(); 
    callback(request); 
    }); 

function sendSearch(selectedText) { 
var serviceCall = 'http://www.google.com/search?q=' + selectedText; 
chrome.tabs.create({url: serviceCall}); 
} 
var tx = getSelection(); 
var title = "Test '" + tx + "' menu item"; 
var id = chrome.contextMenus.create({"title": title, "contexts":[selection], 
            "onclick": sendSearch(tx)}); 
console.log("selection item:" + id); 

個

加selection.js：

chrome.extension.sendResponse(window.getSelection().toString()); 

到目前爲止上下文菜單創建工作正常，但在所有不顯示選定的文本。 如果有人對如何解決這個問題以及簡化腳本有任何建議，我將不勝感激您的意見。

非常感謝。

Answer 1

UPDATE

我只是看着docs而這一切更簡單，沒有任何內容腳本和回調來完成：

chrome.contextMenus.create({ 
    title: "Test %s menu item", 
    contexts:["selection"], 
    onclick: function(info, tab) { 
     sendSearch(info.selectionText); 
    } 
}); 

這就是你所需要的，因爲你可以使用%s在菜單標題中獲取選定的文本。

（已經不再需要下的所有內容）

---

你getSelection()方法不返回選定的文本，它只是一個注入腳本內容到頁面。所選文本稍後在onRequest中收到，然後作爲參數傳遞給回調函數中的回調函數。

所以這一部分：

var tx = getSelection(); 
var title = "Test '" + tx + "' menu item"; 
var id = chrome.contextMenus.create({"title": title, "contexts":[selection], 
            "onclick": sendSearch(tx)}); 
console.log("selection item:" + id); 

需要改變的東西是這樣的：

getSelection(function(tx) { 
    var title = "Test '" + tx + "' menu item"; 
    var id = chrome.contextMenus.create({"title": title, "contexts":["selection"], 
             "onclick": sendSearch(tx)}); 
    console.log("selection item:" + id); 
}) 

但因爲我覺得不需要的話我就會完全擺脫selection_callbacks數組：

chrome.extension.onRequest.addListener(function (request) { 
    var tx = request; 
    var title = "Test '" + tx + "' menu item"; 
    var id = chrome.contextMenus.create({"title": title, "contexts":["selection"], 
             "onclick": sendSearch(tx)}); 
    console.log("selection item:" + id); 
}); 

另請注意，"contexts":[selection]需要爲"contexts":["selection"]，並"onclick": sendSearch(tx)需求是這樣的，而不是：

"onclick": function(info, tab) { 
    sendSearch(info.selectionText); 
}