Chrome扩展程序：如何捕获选定的文本并发送到Web服务 [英] Chrome Extension: how to capture selected text and send to a web service

问题描述

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

首先，我尝试了一个小书签，但在Mac上的Chrome似乎有一些小书签的bug，所以我决定写一个扩展名。
$ b

我在我的ext中使用这段代码：

  function getSelText（）{
 var txt ='没有'; 
 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。所以我认为在浏览器窗口之外选择的行为导致文本不再被浏览器视为已选择。

只是一个理论... 。

想法？

解决方案

一个href =http://developer.chrome.com/extensions/messaging.html =noreferrer>扩展消息。基本上，您的后台页面会将请求发送到您的服务。例如，假设你有一个弹出式窗口，一旦你点击它，它会做一个Google搜索，这是你的服务。

content_script.js

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

  chrome.extension.onRequest.addListener（function（request，sender，sendResponse）{
 if（request.method ==getSelection）
 sendResponse（{data：window.getSelection（）。toString（）}）; 
 else 
 sendResponse（{}）; //删除它们
}）; 
  

background.html

现在处于后台页面，您可以处理弹出的 onclick事件，以便我们知道我们点击了弹出窗口。一旦我们点击它，回调就会触发，然后我们可以发送请求< a>到内容脚本，使用消息传递获取选定的文本。

  chrome.browserAction.onClicked.addListener（function（ {b $ b chrome.tabs.sendRequest（tab.id，{method：getSelection}，function（response）{
 sendServiceRequest（response.data）; 
}）; 
}）; 
 
函数sendServiceRequest（selectedText）{
 var serviceCall ='http://www.google.com/search?q='+ selectedText; 
 chrome.tabs.create（{url：serviceCall}）; 
 
 
 
 
 
 $ b 
正如你所看到的，我在一个内容脚本中注册了一个监听器，扩展来发送和接收来自它的消息。然后，一旦我收到消息，我就会通过搜索Google来处理它。
 
 
 
希望您可以使用我上面解释的内容并将其应用于您的方案。我只是要警告你，上面写的代码没有经过测试，所以他们可能是拼写或语法错误。但是可以通过查看你的Inspector轻松找到这些:) 
 
For the Google Chrome extension, I need to capture selected text in a web page and send to a web service.  I'm stuck!

First I tried a bookmarklet, but Chrome on Mac seems to have some bookmarklet bugs so I decided to write an extension.

I use this code in my ext:
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);
When I click on my extension icon, I get a "1".  So I think the act of selecting outside the browser window is causing the text to not be seen by the browser as "selected" any more.

Just a theory....

thoughts?
解决方案
You can do this by using Extensions Messaging. Basically, your "background page" will send the request to your service. For example, lets say you have a "popup" and once you click on it, it will do a "Google search" which is your service.

content_script.js

In your content script, we need to listen for a request coming from your extension, so that we send it the selected text:
chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
    if (request.method == "getSelection")
      sendResponse({data: window.getSelection().toString()});
    else
      sendResponse({}); // snub them.
});


background.html

Now in background page you can handle the popup onclick event so that we know we clicked on the popup. Once we clicked on it, the callback fires, and then we can send a request to the content script using "Messaging" to fetch the selected text.
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});
}
As you have seen, I registered a listener in a content script to allow my extension to send and receive messages from it. Then once I received a message, I handle it by searching for Google.

Hopefully, you can use what I explained above and apply it to your scenario. I just have to warn you that the code written above is not tested, so their might be spelling, or syntax errors. But those can easily be found by looking at your Inspector :) 

                        
这篇关于Chrome扩展程序：如何捕获选定的文本并发送到Web服务的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！