google-chrome - Chrome 扩展程序 : how to capture selected text and send to a web service

Question

对于 Google Chrome 扩展程序，我需要在网页中捕获选定的文本并发送到网络服务。我被卡住了!

首先我尝试了一个书签，但是 Mac 上的 Chrome 似乎有一些书签错误，所以我决定编写一个扩展程序。

我在我的分机中使用此代码:

function getSelText(){
    var txt = 'nothing';
    if (window.getSelection){
        txt = "1" + window.getSelection();
    } else if (document.getSelection) {
        txt = "2" + document.getSelection();
    } else if (document.selection) {
        txt = "3" + document.selection.createRange().text;
    } else txt = "wtf";
    return txt;
}
var selection = getSelText();
alert("selection = " + selection);

当我点击我的扩展图标时，我得到一个“1”。所以我认为在浏览器窗口之外选择的行为导致浏览器不再将文本视为“已选择”。

只是一个理论....

想法？

Answer 1

您可以使用 Extensions Messaging 来做到这一点。 .基本上，您的“背景页面”会将请求发送到您的服务。例如，假设您有一个“弹出窗口”，一旦您点击它，它就会进行“Google 搜索”，这是您的服务。

content_script.js

在您的内容脚本中，我们需要监听来自您的扩展程序的请求，以便我们向其发送所选文本:

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

背景.html

现在在后台页面中，您可以处理弹出窗口 onclick event这样我们就知道我们点击了弹出窗口。一旦我们点击它，回调就会触发，然后我们可以 send a request使用“消息传递”到内容脚本以获取所选文本。

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.sendRequest(tab.id, {method: "getSelection"}, function(response){
     sendServiceRequest(response.data);
  });
});

function sendServiceRequest(selectedText) {
  var serviceCall = 'http://www.google.com/search?q=' + selectedText;
  chrome.tabs.create({url: serviceCall});
}

如您所见，我在内容脚本中注册了一个监听器，以允许我的扩展程序从它发送和接收消息。然后一旦我收到一条消息，我就通过搜索谷歌来处理它。

希望您可以使用我上面解释的内容并将其应用于您的场景。我只是要警告你，上面写的代码没有经过测试，所以它们可能是拼写或语法错误。但是通过查看您的 Inspector 可以轻松找到这些内容:)