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.
});

background.html

现在在后台页面中，您可以处理弹出窗口onclick event，以便我们知道我们点击了弹出窗口。一旦我们点击它，就会触发回调，然后我们可以使用“Messaging”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});
}

如您所见，我在内容脚本中注册了一个侦听器，以允许我的分机从其发送和接收消息。然后，当我收到消息后，我会通过搜索Google来处理它。

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

Answer 2

内容脚本

document.addEventListener('mouseup',function(event)
{
    var sel = window.getSelection().toString();

    if(sel.length)
        chrome.extension.sendRequest({'message':'setText','data': sel},function(response){})
})

背景页

<script>
var seltext = null;

chrome.extension.onRequest.addListener(function(request, sender, sendResponse)
{
    switch(request.message)
    {
        case 'setText':
            window.seltext = request.data
        break;

        default:
            sendResponse({data: 'Invalid arguments'});
        break;
    }
});


function savetext(info,tab)
{
    var jax = new XMLHttpRequest();
    jax.open("POST","http://localhost/text/");
    jax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    jax.send("text="+seltext);
    jax.onreadystatechange = function() { if(jax.readyState==4) { alert(jax.responseText);  }}
}

var contexts = ["selection"];
for (var i = 0; i < contexts.length; i++)
{
    var context = contexts[i];
    chrome.contextMenus.create({"title": "Send to Server", "contexts":[context], "onclick": savetext});  
}

</script>

<强>的manifest.json

{
  "name": "Word Reminder",
  "version": "1.0",
  "description": "Word Reminder.",
  "browser_action": {
    "default_icon": "images/stick-man1.gif",
    "popup":"popup.html"
  },

  "background_page": "background.html",

  "content_scripts": [
    {
        "matches": ["<all_urls>"],
      "js": ["js/myscript.js"]
    }
  ],

  "permissions": [
    "http://*/*",
    "https://*/*",
    "contextMenus",
    "tabs"
  ]
}

以下是我在一个扩展程序中下载所有内容的链接。看完之后，我尝试了自己并发表了。

，这是完整的来源

http://vikku.info/programming/chrome-extension/get-selected-text-send-to-web-server-in-chrome-extension-communicate-between-content-script-and-background-page.htm

享受

Answer 3

使用content_scripts并不是一个很好的解决方案，因为它会向所有文档（包括iframe-ads等）注入。我从其他页面中选择一个空文本，而不是我在杂乱网站上预期的一半。

更好的解决方案是仅将代码注入选定的选项卡，因为无论如何这都是您选择的文本所在的位置。 jquery doc ready部分的示例：

$(document).ready(function() {
    // set up an event listener that triggers when chrome.extension.sendRequest is fired.
    chrome.extension.onRequest.addListener(
        function(request, sender, sendResponse) {
            // text selection is stored in request.selection
            $('#text').val( request.selection );
    });

    // inject javascript into DOM of selected window and tab.
    // injected code send a message (with selected text) back to the plugin using chrome.extension.sendRequest
    chrome.tabs.executeScript(null, {code: "chrome.extension.sendRequest({selection: window.getSelection().toString() });"});
});

Answer 4

从您的代码中不清楚它在哪里。我的意思是，如果此代码在弹出式html或背景html中，那么您看到的结果是正确的，那些窗口中的任何内容都不会被选中。

您需要将此代码放在内容脚本中，以便它可以访问页面的DOM，然后当您单击浏览器操作时，您需要向内容脚本发送一条消息以获取当前内容文件选择。

Answer 5

您不需要像这样简单的Google API ...

我将以Bing在线服务为例。请注意，URL设置为接受参数：

var WebService='http://www.bing.com/translator/?text='; 


frameID.contentWindow.document.body.addEventListener('contextmenu',function(e){

 T=frameID.contentWindow.getSelection().toString();

 if(T!==''){e.preventDefault(); Open_New_Tab(WebService+encodeURIComponent(T)); return false;} 

},false);

注意：上面使用的函数“Open_New_Tab（）”是一个虚构的函数，它接受带有编码的选定文本作为参数的Web服务URL。

基本上就是这个想法。

Chrome扩展程序：如何捕获所选文本并发送到网络服务

5 个答案:

content_script.js

background.html