为GET查询编写Google Chrome浏览器扩展

Question

我在尝试编写Google Chrome浏览器扩展程序，以便突出显示出现在任何网站上的文本，并在另一个网站上执行GET查询搜索。它将在新选项卡中打开查询。

例如，如果我突出显示文本“谷歌浏览器”，并右键单击以激活扩展程序，它将在新标签页中打开http://example.com/index.php?q=google%20chrome。

要做到这一点，最好的方法是什么？

Answer 1

要从您访问的选项卡中获取选定的文本，您需要使用Extension Messaging来执行此操作。

例如，让我们做一个简单的谷歌搜索扩展，在您的内容脚本，你会有这样的事情：

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) { 
    if (request.method == "getSelection") 
     sendResponse({data: window.getSelection().toString()}); 
    else 
     sendResponse({}); // snub them. 
}); 

现在，假设你要这样，当你点击一个browser action，你background page内发生，你需要听取onclick事件。

chrome.browserAction.onClicked.addListener(function(tab) { 
    chrome.tabs.sendRequest(tab.id, {method: "getSelection"}, function(response) { 
    var selectedText = response.data; 
    chrome.tabs.create({url: 'http://google.com?q=' + selectedText}); 
    }); 
}); 

一旦你点击这个图标（浏览器操作），你会发现，它会发送到内容脚本的请求，一旦内容脚本接收到的动作，将选定的文本发回它的有效载荷。然后，您可以根据所选内容向Google打开一个选项卡，以搜索结果。

Answer 2

如果您只是想打开一个新选项卡，则可以使用带有URL参数的chrome.tabs.create()。要获取选定文本，请捕获mouseup事件并使用window.getSelection()获取选择内容。